feat: LoopMeasurementChart mit X- und Y-Achsen-Pan/Zoom ergänzt, DIA0, DIA1 und DIA2 Linien hinzugefügt

- Pan- und Zoom-Funktion für X- und Y-Achse aktiviert
- Datenreihen für DIA0 (Messwert Aktuell), DIA1 und DIA2 (Messwert Durchschnitt) ergänzt
- Tooltip-Formatierungen verbessert
- Dynamische Skalierung der X-Achse basierend auf dem gewählten Zeitraum implementiert
- Styling-Anpassungen für bessere Lesbarkeit der Linien vorgenommen

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

@@ -4,7 +4,6 @@ import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-moment";
-import "chartjs-plugin-zoom";
 import {
   setVonDatum,
   setBisDatum,
@@ -24,6 +23,16 @@ const LoopMeasurementChart = () => {
 
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
+  const [zoomPlugin, setZoomPlugin] = useState<any>(null);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default);
+        Chart.register(mod.default);
+      });
+    }
+  }, []);
 
   useEffect(() => {
     if (chartRef.current) {
@@ -35,6 +44,7 @@ const LoopMeasurementChart = () => {
       console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum);
       console.log("Selected Mode:", selectedMode);
 
+      // Basis-Datasets für alle Datenpunkte
       const datasets = [
         {
           label: "Messwert Minimum (kOhm)",
@@ -42,10 +52,8 @@ const LoopMeasurementChart = () => {
             x: new Date(entry.t).getTime(),
             y: entry.i,
           })),
-          borderColor: "#17a2b8", // Türkis
+          borderColor: "rgba(75, 192, 192, 1)", // Türkis
-          backgroundColor: "rgba(23, 162, 184, 0.2)",
+          backgroundColor: "rgba(75, 192, 192, 0.2)",
-          pointRadius: 2,
-          borderWidth: 2,
           fill: false,
         },
         {
@@ -54,25 +62,45 @@ const LoopMeasurementChart = () => {
             x: new Date(entry.t).getTime(),
             y: entry.a,
           })),
-          borderColor: "#dc3545", // Rot
+          borderColor: "rgba(192, 75, 75, 1)", // Rot
-          backgroundColor: "rgba(220, 53, 69, 0.2)",
+          backgroundColor: "rgba(192, 75, 75, 0.2)",
-          pointRadius: 2,
-          borderWidth: 2,
           fill: false,
         },
-        {
+      ];
+
+      // Falls DIA0: `m` als aktueller Messwert verwenden
+      if (
+        selectedMode === "DIA0" &&
+        loopMeasurementCurveChartData.some((entry) => entry.m !== undefined)
+      ) {
+        datasets.push({
           label: "Messwert Aktuell (m)",
           data: loopMeasurementCurveChartData.map((entry) => ({
             x: new Date(entry.t).getTime(),
             y: entry.m ?? NaN,
           })),
-          borderColor: "#ffc107", // Gelb
+          borderColor: "rgba(255, 165, 0, 1)", // Orange
-          backgroundColor: "rgba(255, 193, 7, 0.2)",
+          backgroundColor: "rgba(255, 165, 0, 0.2)",
-          pointRadius: 2,
-          borderWidth: 2,
           fill: false,
-        },
+        });
-      ];
+      }
+
+      // Falls DIA1 oder DIA2: `g` als Durchschnittswert verwenden
+      if (
+        (selectedMode === "DIA1" || selectedMode === "DIA2") &&
+        loopMeasurementCurveChartData.some((entry) => entry.g !== undefined)
+      ) {
+        datasets.push({
+          label: "Messwert Durchschnitt (g)",
+          data: loopMeasurementCurveChartData.map((entry) => ({
+            x: new Date(entry.t).getTime(),
+            y: entry.g ?? NaN,
+          })),
+          borderColor: "rgba(75, 75, 192, 1)", // Blau
+          backgroundColor: "rgba(75, 75, 192, 0.2)",
+          fill: false,
+        });
+      }
 
       const ctx = chartRef.current.getContext("2d");
       if (ctx) {
@@ -98,7 +126,6 @@ const LoopMeasurementChart = () => {
                 max: new Date(bisDatum).getTime(),
               },
               y: {
-                title: { display: true, text: "Messwert (kOhm)" },
                 ticks: {
                   callback: (value) =>
                     (typeof value === "number" ? value.toFixed(2) : value) +
@@ -118,29 +145,22 @@ const LoopMeasurementChart = () => {
                 },
               },
               zoom: {
-                pan: {
+                pan: { enabled: true, mode: "xy" },
-                  enabled: true,
-                  mode: "xy",
-                },
                 zoom: {
                   wheel: { enabled: true },
                   pinch: { enabled: true },
-                  mode: "xy",
+                  mode: "x",
-                  onZoom: ({ chart }) => {
+                  onZoomComplete: (chart) => {
-                    const xScale = chart.scales.x;
+                    const xScale = chart.chart.scales.x;
-                    if (xScale.min && xScale.max) {
+                    const newVonDatum = new Date(xScale.min)
-                      const newVonDatum = new Date(xScale.min)
+                      .toISOString()
-                        .toISOString()
+                      .split("T")[0];
-                        .split("T")[0];
+                    const newBisDatum = new Date(xScale.max)
-                      const newBisDatum = new Date(xScale.max)
+                      .toISOString()
-                        .toISOString()
+                      .split("T")[0];
-                        .split("T")[0];
 
-                      if (newVonDatum !== vonDatum)
+                    dispatch(setVonDatum(newVonDatum));
-                        dispatch(setVonDatum(newVonDatum));
+                    dispatch(setBisDatum(newBisDatum));
-                      if (newBisDatum !== bisDatum)
-                        dispatch(setBisDatum(newBisDatum));
-                    }
                   },
                 },
               },