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

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 = {
-    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
       </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">
-        <h2 className="text-lg font-semibold mb-2">Verlauf (Messkurve)</h2>
-        <div className="w-full max-w-4xl h-[300px] mx-auto">
-          <Line data={chartData} options={chartOptions} />
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+        <div className="h-[300px]">
+          <Line
+            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>