diff --git a/static/lib.js b/static/lib.js index ccd9ab6..2f26151 100644 --- a/static/lib.js +++ b/static/lib.js @@ -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);