feat: Zoom- und Pan-Funktion für Chart.js hinzugefügt

- Chart.js um das Zoom-Plugin erweitert, um eine bessere Datenanalyse zu ermöglichen.
- Scrollen und Pinch-Zoom für Zoom- und Pan-Funktion aktiviert (x- und y-Achse).
- Nutzer können nun durch die Daten navigieren und gezielt Bereiche vergrößern, was die Übersichtlichkeit erhöht.

components/modules/Kue705FO.jsx

@@ -5,6 +5,7 @@ import Chart from "chart.js/auto";
 import { useSelector } from "react-redux";
 import KueModal from "../modales/KueModal";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import zoomPlugin from "chartjs-plugin-zoom";
 
 function Kue705FO({
   isolationswert,
@@ -189,6 +190,9 @@ function Kue705FO({
       );
   };
 
+  // Füge das Plugin zu Chart.js hinzu
+  Chart.register(zoomPlugin);
+
   const createChart = (data) => {
     const ctx = document.getElementById("myChart").getContext("2d");
     new Chart(ctx, {
@@ -227,6 +231,23 @@ function Kue705FO({
             title: { display: true, text: "kOhm" },
           },
         },
+        plugins: {
+          zoom: {
+            pan: {
+              enabled: true,
+              mode: "xy",
+            },
+            zoom: {
+              wheel: {
+                enabled: true, // Zoom mit Mausrad
+              },
+              pinch: {
+                enabled: true, // Pinch-Zoom für Touchgeräte
+              },
+              mode: "xy", // x und y Achsen zoomen
+            },
+          },
+        },
       },
     });
   };

package-lock.json

@@ -16,6 +16,7 @@
         "autoprefixer": "^10.4.20",
         "bootstrap-icons": "^1.11.3",
         "chart.js": "^4.4.5",
+        "chartjs-plugin-zoom": "^2.0.1",
         "idb": "^8.0.0",
         "next": "14.2.13",
         "react": "^18",
@@ -602,6 +603,17 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "dependencies": {
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": ">=3.2.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -875,6 +887,14 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "autoprefixer": "^10.4.20",
     "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.4.5",
+    "chartjs-plugin-zoom": "^2.0.1",
     "idb": "^8.0.0",
     "next": "14.2.13",
     "react": "^18",