Zoom und Pan funktionieren in beide Richtungen (xy).

2025-02-25 13:10:22 +01:00
parent 9424a6cc43
commit c93afc35fd
5 changed files with 57 additions and 70 deletions
--- 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<DateRangePickerProps> = ({
+  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
--- 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<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) {
@@ -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
+                      );
+                    }
                  },
                },
              },
--- 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;
--- 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",
--- 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",