From 59cf8bd6d2e7c3695a951f839deb8099e3647d55 Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Tue, 5 Nov 2024 20:32:11 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Zoom-=20und=20Pan-Funktion=20f=C3=BCr?=
 =?UTF-8?q?=20Chart.js=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 21 +++++++++++++++++++++
 package-lock.json               | 20 ++++++++++++++++++++
 package.json                    |  1 +
 3 files changed, 42 insertions(+)

diff --git a/components/modules/Kue705FO.jsx b/components/modules/Kue705FO.jsx
index 8326d64..2e4f736 100644
--- a/components/modules/Kue705FO.jsx
+++ b/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
+            },
+          },
+        },
       },
     });
   };
diff --git a/package-lock.json b/package-lock.json
index 66594eb..91beefc 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 3bd064e..e82ccd6 100644
--- a/package.json
+++ b/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",