Zoom und Pan funktionieren in beide Richtungen (xy).

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 = () => {
+// ✅ Props-Definition für die Komponente hinzugefügt
-  const dispatch = useDispatch();
+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];
+              setVonDatum(date);
-              dispatch(setVonDatum(isoDate));
             }
           }}
           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];
+              setBisDatum(date);
-              dispatch(setBisDatum(isoDate));
             }
           }}
           selectsEnd

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,
         },
-      ];
+        {
-
+          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,
+            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: {
+                title: { display: true, text: "Messwert (kOhm)" },
-                  callback: (value) =>
-                    (typeof value === "number" ? value.toFixed(2) : value) +
-                    " 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",
+                  mode: "xy",
-                  onZoomComplete: (chart) => {
+                  onZoom: ({ chart }) => {
-                    const xScale = chart.chart.scales.x;
+                    const xScale = chart.scales.x;
-                    const newVonDatum = new Date(xScale.min)
+                    if (xScale.min && xScale.max) {
-                      .toISOString()
+                      const newVonDatum = new Date(xScale.min)
-                      .split("T")[0];
+                        .toISOString()
-                    const newBisDatum = new Date(xScale.max)
+                        .split("T")[0];
-                      .toISOString()
+                      const newBisDatum = new Date(xScale.max)
-                      .split("T")[0];
+                        .toISOString()
+                        .split("T")[0];
 
-                    dispatch(setVonDatum(newVonDatum));
+                      if (newVonDatum !== vonDatum)
-                    dispatch(setBisDatum(newBisDatum));
+                        dispatch(setVonDatum(newVonDatum));
+                      if (newBisDatum !== bisDatum)
+                        dispatch(setBisDatum(newBisDatum));
+
+                      console.log(
+                        "🔄 Redux Update nach Zoom:",
+                        newVonDatum,
+                        newBisDatum
+                      );
+                    }
                   },
                 },
               },

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;

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",

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",