Refactor liveGraph class and updateNodeData function

web/classes.js

@@ -1,20 +1,21 @@
-let intervalDelay = 5000;
-
 class liveGraph {
   // Constructor to initialize the graph
   constructor(id) {
-    this.timeArray = [4, 5, 6, 7, 9];
-    this.valueArray = [1, 3, 4, 8, 10];
-    this.cnt = 0;	
-    this.nodeId = id;
+    this.timeArray = [];
+    this.tempArray = [];
+    this.humiArray = [];
+    this.eco2Array = [];
+    this.tvocArray = [];
+    this.cnt = 0;
+    this.nodeId = "liveGraph" + id;
   }
 
   // Fuction to create a graph
   makeGraph() {
-    Plotly.plot("liveGraph", [
+    Plotly.plot(this.nodeId, [
       {
         x: this.timeArray, // Use timeArray as x values
-        y: this.valueArray,
+        y: this.tempArray,
         mode: "lines",
         line: { color: "#80CAF6" },
         name: "Temperature",
@@ -26,10 +27,10 @@ class liveGraph {
   updateGraph() {
     let time = new Date();
     this.timeArray.push(new Date());
-    this.valueArray.push(Math.random());
+
     let update = {
       x: [[this.timeArray]],
-      y: [[this.valueArray]],
+      y: [[this.tempArray, this.humiArray, this.eco2Array, this.tvocArray]],
     };
     let olderTime = time.setMinutes(time.getMinutes() - 1);
     let futureTime = time.setMinutes(time.getMinutes() + 1);
@@ -39,7 +40,15 @@ class liveGraph {
         range: [olderTime, futureTime],
       },
     };
-    Plotly.relayout("liveGraph", minuteView);
+    Plotly.relayout(this.nodeId, minuteView);
     if (this.cnt === 10) clearInterval(interval);
   }
+
+  updateData(temperature, humidity, eCO2, TVOC) {
+    // Update the graph
+    this.tempArray.push(temperature);
+    this.humiArray.push(humidity);
+    this.eco2Array.push(eCO2);
+    this.tvocArray.push(TVOC);
+  }
 }