feat: Zoom- und Panning-Funktion für LoopMeasurementChart hinzugefügt

- chartjs-plugin-zoom importiert und in Chart.js registriert
- Zoom per Mausrad und Pinch-Gesten auf Touch-Geräten aktiviert
- Panning (horizontal scrollen) über Dragging hinzugefügt
- Chart-Logik und bestehende Datenverarbeitung beibehalten

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

@@ -3,6 +3,9 @@ import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-moment";
+import zoomPlugin from "chartjs-plugin-zoom"; // Zoom-Plugin importieren
+
+Chart.register(zoomPlugin); // Plugin registrieren
 
 const LoopMeasurementChart = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
@@ -139,7 +142,7 @@ const LoopMeasurementChart = () => {
                   autoSkip: false,
                   maxRotation: 45,
                   minRotation: 45,
-                  callback: function (value, index, values) {
+                  callback: function (value) {
                     const date = new Date(value);
                     return `${date.getDate().toString().padStart(2, "0")}.${(
                       date.getMonth() + 1
@@ -179,6 +182,21 @@ const LoopMeasurementChart = () => {
                   },
                 },
               },
+              zoom: {
+                pan: {
+                  enabled: true,
+                  mode: "x", // Nur horizontal scrollen
+                },
+                zoom: {
+                  wheel: {
+                    enabled: true,
+                  },
+                  pinch: {
+                    enabled: true,
+                  },
+                  mode: "x", // Nur horizontal zoomen
+                },
+              },
             },
           },
         });