Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update graph class and data processor

Browse Source
This commit is contained in:
sietse jonker
2024-04-01 13:06:07 +02:00
parent ec756cd387
commit 887e84c16c
2 changed files with 97 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/newWebsite/graph-classes.js
View File

@@ -52,10 +52,10 @@ class Graph {
this.humiArray.push(value); this.humiArray.push(value);
break; break;
case "eCO2": case "eCO2":
this.eco2Array.push(value); this.eco2Array.push(value / 10);
break; break;
case "TVOC": case "TVOC":
this.tvocArray.push(value); this.tvocArray.push(value / 10);
break; break;
default: default:
console.error("Invalid type"); console.error("Invalid type");
@@ -64,16 +64,11 @@ class Graph {
updateGraph() { updateGraph() {
let update = { 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 { class DataProcessor {
constructor(data) { constructor(data) {
this.data = data; this.data = data;
this.graph;
} }
// You can add more filtering methods based on different criteria if needed // You can add more filtering methods based on different criteria if needed
update(data) { update(data) {
this.data = data; this.data = data;
this.graph;
console.log("Data updated"); console.log("Data updated");
console.log(data); console.log(data);
} }

176
web/newWebsite/graph-main.js
View File

@@ -1,6 +1,7 @@
// Sample data - you can replace this with your actual dataset // Sample data - you can replace this with your actual dataset
const data = []; const data = [];
processor = new DataProcessor(); processor = new DataProcessor();
let link;
// Function to create checkbox with label // Function to create checkbox with label
function createCheckBox(id, label) { function createCheckBox(id, label) {
@@ -16,106 +17,111 @@ function createCheckBox(id, label) {
return { checkbox, checkboxLabel }; 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 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 // Get request to fetch data from the server
function fetchData(link) { function fetchData() {
fetch(link) fetch(link)
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
@@ -124,14 +130,10 @@ function fetchData(link) {
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
createFilterContainer();
processor.update(data); processor.update(data);
processor.makeGraph(); processor.updateGraph();
processor.updateGraph(dateStart, dateEnd);
}) })
.catch((error) => { .catch((error) => {
console.error("Error fetching data:", error); console.error("Error fetching data:", error);
}); });
} }
fetchData();