Refactor graph creation and update methods

This commit is contained in:
sietse jonker
2024-03-31 21:24:52 +02:00
parent ae082b53a4
commit 76532c538b
2 changed files with 17 additions and 19 deletions

View File

@@ -136,29 +136,32 @@ class DataProcessor {
// 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);
} }
graph() { makeGraph() {
let div = document.createElement("div"); let div = document.createElement("div");
div.setAttribute("id", "graph1"); div.setAttribute("id", "graph1");
document.body.appendChild(div); document.body.appendChild(div);
let graph = new Graph(1); this.graph = new Graph(1);
graph.makeGraph("temp", "red", "Temperature"); this.graph.makeGraph("temp", "red", "Temperature");
graph.makeGraph("humi", "blue", "Humidity"); this.graph.makeGraph("humi", "blue", "Humidity");
graph.makeGraph("eco2", "green", "eCO2"); this.graph.makeGraph("eco2", "green", "eCO2");
graph.makeGraph("tvoc", "#F5G644", "TVOC"); this.graph.makeGraph("tvoc", "#F5G644", "TVOC");
}
graph.updateData(this.data[0].Type, this.data[0].Value); updateGraph() {
this.graph.updateData(this.data[0].Type, this.data[0].Value);
console.log(this.data[0].Type, this.data[0].Value); console.log(this.data[0].Type, this.data[0].Value);
graph.updateData(this.data[1].Type, this.data[1].Value); this.graph.updateData(this.data[1].Type, this.data[1].Value);
console.log(this.data[1].Type, this.data[1].Value); console.log(this.data[1].Type, this.data[1].Value);
graph.updateData(this.data[2].Type, this.data[2].Value); this.graph.updateData(this.data[2].Type, this.data[2].Value);
console.log(this.data[2].Type, this.data[2].Value); console.log(this.data[2].Type, this.data[2].Value);
graph.updateData(this.data[3].Type, this.data[3].Value); this.graph.updateData(this.data[3].Type, this.data[3].Value);
console.log(this.data[3].Type, this.data[3].Value); console.log(this.data[3].Type, this.data[3].Value);
graph.updateGraph(); this.graph.updateGraph();
} }
} }

View File

@@ -119,7 +119,8 @@ function fetchData() {
.then((data) => { .then((data) => {
createFilterContainer(); createFilterContainer();
processor.update(data); processor.update(data);
processor.graph(); processor.makeGraph();
processor.updateGraph();
}) })
.catch((error) => { .catch((error) => {
console.error("Error fetching data:", error); console.error("Error fetching data:", error);
@@ -127,9 +128,3 @@ function fetchData() {
} }
fetchData(); fetchData();
// Function to create the graph
function createGraph() {
const graph = new Graph("graph");
graph.updateGraph();
}