TDR Chart Implementierung der Zoom- und Pan-Funktionalität

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -1,7 +1,7 @@
 // components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import Chart from "chart.js/auto";
+import { Chart, registerables } from "chart.js";
 import "chartjs-adapter-date-fns";
 
 const TDRChart: React.FC = () => {
@@ -12,58 +12,80 @@ const TDRChart: React.FC = () => {
   const chartData = useSelector((state: any) => state.tdrData.data);
 
   useEffect(() => {
-    if (chartRef.current && chartData.length > 0) {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-      }
+    // Importiere und registriere das Zoom-Plugin innerhalb des useEffect-Hooks
+    import("chartjs-plugin-zoom").then((zoomPlugin) => {
+      Chart.register(...registerables, zoomPlugin.default);
 
-      const ctx = chartRef.current.getContext("2d");
-      if (ctx) {
-        chartInstance.current = new Chart(ctx, {
-          type: "line",
-          data: {
-            datasets: [
-              {
-                label: "TDR Entfernung (km)",
-                data: chartData,
-                borderColor: "rgba(255, 99, 132, 1)",
-                backgroundColor: "rgba(255, 99, 132, 0.2)",
-                tension: 0.1,
-                parsing: {
-                  xAxisKey: "t", // Schlüssel für den Zeitstempel
-                  yAxisKey: "m", // Schlüssel für den Messwert
+      if (chartRef.current && chartData.length > 0) {
+        if (chartInstance.current) {
+          chartInstance.current.destroy();
+        }
+
+        const ctx = chartRef.current.getContext("2d");
+        if (ctx) {
+          chartInstance.current = new Chart(ctx, {
+            type: "line",
+            data: {
+              datasets: [
+                {
+                  label: "TDR Entfernung (km)",
+                  data: chartData,
+                  borderColor: "rgba(255, 99, 132, 1)",
+                  backgroundColor: "rgba(255, 99, 132, 0.2)",
+                  tension: 0.1,
+                  parsing: {
+                    xAxisKey: "t", // Schlüssel für den Zeitstempel
+                    yAxisKey: "m", // Schlüssel für den Messwert
+                  },
+                },
+              ],
+            },
+            options: {
+              responsive: true,
+              maintainAspectRatio: false,
+              scales: {
+                x: {
+                  type: "time",
+                  time: {
+                    unit: "minute",
+                    tooltipFormat: "dd.MM.yyyy HH:mm",
+                  },
+                  title: {
+                    display: true,
+                    text: "Zeit",
+                  },
+                },
+                y: {
+                  title: {
+                    display: true,
+                    text: "km",
+                  },
+                  min: 0,
+                  max: 3,
                 },
               },
-            ],
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                type: "time",
-                time: {
-                  unit: "minute",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
+              plugins: {
+                zoom: {
+                  pan: {
+                    enabled: true,
+                    mode: "xy",
+                  },
+                  zoom: {
+                    wheel: {
+                      enabled: true,
+                    },
+                    pinch: {
+                      enabled: true,
+                    },
+                    mode: "xy",
+                  },
                 },
-                title: {
-                  display: true,
-                  text: "Zeit",
-                },
-              },
-              y: {
-                title: {
-                  display: true,
-                  text: "km",
-                },
-                min: 0,
-                max: 3,
               },
             },
-          },
-        });
+          });
+        }
       }
-    }
+    });
   }, [chartData]);
 
   return (

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.86";
+const webVersion = "1.6.87";
 export default webVersion;

package-lock.json

@@ -16,10 +16,10 @@
         "autoprefixer": "^10.4.20",
         "bcryptjs": "^2.4.3",
         "bootstrap-icons": "^1.11.3",
-        "chart.js": "^4.4.5",
+        "chart.js": "^4.4.8",
         "chartjs-adapter-date-fns": "^3.0.0",
         "chartjs-adapter-moment": "^1.0.1",
-        "chartjs-plugin-zoom": "^2.0.1",
+        "chartjs-plugin-zoom": "^2.2.0",
         "crypto-js": "^4.2.0",
         "date-fns": "^4.1.0",
         "idb": "^8.0.0",
@@ -2646,9 +2646,9 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
-      "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
+      "integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },

package.json

@@ -21,10 +21,10 @@
     "autoprefixer": "^10.4.20",
     "bcryptjs": "^2.4.3",
     "bootstrap-icons": "^1.11.3",
-    "chart.js": "^4.4.5",
+    "chart.js": "^4.4.8",
     "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-adapter-moment": "^1.0.1",
-    "chartjs-plugin-zoom": "^2.0.1",
+    "chartjs-plugin-zoom": "^2.2.0",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
     "idb": "^8.0.0",