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