From 49d4c2bfd45bdb2e01a6ce9bfef73d67769189a4 Mon Sep 17 00:00:00 2001
From: Jeremy Wall <jeremy@marzhillstudios.com>
Date: Mon, 12 Feb 2024 16:22:47 -0600
Subject: [PATCH] feat: Correctly display dates in the timeseries

---
 static/lib.js | 33 ++++++++++++---------------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/static/lib.js b/static/lib.js
index 00d90de..569adec 100644
--- a/static/lib.js
+++ b/static/lib.js
@@ -101,6 +101,15 @@ class TimeseriesGraph extends HTMLElement {
 
     async updateGraph() {
         const data = await this.fetchData();
+        const config = {
+            legend: {
+                orientation: 'h'
+            }
+        };
+        const layout = {
+            displayModeBar: false,
+            responsive: true
+        };
         if (data.Series) {
             // https://plotly.com/javascript/reference/scatter/
             var traces = [];
@@ -118,23 +127,14 @@ class TimeseriesGraph extends HTMLElement {
                     trace.name = labels[this.#label];
                 };
                 for (const point of series) {
-                    trace.x.push(point.timestamp);
+                    trace.x.push(new Date(point.timestamp * 1000));
                     trace.y.push(point.value);
                 }
                 traces.push(trace);
             }
             console.log("Traces: ", traces);
             // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
-            Plotly.react(this.getTargetNode(), traces,
-                {
-                    legend: {
-                        orientation: 'h'
-                    }
-                },
-                {
-                    displayModeBar: false,
-                    responsive: true
-                });
+            Plotly.react(this.getTargetNode(), traces, config, layout);
         } else if (data.Scalar) {
             // https://plotly.com/javascript/reference/bar/
             console.log("scalar data: ", data.Scalar);
@@ -155,16 +155,7 @@ class TimeseriesGraph extends HTMLElement {
                 traces.push(trace);
             }
             console.log("Traces: ", traces);
-            Plotly.react(this.getTargetNode(), traces,
-                {
-                    legend: {
-                        orientation: 'h'
-                    }
-                },
-                {
-                    displayModeBar: false,
-                    responsive: true
-                });
+            Plotly.react(this.getTargetNode(), traces, config, layout);
         }
     }
 }