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 = {
+    const chartData = {
-    labels: loopMeasurementCurveChartData
+      labels: loopMeasurementCurveChartData
-      .map((entry) => new Date(entry.t))
+        .map((entry) => new Date(entry.t))
-      .reverse(),
+        .reverse(),
-    datasets: [
+      datasets: [
-      {
+        {
-        label: "Messwert Minimum",
+          label: "Messwert Minimum",
-        data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
+          data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
-        borderColor: "lightgrey",
+          borderColor: "lightgrey",
-        borderWidth: 1,
+          borderWidth: 1,
-        fill: false,
+          fill: false,
-        pointRadius: 0,
+          pointRadius: 0,
-      },
+        },
-      {
+        {
-        label: "Messwert Maximum",
+          label: "Messwert Maximum",
-        data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
+          data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
-        borderColor: "lightgrey",
+          borderColor: "lightgrey",
-        borderWidth: 1,
+          borderWidth: 1,
-        fill: false,
+          fill: false,
-        pointRadius: 0,
+          pointRadius: 0,
-      },
+        },
-      selectedMode === "DIA0"
+        selectedMode === "DIA0"
-        ? {
+          ? {
-            label: "Messwert",
+              label: "Messwert",
-            data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
+              data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
-            borderColor: "#00AEEF",
+              borderColor: "#00AEEF",
-            borderWidth: 2,
+              borderWidth: 2,
-            fill: false,
+              fill: false,
-            pointRadius: 2,
+              pointRadius: 2,
-          }
+            }
-        : {
+          : {
-            label: "Messwert Durchschnitt",
+              label: "Messwert Durchschnitt",
-            data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
+              data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
-            borderColor: "#00AEEF",
+              borderColor: "#00AEEF",
-            borderWidth: 2,
+              borderWidth: 2,
-            fill: false,
+              fill: false,
-            pointRadius: 2,
+              pointRadius: 2,
-          },
+            },
-    ],
+      ],
-  };
+    };
 
-  const options: ChartOptions<"line"> = {
+    const options = {
-    responsive: true,
+      responsive: true,
-    maintainAspectRatio: false,
+      maintainAspectRatio: false,
-    plugins: {
+      plugins: {
-      legend: {
+        legend: {
-        position: "top" as const,
+          position: "top" as const,
-      },
+        },
-      tooltip: {
+        tooltip: {
-        mode: "index",
+          mode: "index" as const,
-        intersect: false,
+          intersect: false,
-      },
-      zoom: {
-        pan: {
-          enabled: true,
-          mode: "x",
         },
         zoom: {
-          wheel: {
+          pan: {
             enabled: true,
+            mode: "x",
           },
-          pinch: {
+          zoom: {
-            enabled: true,
+            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: {
-    scales: {
+        x: {
-      x: {
+          type: "time" as const,
-        type: "time",
+          time: {
-        time: {
+            unit: "day",
-          unit: "day",
+            tooltipFormat: "dd.MM.yyyy HH:mm",
-          tooltipFormat: "dd.MM.yyyy HH:mm",
+          },
+          title: {
+            display: true,
+            text: "Zeit",
+          },
         },
-        title: {
+        y: {
-          display: true,
+          title: {
-          text: "Zeit",
+            display: true,
+            text: unit,
+          },
+          ticks: {
+            precision: 0,
+          },
         },
       },
-      y: {
+    };
-        title: {
-          display: true,
-          text: unit,
-        },
-        ticks: {
-          precision: 0,
-        },
-      },
-    },
-  };
 
-  useEffect(() => {
+    if (chartInstance.current) {
-    if (!zoomed && chartRef.current) {
+      chartInstance.current.destroy();
-      chartRef.current.resetZoom?.();
     }
+
+    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>
   );
 };

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.196";
+const webVersion = "1.6.197";
 export default webVersion;

utils/loadLoopChartData.ts

@@ -1,23 +0,0 @@
-// /utils/loadLoopChartData.ts
-import { createLoopChart } from "./chartUtils";
-
-export const loadLoopChartData = (
-  slotIndex: number,
-  setLoopMeasurementCurveChartData: (data: any) => void
-) => {
-  const environment = process.env.NODE_ENV || "production";
-  const fileData =
-    environment === "production"
-      ? `/CPL?/CPL/4000values/slot${slotIndex}.json`
-      : `/CPLmockData/4000values/slot${slotIndex}.json`;
-
-  fetch(fileData)
-    .then((response) => response.json())
-    .then((data) => {
-      setLoopMeasurementCurveChartData(data);
-      createLoopChart(data, "Schleifenmesskurve");
-    })
-    .catch((error) =>
-      console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error)
-    );
-};

utils/loadTDRChartData.ts

@@ -1,29 +0,0 @@
-// /utils/loadTDRChartData.ts
-import { createTDRChart } from "./chartUtils";
-
-export const loadTDRChartData = (
-  selectedFileName: string | null,
-  setLoopMeasurementCurveChartData: (data: any) => void
-) => {
-  if (!selectedFileName) {
-    console.error("Kein Dateiname in Redux gespeichert.");
-    return;
-  }
-
-  const yearFolder = `Year_${new Date().getFullYear().toString().slice(-2)}`;
-  const monthFolder = `Month_${(new Date().getMonth() + 1)
-    .toString()
-    .padStart(2, "0")}`;
-
-  //const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`;
-  const filePath = `/CPLmockData/LastTDR/jsonDatei/${selectedFileName}`;
-
-  fetch(filePath)
-    .then((response) => response.json())
-    .then((data) => {
-      console.log("Geladene TDR-Daten:", data);
-      setLoopMeasurementCurveChartData(data);
-      createTDRChart(data);
-    })
-    .catch((error) => console.error("Fehler beim Laden der TDR-Daten:", error));
-};