fix: Chart System

components/main/system/DetailModal.tsx

@@ -48,6 +48,18 @@ ChartJS.register(
   TimeScale
 );
 
+// Tailwind-basierte Farbdefinitionen für Chart.js
+const chartColors = {
+  gray: {
+    line: "#6B7280", // tailwind gray-500
+    background: "rgba(107, 114, 128, 0.2)", // tailwind gray-500 mit opacity
+  },
+  littwinBlue: {
+    line: "#00AEEF", // littwin-blue
+    background: "rgba(0, 174, 239, 0.2)", // littwin-blue mit opacity
+  },
+};
+
 type ReduxDataEntry = {
   //Alle DIA0 t,m,i,a , DIA1 und DIA2 t,i,a,g
   t: string; // Zeitstempel
@@ -136,14 +148,6 @@ export const DetailModal = ({
   });
   const [isLoading, setIsLoading] = useState(false);
   const [shouldUpdateChart, setShouldUpdateChart] = useState(false);
-  const vonDatum = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
-  );
-  const bisDatum = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.bisDatum
-  );
-
-  const [filteredData, setFilteredData] = useState<ReduxDataEntry[]>([]);
 
   const reduxData = useSelector((state: RootState) => {
     switch (selectedKey) {
@@ -264,26 +268,86 @@ export const DetailModal = ({
     if (shouldUpdateChart && reduxData && reduxData.length > 0) {
       console.log("Redux data for chart:", reduxData);
 
-      // Convert Redux data to Chart.js format
-      const chartDataPoints = reduxData.map((entry) => ({
-        x: new Date(entry.t).getTime(),
-        y: entry.m || entry.a || entry.i || 0, // Use current value, max, min, or 0
-      }));
+      // Create datasets array for multiple lines
+      const datasets = [];
+
+      // Check which data fields are available and create datasets accordingly
+      const hasMinimum = reduxData.some(
+        (entry) => entry.i !== undefined && entry.i !== null && entry.i !== 0
+      );
+      const hasMaximum = reduxData.some(
+        (entry) => entry.a !== undefined && entry.a !== null
+      );
+      const hasAverage = reduxData.some(
+        (entry) => entry.g !== undefined && entry.g !== null
+      );
+      const hasCurrent = reduxData.some(
+        (entry) => entry.m !== undefined && entry.m !== null
+      );
+
+      // Zuerst Hintergrund-Linien (Minimum/Maximum) - grau
+      if (hasMinimum) {
+        datasets.push({
+          label: "Minimum",
+          data: reduxData.map((entry) => ({
+            x: new Date(entry.t).getTime(),
+            y: entry.i || 0,
+          })),
+          borderColor: chartColors.gray.line,
+          backgroundColor: chartColors.gray.background,
+          tension: 0.1,
+          fill: false,
+        });
+      }
+
+      if (hasMaximum) {
+        datasets.push({
+          label: "Maximum",
+          data: reduxData.map((entry) => ({
+            x: new Date(entry.t).getTime(),
+            y: entry.a || 0,
+          })),
+          borderColor: chartColors.gray.line,
+          backgroundColor: chartColors.gray.background,
+          tension: 0.1,
+          fill: false,
+        });
+      }
+
+      // Dann Vordergrund-Linien (Durchschnitt/Messwert) - littwin-blue
+      if (hasAverage) {
+        datasets.push({
+          label: "Durchschnitt",
+          data: reduxData.map((entry) => ({
+            x: new Date(entry.t).getTime(),
+            y: entry.g || 0,
+          })),
+          borderColor: chartColors.littwinBlue.line,
+          backgroundColor: chartColors.littwinBlue.background,
+          tension: 0.1,
+          fill: false,
+        });
+      }
+
+      if (hasCurrent) {
+        datasets.push({
+          label: "Messwert",
+          data: reduxData.map((entry) => ({
+            x: new Date(entry.t).getTime(),
+            y: entry.m || 0,
+          })),
+          borderColor: chartColors.littwinBlue.line,
+          backgroundColor: chartColors.littwinBlue.background,
+          tension: 0.1,
+          fill: false,
+        });
+      }
 
       const newChartData = {
-        datasets: [
-          {
-            label: selectedKey || "Messwerte",
-            data: chartDataPoints,
-            borderColor: "#00AEEF", // littwin-blue
-            backgroundColor: "rgba(0, 174, 239, 0.2)", // littwin-blue mit Transparenz
-            tension: 0.1,
-            fill: false,
-          },
-        ],
+        datasets: datasets,
       };
 
-      console.log("Chart data points:", chartDataPoints);
+      console.log("Chart datasets:", datasets.length, "lines");
       setChartData(newChartData);
       setShouldUpdateChart(false); // Reset flag
     } else if (shouldUpdateChart && (!reduxData || reduxData.length === 0)) {