tdrChartData und loopMeasurementCurveChartData in einem Redux Slice kabelueberwachung für bessere Struktur

This commit is contained in:
Ismail Ali
2025-02-22 16:57:40 +01:00
parent c0101b35ab
commit 9b5a502ab6
6 changed files with 46 additions and 48 deletions

View File

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

View File

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

View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.88";
const webVersion = "1.6.89";
export default webVersion;

View File

@@ -1,5 +1,14 @@
// redux/slices/kabelueberwachungChartSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
// Definition des Interface für den Zustand des TDR-Charts
interface TDRData {
timestamp: string;
tdr: number;
}
// Definition des Interface für den gesamten Zustand der Kabelüberwachung
interface KabelueberwachungChartState {
loopMeasurementCurveChartData: any[];
vonDatum: string;
@@ -7,9 +16,11 @@ interface KabelueberwachungChartState {
selectedMode: "DIA0" | "DIA1" | "DIA2";
selectedSlotType: "isolationswiderstand" | "schleifenwiderstand";
isChartOpen: boolean;
slotNumber: number | null; // NEU: Slot-Nummer speichern
slotNumber: number | null;
tdrChartData: TDRData[]; // Hinzufügen des TDR-Datenzustands
}
// Initialer Zustand des Slices
const initialState: KabelueberwachungChartState = {
loopMeasurementCurveChartData: [],
vonDatum: "2025-02-01",
@@ -17,52 +28,70 @@ const initialState: KabelueberwachungChartState = {
selectedMode: "DIA0",
selectedSlotType: "schleifenwiderstand",
isChartOpen: false,
slotNumber: null, // Standard: Kein Slot gewählt
slotNumber: null,
tdrChartData: [], // Initialisierung mit leerem Array
};
// Erstellung des Slices
const kabelueberwachungChartSlice = createSlice({
name: "kabelueberwachungChart",
initialState,
reducers: {
// Aktion zum Setzen der Slot-Nummer
setSlotNumber: (state, action: PayloadAction<number | null>) => {
state.slotNumber = action.payload;
},
// Aktion zum Setzen der Schleifenmesskurven-Daten
setLoopMeasurementCurveChartData: (state, action: PayloadAction<any[]>) => {
state.loopMeasurementCurveChartData = action.payload;
},
// Aktion zum Setzen des Startdatums
setVonDatum: (state, action: PayloadAction<string>) => {
state.vonDatum = action.payload.replace(/-/g, ";"); // Speichert als "YYYY;MM;DD"
state.vonDatum = action.payload.replace(/-/g, ";");
},
// Aktion zum Setzen des Enddatums
setBisDatum: (state, action: PayloadAction<string>) => {
state.bisDatum = action.payload.replace(/-/g, ";"); // Speichert als "YYYY;MM;DD"
state.bisDatum = action.payload.replace(/-/g, ";");
},
// Aktion zum Setzen des ausgewählten Modus
setSelectedMode: (
state,
action: PayloadAction<"DIA0" | "DIA1" | "DIA2">
) => {
state.selectedMode = action.payload;
},
// Aktion zum Setzen des ausgewählten Slot-Typs
setSelectedSlotType: (
state,
action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand">
) => {
state.selectedSlotType = action.payload;
},
// Aktion zum Öffnen oder Schließen des Charts
setChartOpen: (state, action: PayloadAction<boolean>) => {
state.isChartOpen = action.payload;
},
// Aktion zum Setzen der TDR-Charts-Daten
setTDRChartData: (
state,
action: PayloadAction<{ timestamp: string; tdr: number }[]>
) => {
state.tdrChartData = action.payload;
},
},
});
// Export der Aktionen
export const {
setSlotNumber,
setLoopMeasurementCurveChartData,
setVonDatum,
setBisDatum,
setSelectedMode,
setSelectedSlotType,
setChartOpen,
setSlotNumber, // NEU: Action für Slot-Nummer exportieren
setTDRChartData,
} = kabelueberwachungChartSlice.actions;
// Export des Reducers
export default kabelueberwachungChartSlice.reducer;

View File

@@ -1,26 +0,0 @@
// redux/slices/tdrChartDataSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface TDRChartDataState {
data: { timestamp: string; tdr: number }[];
}
const initialState: TDRChartDataState = {
data: [],
};
const tdrChartDataSlice = createSlice({
name: "tdrChartData",
initialState,
reducers: {
setTDRChartData(
state,
action: PayloadAction<{ timestamp: string; tdr: number }[]>
) {
state.data = action.payload;
},
},
});
export const { setTDRChartData } = tdrChartDataSlice.actions;
export default tdrChartDataSlice.reducer;

View File

@@ -6,7 +6,6 @@ import chartDataReducer from "./slices/chartDataSlice";
import webVersionReducer from "./slices/webVersionSlice";
import digitalInputsReducer from "./slices/digitalInputsSlice";
import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice";
import tdrChartDataReducer from "./slices/tdrChartDataSlice";
const store = configureStore({
reducer: {
@@ -16,7 +15,6 @@ const store = configureStore({
webVersion: webVersionReducer,
digitalInputs: digitalInputsReducer,
kabelueberwachungChart: kabelueberwachungChartReducer,
tdrChartData: tdrChartDataReducer,
},
});