Nach Betriebsferien einmal sichern

components/common/DateRangePicker.tsx

@@ -3,20 +3,17 @@ import React, { useEffect } from "react";
 import DatePicker from "react-datepicker";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "@/redux/store";
-import {
-  setVonDatum,
-  setBisDatum,
-} from "@/redux/slices/kabelueberwachungChartSlice";
+import { setVonDatum, setBisDatum } from "@/redux/slices/dateRangePickerSlice";
 import "react-datepicker/dist/react-datepicker.css";
 
 const DateRangePicker: React.FC = () => {
   const dispatch = useDispatch();
 
   const reduxVonDatum = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
+    (state: RootState) => state.dateRangePicker.vonDatum
   );
   const reduxBisDatum = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.bisDatum
+    (state: RootState) => state.dateRangePicker.bisDatum
   );
 
   const today = new Date();

components/main/analogInputs/AnalogInputsChart.tsx

@@ -45,12 +45,91 @@ type AnalogInputHistoryPoint = {
 };
 
 export default function AnalogInputsChart() {
+  useEffect(() => {
+    const loadZoomPlugin = async () => {
+      const zoomPlugin = (await import("chartjs-plugin-zoom")).default;
+      if (!ChartJS.registry.plugins.get("zoom")) {
+        ChartJS.register(zoomPlugin);
+      }
+    };
+    loadZoomPlugin();
+  }, []);
+
   const dispatch = useDispatch<AppDispatch>();
   const chartRef = useRef<any>(null);
 
   const { zeitraum, vonDatum, bisDatum, data, autoLoad, selectedId } =
     useSelector((state: RootState) => state.analogInputsHistory);
+  const selectedAnalogInput = useSelector(
+    (state: RootState) => state.selectedAnalogInput
+  );
+  // ✅ Button-Klick → Fetch auslösen
+  const handleFetchData = () => {
+    if (!selectedAnalogInput?.id) return;
 
+    // Sicherstellen, dass die neuesten Werte aus dem DateRangePicker verwendet werden
+    const latestVonDatum = vonDatum || new Date().toISOString().slice(0, 10);
+    const latestBisDatum = bisDatum || new Date().toISOString().slice(0, 10);
+
+    dispatch(
+      getAnalogInputsHistoryThunk({
+        eingang: selectedAnalogInput.id,
+        zeitraum,
+        vonDatum: latestVonDatum,
+        bisDatum: latestBisDatum,
+      })
+    );
+
+    if (chartRef.current) {
+      const chart = chartRef.current;
+
+      // Aktualisiere die X-Achse basierend auf den neuesten Werten
+      chart.options.scales.x.min = new Date(latestVonDatum).getTime();
+      chart.options.scales.x.max = new Date(latestBisDatum).getTime();
+
+      // Aktualisiere die Daten des Diagramms
+      const chartKey = selectedAnalogInput?.id ? String(selectedAnalogInput.id + 99) : null;
+      const inputData = chartKey ? data[chartKey] ?? [] : [];
+      const filteredData = inputData.filter((point) => {
+        const date = new Date(point.t);
+        const from = new Date(latestVonDatum);
+        const to = new Date(latestBisDatum);
+        return (!from || date >= from) && (!to || date <= to);
+      });
+
+      chart.data.datasets = [
+        {
+          label: selectedAnalogInput?.label
+            ? `Messwerteingang ${selectedAnalogInput.label}`
+            : "Messwerte",
+          data: filteredData.map((point) => ({ x: point.t, y: point.m })),
+          fill: false,
+          borderColor: getColor("littwin-blue"),
+          backgroundColor: "rgba(59,130,246,0.3)",
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+        },
+      ];
+
+      // Erzwinge ein vollständiges Redraw des Diagramms
+      chart.update("none");
+    }
+  };
+
+  // ✅ Filtere Daten aus Redux
+  const chartKey = selectedAnalogInput?.id
+    ? String(selectedAnalogInput.id + 99)
+    : null;
+  const inputData = chartKey ? data[chartKey] ?? [] : [];
+  // ✅ Zeitbereich anwenden (nur Anzeige gefiltert)
+  const filteredData = inputData.filter((point) => {
+    const date = new Date(point.t);
+    const from = vonDatum ? new Date(vonDatum) : null;
+    const to = bisDatum ? new Date(bisDatum) : null;
+
+    return (!from || date >= from) && (!to || date <= to);
+  });
   useEffect(() => {
     const today = new Date();
     const vor30Tagen = new Date(today);
@@ -73,15 +152,29 @@ export default function AnalogInputsChart() {
   };
 
   const dataKey = selectedId ? String(selectedId + 99) : null;
+  let filteredPoints: AnalogInputHistoryPoint[] = [];
+  if (dataKey && data[dataKey]) {
+    const fromDate = vonDatum ? new Date(vonDatum) : null;
+    const toDate = bisDatum ? new Date(bisDatum) : null;
+
+    filteredPoints = data[dataKey].filter((p: AnalogInputHistoryPoint) => {
+      const pointDate = new Date(p.t);
+      return (
+        (!fromDate || pointDate >= fromDate) && (!toDate || pointDate <= toDate)
+      );
+    });
+  }
   const chartData = {
     datasets:
-      dataKey && data[dataKey]
+      filteredPoints.length > 0
         ? [
             {
-              label: `Messwerteingang ${selectedId}`,
-              data: data[dataKey].map((p: AnalogInputHistoryPoint) => ({
-                x: new Date(p.t),
-                y: p.m,
+              label: selectedAnalogInput?.label
+                ? `Messwerteingang ${selectedAnalogInput.label}`
+                : "Messwerte",
+              data: filteredData.map((point) => ({
+                x: point.t,
+                y: point.m,
               })),
               fill: false,
               borderColor: getColor("littwin-blue"),
@@ -94,36 +187,63 @@ export default function AnalogInputsChart() {
         : [],
   };
 
-  const chartOptions: ChartOptions<"line"> = {
+  const chartOptions = {
     responsive: true,
     plugins: {
-      legend: { position: "top" },
-      title: { display: true, text: "Verlauf" },
+      legend: { position: "top" as const },
       tooltip: {
-        mode: "index",
+        mode: "index" as const,
         intersect: false,
         callbacks: {
-          label: (ctx) => `Messwert: ${ctx.parsed.y}`,
-          title: (items) =>
-            `Zeitpunkt: ${new Date(items[0].parsed.x).toLocaleString("de-DE")}`,
+          label: function (context: any) {
+            return `Messwert: ${context.parsed.y}`;
+          },
+          title: function (tooltipItems: any[]) {
+            const date = tooltipItems[0].parsed.x;
+            return `Zeitpunkt: ${new Date(date).toLocaleString("de-DE")}`;
+          },
         },
       },
+      title: {
+        display: true,
+        text: selectedAnalogInput?.label
+          ? `Verlauf: ${selectedAnalogInput.label}`
+          : "Messwert-Verlauf",
+      },
+      zoom: {
+        pan: { enabled: true, mode: "x" as const },
+        zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: "x" as const },
+      },
     },
     scales: {
       x: {
-        type: "time",
+        type: "time" as const,
         time: {
-          unit: "day",
+          unit: "day" as const,
           tooltipFormat: "dd.MM.yyyy HH:mm",
-          displayFormats: { day: "dd.MM.yyyy" },
+          displayFormats: {
+            day: "dd.MM.yyyy",
+          },
         },
         adapters: { date: { locale: de } },
         title: { display: true, text: "Zeit" },
+        // ✅ Hier definieren wir den sichtbaren Bereich dynamisch
+        min: vonDatum ? new Date(vonDatum).getTime() : undefined,
+        max: bisDatum ? new Date(bisDatum).getTime() : undefined,
+      },
+      y: {
+        title: {
+          display: true,
+          text: `Messwert ${selectedAnalogInput?.unit || ""}`,
+        },
       },
-      y: { title: { display: true, text: "Messwert" } },
     },
   };
-
+  // ✅ DateRangePicker Event → Redux-Datum setzen (aber KEIN Fetch!)
+  const handleDateChange = (from: string, to: string) => {
+    dispatch(setVonDatum(from));
+    dispatch(setBisDatum(to));
+  };
   useEffect(() => {
     if (autoLoad && selectedId) {
       dispatch(
@@ -137,6 +257,7 @@ export default function AnalogInputsChart() {
       dispatch(setAutoLoad(false)); // ✅ zurücksetzen, sonst endlose Schleife
     }
   }, [autoLoad, selectedId, dispatch, zeitraum, vonDatum, bisDatum]);
+
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-wrap items-center gap-4 mb-2">
@@ -173,7 +294,7 @@ export default function AnalogInputsChart() {
         </Listbox>
 
         <button
-          onClick={handleFetchChartData}
+          onClick={handleFetchData}
           className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
         >
           Daten laden