From c93afc35fddaaeb502e294f8b1c8252a21bcca09 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 25 Feb 2025 13:10:22 +0100 Subject: [PATCH] Zoom und Pan funktionieren in beide Richtungen (xy). --- .../kue705FO/Charts/DateRangePicker.tsx | 24 ++--- .../LoopMeasurementChart.tsx | 91 +++++++------------ config/webVersion.ts | 2 +- package-lock.json | 9 ++ package.json | 1 + 5 files changed, 57 insertions(+), 70 deletions(-) diff --git a/components/main/kabelueberwachung/kue705FO/Charts/DateRangePicker.tsx b/components/main/kabelueberwachung/kue705FO/Charts/DateRangePicker.tsx index 6e2626a..ef878ce 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/DateRangePicker.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/DateRangePicker.tsx @@ -1,17 +1,21 @@ // /components/modules/kue705FO/charts/DateRangePicker.tsx +// /components/modules/kue705FO/charts/DateRangePicker.tsx import React from "react"; import DatePicker from "react-datepicker"; -import { useSelector, useDispatch } from "react-redux"; +import { useSelector } from "react-redux"; import { RootState } from "../../../../../redux/store"; -import { - setVonDatum, - setBisDatum, -} from "../../../../../redux/slices/kabelueberwachungChartSlice"; import "react-datepicker/dist/react-datepicker.css"; -const DateRangePicker: React.FC = () => { - const dispatch = useDispatch(); +// ✅ Props-Definition für die Komponente hinzugefügt +interface DateRangePickerProps { + setVonDatum: (date: Date) => void; + setBisDatum: (date: Date) => void; +} +const DateRangePicker: React.FC = ({ + setVonDatum, + setBisDatum, +}) => { // Redux-Werte abrufen const reduxVonDatum = useSelector( (state: RootState) => state.kabelueberwachungChart.vonDatum @@ -28,8 +32,7 @@ const DateRangePicker: React.FC = () => { selected={reduxVonDatum ? new Date(reduxVonDatum) : new Date()} onChange={(date) => { if (date) { - const isoDate = date.toISOString().split("T")[0]; - dispatch(setVonDatum(isoDate)); + setVonDatum(date); } }} selectsStart @@ -46,8 +49,7 @@ const DateRangePicker: React.FC = () => { selected={reduxBisDatum ? new Date(reduxBisDatum) : new Date()} onChange={(date) => { if (date) { - const isoDate = date.toISOString().split("T")[0]; - dispatch(setBisDatum(isoDate)); + setBisDatum(date); } }} selectsEnd diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index e9898ae..633c4b0 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"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +"use client"; import React, { useEffect, useRef, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { RootState } from "../../../../../../redux/store"; @@ -23,16 +23,6 @@ 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) { @@ -44,7 +34,7 @@ const LoopMeasurementChart = () => { console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum); console.log("Selected Mode:", selectedMode); - // Basis-Datasets für alle Datenpunkte + // Basis-Datasets für alle drei Linien const datasets = [ { label: "Messwert Minimum (kOhm)", @@ -66,41 +56,17 @@ const LoopMeasurementChart = () => { 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)", + { + label: "Messwert Aktuell (m) - Orange", data: loopMeasurementCurveChartData.map((entry) => ({ x: new Date(entry.t).getTime(), - y: entry.m ?? NaN, + y: entry.m ?? NaN, // Falls `m` fehlt, bleibt die Stelle leer })), 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) { @@ -126,11 +92,7 @@ const LoopMeasurementChart = () => { max: new Date(bisDatum).getTime(), }, y: { - ticks: { - callback: (value) => - (typeof value === "number" ? value.toFixed(2) : value) + - " kOhm", - }, + title: { display: true, text: "Messwert (kOhm)" }, }, }, plugins: { @@ -145,22 +107,35 @@ const LoopMeasurementChart = () => { }, }, zoom: { - pan: { enabled: true, mode: "x" }, + pan: { + enabled: true, + mode: "xy", + }, zoom: { wheel: { enabled: true }, pinch: { enabled: true }, - 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]; + 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]; - dispatch(setVonDatum(newVonDatum)); - dispatch(setBisDatum(newBisDatum)); + if (newVonDatum !== vonDatum) + dispatch(setVonDatum(newVonDatum)); + if (newBisDatum !== bisDatum) + dispatch(setBisDatum(newBisDatum)); + + console.log( + "🔄 Redux Update nach Zoom:", + newVonDatum, + newBisDatum + ); + } }, }, }, diff --git a/config/webVersion.ts b/config/webVersion.ts index 06defef..f76c557 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.110"; +const webVersion = "1.6.111"; export default webVersion; diff --git a/package-lock.json b/package-lock.json index 6cce388..3cbc0fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "chart.js": "^4.4.8", "chartjs-adapter-date-fns": "^3.0.0", "chartjs-adapter-moment": "^1.0.1", + "chartjs-chart-financial": "^0.2.1", "chartjs-plugin-zoom": "^2.2.0", "crypto-js": "^4.2.0", "date-fns": "^4.1.0", @@ -2674,6 +2675,14 @@ "moment": "^2.10.2" } }, + "node_modules/chartjs-chart-financial": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/chartjs-chart-financial/-/chartjs-chart-financial-0.2.1.tgz", + "integrity": "sha512-RI3zrszyf2YdW7ME8I5XDsicy6YaU+uA1XZmGddR3rdcQlGf4pSgGFK8O0PWPO5Szdc8wZ8qpns++yib6pWBaw==", + "peerDependencies": { + "chart.js": "^4.0.0" + } + }, "node_modules/chartjs-plugin-zoom": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.2.0.tgz", diff --git a/package.json b/package.json index 9295767..e294113 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "chart.js": "^4.4.8", "chartjs-adapter-date-fns": "^3.0.0", "chartjs-adapter-moment": "^1.0.1", + "chartjs-chart-financial": "^0.2.1", "chartjs-plugin-zoom": "^2.2.0", "crypto-js": "^4.2.0", "date-fns": "^4.1.0",