feat: Dynamische Einheit in Redux für Schleifen- und Isolationswiderstand hinzugefügt

- Redux-Slice erweitert um `unit`-State (kOhm/MOhm)
- `setSelectedSlotType` aktualisiert die Einheit basierend auf der Auswahl
- Dropdown in `LoopChartActionBar.tsx` angepasst, um Einheit zu setzen
- Y-Achse und Tooltip in `LoopMeasurementChart.tsx` zeigen dynamisch die Einheit aus Redux
- Initialwert von `bisDatum` auf das heutige Datum gesetzt
This commit is contained in:
ISA
2025-03-14 08:49:28 +01:00
parent e426cd6218
commit 8c638acfc7
2 changed files with 15 additions and 9 deletions

View File

@@ -15,7 +15,7 @@ import {
} from "recharts"; } from "recharts";
import { setBrushRange } from "../../../../../../redux/slices/brushSlice"; import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
const CustomTooltip = ({ active, payload, label }: any) => { const CustomTooltip = ({ active, payload, label, unit }: any) => {
if (active && payload && payload.length) { if (active && payload && payload.length) {
const messwertMax = payload.find( const messwertMax = payload.find(
(p: any) => p.dataKey === "messwertMaximum" (p: any) => p.dataKey === "messwertMaximum"
@@ -40,12 +40,12 @@ const CustomTooltip = ({ active, payload, label }: any) => {
<strong>{new Date(label).toLocaleString()}</strong> <strong>{new Date(label).toLocaleString()}</strong>
{messwertMax && ( {messwertMax && (
<div style={{ color: "grey" }}> <div style={{ color: "grey" }}>
Messwert Maximum: {messwertMax.value.toFixed(2)} kOhm Messwert Maximum: {messwertMax.value.toFixed(2)} {unit}
</div> </div>
)} )}
{messwert && ( {messwert && (
<div style={{ color: "#00AEEF", fontWeight: "bold" }}> <div style={{ color: "#00AEEF", fontWeight: "bold" }}>
Messwert: {messwert.value.toFixed(2)} kOhm Messwert: {messwert.value.toFixed(2)} {unit}
</div> </div>
)} )}
{messwertDurchschnitt && ( {messwertDurchschnitt && (
@@ -53,12 +53,12 @@ const CustomTooltip = ({ active, payload, label }: any) => {
style={{ color: "#00AEEF" }} style={{ color: "#00AEEF" }}
>{`Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed( >{`Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed(
2 2
)} kOhm`}</div> )} ${unit}`}</div>
)} )}
{messwertMin && ( {messwertMin && (
<div <div
style={{ color: "grey" }} style={{ color: "grey" }}
>{`Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm`}</div> >{`Messwert Minimum: ${messwertMin.value.toFixed(2)} ${unit}`}</div>
)} )}
</div> </div>
); );
@@ -68,6 +68,9 @@ const CustomTooltip = ({ active, payload, label }: any) => {
const LoopMeasurementChart = () => { const LoopMeasurementChart = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const unit = useSelector(
(state: RootState) => state.kabelueberwachungChart.unit
);
const brushRange = useSelector((state: RootState) => state.brush); const brushRange = useSelector((state: RootState) => state.brush);
const { const {
@@ -156,11 +159,11 @@ const LoopMeasurementChart = () => {
tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()} tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
/> />
<YAxis <YAxis
label={{ value: "kOhm", angle: -90, position: "insideLeft" }} label={{ value: unit, angle: -90, position: "insideLeft" }}
domain={["auto", "auto"]} domain={["auto", "auto"]}
tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`} tickFormatter={(wert) => `${wert.toFixed(0)} `}
/> />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip unit={unit} />} />
<Legend <Legend
verticalAlign="top" verticalAlign="top"
align="center" align="center"

View File

@@ -19,19 +19,21 @@ interface KabelueberwachungChartState {
slotNumber: number | null; slotNumber: number | null;
tdrChartData: TDRData[]; // Hinzufügen des TDR-Datenzustands tdrChartData: TDRData[]; // Hinzufügen des TDR-Datenzustands
isFullScreen: boolean; isFullScreen: boolean;
unit: "kOhm" | "MOhm"; // 🆕 Einheit für Messwerte
} }
// Initialer Zustand des Slices // Initialer Zustand des Slices
const initialState: KabelueberwachungChartState = { const initialState: KabelueberwachungChartState = {
loopMeasurementCurveChartData: [], loopMeasurementCurveChartData: [],
vonDatum: "2025-02-01", vonDatum: "2025-02-01",
bisDatum: "2025-02-28", bisDatum: new Date().toISOString().split("T")[0], // Heutiges Datum als Standardwert
selectedMode: "DIA0", selectedMode: "DIA0",
selectedSlotType: "schleifenwiderstand", selectedSlotType: "schleifenwiderstand",
isChartOpen: false, isChartOpen: false,
slotNumber: null, slotNumber: null,
tdrChartData: [], // Initialisierung mit leerem Array tdrChartData: [], // Initialisierung mit leerem Array
isFullScreen: false, isFullScreen: false,
unit: "kOhm", // Standard auf Schleifenwiderstand (kOhm)
}; };
// Erstellung des Slices // Erstellung des Slices
@@ -68,6 +70,7 @@ const kabelueberwachungChartSlice = createSlice({
action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand"> action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand">
) => { ) => {
state.selectedSlotType = action.payload; state.selectedSlotType = action.payload;
state.unit = action.payload === "schleifenwiderstand" ? "kOhm" : "MOhm"; // 🆕 Einheit setzen
}, },
// Aktion zum Öffnen oder Schließen des Charts // Aktion zum Öffnen oder Schließen des Charts
setChartOpen: (state, action: PayloadAction<boolean>) => { setChartOpen: (state, action: PayloadAction<boolean>) => {