Refactor graph classes and add data processor

web/newWebsite/graph-classes.js

@@ -1,79 +1,106 @@
-class Graph{
+class Graph {
-    constructor(id) {
+  constructor(id) {
-        this.id = "graph" + id;
+    this.id = "graph" + id;
-        this.timeArray = [];
+    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);
-    }
   }
 
+  // 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);
+  }
+}
+
+class DataProcessor {
+  constructor(data) {
+    this.data = data;
+  }
+  // You can add more filtering methods based on different criteria if needed
+  update(data) {
+    this.data = data;
+    console.log("Data updated");
+    console.log(data);
+  }
+
+  graph() {
+    let div = document.createElement("div");
+    div.setAttribute("id", "graph1");
+    document.body.appendChild(div);
+    let graph = new Graph(1);
+    graph.makeGraph("temp", "red", "Temperature");
+    graph.makeGraph("humi", "blue", "Humidity");
+    graph.makeGraph("eco2", "green", "eCO2");
+    graph.makeGraph("tvoc", "purple", "TVOC");
+  }
+}

web/newWebsite/graph-main.js

@@ -1,6 +1,6 @@
 // Sample data - you can replace this with your actual dataset
 const data = [];
-
+processor = new DataProcessor();
 // Function to create checkbox with label
 function createCheckBox(id, label) {
   const checkbox = document.createElement("input");
@@ -109,15 +109,18 @@ function createFilterContainer() {
 
 // Get request to fetch data from the server
 function fetchData() {
-  fetch("http://145.92.8.114/getMeasurements")
+  fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-27%2011:47:11")
     .then((response) => {
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
       return response.json();
     })
-    .then((measurements) => {
+    .then((data) => {
       createFilterContainer();
+      processor.update(data);
+      processor.graph();
+
     })
     .catch((error) => {
       console.error("Error fetching data:", error);
@@ -125,3 +128,9 @@ function fetchData() {
 }
 
 fetchData();
+
+// Function to create the graph
+function createGraph() {
+  const graph = new Graph("graph");
+  graph.updateGraph();
+}