Refactor graph classes and add data processor

web/newWebsite/graph-classes.js

@@ -1,4 +1,4 @@
-class Graph{
+class Graph {
   constructor(id) {
     this.id = "graph" + id;
     this.timeArray = [];
@@ -36,9 +36,9 @@ class Graph{
   }
 }
 
-class LiveGraph extends Graph{
+class LiveGraph extends Graph {
   // Constructor to initialize the graph
-    constructor(id){
+  constructor(id) {
     super(id);
     this.tempArray = [];
     this.humiArray = [];
@@ -53,7 +53,12 @@ class LiveGraph extends Graph{
 
     let update = {
       x: [[this.timeArray]],
-        y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]]
+      y: [
+        [this.tempArray],
+        [this.humiArray],
+        [this.eco2Array],
+        [this.tvocArray],
+      ],
     };
 
     let olderTime = time.setMinutes(time.getMinutes() - 1);
@@ -75,5 +80,27 @@ class LiveGraph extends Graph{
     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();
+}