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

63
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/CustomTooltip.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import React from "react";
interface CustomTooltipProps {
active?: boolean;
payload?: any[];
label?: string;
unit?: string;
}
const CustomTooltip: React.FC<CustomTooltipProps> = ({
active,
payload,
label,
unit,
}) => {
if (active && payload && payload.length) {
const messwertMax = payload.find((p) => p.dataKey === "messwertMaximum");
const messwert = payload.find((p) => p.dataKey === "messwert");
const messwertMin = payload.find((p) => p.dataKey === "messwertMinimum");
const messwertDurchschnitt = payload.find(
(p) => p.dataKey === "messwertDurchschnitt"
);
return (
<div
style={{
background: "white",
padding: "8px",
border: "1px solid lightgrey",
borderRadius: "5px",
}}
>
<strong>{new Date(label as string).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;
};
export default CustomTooltip;

4
components/main/kabelueberwachung/kue705FO/Charts/DateRangePicker.tsx → components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
View File

@@ -1,11 +1,11 @@
import React from "react";
import DatePicker from "react-datepicker";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../redux/store";
import { RootState } from "../../../../../../redux/store";
import {
setVonDatum,
setBisDatum,
} from "../../../../../redux/slices/kabelueberwachungChartSlice";
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
import "react-datepicker/dist/react-datepicker.css";
// ✅ Props definieren

2
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
View File

@@ -1,6 +1,6 @@
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
import React, { useEffect, useMemo } from "react";
import DateRangePicker from "../DateRangePicker";
import DateRangePicker from "./DateRangePicker";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import {

203
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy 2.tsx
View File

@@ -1,203 +0,0 @@
"use client";
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import {
setVonDatum,
setBisDatum,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
import {
ComposedChart,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
Line,
Brush,
Area,
} from "recharts";
// Benutzerdefinierter Tooltip für die richtige Anordnung der Werte
const CustomTooltip = ({ active, payload, label }: 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",
textAlign: "center",
}}
>
<strong>{new Date(label).toLocaleString()}</strong>
<div style={{ color: "grey" }}>
{messwertMax
? `Messwert Maximum: ${messwertMax.value.toFixed(2)} kOhm`
: ""}
</div>
<div style={{ color: "#00AEEF", fontWeight: "bold" }}>
{messwert ? `Messwert: ${messwert.value.toFixed(2)} kOhm` : ""}
{messwertDurchschnitt
? `Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed(
2
)} kOhm`
: ""}
</div>
<div style={{ color: "grey" }}>
{messwertMin
? `Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm`
: ""}
</div>
</div>
);
}
return null;
};
const LoopMeasurementChart = () => {
const littwinBlue = getComputedStyle(
document.documentElement
).getPropertyValue("--littwin-blue");
const dispatch = useDispatch();
const istVollbild = useSelector(
(state: RootState) => state.kabelueberwachungChart.isFullScreen
);
const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
(state: RootState) => state.kabelueberwachungChart
);
const ausgewaehlterModus = useSelector(
(state: RootState) => state.kabelueberwachungChart.selectedMode
);
// Konvertiere Daten für den Chart & kehre Reihenfolge um
const formatierteDaten = loopMeasurementCurveChartData
.map((eintrag) => ({
zeit: new Date(eintrag.t).getTime(), // Zeitstempel
messwertMinimum: eintrag.i, // Minimum (Tiefstwert)
messwertMaximum: eintrag.a, // Maximum (Höchstwert)
messwert: eintrag.m ?? null, // Aktueller Messwert
messwertDurchschnitt:
ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2"
? eintrag.g ?? null
: null, // Durchschnittswert nur in DIA1 & DIA2
}))
.reverse(); // Hier wird die Reihenfolge umgekehrt
// Berechnung des minimalen Werts für Y-Achse
const minMesswert = Math.min(
...loopMeasurementCurveChartData.map((entry) => entry.i)
);
const [zoomedXDomain, setZoomedXDomain] = useState([
new Date(vonDatum).getTime(),
new Date(bisDatum).getTime(),
]);
const handleZoom = (domain: any) => {
setZoomedXDomain(domain);
};
return (
<div
style={{
position: "relative",
width: "100%",
height: istVollbild ? "90%" : "400px",
}}
>
<ResponsiveContainer width="100%" height="100%">
<ComposedChart data={formatierteDaten}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="zeit"
domain={zoomedXDomain}
tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
/>
<YAxis
label={{ value: "kOhm", angle: -90, position: "insideLeft" }}
domain={[minMesswert, "auto"]}
tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
/>
<Tooltip content={<CustomTooltip />} />
{/* Manuell definierte Legende mit der richtigen Reihenfolge */}
<Legend
payload={[
{ value: "Messwert Maximum", type: "line", color: "lightgrey" },
ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2"
? {
value: "Messwert Durchschnitt",
type: "line",
color: littwinBlue,
}
: { value: "Messwert", type: "line", color: littwinBlue },
{ value: "Messwert Minimum", type: "line", color: "lightgrey" },
]}
/>
{/* Messwert Minimum als Linie */}
<Line
type="monotone"
dataKey="messwertMinimum"
stroke="lightgrey"
dot={false}
name="Messwert Minimum"
/>
{/* Messwert Maximum als Linie */}
<Line
type="monotone"
dataKey="messwertMaximum"
stroke="lightgrey"
dot={false}
name="Messwert Maximum"
/>
{/* Messwert Durchschnitt (nur in DIA1 & DIA2) */}
{(ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2") && (
<Line
type="monotone"
dataKey="messwertDurchschnitt"
stroke={littwinBlue}
dot={true}
name="Messwert Durchschnitt"
/>
)}
{/* Messwert als Punktdiagramm */}
{ausgewaehlterModus === "DIA0" && (
<Line
type="monotone"
dataKey="messwert"
stroke={littwinBlue}
dot={true}
name="Messwert"
/>
)}
<Brush
dataKey="zeit"
height={30}
stroke="#8884d8"
onChange={handleZoom}
/>
</ComposedChart>
</ResponsiveContainer>
</div>
);
};
export default LoopMeasurementChart;

189
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy 3.tsx
View File

@@ -1,189 +0,0 @@
"use client";
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import {
setVonDatum,
setBisDatum,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
import {
ComposedChart,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
Line,
} from "recharts";
// 📌 Benutzerdefinierter Tooltip für die richtige Anordnung der Werte
const CustomTooltip = ({ active, payload, label }: 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",
textAlign: "center",
}}
>
<strong>{new Date(label).toLocaleString()}</strong>
<div style={{ color: "grey" }}>
{messwertMax
? `Messwert Maximum: ${messwertMax.value.toFixed(2)} kOhm`
: ""}
</div>
<div style={{ color: "#00AEEF", fontWeight: "bold" }}>
{messwert ? `Messwert: ${messwert.value.toFixed(2)} kOhm` : ""}
{messwertDurchschnitt
? `Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed(
2
)} kOhm`
: ""}
</div>
<div style={{ color: "grey" }}>
{messwertMin
? `Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm`
: ""}
</div>
</div>
);
}
return null;
};
const LoopMeasurementChart = () => {
const littwinBlue = getComputedStyle(
document.documentElement
).getPropertyValue("--littwin-blue");
const dispatch = useDispatch();
const istVollbild = useSelector(
(state: RootState) => state.kabelueberwachungChart.isFullScreen
);
const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
(state: RootState) => state.kabelueberwachungChart
);
const ausgewaehlterModus = useSelector(
(state: RootState) => state.kabelueberwachungChart.selectedMode
);
// 📌 Konvertiere Daten für den Chart & kehre Reihenfolge um
const formatierteDaten = loopMeasurementCurveChartData
.map((eintrag) => ({
zeit: new Date(eintrag.t).getTime(), // Zeitstempel
messwertMinimum: eintrag.i, // Minimum (Tiefstwert)
messwertMaximum: eintrag.a, // Maximum (Höchstwert)
messwert: eintrag.m ?? null, // Aktueller Messwert
messwertDurchschnitt:
ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2"
? eintrag.g ?? null
: null, // Durchschnittswert nur in DIA1 & DIA2
}))
.reverse(); // 🔄 Hier wird die Reihenfolge umgekehrt
// Berechnung des minimalen Werts für Y-Achse
const minMesswert = Math.min(
...loopMeasurementCurveChartData.map((entry) => entry.i)
);
return (
<div
style={{
position: "relative",
width: "100%",
height: istVollbild ? "90%" : "400px",
}}
>
<ResponsiveContainer width="100%" height="100%">
<ComposedChart data={formatierteDaten}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="zeit"
domain={[
new Date(vonDatum).getTime(),
new Date(bisDatum).getTime(),
]}
tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
/>
<YAxis
label={{ value: "kOhm", angle: -90, position: "insideLeft" }}
domain={[minMesswert, "auto"]}
tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
/>
<Tooltip content={<CustomTooltip />} />
{/* 📌 Manuell definierte Legende mit der richtigen Reihenfolge */}
<Legend
payload={[
{ value: "Messwert Maximum", type: "line", color: "lightgrey" },
ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2"
? {
value: "Messwert Durchschnitt",
type: "line",
color: littwinBlue,
}
: { value: "Messwert", type: "line", color: littwinBlue },
{ value: "Messwert Minimum", type: "line", color: "lightgrey" },
]}
/>
{/* Messwert Minimum als Linie */}
<Line
type="monotone"
dataKey="messwertMinimum"
stroke="lightgrey"
dot={false}
name="Messwert Minimum"
/>
{/* Messwert Maximum als Linie */}
<Line
type="monotone"
dataKey="messwertMaximum"
stroke="lightgrey"
dot={false}
name="Messwert Maximum"
/>
{/* Messwert Durchschnitt (nur in DIA1 & DIA2) */}
{(ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2") && (
<Line
type="monotone"
dataKey="messwertDurchschnitt"
stroke={littwinBlue}
dot={true}
name="Messwert Durchschnitt"
/>
)}
{/* Messwert als Punktdiagramm */}
{ausgewaehlterModus === "DIA0" && (
<Line
type="monotone"
dataKey="messwert"
stroke={littwinBlue}
dot={true}
name="Messwert"
/>
)}
</ComposedChart>
</ResponsiveContainer>
</div>
);
};
export default LoopMeasurementChart;

188
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy.tsx
View File

@@ -1,188 +0,0 @@
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useEffect, useRef, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";
import {
setVonDatum,
setBisDatum,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
const LoopMeasurementChart = () => {
const dispatch = useDispatch();
const isFullScreen = useSelector(
(state: RootState) => state.kabelueberwachungChart.isFullScreen
);
const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
(state: RootState) => state.kabelueberwachungChart
);
const selectedMode = useSelector(
(state: RootState) => state.kabelueberwachungChart.selectedMode
);
const chartRef = useRef<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(null);
const [zoomPlugin, setZoomPlugin] = useState<any>(null);
useEffect(() => {
if (typeof window !== "undefined") {
import("chartjs-plugin-zoom").then((mod) => {
setZoomPlugin(mod.default);
Chart.register(mod.default);
});
}
}, []);
useEffect(() => {
if (chartRef.current) {
if (chartInstance.current) {
chartInstance.current.destroy();
}
console.log("Chart Data:", loopMeasurementCurveChartData);
console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum);
console.log("Selected Mode:", selectedMode);
// Basis-Datasets für alle Datenpunkte
const datasets = [
{
label: "Messwert Minimum ",
data: loopMeasurementCurveChartData.map((entry) => ({
x: new Date(entry.t).getTime(),
y: entry.i,
})),
borderColor: "rgba(75, 192, 192, 1)", // Türkis
backgroundColor: "rgba(75, 192, 192, 0.2)",
fill: false,
},
{
label: "Messwert Maximum ",
data: loopMeasurementCurveChartData.map((entry) => ({
x: new Date(entry.t).getTime(),
y: entry.a,
})),
borderColor: "rgba(192, 75, 75, 1)", // Rot
backgroundColor: "rgba(192, 75, 75, 0.2)",
fill: false,
},
];
// Falls DIA0: `m` als aktueller Messwert verwenden
if (
selectedMode === "DIA0" &&
loopMeasurementCurveChartData.some((entry) => entry.m !== undefined)
) {
datasets.push({
label: "Messwert",
data: loopMeasurementCurveChartData.map((entry) => ({
x: new Date(entry.t).getTime(),
y: entry.m ?? NaN,
})),
borderColor: "rgba(255, 165, 0, 1)", // Orange
backgroundColor: "rgba(255, 165, 0, 0.2)",
fill: false,
});
}
// Falls DIA1 oder DIA2: `g` als Durchschnittswert verwenden
if (
(selectedMode === "DIA1" || selectedMode === "DIA2") &&
loopMeasurementCurveChartData.some((entry) => entry.g !== undefined)
) {
datasets.push({
label: "Messwert Durchschnitt", // g als Durchschnittswert verwenden
data: loopMeasurementCurveChartData.map((entry) => ({
x: new Date(entry.t).getTime(),
y: entry.g ?? NaN,
})),
borderColor: "rgba(75, 75, 192, 1)", // Blau
backgroundColor: "rgba(75, 75, 192, 0.2)",
fill: false,
});
}
const ctx = chartRef.current.getContext("2d");
if (ctx) {
chartInstance.current = new Chart(ctx, {
type: "line",
data: { datasets },
options: {
responsive: true,
maintainAspectRatio: false,
animation: false,
elements: {
line: { spanGaps: true },
},
scales: {
x: {
type: "time",
time: {
unit: "day",
tooltipFormat: "dd.MM.yyyy HH:mm",
displayFormats: { day: "dd.MM.yyyy" },
},
title: { display: true, text: "" }, // kann Zeit oder Datum eingefügt werden für X-Achse
min: new Date(vonDatum).getTime(),
max: new Date(bisDatum).getTime(),
},
y: {
ticks: {
callback: (value) =>
(typeof value === "number" ? value.toFixed(2) : value) +
" kOhm",
},
},
},
plugins: {
tooltip: {
callbacks: {
label: (tooltipItem) => {
const rawItem = tooltipItem.raw as { x: number; y: number };
return `${tooltipItem.dataset.label}: ${rawItem.y.toFixed(
2
)} kOhm`;
},
},
},
zoom: {
pan: { enabled: true, mode: "xy" },
zoom: {
wheel: { enabled: true },
pinch: { enabled: true },
mode: "xy",
onZoomComplete: (chart) => {
const xScale = chart.chart.scales.x;
const newVonDatum = new Date(xScale.min)
.toISOString()
.split("T")[0];
const newBisDatum = new Date(xScale.max)
.toISOString()
.split("T")[0];
dispatch(setVonDatum(newVonDatum));
dispatch(setBisDatum(newBisDatum));
},
},
},
},
},
});
}
}
}, [loopMeasurementCurveChartData, vonDatum, bisDatum, selectedMode]);
return (
<div
style={{
position: "relative",
width: "100%",
height: isFullScreen ? "90%" : "400px",
}}
>
<canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
</div>
);
};
export default LoopMeasurementChart;

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();

2
config/webVersion.ts
View File

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

7
public/CPLmockData/kuesChartData/slot1/schleifenwiderstand/DIA0.json
View File

@@ -2470,5 +2470,10 @@
{ "t": "2025-03-08 06:12:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-03-08 06:09:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-03-08 06:06:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-01-01 06:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }
{ "t": "2025-01-01 06:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-01-01 05:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-01-01 04:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-01-01 03:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-01-01 02:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-01-01 01:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }
]