From c0101b35ab6011c7c08853d69f58b368c5a88fdf Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sat, 22 Feb 2025 16:32:40 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20Umbenennung=20von=20'chartData'=20i?= =?UTF-8?q?n=20Redux=20kabelueberwachung=20Slice=20zu=20'loopMeasurementCu?= =?UTF-8?q?rveChartData'=20f=C3=BCr=20bessere=20Klarheit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../kue705FO/Charts/ChartSwitcher.tsx | 2 +- .../LoopMeasurementChart/LoopChartActionBar.tsx | 4 ++-- .../LoopMeasurementChart/LoopMeasurementChart.tsx | 8 ++++---- .../kue705FO/Charts/TDRChart/TDRChart.tsx | 10 ++++++---- .../kue705FO/Charts/TDRChart/TDRChartActionBar.tsx | 9 ++++----- .../main/kabelueberwachung/kue705FO/Kue705FO.tsx | 9 +++++---- redux/slices/chartDataSlice.ts | 11 +++++++---- redux/slices/kabelueberwachungChartSlice.ts | 10 +++++----- redux/store.ts | 2 +- utils/loadLoopChartData.ts | 4 ++-- utils/loadTDRChartData.ts | 4 ++-- 11 files changed, 39 insertions(+), 34 deletions(-) diff --git a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx index 2acca9a..c72fa2e 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx @@ -17,7 +17,7 @@ interface ChartSwitcherProps { const ChartSwitcher: React.FC = ({ 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** diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx index 5d1905d..52ae8a9 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx +++ b/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) { diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index 33762ae..69353a5 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/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 (
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx index 0ed26df..ab88f1d 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx @@ -9,14 +9,16 @@ const TDRChart: React.FC = () => { const chartInstance = useRef(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 (
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx index 32a1bc7..5f7216f 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx +++ b/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(null); // Zustand für die Chart-Daten - const [chartData, setChartData] = useState< - { timestamp: string; tdr: number }[] - >([]); + const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] = + 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); diff --git a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx index 46845ca..fbf3bf7 100644 --- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx +++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx @@ -73,13 +73,14 @@ const Kue705FO: React.FC = ({ >(); //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) { - dispatch(setSelectedChartData(chartData)); + if (loopMeasurementCurveChartData) { + 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 { diff --git a/redux/slices/chartDataSlice.ts b/redux/slices/chartDataSlice.ts index 9a01b19..d9c1ed1 100644 --- a/redux/slices/chartDataSlice.ts +++ b/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) => { + setLoopMeasurementCurveChartData: (state, action: PayloadAction) => { state.data = action.payload; }, clearChartData: (state) => { @@ -26,6 +26,9 @@ export const chartDataSlice = createSlice({ }, }); -export const { setChartData, clearChartData, setActiveMode } = - chartDataSlice.actions; +export const { + setLoopMeasurementCurveChartData, + clearChartData, + setActiveMode, +} = chartDataSlice.actions; export default chartDataSlice.reducer; diff --git a/redux/slices/kabelueberwachungChartSlice.ts b/redux/slices/kabelueberwachungChartSlice.ts index ff071e2..6a05b90 100644 --- a/redux/slices/kabelueberwachungChartSlice.ts +++ b/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) => { state.slotNumber = action.payload; }, - setChartData: (state, action: PayloadAction) => { - state.chartData = action.payload; + setLoopMeasurementCurveChartData: (state, action: PayloadAction) => { + state.loopMeasurementCurveChartData = action.payload; }, setVonDatum: (state, action: PayloadAction) => { 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, diff --git a/redux/store.ts b/redux/store.ts index 4c9e2a5..a8ab442 100644 --- a/redux/store.ts +++ b/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, diff --git a/utils/loadLoopChartData.ts b/utils/loadLoopChartData.ts index 57b5e93..8cb0161 100644 --- a/utils/loadLoopChartData.ts +++ b/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) => diff --git a/utils/loadTDRChartData.ts b/utils/loadTDRChartData.ts index 3d6d6f7..e171d22 100644 --- a/utils/loadTDRChartData.ts +++ b/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));