Add graph classes and update HTML files

web/newWebsite/graph-classes.js

@@ -0,0 +1,79 @@
+class Graph{
+    constructor(id) {
+        this.id = "graph" + id;
+        this.timeArray = [];
+    }
+
+    // Function to create a graph
+    makeGraph(line, lineColor, name) {
+        let lineArray;
+        switch (line) {
+            case "temp":
+                lineArray = this.tempArray;
+                break;
+            case "humi":
+                lineArray = this.humiArray;
+                break;
+            case "eco2":
+                lineArray = this.eco2Array;
+                break;
+            case "tvoc":
+                lineArray = this.tvocArray;
+                break;
+            default:
+                console.error("Invalid line");
+        }
+        this.timeArray.push(new Date());
+        Plotly.plot(this.id, [
+            {
+                x: this.timeArray,
+                y: lineArray,
+                mode: "lines",
+                line: { color: lineColor },
+                name: name,
+            },
+        ]);
+    }
+}
+
+class LiveGraph extends Graph{
+    // Constructor to initialize the graph
+    constructor(id){
+        super(id);
+        this.tempArray = [];
+        this.humiArray = [];
+        this.eco2Array = [];
+        this.tvocArray = [];
+        this.cnt = 0;
+    } 
+    // Function to update the graph with new values got from updateData function
+    updateGraph() {
+      let time = new Date();
+      this.timeArray.push(new Date());
+  
+      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);
+      if (this.cnt === 10) clearInterval(interval);
+    }
+    // function to get the new data for graph
+    updateData(temperature, humidity, eCO2, TVOC) {
+      // Update the graph
+      this.tempArray.push(temperature);
+      this.humiArray.push(humidity);
+      this.eco2Array.push(eCO2 / 10);
+      this.tvocArray.push(TVOC / 10);
+    }
+  }
+