fix: DIA0, DIA1 und DIA2 werden alle drei Linien angezeigt

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx

@@ -8,7 +8,7 @@ const LoopMeasurementChart = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
-  // Daten aus dem Redux-Store abrufen
+  // Daten aus Redux abrufen
   const chartData =
     useSelector(
       (state: { chartData: { data: any[] } }) => state.chartData.data
@@ -26,12 +26,15 @@ const LoopMeasurementChart = () => {
         chartInstance.current.destroy();
       }
 
+      console.log("Chart Data:", chartData);
+
       // Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden
       const processedData = chartData.map((entry) => ({
         ...entry,
         timestampMs: new Date(entry.t).getTime(),
       }));
 
+      // Basis-Datasets für i und a (immer vorhanden)
       const datasets = [
         {
           label: "Messwert Minimum (kOhm)",
@@ -53,20 +56,56 @@ const LoopMeasurementChart = () => {
           backgroundColor: "rgba(192, 75, 75, 0.2)",
           fill: true,
         },
-        {
-          label:
-            selectedMode === "DIA0"
-              ? "Messwert Mittelwert (m)"
-              : "Messwert Durchschnitt (g)",
+      ];
+
+      // Falls `m` vorhanden ist (DIA0), wird es gezeichnet
+      if (
+        selectedMode === "DIA0" &&
+        processedData.some((entry) => entry.m !== undefined)
+      ) {
+        datasets.push({
+          label: "Messwert Mittelwert (m)",
           data: processedData.map((entry) => ({
             x: entry.timestampMs,
-            y: selectedMode === "DIA0" ? entry.m : entry.g,
+            y: entry.m ?? NaN, // Falls `m` nicht existiert, wird `NaN` gesetzt
           })),
-          borderColor: "rgba(75, 75, 192, 1)",
+          borderColor: "rgba(255, 165, 0, 1)", // Orange
+          backgroundColor: "rgba(255, 165, 0, 0.2)",
+          fill: true,
+        });
+      }
+
+      // Falls `g` vorhanden ist (DIA1/DIA2), wird es gezeichnet
+      if (
+        selectedMode !== "DIA1" &&
+        processedData.some((entry) => entry.g !== undefined)
+      ) {
+        datasets.push({
+          label: "Messwert Durchschnitt (g)",
+          data: processedData.map((entry) => ({
+            x: entry.timestampMs,
+            y: entry.g ?? NaN, // Falls `g` nicht existiert, wird `NaN` gesetzt
+          })),
+          borderColor: "rgba(75, 75, 192, 1)", // Blau
           backgroundColor: "rgba(75, 75, 192, 0.2)",
           fill: true,
-        },
-      ];
+        });
+      }
+      if (
+        selectedMode !== "DIA2" &&
+        processedData.some((entry) => entry.g !== undefined)
+      ) {
+        datasets.push({
+          label: "Messwert Durchschnitt (g)",
+          data: processedData.map((entry) => ({
+            x: entry.timestampMs,
+            y: entry.g ?? NaN, // Falls `g` nicht existiert, wird `NaN` gesetzt
+          })),
+          borderColor: "rgba(75, 75, 192, 1)", // Blau
+          backgroundColor: "rgba(75, 75, 192, 0.2)",
+          fill: true,
+        });
+      }
 
       const ctx = chartRef.current.getContext("2d");
       if (ctx) {
@@ -76,6 +115,11 @@ const LoopMeasurementChart = () => {
           options: {
             responsive: true,
             maintainAspectRatio: false,
+            elements: {
+              line: {
+                spanGaps: true, // Ermöglicht das Zeichnen von Lücken
+              },
+            },
             scales: {
               x: {
                 type: "time",