feat: Graphs update on an interval now.

This commit is contained in:
Jeremy Wall 2024-02-09 14:56:58 -06:00
parent 9e52ac341b
commit a725e39140

View File

@ -2,16 +2,19 @@ class TimeseriesGraph extends HTMLElement {
#uri;
#width;
#height;
#intervalId;
#pollSeconds;
constructor() {
super();
const root = this.attachShadow({ mode: "open" });
var template = document.getElementById("timeseries_template");
this.#width = 1000;
this.height = 500;
this.#height = 500;
this.#pollSeconds = 5;
root.appendChild(template.content.cloneNode(true));
}
static observedAttributes = ['uri', 'width', 'height'];
static observedAttributes = ['uri', 'width', 'height', 'poll-seconds'];
attributeChanged(name, _oldValue, newValue) {
switch (name) {
@ -24,6 +27,9 @@ class TimeseriesGraph extends HTMLElement {
case 'height':
this.#height = newValue;
break;
case 'poll-seconds':
this.#pollSeconds = newValue;
break;
default: // do nothing;
break;
}
@ -31,25 +37,40 @@ class TimeseriesGraph extends HTMLElement {
// TODO(zaphar): reset update timer as well
}
getTargetNode() {
console.log("shadowroot: ", this.shadowRoot);
return this.shadowRoot.firstChild;
}
connectedCallback() {
// TODO(zaphar): Set up the timer loop to update graph data.
this.#uri = this.getAttribute('uri');
if (this.#uri) {
this.updateGraph();
}
this.resetInterval()
}
disconnectedCallback() {
// TODO(zaphar): Turn off the timer loop to update graph.
clearInterval(this.#intervalId);
this.#intervalId = null;
}
static elementName = "timeseries-graph";
getTargetNode() {
console.log("shadowroot: ", this.shadowRoot);
return this.shadowRoot.firstChild;
}
stopInterval() {
if (this.#intervalId) {
clearInterval(this.#intervalId);
this.#intervalId = null;
}
}
resetInterval() {
this.stopInterval()
this.#intervalId = setInterval(() => this.updateGraph(), 1000 * this.#pollSeconds);
}
static registerElement() {
if (!customElements.get(TimeseriesGraph.elementName)) {
customElements.define(TimeseriesGraph.elementName, TimeseriesGraph);