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

feat: Graphs update on an interval now.

Browse Source
This commit is contained in:
Jeremy Wall 2024-02-09 14:56:58 -06:00
parent 9e52ac341b
commit a725e39140
1 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
static/lib.js
View File

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