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

fix: some attribute detection on the connectedCallback

Browse Source 
also formattting
This commit is contained in:
Jeremy Wall 2024-02-10 16:35:11 -06:00
parent dfa8196af4
commit d78c1ea26c
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/lib.js
View File

@ -41,19 +41,16 @@ class TimeseriesGraph extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
// TODO(zaphar): Set up the timer loop to update graph data. this.#uri = this.getAttribute('uri') || this.#uri;
this.#uri = this.getAttribute('uri'); this.#width = this.getAttribute('width') || this.#width;
this.#width = this.getAttribute('width'); this.#height = this.getAttribute('height') || this.#height;
this.#height = this.getAttribute('height'); this.#pollSeconds = this.getAttribute('poll-seconds') || this.#pollSeconds;
this.#pollSeconds = this.getAttribute('poll-seconds'); this.#label = this.getAttribute('label') || null;
this.#label = this.getAttribute('label');
this.resetInterval() this.resetInterval()
} }
disconnectedCallback() { disconnectedCallback() {
// TODO(zaphar): Turn off the timer loop to update graph. this.stopInterval()
clearInterval(this.#intervalId);
this.#intervalId = null;
} }
static elementName = "timeseries-graph"; static elementName = "timeseries-graph";
@ -71,10 +68,10 @@ class TimeseriesGraph extends HTMLElement {
} }
resetInterval() { resetInterval() {
this.stopInterval()
if (this.#uri) { if (this.#uri) {
this.updateGraph(); this.updateGraph();
} }
this.stopInterval()
this.#intervalId = setInterval(() => this.updateGraph(), 1000 * this.#pollSeconds); this.#intervalId = setInterval(() => this.updateGraph(), 1000 * this.#pollSeconds);
} }
@ -114,7 +111,16 @@ class TimeseriesGraph extends HTMLElement {
traces.push(trace); traces.push(trace);
} }
console.log("Traces: ", traces); console.log("Traces: ", traces);
Plotly.react(this.getTargetNode(), traces, { width: this.#width, height: this.#height }); Plotly.react(this.getTargetNode(), traces,
{
legend: {
orientation: 'h'
}
},
{
displayModeBar: false,
responsive: true
});
} else if (data.Scalar) { } else if (data.Scalar) {
// The graph should be a single value // The graph should be a single value
} }