diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index 0bf3815..2ecbce0 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx @@ -4,7 +4,6 @@ import { useSelector, useDispatch } from "react-redux"; import { RootState } from "../../../../../../redux/store"; import Chart from "chart.js/auto"; import "chartjs-adapter-moment"; -import "chartjs-plugin-zoom"; import { setVonDatum, setBisDatum, @@ -24,6 +23,16 @@ const LoopMeasurementChart = () => { const chartRef = useRef(null); const chartInstance = useRef(null); + const [zoomPlugin, setZoomPlugin] = useState(null); + + useEffect(() => { + if (typeof window !== "undefined") { + import("chartjs-plugin-zoom").then((mod) => { + setZoomPlugin(mod.default); + Chart.register(mod.default); + }); + } + }, []); useEffect(() => { if (chartRef.current) { @@ -35,6 +44,7 @@ const LoopMeasurementChart = () => { console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum); console.log("Selected Mode:", selectedMode); + // Basis-Datasets für alle Datenpunkte const datasets = [ { label: "Messwert Minimum (kOhm)", @@ -42,10 +52,8 @@ const LoopMeasurementChart = () => { x: new Date(entry.t).getTime(), y: entry.i, })), - borderColor: "#17a2b8", // Türkis - backgroundColor: "rgba(23, 162, 184, 0.2)", - pointRadius: 2, - borderWidth: 2, + borderColor: "rgba(75, 192, 192, 1)", // Türkis + backgroundColor: "rgba(75, 192, 192, 0.2)", fill: false, }, { @@ -54,25 +62,45 @@ const LoopMeasurementChart = () => { x: new Date(entry.t).getTime(), y: entry.a, })), - borderColor: "#dc3545", // Rot - backgroundColor: "rgba(220, 53, 69, 0.2)", - pointRadius: 2, - borderWidth: 2, + 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 Aktuell (m)", data: loopMeasurementCurveChartData.map((entry) => ({ x: new Date(entry.t).getTime(), y: entry.m ?? NaN, })), - borderColor: "#ffc107", // Gelb - backgroundColor: "rgba(255, 193, 7, 0.2)", - pointRadius: 2, - borderWidth: 2, + 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)", + 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) { @@ -98,7 +126,6 @@ const LoopMeasurementChart = () => { max: new Date(bisDatum).getTime(), }, y: { - title: { display: true, text: "Messwert (kOhm)" }, ticks: { callback: (value) => (typeof value === "number" ? value.toFixed(2) : value) + @@ -118,29 +145,22 @@ const LoopMeasurementChart = () => { }, }, zoom: { - pan: { - enabled: true, - mode: "xy", - }, + pan: { enabled: true, mode: "xy" }, zoom: { wheel: { enabled: true }, pinch: { enabled: true }, - mode: "xy", - onZoom: ({ chart }) => { - const xScale = chart.scales.x; - if (xScale.min && xScale.max) { - const newVonDatum = new Date(xScale.min) - .toISOString() - .split("T")[0]; - const newBisDatum = new Date(xScale.max) - .toISOString() - .split("T")[0]; + mode: "x", + 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]; - if (newVonDatum !== vonDatum) - dispatch(setVonDatum(newVonDatum)); - if (newBisDatum !== bisDatum) - dispatch(setBisDatum(newBisDatum)); - } + dispatch(setVonDatum(newVonDatum)); + dispatch(setBisDatum(newBisDatum)); }, }, },