Add temperature, humidity, eCO2, and TVOC data to graph and update graph view

web/newWebsite/graph-classes.js

@@ -2,6 +2,10 @@ class Graph {
   constructor(id) {
     this.id = "graph" + id;
     this.timeArray = [];
+    this.tempArray = [];
+    this.humiArray = [];
+    this.eco2Array = [];
+    this.tvocArray = [];
   }
 
   // Function to create a graph
@@ -34,6 +38,49 @@ class Graph {
       },
     ]);
   }
+
+  updateData(type, value) {
+    switch (type) {
+      case "Temp":
+        this.tempArray.push(value);
+        break;
+      case "Humi":
+        this.humiArray.push(value);
+        break;
+      case "eCO2":
+        this.eco2Array.push(value);
+        break;
+      case "TVOC":
+        this.tvocArray.push(value);
+        break;
+      default:
+        console.error("Invalid type");
+    }
+  }
+
+  updateGraph() {
+    let time = new Date();
+    this.timeArray.push(time);
+    let update = {
+      x: [[this.timeArray]],
+      y: [
+        [this.tempArray],
+        [this.humiArray],
+        [this.eco2Array],
+        [this.tvocArray],
+      ],
+    };
+
+    let olderTime = time.setMinutes(time.getMinutes() - 1);
+    let futureTime = time.setMinutes(time.getMinutes() + 1);
+    let minuteView = {
+      xaxis: {
+        type: "date",
+        range: [olderTime, futureTime],
+      },
+    };
+    Plotly.relayout(this.id, minuteView);
+  }
 }
 
 class LiveGraph extends Graph {
@@ -101,6 +148,17 @@ class DataProcessor {
     graph.makeGraph("temp", "red", "Temperature");
     graph.makeGraph("humi", "blue", "Humidity");
     graph.makeGraph("eco2", "green", "eCO2");
-    graph.makeGraph("tvoc", "purple", "TVOC");
+    graph.makeGraph("tvoc", "#F5G644", "TVOC");
+
+    graph.updateData(this.data[0].Type, this.data[0].Value);
+    console.log(this.data[0].Type, this.data[0].Value);
+    graph.updateData(this.data[1].Type, this.data[1].Value);
+    console.log(this.data[1].Type, this.data[1].Value);
+    graph.updateData(this.data[2].Type, this.data[2].Value);
+    console.log(this.data[2].Type, this.data[2].Value);
+    graph.updateData(this.data[3].Type, this.data[3].Value);
+    console.log(this.data[3].Type, this.data[3].Value);
+
+    graph.updateGraph();
   }
 }

web/newWebsite/graph-main.js

@@ -120,7 +120,6 @@ function fetchData() {
       createFilterContainer();
       processor.update(data);
       processor.graph();
-
     })
     .catch((error) => {
       console.error("Error fetching data:", error);