tdrChartData und loopMeasurementCurveChartData in einem Redux Slice kabelueberwachung für bessere Struktur
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
@@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user