feat: ISO, RSL und TDR separate Charts ohne den Switcher

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

@@ -1,4 +1,4 @@
-"use client"; // /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+"use client"; // /components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoMeasurementChart.tsx
 
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
@@ -34,7 +34,7 @@ ChartJS.register(
 import { getColor } from "@/utils/colors";
 import { PulseLoader } from "react-spinners";
 
-type LoopMeasurementEntry = {
+type IsoMeasurementEntry = {
   t: string;
   i: number;
   m: number;
@@ -42,20 +42,20 @@ type LoopMeasurementEntry = {
   a: number;
 };
 
-const usePreviousData = (data: LoopMeasurementEntry[]) => {
-  const ref = useRef<LoopMeasurementEntry[]>([]);
+const usePreviousData = (data: IsoMeasurementEntry[]) => {
+  const ref = useRef<IsoMeasurementEntry[]>([]);
   useEffect(() => {
     ref.current = data;
   }, [data]);
   return ref.current;
 };
 
-const LoopMeasurementChart = () => {
+const IsoMeasurementChart = () => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const chartInstance = useRef<ChartJS | null>(null);
 
   const {
-    loopMeasurementCurveChartData,
+    isoMeasurementCurveChartData,
     selectedMode,
     unit,
     isFullScreen,
@@ -64,12 +64,12 @@ const LoopMeasurementChart = () => {
     bisDatum,
   } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
 
-  const previousData = usePreviousData(loopMeasurementCurveChartData);
+  const previousData = usePreviousData(isoMeasurementCurveChartData);
 
   // Vergleichsfunktion
   const isEqual = (
-    a: LoopMeasurementEntry[],
-    b: LoopMeasurementEntry[]
+    a: IsoMeasurementEntry[],
+    b: IsoMeasurementEntry[]
   ): boolean => {
     if (a.length !== b.length) return false;
     for (let i = 0; i < a.length; i++) {
@@ -102,7 +102,7 @@ const LoopMeasurementChart = () => {
       const ctx = canvasRef.current.getContext("2d");
       if (!ctx) return;
 
-      if (isEqual(loopMeasurementCurveChartData, previousData)) {
+      if (isEqual(isoMeasurementCurveChartData, previousData)) {
         return; // keine echte Datenänderung → nicht neu zeichnen
       }
 
@@ -111,13 +111,13 @@ const LoopMeasurementChart = () => {
       }
 
       const chartData = {
-        labels: loopMeasurementCurveChartData
+        labels: isoMeasurementCurveChartData
           .map((entry) => new Date(entry.t))
           .reverse(),
         datasets: [
           {
             label: "Messwert Minimum",
-            data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
+            data: isoMeasurementCurveChartData.map((e) => e.i).reverse(),
             borderColor: "lightgrey",
             backgroundColor: "rgba(211,211,211,0.5)",
             borderWidth: 2,
@@ -128,7 +128,7 @@ const LoopMeasurementChart = () => {
           },
           {
             label: "Messwert Maximum",
-            data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
+            data: isoMeasurementCurveChartData.map((e) => e.a).reverse(),
             borderColor: "lightgrey",
             backgroundColor: "rgba(211,211,211,0.5)",
             borderWidth: 2,
@@ -140,7 +140,7 @@ const LoopMeasurementChart = () => {
           selectedMode === "DIA0"
             ? {
                 label: "Messwert",
-                data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
+                data: isoMeasurementCurveChartData.map((e) => e.m).reverse(),
                 borderColor: getColor("littwin-blue"),
                 backgroundColor: "rgba(59,130,246,0.5)",
                 borderWidth: 3,
@@ -151,7 +151,7 @@ const LoopMeasurementChart = () => {
               }
             : {
                 label: "Messwert Durchschnitt",
-                data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
+                data: isoMeasurementCurveChartData.map((e) => e.g).reverse(),
                 borderColor: getColor("littwin-blue"),
                 backgroundColor: "rgba(59,130,246,0.5)",
                 borderWidth: 3,
@@ -210,7 +210,7 @@ const LoopMeasurementChart = () => {
       });
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loopMeasurementCurveChartData, selectedMode, vonDatum, bisDatum]);
+  }, [isoMeasurementCurveChartData, selectedMode, vonDatum, bisDatum]);
 
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
@@ -231,4 +231,4 @@ const LoopMeasurementChart = () => {
   );
 };
 
-export default LoopMeasurementChart;
+export default IsoMeasurementChart;