feat: DetailModal um Min/Max/Durchschnitt ergänzt

- Chart zeigt jetzt zusätzlich zu Messwert auch Minimal-, Maximal- und Durchschnittswerte an
- Datenstruktur an Redux angepasst (i, a, g)
- Darstellung entspricht jetzt LoopMeasurementChart

components/main/system/DetailModal.tsx

@@ -38,14 +38,31 @@ ChartJS.register(
 const initialChartData = {
   datasets: [
     {
-      label: "Messdaten",
+      label: "Minimum",
       data: [],
-      borderColor: "rgba(61, 176, 242, 1)",
+      borderColor: "lightgrey",
+      backgroundColor: "rgba(211,211,211,0.3)",
+      borderWidth: 2,
+      pointRadius: 0,
+      tension: 0.1,
+    },
+    {
+      label: "Maximum",
+      data: [],
+      borderColor: "lightgrey",
+      backgroundColor: "rgba(211,211,211,0.3)",
+      borderWidth: 2,
+      pointRadius: 0,
+      tension: 0.1,
+    },
+    {
+      label: "Durchschnitt",
+      data: [],
+      borderColor: "rgba(59,130,246,1)",
       backgroundColor: "rgba(59,130,246,0.3)",
       borderWidth: 2,
       pointRadius: 0,
       tension: 0.1,
-      fill: false,
     },
   ],
 };
@@ -182,10 +199,20 @@ export const DetailModal = ({
   useEffect(() => {
     if (chartRef.current) {
       const chart = chartRef.current;
-      chart.data.datasets[0].data = [...reduxData]
-        .reverse()
-        .map((p) => ({ x: new Date(p.t), y: p.i }));
-      chart.update("none");
+      const sortedData = [...reduxData].reverse();
+
+      chart.data.datasets[0].data = sortedData.map((p) => ({
+        x: new Date(p.t),
+        y: p.i,
+      }));
+      chart.data.datasets[1].data = sortedData.map((p) => ({
+        x: new Date(p.t),
+        y: p.a,
+      }));
+      chart.data.datasets[2].data = sortedData.map((p) => ({
+        x: new Date(p.t),
+        y: p.g,
+      }));
     }
   }, [reduxData]);