Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: CustomTooltip in eigene Komponente ausgelagert

Browse Source 
- CustomTooltip in `CustomTooltip.tsx` ausgelagert für bessere Code-Struktur
- `LoopMeasurementChart.tsx` angepasst und `CustomTooltip` importiert
- Verbesserung der Wiederverwendbarkeit und Lesbarkeit des Codes
This commit is contained in:
ISA
2025-03-19 07:55:04 +01:00
parent 49e7d6c6c4
commit f957d477c8
9 changed files with 75 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -1,4 +1,4 @@
"use client";
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useCallback, useEffect, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
@@ -15,56 +15,7 @@ import {
} from "recharts";
import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
const CustomTooltip = ({ active, payload, label, unit }: any) => {
if (active && payload && payload.length) {
const messwertMax = payload.find(
(p: any) => p.dataKey === "messwertMaximum"
);
const messwert = payload.find((p: any) => p.dataKey === "messwert");
const messwertMin = payload.find(
(p: any) => p.dataKey === "messwertMinimum"
);
const messwertDurchschnitt = payload.find(
(p: any) => p.dataKey === "messwertDurchschnitt"
);
return (
<div
style={{
background: "white",
padding: "8px",
border: "1px solid lightgrey",
borderRadius: "5px",
}}
>
<strong>{new Date(label).toLocaleString()}</strong>
{messwertMax && (
<div style={{ color: "grey" }}>
Messwert Maximum: {messwertMax.value.toFixed(2)} {unit}
</div>
)}
{messwert && (
<div style={{ color: "#00AEEF", fontWeight: "bold" }}>
Messwert: {messwert.value.toFixed(2)} {unit}
</div>
)}
{messwertDurchschnitt && (
<div
style={{ color: "#00AEEF" }}
>{`Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed(
2
)} ${unit}`}</div>
)}
{messwertMin && (
<div
style={{ color: "grey" }}
>{`Messwert Minimum: ${messwertMin.value.toFixed(2)} ${unit}`}</div>
)}
</div>
);
}
return null;
};
import CustomTooltip from "./CustomTooltip";
const LoopMeasurementChart = () => {
const dispatch = useDispatch();