From ba3b4fcf0240242d0c7cd606d390a4e6fccd66c3 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 25 Feb 2025 13:14:45 +0100 Subject: [PATCH] Drei Linien werden angezeigt --- .../LoopMeasurementChart.tsx | 91 ++++++++++++------- config/webVersion.ts | 2 +- 2 files changed, 59 insertions(+), 34 deletions(-) diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index 633c4b0..e9898ae 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx @@ -1,4 +1,4 @@ -"use client"; +"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"; @@ -23,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) { @@ -34,7 +44,7 @@ const LoopMeasurementChart = () => { console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum); console.log("Selected Mode:", selectedMode); - // Basis-Datasets für alle drei Linien + // Basis-Datasets für alle Datenpunkte const datasets = [ { label: "Messwert Minimum (kOhm)", @@ -56,17 +66,41 @@ const LoopMeasurementChart = () => { backgroundColor: "rgba(192, 75, 75, 0.2)", fill: false, }, - { - label: "Messwert Aktuell (m) - Orange", + ]; + + // 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, // Falls `m` fehlt, bleibt die Stelle leer + 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)", + 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) { @@ -92,7 +126,11 @@ const LoopMeasurementChart = () => { max: new Date(bisDatum).getTime(), }, y: { - title: { display: true, text: "Messwert (kOhm)" }, + ticks: { + callback: (value) => + (typeof value === "number" ? value.toFixed(2) : value) + + " kOhm", + }, }, }, plugins: { @@ -107,35 +145,22 @@ const LoopMeasurementChart = () => { }, }, zoom: { - pan: { - enabled: true, - mode: "xy", - }, + pan: { enabled: true, mode: "x" }, 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)); - - console.log( - "🔄 Redux Update nach Zoom:", - newVonDatum, - newBisDatum - ); - } + dispatch(setVonDatum(newVonDatum)); + dispatch(setBisDatum(newBisDatum)); }, }, }, diff --git a/config/webVersion.ts b/config/webVersion.ts index f76c557..431dd7a 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.111"; +const webVersion = "1.6.112"; export default webVersion;