Update graph class and data processor

web/newWebsite/graph-classes.js

@@ -52,10 +52,10 @@ class Graph {
         this.humiArray.push(value);
         break;
       case "eCO2":
-        this.eco2Array.push(value);
+        this.eco2Array.push(value / 10);
         break;
       case "TVOC":
-        this.tvocArray.push(value);
+        this.tvocArray.push(value / 10);
         break;
       default:
         console.error("Invalid type");
@@ -64,16 +64,11 @@ class Graph {
 
   updateGraph() {
     let update = {
-      x: [[this.timeArray]],
+      x: [this.timeArray],
-      y: [
+      y: [this.tempArray, this.humiArray, this.eco2Array, this.tvocArray],
-        [this.tempArray],
-        [this.humiArray],
-        [this.eco2Array],
-        [this.tvocArray],
-      ],
     };
   
-    Plotly.relayout(this.id, update);
+    Plotly.update(this.id, update);
   }
 }
 
@@ -126,11 +121,12 @@ class LiveGraph extends Graph {
 class DataProcessor {
   constructor(data) {
     this.data = data;
+    this.graph;
   }
   // You can add more filtering methods based on different criteria if needed
   update(data) {
     this.data = data;
-    this.graph;
+
     console.log("Data updated");
     console.log(data);
   }

web/newWebsite/graph-main.js

@@ -1,6 +1,7 @@
 // Sample data - you can replace this with your actual dataset
 const data = [];
 processor = new DataProcessor();
+let link;
 
 // Function to create checkbox with label
 function createCheckBox(id, label) {
@@ -16,8 +17,6 @@ function createCheckBox(id, label) {
   return { checkbox, checkboxLabel };
 }
 
-// Function to ceate filter container and all the input elements
-function createFilterContainer() {
 // Create HTML input elements for user input
 const container = document.createElement("div");
 container.setAttribute("class", "container");
@@ -44,8 +43,8 @@ function createFilterContainer() {
 filterButton.textContent = "Filter Data";
 filterButton.setAttribute("class", "filter-button");
 filterButton.addEventListener("click", () => {
-    const startDate = new Date(document.getElementById("start-date").value);
+  const startDate = document.getElementById("start-date").value
-    const endDate = new Date(document.getElementById("end-date").value);
+  const endDate = document.getElementById("end-date").value
   const selectedNodes = document
     .getElementById("node-input")
     .value.split(",")
@@ -64,14 +63,17 @@ function createFilterContainer() {
     }
   });
 
-    const filteredData = filterData(
+  const filteredData = [
-      data,
     startDate,
     endDate,
     selectedNodes,
     selectedFields
-    );
+  ];
   console.log(filteredData);
+  console.log(startDate, endDate, selectedNodes);
+
+  generateLink(startDate, endDate, selectedNodes);
+  fetchData();
 });
 
 const dateFilter = document.createElement("div");
@@ -106,16 +108,20 @@ function createFilterContainer() {
 container.appendChild(filterButton);
 
 document.body.appendChild(container);
-}
 
 // Function to get the link for the get request
-function getLink(startDate, endDate, node) {
+function generateLink(dateStart, dateEnd, node) {
-  return link = "http://getMeasurements?dateStart=" + startDate.toISOString() + 
+  const baseUrl = 'http://145.92.8.114/getMeasurements';
-                "&dateEnd=" + endDate.toISOString() + 
+  const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20');
-                "&node=" + node;
+  const formattedDateEnd = new Date(dateEnd).toISOString().replace('T', '%20');
+
+  link = `${baseUrl}?dateStart=${formattedDateStart}&dateEnd=${formattedDateEnd}&node=${node}`;
+
+  console.log(link);
 }
+processor.makeGraph();
 // Get request to fetch data from the server
-function fetchData(link) {
+function fetchData() {
   fetch(link)
     .then((response) => {
       if (!response.ok) {
@@ -124,14 +130,10 @@ function fetchData(link) {
       return response.json();
     })
     .then((data) => {
-      createFilterContainer();
       processor.update(data);
-      processor.makeGraph();
+      processor.updateGraph();
-      processor.updateGraph(dateStart, dateEnd);
     })
     .catch((error) => {
       console.error("Error fetching data:", error);
     });
 }
-
-fetchData();