WIP: Brush funktioniert in Chart, aber soll Datum in Brush angezeigt
This commit is contained in:
Ismail Ali
@@ -0,0 +1,203 @@
|
||||
"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;
|
||||
@@ -0,0 +1,189 @@
|
||||
"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;
|
||||
@@ -0,0 +1,188 @@
|
||||
"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;
|
||||
@@ -1,189 +1,168 @@
|
||||
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
"use client";
|
||||
import React, { useCallback, useEffect, useMemo } 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";
|
||||
ComposedChart,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
Line,
|
||||
Brush,
|
||||
} from "recharts";
|
||||
import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
|
||||
|
||||
const LoopMeasurementChart = () => {
|
||||
const dispatch = useDispatch();
|
||||
const isFullScreen = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChart.isFullScreen
|
||||
const CustomTooltip = ({ active, payload, label }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
const messwertMax = payload.find(
|
||||
(p: any) => p.dataKey === "messwertMaximum"
|
||||
);
|
||||
const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChart
|
||||
const messwert = payload.find((p: any) => p.dataKey === "messwert");
|
||||
const messwertMin = payload.find(
|
||||
(p: any) => p.dataKey === "messwertMinimum"
|
||||
);
|
||||
const selectedMode = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChart.selectedMode
|
||||
const messwertDurchschnitt = payload.find(
|
||||
(p: any) => p.dataKey === "messwertDurchschnitt"
|
||||
);
|
||||
|
||||
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: {
|
||||
tension: 0.4, // Sorgt für eine weichere Kurve
|
||||
cubicInterpolationMode: "monotone",
|
||||
},
|
||||
},
|
||||
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",
|
||||
background: "white",
|
||||
padding: "8px",
|
||||
border: "1px solid lightgrey",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
<canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
|
||||
<strong>{new Date(label).toLocaleString()}</strong>
|
||||
{messwertMax && (
|
||||
<div style={{ color: "grey" }}>
|
||||
Messwert Maximum: {messwertMax.value.toFixed(2)} kOhm
|
||||
</div>
|
||||
)}
|
||||
{messwert && (
|
||||
<div style={{ color: "#00AEEF", fontWeight: "bold" }}>
|
||||
Messwert: {messwert.value.toFixed(2)} kOhm
|
||||
</div>
|
||||
)}
|
||||
{messwertDurchschnitt && (
|
||||
<div
|
||||
style={{ color: "#00AEEF" }}
|
||||
>{`Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed(
|
||||
2
|
||||
)} kOhm`}</div>
|
||||
)}
|
||||
{messwertMin && (
|
||||
<div
|
||||
style={{ color: "grey" }}
|
||||
>{`Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm`}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const LoopMeasurementChart = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const brushRange = useSelector((state: RootState) => state.brush);
|
||||
const {
|
||||
loopMeasurementCurveChartData,
|
||||
selectedMode,
|
||||
vonDatum,
|
||||
bisDatum,
|
||||
isFullScreen,
|
||||
} = useSelector((state: RootState) => state.kabelueberwachungChart);
|
||||
|
||||
const formatierteDaten = useMemo(
|
||||
() =>
|
||||
loopMeasurementCurveChartData
|
||||
.map((eintrag) => ({
|
||||
zeit: new Date(eintrag.t).getTime(),
|
||||
messwertMinimum: eintrag.i,
|
||||
messwertMaximum: eintrag.a,
|
||||
messwert: eintrag.m ?? null,
|
||||
messwertDurchschnitt: ["DIA1", "DIA2"].includes(selectedMode)
|
||||
? eintrag.g ?? null
|
||||
: null,
|
||||
}))
|
||||
.reverse(),
|
||||
[loopMeasurementCurveChartData, selectedMode]
|
||||
);
|
||||
|
||||
// Initialisierung des Brush-Bereichs nur beim ersten Laden der Daten
|
||||
useEffect(() => {
|
||||
if (brushRange.endIndex === 0 && formatierteDaten.length) {
|
||||
dispatch(
|
||||
setBrushRange({
|
||||
startIndex: 0,
|
||||
endIndex: formatierteDaten.length - 1,
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [formatierteDaten, brushRange.endIndex, dispatch]);
|
||||
|
||||
const handleBrushChange = useCallback(
|
||||
({ startIndex, endIndex }) => {
|
||||
dispatch(setBrushRange({ startIndex, endIndex }));
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<ComposedChart data={formatierteDaten}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="zeit"
|
||||
domain={["dataMin", "dataMax"]}
|
||||
tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
|
||||
/>
|
||||
<YAxis
|
||||
label={{ value: "kOhm", angle: -90, position: "insideLeft" }}
|
||||
domain={["auto", "auto"]}
|
||||
tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="messwertMinimum"
|
||||
stroke="lightgrey"
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="messwertMaximum"
|
||||
stroke="lightgrey"
|
||||
dot={false}
|
||||
/>
|
||||
{["DIA1", "DIA2"].includes(selectedMode) && (
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="messwertDurchschnitt"
|
||||
stroke="#00AEEF"
|
||||
dot
|
||||
/>
|
||||
)}
|
||||
{selectedMode === "DIA0" && (
|
||||
<Line type="monotone" dataKey="messwert" stroke="#00AEEF" dot />
|
||||
)}
|
||||
<Brush
|
||||
dataKey="zeit"
|
||||
height={30}
|
||||
stroke="#8884d8"
|
||||
onChange={handleBrushChange}
|
||||
startIndex={brushRange.startIndex}
|
||||
endIndex={brushRange.endIndex || formatierteDaten.length - 1}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,5 +6,5 @@
|
||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||
|
||||
*/
|
||||
const webVersion = "1.6.119";
|
||||
const webVersion = "1.6.120";
|
||||
export default webVersion;
|
||||
|
||||
19
redux/slices/brushSlice.ts
Normal file
19
redux/slices/brushSlice.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
// brushSlice.ts (✅ Korrekt)
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const brushSlice = createSlice({
|
||||
name: "brush",
|
||||
initialState: {
|
||||
startIndex: 0,
|
||||
endIndex: 0,
|
||||
},
|
||||
reducers: {
|
||||
setBrushRange(state, action) {
|
||||
state.startIndex = action.payload.startIndex;
|
||||
state.endIndex = action.payload.endIndex;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setBrushRange } = brushSlice.actions;
|
||||
export default brushSlice.reducer;
|
||||
@@ -11,6 +11,7 @@ import systemSettingsReducer from "./slices/systemSettingsSlice";
|
||||
import opcuaSettingsReducer from "./slices/opcuaSettingsSlice";
|
||||
import digitalOutputsReducer from "./slices/digitalOutputsSlice";
|
||||
import analogeEingaengeReducer from "./slices/analogeEingaengeSlice";
|
||||
import brushReducer from "./slices/brushSlice";
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
@@ -25,6 +26,7 @@ const store = configureStore({
|
||||
opcuaSettings: opcuaSettingsReducer,
|
||||
digitalOutputs: digitalOutputsReducer,
|
||||
analogeEingaenge: analogeEingaengeReducer,
|
||||
brush: brushReducer,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--littwin-blue: #00aeef;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
Reference in New Issue
Block a user