From 887e84c16c76b9a303450c29fb7d7407adbc247c Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 13:06:07 +0200 Subject: [PATCH] Update graph class and data processor --- web/newWebsite/graph-classes.js | 20 ++-- web/newWebsite/graph-main.js | 176 ++++++++++++++++---------------- 2 files changed, 97 insertions(+), 99 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index d5bce51..3e6e359 100644 --- a/web/newWebsite/graph-classes.js +++ b/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]], - y: [ - [this.tempArray], - [this.humiArray], - [this.eco2Array], - [this.tvocArray], - ], + x: [this.timeArray], + y: [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); } diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 8058f94..e07f628 100644 --- a/web/newWebsite/graph-main.js +++ b/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 -function createFilterContainer() { - // Create HTML input elements for user input - const container = document.createElement("div"); - container.setAttribute("class", "container"); +// Create HTML input elements for user input +const container = document.createElement("div"); +container.setAttribute("class", "container"); - const dataTypesContainer = document.createElement("div"); - dataTypesContainer.setAttribute("class", "data-types"); +const dataTypesContainer = document.createElement("div"); +dataTypesContainer.setAttribute("class", "data-types"); - const temperatureCheckbox = createCheckBox("temperature", "Temperature"); - const humidityCheckbox = createCheckBox("humidity", "Humidity"); - const eco2Checkbox = createCheckBox("eco2", "eCO2"); - const tvocCheckbox = createCheckBox("tvoc", "TVOC"); +const temperatureCheckbox = createCheckBox("temperature", "Temperature"); +const humidityCheckbox = createCheckBox("humidity", "Humidity"); +const eco2Checkbox = createCheckBox("eco2", "eCO2"); +const tvocCheckbox = createCheckBox("tvoc", "TVOC"); - dataTypesContainer.appendChild(temperatureCheckbox.checkbox); - dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); - dataTypesContainer.appendChild(humidityCheckbox.checkbox); - dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); - dataTypesContainer.appendChild(eco2Checkbox.checkbox); - dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); - dataTypesContainer.appendChild(tvocCheckbox.checkbox); - dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); - container.appendChild(dataTypesContainer); +dataTypesContainer.appendChild(temperatureCheckbox.checkbox); +dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel); +dataTypesContainer.appendChild(humidityCheckbox.checkbox); +dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel); +dataTypesContainer.appendChild(eco2Checkbox.checkbox); +dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); +dataTypesContainer.appendChild(tvocCheckbox.checkbox); +dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); +container.appendChild(dataTypesContainer); - const filterButton = document.createElement("button"); - filterButton.textContent = "Filter Data"; - filterButton.setAttribute("class", "filter-button"); - filterButton.addEventListener("click", () => { - const startDate = new Date(document.getElementById("start-date").value); - const endDate = new Date(document.getElementById("end-date").value); - const selectedNodes = document - .getElementById("node-input") - .value.split(",") - .map((node) => node.trim()); +const filterButton = document.createElement("button"); +filterButton.textContent = "Filter Data"; +filterButton.setAttribute("class", "filter-button"); +filterButton.addEventListener("click", () => { + const startDate = document.getElementById("start-date").value + const endDate = document.getElementById("end-date").value + const selectedNodes = document + .getElementById("node-input") + .value.split(",") + .map((node) => node.trim()); - const selectedFields = []; - const checkboxes = [ - temperatureCheckbox, - humidityCheckbox, - eco2Checkbox, - tvocCheckbox, - ]; - checkboxes.forEach((checkbox) => { - if (checkbox.checkbox.checked) { - selectedFields.push(checkbox.checkbox.id); - } - }); - - const filteredData = filterData( - data, - startDate, - endDate, - selectedNodes, - selectedFields - ); - console.log(filteredData); + const selectedFields = []; + const checkboxes = [ + temperatureCheckbox, + humidityCheckbox, + eco2Checkbox, + tvocCheckbox, + ]; + checkboxes.forEach((checkbox) => { + if (checkbox.checkbox.checked) { + selectedFields.push(checkbox.checkbox.id); + } }); - const dateFilter = document.createElement("div"); - dateFilter.setAttribute("class", "date-filter"); + const filteredData = [ + startDate, + endDate, + selectedNodes, + selectedFields + ]; + console.log(filteredData); + console.log(startDate, endDate, selectedNodes); - const startDateInput = document.createElement("input"); - startDateInput.setAttribute("type", "datetime-local"); - startDateInput.setAttribute("id", "start-date"); - startDateInput.setAttribute("class", "input-field"); + generateLink(startDate, endDate, selectedNodes); + fetchData(); +}); - const endDateInput = document.createElement("input"); - endDateInput.setAttribute("type", "datetime-local"); - endDateInput.setAttribute("id", "end-date"); - endDateInput.setAttribute("class", "input-field"); +const dateFilter = document.createElement("div"); +dateFilter.setAttribute("class", "date-filter"); - dateFilter.appendChild(startDateInput); - dateFilter.appendChild(endDateInput); - container.appendChild(dateFilter); +const startDateInput = document.createElement("input"); +startDateInput.setAttribute("type", "datetime-local"); +startDateInput.setAttribute("id", "start-date"); +startDateInput.setAttribute("class", "input-field"); - const nodeFilter = document.createElement("div"); - nodeFilter.setAttribute("class", "node-filter"); +const endDateInput = document.createElement("input"); +endDateInput.setAttribute("type", "datetime-local"); +endDateInput.setAttribute("id", "end-date"); +endDateInput.setAttribute("class", "input-field"); - 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"); +dateFilter.appendChild(startDateInput); +dateFilter.appendChild(endDateInput); +container.appendChild(dateFilter); - nodeFilter.appendChild(nodeInput); - container.appendChild(nodeFilter); +const nodeFilter = document.createElement("div"); +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) { - return link = "http://getMeasurements?dateStart=" + startDate.toISOString() + - "&dateEnd=" + endDate.toISOString() + - "&node=" + node; +function generateLink(dateStart, dateEnd, node) { + const baseUrl = 'http://145.92.8.114/getMeasurements'; + const formattedDateStart = new Date(dateStart).toISOString().replace('T', '%20'); + 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(dateStart, dateEnd); + processor.updateGraph(); }) .catch((error) => { console.error("Error fetching data:", error); }); -} - -fetchData(); \ No newline at end of file +} \ No newline at end of file