From 4ea73aa32cea275d6779ad1380e9d9510a4fc428 Mon Sep 17 00:00:00 2001 From: huskee Date: Mon, 18 Dec 2023 15:49:09 +0200 Subject: [PATCH] Make charts responsive --- data/index.html | 26 +++++++++++++--- data/script.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++++ data/style.css | 33 +++++++++++++++----- 3 files changed, 131 insertions(+), 11 deletions(-) diff --git a/data/index.html b/data/index.html index 1b0260e..259b00c 100644 --- a/data/index.html +++ b/data/index.html @@ -1,5 +1,6 @@ + therminator @@ -25,21 +26,38 @@

update interval (ms):

-
+

Channel A:

- +

Channel B:

- +
+
+ + + + + +
+

Channel A:

+
+ + 		+

Channel B:

+
+ +
+
+ diff --git a/data/script.js b/data/script.js index 1bcc49e..31bc09a 100644 --- a/data/script.js +++ b/data/script.js @@ -1,8 +1,41 @@ const canvasA = document.getElementById("chartA"); const canvasB = document.getElementById("chartB"); +const mobCanvasA = document.getElementById("chartA-mobile"); +const mobCanvasB = document.getElementById("chartB-mobile"); + const maxValsSelect = document.getElementById("maxVals"); let maxVals = maxValsSelect.options[maxValsSelect.selectedIndex].text; + +const chartAdata = { + data: { + labels: [], + datasets: [ + { + label: "Channel A temperature", + backgroundColor: "red", + borderColor: "red", + data: [], + }, + ], + }, +}; + +const chartBdata = { + data: { + labels: [], + datasets: [ + { + label: "Channel B temperature", + backgroundColor: "blue", + borderColor: "blue", + data: [], + }, + ], + }, +}; + const options = { + responsive: true, plugins: { legend: { labels: { @@ -12,14 +45,26 @@ const options = { }, scales: { y: { + title: { + display: true, + text: "Temperature (°C)", + color: "rgb(250, 250, 250)", + }, grid: { color: "rgba(250, 250, 250, 0.5)", }, ticks: { color: "rgba(250, 250, 250, 0.5)", }, + suggestedMin: 0, + suggestedMax: 50, }, x: { + title: { + display: true, + text: "Time (s)", + color: "rgb(250, 250, 250)", + }, grid: { color: "rgba(250, 250, 250, 0.5)", }, @@ -29,6 +74,7 @@ const options = { }, }, }; + const chartA = new Chart(canvasA, { type: "line", data: { @@ -44,6 +90,7 @@ const chartA = new Chart(canvasA, { }, options: options, }); + const chartB = new Chart(canvasB, { type: "line", data: { @@ -59,9 +106,43 @@ const chartB = new Chart(canvasB, { }, options: options, }); + +const mobChartA = new Chart(mobCanvasA, { + type: "line", + data: { + labels: [], + datasets: [ + { + label: "Channel A temperature", + backgroundColor: "red", + borderColor: "red", + data: [], + }, + ], + }, + options: options, +}); + +const mobChartB = new Chart(mobCanvasB, { + type: "line", + data: { + labels: [], + datasets: [ + { + label: "Channel B temperature", + backgroundColor: "blue", + borderColor: "blue", + data: [], + }, + ], + }, + options: options, +}); + var gateway = `ws://${window.location.hostname}/ws`; var websocket; // Init web socket when the page loads + window.addEventListener("load", onload); function onload(event) { @@ -144,4 +225,6 @@ function onMessage(event) { } addData(chartA, data["time"] / 1000, data["tempA"]); addData(chartB, data["time"] / 1000, data["tempB"]); + addData(mobChartA, data["time"] / 1000, data["tempA"]); + addData(mobChartB, data["time"] / 1000, data["tempB"]); } diff --git a/data/style.css b/data/style.css index 089cb3c..9c52401 100644 --- a/data/style.css +++ b/data/style.css @@ -3,18 +3,37 @@ body { background-color: rgb(50, 50, 50); color: white; font-family: "IBM Plex Mono", monospace; - white-space: nowrap; padding: 1rem 2rem; } -#mv, #ui, #chartA, #chartB { - display: inline-block; +#mv, +#ui { + display: inline-block; } -#error-tempA, #error-tempB { - color: red !important; +#error-tempA, +#error-tempB { + color: red !important; } + .chart-container { position: relative; - height: 40vh; - width: 80vw; + height: 20vh; + width: 40vw; + padding: 1em; +} +#chart-small { + display: initial; +} + +#chart-large { + display: none; +} + +@media only screen and (min-width: 1480px) { + #chart-small { + display: none; + } + #chart-large { + display: initial; + } }