From b69b0296281852e8a41e3b3841203706aeb612b0 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Tue, 2 Apr 2024 16:39:32 +0200 Subject: [PATCH] Add createDiv() method to Graph class and update graph-classes.js, graphs.html, and graph-styles.css --- web/newWebsite/graph-classes.js | 12 +++++++--- web/newWebsite/graphs.html | 2 -- web/newWebsite/styles/graph-styles.css | 24 +++++++++++++------ .../styles/questions-dashboard-styles.css | 1 + 4 files changed, 27 insertions(+), 12 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 491ecae..a432a36 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -8,11 +8,16 @@ class Graph { this.tvocArray = []; } + createDiv() { + let div = document.createElement("div"); + let graphDiv = document.createElement("div"); + div.setAttribute("class", "graphBody"); + graphDiv.setAttribute("id", this.id); + div.appendChild(graphDiv); + document.body.appendChild(div); + } // Function to create a graph makeGraph(line, lineColor, name) { - let div = document.createElement("div"); - div.setAttribute("id", this.id); - document.graphBody.appendChild(div); let lineArray; switch (line) { case "temp": @@ -132,6 +137,7 @@ class DataProcessor { makeGraph() { this.graph = new Graph(1); + this.graph.createDiv(); this.graph.makeGraph("temp", "red", "Temperature"); this.graph.makeGraph("humi", "blue", "Humidity"); this.graph.makeGraph("eco2", "green", "eCO2"); diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index 18f4f4e..d4b62cc 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -31,7 +31,5 @@ - -
\ No newline at end of file diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index 5d88644..2d8a800 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -46,11 +46,12 @@ body { display: flex; flex-direction: row; align-items: center; - border: 2px solid #ccc; + align-self: center; + border: 3px solid #ccc; border-radius: 10px; margin: 20px; padding: 20px; - width: 90; + width: 95%; box-sizing: border-box; } @@ -108,11 +109,20 @@ body { } .js-plotly-plot { - align-self: center; - width: 95%; + width: 100%; height: 100%; - border-radius: 20px; - border: 2px solid #000; - margin: 10px; + align-self: center center; } /* Additional styling as needed */ + +.graphBody { + display: flex; + padding: 10px; + border: 3px solid #ccc; + border-radius: 10px; + justify-content: center; + width: 95%; + height: 100%; + align-content: center; + align-self: center; +} diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index b336bc0..0dcc484 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -65,6 +65,7 @@ border: 3px solid #000; border-radius: 30px; } + canvas { margin-bottom: 20px; } \ No newline at end of file