feat: LoopMeasurementChart auf Chart.js mit canvas umgestellt – Zoom & Pan bleiben stabil

- Recharts entfernt und Chart.js direkt über canvas eingebunden
- Zoom- und Pan-Funktionalität wie bei TDRChart umgesetzt
- Chart wird nicht mehr bei jeder Redux-Aktualisierung neu gezeichnet
- Zoom-Stufe bleibt beim Benutzer erhalten

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

@@ -1,6 +1,8 @@
-"use client"; // components/main/Kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+"use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../../redux/store";
 import {
   Chart as ChartJS,
   LineElement,
@@ -11,13 +13,9 @@ import {
   Tooltip,
   Legend,
   Filler,
-  ChartOptions,
 } from "chart.js";
 import zoomPlugin from "chartjs-plugin-zoom";
 import "chartjs-adapter-date-fns";
-import { Line } from "react-chartjs-2";
-import { useSelector } from "react-redux";
-import { RootState } from "../../../../../../redux/store";
 
 ChartJS.register(
   LineElement,
@@ -32,118 +30,125 @@ ChartJS.register(
 );
 
 const LoopMeasurementChart = () => {
-  const chartRef = useRef<any>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const chartInstance = useRef<ChartJS | null>(null);
+
   const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } =
     useSelector((state: RootState) => state.kabelueberwachungChartSlice);
 
-  const [zoomed, setZoomed] = useState(false);
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    const ctx = canvasRef.current.getContext("2d");
+    if (!ctx) return;
 
-  const data = {
-    labels: loopMeasurementCurveChartData
-      .map((entry) => new Date(entry.t))
-      .reverse(),
-    datasets: [
-      {
-        label: "Messwert Minimum",
-        data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
-        borderColor: "lightgrey",
-        borderWidth: 1,
-        fill: false,
-        pointRadius: 0,
-      },
-      {
-        label: "Messwert Maximum",
-        data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
-        borderColor: "lightgrey",
-        borderWidth: 1,
-        fill: false,
-        pointRadius: 0,
-      },
-      selectedMode === "DIA0"
-        ? {
-            label: "Messwert",
-            data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
-            borderColor: "#00AEEF",
-            borderWidth: 2,
-            fill: false,
-            pointRadius: 2,
-          }
-        : {
-            label: "Messwert Durchschnitt",
-            data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
-            borderColor: "#00AEEF",
-            borderWidth: 2,
-            fill: false,
-            pointRadius: 2,
-          },
-    ],
-  };
+    const chartData = {
+      labels: loopMeasurementCurveChartData
+        .map((entry) => new Date(entry.t))
+        .reverse(),
+      datasets: [
+        {
+          label: "Messwert Minimum",
+          data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
+          borderColor: "lightgrey",
+          borderWidth: 1,
+          fill: false,
+          pointRadius: 0,
+        },
+        {
+          label: "Messwert Maximum",
+          data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
+          borderColor: "lightgrey",
+          borderWidth: 1,
+          fill: false,
+          pointRadius: 0,
+        },
+        selectedMode === "DIA0"
+          ? {
+              label: "Messwert",
+              data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
+              borderColor: "#00AEEF",
+              borderWidth: 2,
+              fill: false,
+              pointRadius: 2,
+            }
+          : {
+              label: "Messwert Durchschnitt",
+              data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
+              borderColor: "#00AEEF",
+              borderWidth: 2,
+              fill: false,
+              pointRadius: 2,
+            },
+      ],
+    };
 
-  const options: ChartOptions<"line"> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: "top" as const,
-      },
-      tooltip: {
-        mode: "index",
-        intersect: false,
-      },
-      zoom: {
-        pan: {
-          enabled: true,
-          mode: "x",
+    const options = {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: "top" as const,
+        },
+        tooltip: {
+          mode: "index" as const,
+          intersect: false,
         },
         zoom: {
-          wheel: {
+          pan: {
             enabled: true,
+            mode: "x",
           },
-          pinch: {
-            enabled: true,
+          zoom: {
+            wheel: {
+              enabled: true,
+            },
+            pinch: {
+              enabled: true,
+            },
+            mode: "x",
           },
-          mode: "x",
-          onZoomComplete: () => setZoomed(true),
-        },
-        limits: {
-          x: { min: "original", max: "original" },
-          y: { min: "original", max: "original" },
         },
       },
-    },
-    scales: {
-      x: {
-        type: "time",
-        time: {
-          unit: "day",
-          tooltipFormat: "dd.MM.yyyy HH:mm",
+      scales: {
+        x: {
+          type: "time" as const,
+          time: {
+            unit: "day",
+            tooltipFormat: "dd.MM.yyyy HH:mm",
+          },
+          title: {
+            display: true,
+            text: "Zeit",
+          },
         },
-        title: {
-          display: true,
-          text: "Zeit",
+        y: {
+          title: {
+            display: true,
+            text: unit,
+          },
+          ticks: {
+            precision: 0,
+          },
         },
       },
-      y: {
-        title: {
-          display: true,
-          text: unit,
-        },
-        ticks: {
-          precision: 0,
-        },
-      },
-    },
-  };
+    };
 
-  useEffect(() => {
-    if (!zoomed && chartRef.current) {
-      chartRef.current.resetZoom?.();
+    if (chartInstance.current) {
+      chartInstance.current.destroy();
     }
+
+    chartInstance.current = new ChartJS(ctx, {
+      type: "line",
+      data: chartData,
+      options,
+    });
+
+    // Kein Cleanup mit Destroy, damit Zoom erhalten bleibt
   }, [loopMeasurementCurveChartData, selectedMode]);
 
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
-      <Line ref={chartRef} data={data} options={options} />
+      <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />
     </div>
   );
 };