Merge branch 'main' of gitlab.fdmci.hva.nl:propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59

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);
   }
@@ -144,10 +140,12 @@ class DataProcessor {
   }
 
   updateGraph() {
-    for (let i = 0; i < this.data.length; i++) {
+    for (let i = 0; i < this.data.length; i + 3) {
-      this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
+      for (let i = 0; i < 4; i++) {
-      console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
+        this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
-      this.graph.updateGraph();
+        console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
+        this.graph.updateGraph();
+      }
     }
   }
 }

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,106 +17,111 @@ function createCheckBox(id, label) {
   return { checkbox, checkboxLabel };
 }
 
-// Function to ceate filter container and all the input elements
+// Create HTML input elements for user input
-function createFilterContainer() {
+const container = document.createElement("div");
-  // Create HTML input elements for user input
+container.setAttribute("class", "container");
-  const container = document.createElement("div");
-  container.setAttribute("class", "container");
 
-  const dataTypesContainer = document.createElement("div");
+const dataTypesContainer = document.createElement("div");
-  dataTypesContainer.setAttribute("class", "data-types");
+dataTypesContainer.setAttribute("class", "data-types");
 
-  const temperatureCheckbox = createCheckBox("temperature", "Temperature");
+const temperatureCheckbox = createCheckBox("temperature", "Temperature");
-  const humidityCheckbox = createCheckBox("humidity", "Humidity");
+const humidityCheckbox = createCheckBox("humidity", "Humidity");
-  const eco2Checkbox = createCheckBox("eco2", "eCO2");
+const eco2Checkbox = createCheckBox("eco2", "eCO2");
-  const tvocCheckbox = createCheckBox("tvoc", "TVOC");
+const tvocCheckbox = createCheckBox("tvoc", "TVOC");
 
-  dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
+dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
-  dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
+dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
-  dataTypesContainer.appendChild(humidityCheckbox.checkbox);
+dataTypesContainer.appendChild(humidityCheckbox.checkbox);
-  dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
+dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
-  dataTypesContainer.appendChild(eco2Checkbox.checkbox);
+dataTypesContainer.appendChild(eco2Checkbox.checkbox);
-  dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
+dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
-  dataTypesContainer.appendChild(tvocCheckbox.checkbox);
+dataTypesContainer.appendChild(tvocCheckbox.checkbox);
-  dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
+dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
-  container.appendChild(dataTypesContainer);
+container.appendChild(dataTypesContainer);
 
-  const filterButton = document.createElement("button");
+const filterButton = document.createElement("button");
-  filterButton.textContent = "Filter Data";
+filterButton.textContent = "Filter Data";
-  filterButton.setAttribute("class", "filter-button");
+filterButton.setAttribute("class", "filter-button");
-  filterButton.addEventListener("click", () => {
+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
+  const selectedNodes = document
-      .getElementById("node-input")
+    .getElementById("node-input")
-      .value.split(",")
+    .value.split(",")
-      .map((node) => node.trim());
+    .map((node) => node.trim());
 
-    const selectedFields = [];
+  const selectedFields = [];
-    const checkboxes = [
+  const checkboxes = [
-      temperatureCheckbox,
+    temperatureCheckbox,
-      humidityCheckbox,
+    humidityCheckbox,
-      eco2Checkbox,
+    eco2Checkbox,
-      tvocCheckbox,
+    tvocCheckbox,
-    ];
+  ];
-    checkboxes.forEach((checkbox) => {
+  checkboxes.forEach((checkbox) => {
-      if (checkbox.checkbox.checked) {
+    if (checkbox.checkbox.checked) {
-        selectedFields.push(checkbox.checkbox.id);
+      selectedFields.push(checkbox.checkbox.id);
-      }
+    }
-    });
-
-    const filteredData = filterData(
-      data,
-      startDate,
-      endDate,
-      selectedNodes,
-      selectedFields
-    );
-    console.log(filteredData);
   });
 
-  const dateFilter = document.createElement("div");
+  const filteredData = [
-  dateFilter.setAttribute("class", "date-filter");
+    startDate,
+    endDate,
+    selectedNodes,
+    selectedFields
+  ];
+  console.log(filteredData);
+  console.log(startDate, endDate, selectedNodes);
 
-  const startDateInput = document.createElement("input");
+  generateLink(startDate, endDate, selectedNodes);
-  startDateInput.setAttribute("type", "datetime-local");
+  fetchData();
-  startDateInput.setAttribute("id", "start-date");
+});
-  startDateInput.setAttribute("class", "input-field");
 
-  const endDateInput = document.createElement("input");
+const dateFilter = document.createElement("div");
-  endDateInput.setAttribute("type", "datetime-local");
+dateFilter.setAttribute("class", "date-filter");
-  endDateInput.setAttribute("id", "end-date");
-  endDateInput.setAttribute("class", "input-field");
 
-  dateFilter.appendChild(startDateInput);
+const startDateInput = document.createElement("input");
-  dateFilter.appendChild(endDateInput);
+startDateInput.setAttribute("type", "datetime-local");
-  container.appendChild(dateFilter);
+startDateInput.setAttribute("id", "start-date");
+startDateInput.setAttribute("class", "input-field");
 
-  const nodeFilter = document.createElement("div");
+const endDateInput = document.createElement("input");
-  nodeFilter.setAttribute("class", "node-filter");
+endDateInput.setAttribute("type", "datetime-local");
+endDateInput.setAttribute("id", "end-date");
+endDateInput.setAttribute("class", "input-field");
 
-  const nodeInput = document.createElement("input");
+dateFilter.appendChild(startDateInput);
-  nodeInput.setAttribute("type", "text");
+dateFilter.appendChild(endDateInput);
-  nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)");
+container.appendChild(dateFilter);
-  nodeInput.setAttribute("id", "node-input");
-  nodeInput.setAttribute("class", "input-field");
 
-  nodeFilter.appendChild(nodeInput);
+const nodeFilter = document.createElement("div");
-  container.appendChild(nodeFilter);
+nodeFilter.setAttribute("class", "node-filter");
 
-  container.appendChild(filterButton);
+const nodeInput = document.createElement("input");
+nodeInput.setAttribute("type", "text");
+nodeInput.setAttribute("placeholder", "Enter node (A, B, etc.)");
+nodeInput.setAttribute("id", "node-input");
+nodeInput.setAttribute("class", "input-field");
 
-  document.body.appendChild(container);
+nodeFilter.appendChild(nodeInput);
-}
+container.appendChild(nodeFilter);
+
+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();

web/newWebsite/questions-main.js

@@ -13,15 +13,22 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ];
 let dummydata5 = [30, 20, 20];
 let questionOptionsDummy5 = ['no','yes', 'decently'];
 
-const question1Data = new QuestionCreationClass(dummydata1,questionOptionsDummy1)
+
-const question2Data = new QuestionCreationClass(dummydata2,questionOptionsDummy2)
+let questionArray = [];
-const question3Data = new QuestionCreationClass(dummydata3, questionOptionsDummy3);
+let questionOptionsDummy = [];
-const question4Data = new QuestionCreationClass(dummydata4, questionOptionsDummy4);
+let dummydata = [];
-const question5Data = new QuestionCreationClass(dummydata5, questionOptionsDummy5);
+
+for (let i = 0; i < 5; i++) {
+    dummydata.push(dummydata1, dummydata2, dummydata3, dummydata4, dummydata5);
+    questionOptionsDummy.push(questionOptionsDummy1, questionOptionsDummy2, questionOptionsDummy3, questionOptionsDummy4, questionOptionsDummy5);
+
+    questionArray.push(new QuestionCreationClass(dummydata[i], questionOptionsDummy[i]));
+}
+
 
 const chartConfig1 = {
     type: 'pie',
-    data: question1Data.questionData,
+    data: questionArray[0].questionData,
     options: {
         responsive: true,
         legend: {
@@ -40,7 +47,7 @@ const chartConfig1 = {
 
 const chartConfig2 = {
     type: 'pie',
-    data: question2Data.questionData,
+    data: questionArray[1].questionData,
     options: {
         responsive: true,
         legend: {
@@ -59,7 +66,7 @@ const chartConfig2 = {
 
 const chartConfig3 = {
     type: 'pie',
-    data: question3Data.questionData,
+    data: questionArray[2].questionData,
     options: {
         responsive: true,
         legend: {
@@ -78,7 +85,7 @@ const chartConfig3 = {
 
 const chartConfig4 = {
     type: 'pie',
-    data: question4Data.questionData,
+    data: questionArray[3].questionData,
     options: {
         responsive: true,
         legend: {
@@ -97,7 +104,7 @@ const chartConfig4 = {
 
 const chartConfig5 = {
     type: 'pie',
-    data: question5Data.questionData,
+    data: questionArray[4].questionData,
     options: {
         responsive: true,
         legend: {

web/newWebsite/styles/dashboard-styles.css

@@ -182,17 +182,19 @@ body {
 }
 
 .plotly-container {
-
+    width: 100%;
     float: bottom;
-    margin: auto;
     padding: 1vw;
     align-items: center;
     justify-content: center;
     display: flex;
-    width: 20vw;
-
 }
-*
+
+.js-plotly-plot {
+    width: 90%;
+    height: 100%;
+}
+
 .disabled {
     opacity: 0;
     height: 0;