From e5ee8731b750dd70a6105e9cda57b040417be065 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Thu, 1 May 2025 16:30:06 +0200 Subject: [PATCH] =?UTF-8?q?feat(system):=20getrennte=20Diagramme=20f=C3=BC?= =?UTF-8?q?r=20Spannungen=20und=20Temperaturen=20+=20Rundung=20auf=202=20N?= =?UTF-8?q?achkommastellen=20+=20Doku=20aktualisiert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 9 +++ README.md | 2 + config/webVersion.ts | 2 +- pages/system.tsx | 149 +++++++++++++++++++++++++------------------ 4 files changed, 98 insertions(+), 64 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ef0191..13d6e7f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,15 @@ Alle Änderungen und Versionen des CPLv4.0 Frontends chronologisch dokumentiert. --- +## [1.6.328] – 2025-05-02 + +### Hinzugefügt + +- Systemseite: Darstellung von Spannungen und Temperaturen in zwei separaten Charts (nebeneinander) +- Spannungswerte werden auf zwei Dezimalstellen gerundet dargestellt + +--- + ## [1.6.327] – 2025-05-02 ### Hinzugefügt diff --git a/README.md b/README.md index e9bdd2a..deb8028 100644 --- a/README.md +++ b/README.md @@ -156,6 +156,8 @@ Beispielaufruf im DEV-Modus (über UI gesteuert, nicht manuell notwendig): - +5V, +15V, -15V, -98V Spannungen - CPU- und ADC-Temperaturen - Verlaufskurven über Zeit (Chart.js) +- Spannungen und Temperaturen werden jetzt in zwei separaten Charts nebeneinander dargestellt +- Spannungswerte (+5V, +15V, -15V, -98V) werden mit zwei Nachkommastellen angezeigt --- diff --git a/config/webVersion.ts b/config/webVersion.ts index 7e81446..1864777 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.327"; +const webVersion = "1.6.328"; export default webVersion; diff --git a/pages/system.tsx b/pages/system.tsx index 8a9f15c..a452670 100644 --- a/pages/system.tsx +++ b/pages/system.tsx @@ -1,7 +1,7 @@ "use client"; // /pages/system.tsx import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { AppDispatch, RootState } from "../redux/store"; // passe an, falls dein Pfad anders ist +import { AppDispatch, RootState } from "../redux/store"; import { fetchSystemVoltTempThunk } from "../redux/thunks/fetchSystemVoltTempThunk"; import { Chart as ChartJS, @@ -15,7 +15,6 @@ import { } from "chart.js"; import { Line } from "react-chartjs-2"; -// Chart.js registrieren ChartJS.register( CategoryScale, LinearScale, @@ -28,7 +27,6 @@ ChartJS.register( const SystemPage = () => { const dispatch = useDispatch(); - const voltages = useSelector( (state: RootState) => state.systemVoltTemp.voltages ); @@ -38,63 +36,65 @@ const SystemPage = () => { useEffect(() => { dispatch(fetchSystemVoltTempThunk()); - const interval = setInterval(() => { dispatch(fetchSystemVoltTempThunk()); }, 5000); - return () => clearInterval(interval); }, [dispatch]); - const chartData = { - labels: history.map((h) => new Date(h.time).toLocaleTimeString()), - datasets: [ - { - label: "+5V", - data: history.map((h) => h["+5V"]), - borderColor: "rgba(59,130,246,1)", - backgroundColor: "rgba(59,130,246,0.5)", - fill: false, - }, - { - label: "+15V", - data: history.map((h) => h["+15V"]), - borderColor: "rgba(34,197,94,1)", - backgroundColor: "rgba(34,197,94,0.5)", - fill: false, - }, - { - label: "-15V", - data: history.map((h) => h["-15V"]), - borderColor: "rgba(239,68,68,1)", - backgroundColor: "rgba(239,68,68,0.5)", - fill: false, - }, - { - label: "-98V", - data: history.map((h) => h["-98V"]), - borderColor: "rgba(234,179,8,1)", - backgroundColor: "rgba(234,179,8,0.5)", - fill: false, - }, - { - label: "ADC Temp", - data: history.map((h) => h["ADC Temp"]), - borderColor: "rgba(168,85,247,1)", - backgroundColor: "rgba(168,85,247,0.5)", - fill: false, - }, - { - label: "CPU Temp", - data: history.map((h) => h["CPU Temp"]), - borderColor: "rgba(251,191,36,1)", - backgroundColor: "rgba(251,191,36,0.5)", - fill: false, - }, - ], - }; + const labels = history.map((h) => new Date(h.time).toLocaleTimeString()); - const chartOptions = { + const formatValue = (value: number) => parseFloat(value.toFixed(2)); + + const voltageDatasets = [ + { + label: "+5V", + data: history.map((h) => formatValue(h["+5V"])), + borderColor: "rgba(59,130,246,1)", + backgroundColor: "rgba(59,130,246,0.5)", + fill: false, + }, + { + label: "+15V", + data: history.map((h) => formatValue(h["+15V"])), + borderColor: "rgba(34,197,94,1)", + backgroundColor: "rgba(34,197,94,0.5)", + fill: false, + }, + { + label: "-15V", + data: history.map((h) => formatValue(h["-15V"])), + borderColor: "rgba(239,68,68,1)", + backgroundColor: "rgba(239,68,68,0.5)", + fill: false, + }, + { + label: "-98V", + data: history.map((h) => formatValue(h["-98V"])), + borderColor: "rgba(234,179,8,1)", + backgroundColor: "rgba(234,179,8,0.5)", + fill: false, + }, + ]; + + const temperatureDatasets = [ + { + label: "ADC Temp", + data: history.map((h) => h["ADC Temp"]), + borderColor: "rgba(168,85,247,1)", + backgroundColor: "rgba(168,85,247,0.5)", + fill: false, + }, + { + label: "CPU Temp", + data: history.map((h) => h["CPU Temp"]), + borderColor: "rgba(251,191,36,1)", + backgroundColor: "rgba(251,191,36,0.5)", + fill: false, + }, + ]; + + const baseChartOptions = { responsive: true, maintainAspectRatio: false, scales: { @@ -122,10 +122,6 @@ const SystemPage = () => { legend: { position: "bottom" as const, }, - title: { - display: true, - text: "Systemspannungen und Temperaturen Verlauf", - }, }, }; @@ -135,19 +131,46 @@ const SystemPage = () => { System Spannungen & Temperaturen -
+
{Object.entries(voltages).map(([key, value]) => (

{key}

-

{value}

+

{formatValue(value)}

))}
-
-

Verlauf (Messkurve)

-
- +
+
+ +
+ +
+