Use real metric values in charts

allenta · Jan 24, 2025 · 0ccd48e · 0ccd48e
1 parent bb45026
commit 0ccd48e
Showing 1 changed file with 47 additions and 12 deletions.
diff --git a/assets/webpack/src/js/chart.js b/assets/webpack/src/js/chart.js
@@ -1,6 +1,7 @@
 import Plotly from 'plotly.js-dist';
 
 import * as helpers from './helpers';
+import * as storage from './storage';
 
 // Charts are self-conscious about their visibility to avoid being rendered
 // if they are not visible to the user. To accomplish this, a global
@@ -32,13 +33,25 @@ class Chart {
     observer.observe(this.container);
   }
 
-  init() {
-    for (let i = 0; i < 50; i++) {
-      this.x.push(this.date.toISOString());
-      this.y.push(Math.random() * 10);
-      this.date = new Date(this.date.getTime() + 5000);
+async init() {
+    const [from, to] = this.rangeFactory();
+    console.log('updating chart ' + this.metric.id + ': ' + from + ' => ' + to);
+
+    let metric;
+    try {
+      metric = await storage.getMetric(this.metric.id, from, to, this.step, this.aggregator)
+    } catch (error) {
+      helpers.notify('error', `Failed to fetch metrics: ${error}`);
+      return;
     }
 
+    metric.samples.forEach(sample => {
+      this.x.push(sample[0]);
+      this.y.push(sample[1]);
+    });
+
+    // this.date = metric.to;
+
     const data = [
       {
         x: this.x,
@@ -95,22 +108,44 @@ class Chart {
   // Handlers.
   //
 
-  handleRefresh() {
+  async handleRefresh() {
     // If the chart is not visible, there is no need to update it. Refresh loops
     // are canceled when the chart is not visible, but this is a safety check.
     // Also, manual refreshes would be pointless for invisible charts.
     if (this.graph != null && this.visible) {
       const [from, to] = this.rangeFactory();
       console.log('updating chart ' + this.metric.id + ': ' + from + ' => ' + to);
 
-      this.date = new Date(this.date.getTime() + 5000);
-      const newX = this.date.toISOString();
-      const newY = Math.random() * 10;
+      let metric;
+      try {
+        metric = await storage.getMetric(this.metric.id, from, to, this.step, this.aggregator)
+      } catch (error) {
+        helpers.notify('error', `Failed to fetch metrics: ${error}`);
+        return;
+      }
+
+      this.x = [];
+      this.y = [];
+      metric.samples.forEach(sample => {
+        this.x.push(sample[0]);
+        this.y.push(sample[1]);
+      });
+
+      var update = {
+        x: [this.x],
+        y: [this.y],
+      };
+
+      Plotly.update(this.graph, update);
+
+      // this.date = new Date(this.date.getTime() + 5000);
+      // const newX = this.date.toISOString();
+      // const newY = Math.random() * 10;
 
-      this.x.push(newX);
-      this.y.push(newY);
+      // this.x.push(newX);
+      // this.y.push(newY);
 
-      Plotly.extendTraces(this.graph, { x: [[newX]], y: [[newY]] }, [0]);
+      // Plotly.extendTraces(this.graph, { x: [[newX]], y: [[newY]] }, [0]);
     }
   }