zaphar/Heracles
1
0
Fork 0
mirror of https://github.com/zaphar/Heracles.git synced 2025-07-23 04:29:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: Correctly display dates in the timeseries

Browse Source
This commit is contained in:
Jeremy Wall 2024-02-12 16:22:47 -06:00
parent 8665986d4e
commit 49d4c2bfd4
1 changed files with 12 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
static/lib.js
View File

@ -101,6 +101,15 @@ class TimeseriesGraph extends HTMLElement {
async updateGraph() { async updateGraph() {
const data = await this.fetchData(); const data = await this.fetchData();
const config = {
legend: {
orientation: 'h'
}
};
const layout = {
displayModeBar: false,
responsive: true
};
if (data.Series) { if (data.Series) {
// https://plotly.com/javascript/reference/scatter/ // https://plotly.com/javascript/reference/scatter/
var traces = []; var traces = [];
@ -118,23 +127,14 @@ class TimeseriesGraph extends HTMLElement {
trace.name = labels[this.#label]; trace.name = labels[this.#label];
}; };
for (const point of series) { for (const point of series) {
trace.x.push(point.timestamp); trace.x.push(new Date(point.timestamp * 1000));
trace.y.push(point.value); trace.y.push(point.value);
} }
traces.push(trace); traces.push(trace);
} }
console.log("Traces: ", traces); console.log("Traces: ", traces);
// https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
Plotly.react(this.getTargetNode(), traces, Plotly.react(this.getTargetNode(), traces, config, layout);
{
legend: {
orientation: 'h'
}
},
{
displayModeBar: false,
responsive: true
});
} else if (data.Scalar) { } else if (data.Scalar) {
// https://plotly.com/javascript/reference/bar/ // https://plotly.com/javascript/reference/bar/
console.log("scalar data: ", data.Scalar); console.log("scalar data: ", data.Scalar);
@ -155,16 +155,7 @@ class TimeseriesGraph extends HTMLElement {
traces.push(trace); traces.push(trace);
} }
console.log("Traces: ", traces); console.log("Traces: ", traces);
Plotly.react(this.getTargetNode(), traces, Plotly.react(this.getTargetNode(), traces, config, layout);
{
legend: {
orientation: 'h'
}
},
{
displayModeBar: false,
responsive: true
});
} }
} }
} }