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:
@@ -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"
|
||||||
|
|||||||
@@ -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>) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user