feat: Zeitraum einstellbar in AnalogInputsChart mit Zoom- und Pan-Funktion umgesetzt

components/main/analogInputs/AnalogInputsChart.tsx

@@ -1,7 +1,7 @@
-"use client"; // /components/main/analogeEingaenge/AnalogInputsChart.tsx
+"use client";
 import React, { useEffect } from "react";
 import { Line } from "react-chartjs-2";
-import { getColor } from "../../../utils/colors";
+import { getColor } from "@/utils/colors";
 import {
   Chart as ChartJS,
   LineElement,
@@ -19,6 +19,7 @@ import { useSelector, useDispatch } from "react-redux";
 import type { RootState, AppDispatch } from "../../../redux/store";
 import { getAnalogInputsHistoryThunk } from "@/redux/thunks/getAnalogInputsHistoryThunk";
 
+// Basis-Registrierung (ohne Zoom-Plugin)
 ChartJS.register(
   LineElement,
   PointElement,
@@ -35,19 +36,32 @@ export default function AnalogInputsChart({
 }: {
   selectedId: number | null;
 }) {
+  const zoomEnabled =
+    process.env.NEXT_PUBLIC_FEATURE_MESSWERTANZEIGE_EINGANG === "true";
   const dispatch = useDispatch<AppDispatch>();
-  const { data, isLoading, error } = useSelector(
+  const { data } = useSelector(
     (state: RootState) => state.analogInputsHistory
   ) as {
     data: { [key: string]: any[] };
-    isLoading: boolean;
-    error: any;
   };
 
   useEffect(() => {
     dispatch(getAnalogInputsHistoryThunk());
   }, [dispatch]);
 
+  // ✅ Zoom-Plugin dynamisch importieren und registrieren
+  useEffect(() => {
+    const loadZoomPlugin = async () => {
+      if (typeof window !== "undefined") {
+        const zoomPlugin = (await import("chartjs-plugin-zoom")).default;
+        if (!ChartJS.registry.plugins.get("zoom")) {
+          ChartJS.register(zoomPlugin);
+        }
+      }
+    };
+    loadZoomPlugin();
+  }, []);
+
   if (!selectedId) {
     return (
       <div className="text-gray-500">Bitte einen Messwerteingang auswählen</div>
@@ -77,7 +91,6 @@ export default function AnalogInputsChart({
         borderColor: getColor("littwin-blue"),
         backgroundColor: "rgba(59,130,246,0.5)",
         borderWidth: 2,
-        // fill: false,
         pointRadius: 0,
         pointHoverRadius: 10,
         tension: 0.1,
@@ -92,8 +105,21 @@ export default function AnalogInputsChart({
       tooltip: { mode: "index" as const, intersect: false },
       title: {
         display: true,
-        text: `Verlauf der letzte 24 Stunden`,
+        text: `Verlauf der letzten 24 Stunden`,
       },
+      ...(zoomEnabled && {
+        zoom: {
+          pan: {
+            enabled: true,
+            mode: "x" as const,
+          },
+          zoom: {
+            wheel: { enabled: true },
+            pinch: { enabled: true },
+            mode: "x" as const,
+          },
+        },
+      }),
     },
     scales: {
       x: {
@@ -113,7 +139,7 @@ export default function AnalogInputsChart({
         },
         title: {
           display: true,
-          text: "Zeit ",
+          text: "Zeit",
         },
       },
       y: {