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

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

Browse Source
This commit is contained in:
Bram Barbieri
2024-04-02 17:05:57 +02:00
parent 24aaf29bce c74a4e6400
commit 222abb3ec3
4 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,11 +8,16 @@ class Graph {
this.tvocArray = []; 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 // Function to create a graph
makeGraph(line, lineColor, name) { makeGraph(line, lineColor, name) {
let div = document.createElement("div");
div.setAttribute("id", this.id);
document.graphBody.appendChild(div);
let lineArray; let lineArray;
switch (line) { switch (line) {
case "temp": case "temp":
@@ -132,6 +137,7 @@ class DataProcessor {
makeGraph() { makeGraph() {
this.graph = new Graph(1); this.graph = new Graph(1);
this.graph.createDiv();
this.graph.makeGraph("temp", "red", "Temperature"); this.graph.makeGraph("temp", "red", "Temperature");
this.graph.makeGraph("humi", "blue", "Humidity"); this.graph.makeGraph("humi", "blue", "Humidity");
this.graph.makeGraph("eco2", "green", "eCO2"); this.graph.makeGraph("eco2", "green", "eCO2");

2
web/newWebsite/graphs.html
View File

@@ -31,7 +31,5 @@
<body> <body>
<script src="graph-classes.js"></script> <script src="graph-classes.js"></script>
<script src="graph-main.js"></script> <script src="graph-main.js"></script>
<div class="graphBody"></div>
</body> </body>
</html> </html>

24
web/newWebsite/styles/graph-styles.css
View File

@@ -46,11 +46,12 @@ body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border: 2px solid #ccc; align-self: center;
border: 3px solid #ccc;
border-radius: 10px; border-radius: 10px;
margin: 20px; margin: 20px;
padding: 20px; padding: 20px;
width: 90; width: 95%;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -108,11 +109,20 @@ body {
} }
.js-plotly-plot { .js-plotly-plot {
align-self: center; width: 100%;
width: 95%;
height: 100%; height: 100%;
border-radius: 20px; align-self: center center;
border: 2px solid #000;
margin: 10px;
} }
/* Additional styling as needed */ /* 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;
}

1
web/newWebsite/styles/questions-dashboard-styles.css
View File

@@ -65,6 +65,7 @@
border: 3px solid #000; border: 3px solid #000;
border-radius: 30px; border-radius: 30px;
} }
canvas { canvas {
margin-bottom: 20px; margin-bottom: 20px;
} }