refactor: Umbenennung von 'chartData' in Redux kabelueberwachung Slice zu 'loopMeasurementCurveChartData' für bessere Klarheit

Die Variable 'chartData' wurde in 'loopMeasurementCurveChartData' umbenannt, um den Inhalt und Zweck der Daten klarer zu definieren. Diese Änderung verbessert die Lesbarkeit und Wartbarkeit des Codes, indem sie die Bedeutung der Variablen präziser beschreibt.

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

@@ -17,7 +17,7 @@ interface ChartSwitcherProps {
 const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
   const dispatch = useDispatch();
   const activeMode = useSelector(
-    (state: RootState) => state.chartData.activeMode
+    (state: RootState) => state.loopMeasurementCurveChartData.activeMode
   );
 
   // **Neue Funktion: Modal schließen + Redux-Status zurücksetzen**

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

@@ -6,7 +6,7 @@ import { RootState } from "../../../../../../redux/store";
 import {
   setVonDatum,
   setBisDatum,
-  setChartData,
+  setLoopMeasurementCurveChartData,
   setSelectedMode,
   setSelectedSlotType,
   setChartOpen,
@@ -74,7 +74,7 @@ const LoopChartActionBar: React.FC = () => {
       console.log("✅ Daten erfolgreich geladen:", jsonData);
 
       if (Array.isArray(jsonData)) {
-        dispatch(setChartData(jsonData));
+        dispatch(setLoopMeasurementCurveChartData(jsonData));
 
         // Falls das Chart zum ersten Mal geöffnet wird, setze vonDatum & bisDatum
         if (!isChartOpen && jsonData.length > 0) {

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

@@ -20,7 +20,7 @@ const LoopMeasurementChart = () => {
   }, []);
 
   // Daten & Datum aus Redux abrufen
-  const { chartData, vonDatum, bisDatum } = useSelector(
+  const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
     (state: RootState) => state.kabelueberwachungChart
   );
   const selectedMode = useSelector(
@@ -33,12 +33,12 @@ const LoopMeasurementChart = () => {
         chartInstance.current.destroy();
       }
 
-      console.log("Chart Data:", chartData);
+      console.log("Chart Data:", loopMeasurementCurveChartData);
       console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum);
       console.log("Selected Mode:", selectedMode);
 
       // Daten filtern basierend auf vonDatum und bisDatum
-      const filteredData = chartData.filter((entry) => {
+      const filteredData = loopMeasurementCurveChartData.filter((entry) => {
         const timestampMs = new Date(entry.t).getTime();
         return (
           timestampMs >= new Date(vonDatum).getTime() &&
@@ -167,7 +167,7 @@ const LoopMeasurementChart = () => {
         });
       }
     }
-  }, [chartData, vonDatum, bisDatum, selectedMode]);
+  }, [loopMeasurementCurveChartData, vonDatum, bisDatum, selectedMode]);
 
   return (
     <div style={{ position: "relative", width: "100%", height: "400px" }}>

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

@@ -9,14 +9,16 @@ const TDRChart: React.FC = () => {
   const chartInstance = useRef<Chart | null>(null);
 
   // TDR-Daten aus dem Redux Store selektieren
-  const chartData = useSelector((state: any) => state.tdrChartData.data);
+  const loopMeasurementCurveChartData = useSelector(
+    (state: any) => state.tdrChartData.data
+  );
 
   useEffect(() => {
     // Importiere und registriere das Zoom-Plugin innerhalb des useEffect-Hooks
     import("chartjs-plugin-zoom").then((zoomPlugin) => {
       Chart.register(...registerables, zoomPlugin.default);
 
-      if (chartRef.current && chartData.length > 0) {
+      if (chartRef.current && loopMeasurementCurveChartData.length > 0) {
         if (chartInstance.current) {
           chartInstance.current.destroy();
         }
@@ -29,7 +31,7 @@ const TDRChart: React.FC = () => {
               datasets: [
                 {
                   label: "TDR Entfernung (km)",
-                  data: chartData,
+                  data: loopMeasurementCurveChartData,
                   borderColor: "rgba(255, 99, 132, 1)",
                   backgroundColor: "rgba(255, 99, 132, 0.2)",
                   tension: 0.1,
@@ -80,7 +82,7 @@ const TDRChart: React.FC = () => {
         }
       }
     });
-  }, [chartData]);
+  }, [loopMeasurementCurveChartData]);
 
   return (
     <div>

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import DateRangePicker from "../DateRangePicker";
 import TDRChart from "../../../../kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart";
-import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
+import { setLoopMeasurementCurveChartData } from "../../../../../../redux/slices/chartDataSlice";
 import { parseISO } from "date-fns";
 import { useDispatch } from "react-redux";
 import { setTDRChartData } from "../../../../../../redux/slices/tdrChartDataSlice";
@@ -101,9 +101,8 @@ const TDRChartActionBar: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
 
   // Zustand für die Chart-Daten
-  const [chartData, setChartData] = useState<
+  const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] =
-    { timestamp: string; tdr: number }[]
+    useState<{ timestamp: string; tdr: number }[]>([]);
-  >([]);
 
   useEffect(() => {
     // Aktuelles Jahr und Monat ermitteln
@@ -127,7 +126,7 @@ const TDRChartActionBar: React.FC = () => {
       })
       .then((data) => {
         // Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
-        setChartData(data);
+        setLoopMeasurementCurveChartData(data);
       })
       .catch((error) => {
         console.error("Fehler beim Abrufen der Daten:", error);

components/main/kabelueberwachung/kue705FO/Kue705FO.tsx

@@ -73,13 +73,14 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   >(); //Test erstmal leer ohne isolationswert
   const [showModal, setShowModal] = useState(false);
   const [showChartModal, setShowChartModal] = useState(false);
-  const [chartData, setChartData] = useState(null);
+  const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] =
+    useState(null);
 
   useEffect(() => {
-    if (chartData) {
+    if (loopMeasurementCurveChartData) {
-      dispatch(setSelectedChartData(chartData));
+      dispatch(setSelectedChartData(loopMeasurementCurveChartData));
     }
-  }, [chartData, dispatch]); // Führe dispatch nur aus, wenn chartData sich ändert
+  }, [loopMeasurementCurveChartData, dispatch]); // Führe dispatch nur aus, wenn loopMeasurementCurveChartData sich ändert
 
   // Redux-Variablen abrufen
   const {

redux/slices/chartDataSlice.ts

@@ -11,10 +11,10 @@ const initialState: ChartDataState = {
 };
 
 export const chartDataSlice = createSlice({
-  name: "chartData",
+  name: "loopMeasurementCurveChartData",
   initialState,
   reducers: {
-    setChartData: (state, action: PayloadAction<any[]>) => {
+    setLoopMeasurementCurveChartData: (state, action: PayloadAction<any[]>) => {
       state.data = action.payload;
     },
     clearChartData: (state) => {
@@ -26,6 +26,9 @@ export const chartDataSlice = createSlice({
   },
 });
 
-export const { setChartData, clearChartData, setActiveMode } =
+export const {
-  chartDataSlice.actions;
+  setLoopMeasurementCurveChartData,
+  clearChartData,
+  setActiveMode,
+} = chartDataSlice.actions;
 export default chartDataSlice.reducer;

redux/slices/kabelueberwachungChartSlice.ts

@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 interface KabelueberwachungChartState {
-  chartData: any[];
+  loopMeasurementCurveChartData: any[];
   vonDatum: string;
   bisDatum: string;
   selectedMode: "DIA0" | "DIA1" | "DIA2";
@@ -11,7 +11,7 @@ interface KabelueberwachungChartState {
 }
 
 const initialState: KabelueberwachungChartState = {
-  chartData: [],
+  loopMeasurementCurveChartData: [],
   vonDatum: "2025-02-01",
   bisDatum: "2025-02-28",
   selectedMode: "DIA0",
@@ -27,8 +27,8 @@ const kabelueberwachungChartSlice = createSlice({
     setSlotNumber: (state, action: PayloadAction<number | null>) => {
       state.slotNumber = action.payload;
     },
-    setChartData: (state, action: PayloadAction<any[]>) => {
+    setLoopMeasurementCurveChartData: (state, action: PayloadAction<any[]>) => {
-      state.chartData = action.payload;
+      state.loopMeasurementCurveChartData = action.payload;
     },
     setVonDatum: (state, action: PayloadAction<string>) => {
       state.vonDatum = action.payload.replace(/-/g, ";"); // Speichert als "YYYY;MM;DD"
@@ -56,7 +56,7 @@ const kabelueberwachungChartSlice = createSlice({
 });
 
 export const {
-  setChartData,
+  setLoopMeasurementCurveChartData,
   setVonDatum,
   setBisDatum,
   setSelectedMode,

redux/store.ts

@@ -12,7 +12,7 @@ const store = configureStore({
   reducer: {
     auth: authReducer,
     variables: variablesReducer,
-    chartData: chartDataReducer,
+    loopMeasurementCurveChartData: chartDataReducer,
     webVersion: webVersionReducer,
     digitalInputs: digitalInputsReducer,
     kabelueberwachungChart: kabelueberwachungChartReducer,

utils/loadLoopChartData.ts

@@ -2,7 +2,7 @@ import { createLoopChart } from "./chartUtils";
 
 export const loadLoopChartData = (
   slotIndex: number,
-  setChartData: (data: any) => void
+  setLoopMeasurementCurveChartData: (data: any) => void
 ) => {
   const environment = process.env.NODE_ENV || "production";
   const fileData =
@@ -13,7 +13,7 @@ export const loadLoopChartData = (
   fetch(fileData)
     .then((response) => response.json())
     .then((data) => {
-      setChartData(data);
+      setLoopMeasurementCurveChartData(data);
       createLoopChart(data, "Schleifenmesskurve");
     })
     .catch((error) =>

utils/loadTDRChartData.ts

@@ -2,7 +2,7 @@ import { createTDRChart } from "./chartUtils";
 
 export const loadTDRChartData = (
   selectedFileName: string | null,
-  setChartData: (data: any) => void
+  setLoopMeasurementCurveChartData: (data: any) => void
 ) => {
   if (!selectedFileName) {
     console.error("Kein Dateiname in Redux gespeichert.");
@@ -20,7 +20,7 @@ export const loadTDRChartData = (
     .then((response) => response.json())
     .then((data) => {
       console.log("Geladene TDR-Daten:", data);
-      setChartData(data);
+      setLoopMeasurementCurveChartData(data);
       createTDRChart(data);
     })
     .catch((error) => console.error("Fehler beim Laden der TDR-Daten:", error));