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,13 +30,18 @@ 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
         .map((entry) => new Date(entry.t))
         .reverse(),
@@ -79,7 +82,7 @@ const LoopMeasurementChart = () => {
       ],
     };
 
-  const options: ChartOptions<"line"> = {
+    const options = {
       responsive: true,
       maintainAspectRatio: false,
       plugins: {
@@ -87,7 +90,7 @@ const LoopMeasurementChart = () => {
           position: "top" as const,
         },
         tooltip: {
-        mode: "index",
+          mode: "index" as const,
           intersect: false,
         },
         zoom: {
@@ -103,17 +106,12 @@ const LoopMeasurementChart = () => {
               enabled: true,
             },
             mode: "x",
-          onZoomComplete: () => setZoomed(true),
-        },
-        limits: {
-          x: { min: "original", max: "original" },
-          y: { min: "original", max: "original" },
           },
         },
       },
       scales: {
         x: {
-        type: "time",
+          type: "time" as const,
           time: {
             unit: "day",
             tooltipFormat: "dd.MM.yyyy HH:mm",
@@ -135,15 +133,22 @@ const LoopMeasurementChart = () => {
       },
     };
 
-  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>
   );
 };

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));
-};