feat(system): getrennte Diagramme für Spannungen und Temperaturen + Rundung auf 2 Nachkommastellen + Doku aktualisiert

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

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
 
 ---
 

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;

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<AppDispatch>();
-
   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 = {
+  const labels = history.map((h) => new Date(h.time).toLocaleTimeString());
-    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 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
       </h1>
 
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 gap-4 mb-8">
         {Object.entries(voltages).map(([key, value]) => (
           <div key={key} className="p-4 border rounded shadow">
             <h2 className="font-semibold">{key}</h2>
-            <p>{value}</p>
+            <p>{formatValue(value)}</p>
           </div>
         ))}
       </div>
 
-      <div className="mt-8">
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
-        <h2 className="text-lg font-semibold mb-2">Verlauf (Messkurve)</h2>
+        <div className="h-[300px]">
-        <div className="w-full max-w-4xl h-[300px] mx-auto">
+          <Line
-          <Line data={chartData} options={chartOptions} />
+            data={{ labels, datasets: voltageDatasets }}
+            options={{
+              ...baseChartOptions,
+              plugins: {
+                ...baseChartOptions.plugins,
+                title: {
+                  display: true,
+                  text: "Systemspannungen",
+                },
+              },
+            }}
+          />
+        </div>
+
+        <div className="h-[300px]">
+          <Line
+            data={{ labels, datasets: temperatureDatasets }}
+            options={{
+              ...baseChartOptions,
+              plugins: {
+                ...baseChartOptions.plugins,
+                title: {
+                  display: true,
+                  text: "Systemtemperaturen",
+                },
+              },
+            }}
+          />
         </div>
       </div>
     </div>