feat: Automatisches Laden der Chart-Daten bei Dropdown-Wechsel

- Redux-Slice `kabelueberwachungChartSlice.ts` erweitert um `selectedMode` und `selectedSlotType`
- `LoopChartActionBar.tsx` so angepasst, dass Änderungen in den Dropdown-Menüs automatisch `handleFetchData` aufrufen
- `useEffect` hinzugefügt, um Daten beim Wechsel von `selectedMode` oder `selectedSlotType` neu zu laden
- Manuelles Klicken auf den "Daten Laden"-Button ist nun nicht mehr nötig

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

@@ -1,43 +1,26 @@
 // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
-import React from "react";
+import React, { useEffect } from "react";
 import DateRangePicker from "../DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
 import {
   setVonDatum,
   setBisDatum,
-} from "../../../../../../redux/slices/dateRangeKueChartSlice";
+  setChartData,
-import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
+  setSelectedMode,
+  setSelectedSlotType,
+} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
 
 const LoopChartActionBar: React.FC = () => {
   const dispatch = useDispatch();
 
-  // Datum aus Redux abrufen
+  // Redux-Status abrufen
-  const vonDatum = useSelector(
+  const { vonDatum, bisDatum, selectedMode, selectedSlotType } = useSelector(
-    (state: RootState) => state.dateRangeKueChart.vonDatum
+    (state: RootState) => state.kabelueberwachungChart
   );
-  const bisDatum = useSelector(
-    (state: RootState) => state.dateRangeKueChart.bisDatum
-  );
-
-  // Zustand für das Dropdown-Menü zur Auswahl von DIA-Modus (Alle, Stunden, Tage)
-  const [selectedMode, setSelectedMode] = React.useState<
-    "DIA0" | "DIA1" | "DIA2"
-  >("DIA0");
-
-  // Zustand für das Dropdown-Menü zur Auswahl des Slot-Typs (Isolations- oder Schleifenwiderstand)
-  const [selectedSlotType, setSelectedSlotType] = React.useState<
-    "isolationswiderstand" | "schleifenwiderstand"
-  >("schleifenwiderstand");
-
-  // Slot-Werte
-  const isolationswiderstand = 3;
-  const schleifenwiderstand = 4;
 
   /**
-   * Dynamische API-URL-Erstellung für Entwicklung und Produktion
+   * API-URL-Erstellung für Entwicklung und Produktion
-   * @param mode - DIA0, DIA1 oder DIA2
-   * @param type - Slot für die Abfrage (3 = Isolationswiderstand, 4 = Schleifenwiderstand)
    */
   const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", type: number) => {
     return process.env.NODE_ENV === "development"
@@ -49,7 +32,7 @@ const LoopChartActionBar: React.FC = () => {
    * Funktion zum Laden der Messwerte
    */
   const handleFetchData = async () => {
-    const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3; // 4 für Schleifenwiderstand, 3 für Isolationswiderstand
+    const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3;
 
     try {
       const apiUrl = getApiUrl(selectedMode, type);
@@ -71,6 +54,11 @@ const LoopChartActionBar: React.FC = () => {
     }
   };
 
+  // **Automatische Datenaktualisierung bei Auswahländerung**
+  useEffect(() => {
+    handleFetchData();
+  }, [selectedMode, selectedSlotType]); // Wird ausgeführt, wenn sich ein Dropdown ändert
+
   return (
     <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
       {/* Datumsauswahl */}
@@ -83,7 +71,7 @@ const LoopChartActionBar: React.FC = () => {
       <select
         value={selectedMode}
         onChange={(e) =>
-          setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2")
+          dispatch(setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2"))
         }
         className="px-3 py-1 bg-white border rounded text-sm"
       >
@@ -96,8 +84,10 @@ const LoopChartActionBar: React.FC = () => {
       <select
         value={selectedSlotType}
         onChange={(e) =>
-          setSelectedSlotType(
+          dispatch(
-            e.target.value as "isolationswiderstand" | "schleifenwiderstand"
+            setSelectedSlotType(
+              e.target.value as "isolationswiderstand" | "schleifenwiderstand"
+            )
           )
         }
         className="px-3 py-1 bg-white border rounded text-sm"

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

@@ -1,6 +1,7 @@
 // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../../../../redux/store";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-moment";
 import zoomPlugin from "chartjs-plugin-zoom"; // Zoom-Plugin importieren
@@ -11,16 +12,12 @@ const LoopMeasurementChart = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
-  // Daten aus Redux abrufen
+  // Daten & Datum aus Redux abrufen
-  const chartData =
+  const { chartData, vonDatum, bisDatum } = useSelector(
-    useSelector(
+    (state: RootState) => state.kabelueberwachungChart
-      (state: { chartData: { data: any[] } }) => state.chartData.data
+  );
-    ) ?? [];
-
-  // Ermittlung des ausgewählten Modus (DIA0, DIA1, DIA2)
   const selectedMode = useSelector(
-    (state: { chartMode: { mode: "DIA0" | "DIA1" | "DIA2" } }) =>
+    (state: RootState) => state.kabelueberwachungChart.selectedMode
-      state.chartMode?.mode ?? "DIA0"
   );
 
   useEffect(() => {
@@ -30,47 +27,52 @@ const LoopMeasurementChart = () => {
       }
 
       console.log("Chart Data:", chartData);
+      console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum);
+      console.log("Selected Mode:", selectedMode);
 
-      // Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden
+      // Daten filtern basierend auf vonDatum und bisDatum
-      const processedData = chartData.map((entry) => ({
+      const filteredData = chartData.filter((entry) => {
-        ...entry,
+        const timestampMs = new Date(entry.t).getTime();
-        timestampMs: new Date(entry.t).getTime(),
+        return (
-      }));
+          timestampMs >= new Date(vonDatum).getTime() &&
+          timestampMs <= new Date(bisDatum).getTime()
+        );
+      });
 
-      // Basis-Datasets für i und a (immer vorhanden)
+      // Basis-Datasets für i (Minimum) und a (Maximum)
       const datasets = [
         {
           label: "Messwert Minimum (kOhm)",
-          data: processedData.map((entry) => ({
+          data: filteredData.map((entry) => ({
-            x: entry.timestampMs,
+            x: new Date(entry.t).getTime(),
             y: entry.i,
           })),
-          borderColor: "rgba(75, 192, 192, 1)",
+          borderColor: "rgba(75, 192, 192, 1)", // Türkis
           backgroundColor: "rgba(75, 192, 192, 0.2)",
           fill: false,
         },
         {
           label: "Messwert Maximum (kOhm)",
-          data: processedData.map((entry) => ({
+          data: filteredData.map((entry) => ({
-            x: entry.timestampMs,
+            x: new Date(entry.t).getTime(),
             y: entry.a,
           })),
-          borderColor: "rgba(192, 75, 75, 1)",
+          borderColor: "rgba(192, 75, 75, 1)", // Rot
           backgroundColor: "rgba(192, 75, 75, 0.2)",
           fill: false,
         },
       ];
 
-      // Falls `m` vorhanden ist (DIA0), wird es gezeichnet
+      // Falls DIA0: `m` als aktueller Messwert verwenden
       if (
         selectedMode === "DIA0" &&
-        processedData.some((entry) => entry.m !== undefined)
+        filteredData.some((entry) => entry.m !== undefined)
       ) {
         datasets.push({
-          label: "Messwert Mittelwert",
+          label: "Messwert Aktuell (m)",
-          data: processedData.map((entry) => ({
+          data: filteredData.map((entry) => ({
-            x: entry.timestampMs,
+            x: new Date(entry.t).getTime(),
-            y: entry.m ?? NaN, // Falls `m` nicht existiert, wird `NaN` gesetzt
+            y: entry.m ?? NaN,
           })),
           borderColor: "rgba(255, 165, 0, 1)", // Orange
           backgroundColor: "rgba(255, 165, 0, 0.2)",
@@ -78,30 +80,16 @@ const LoopMeasurementChart = () => {
         });
       }
 
-      // Falls `g` vorhanden ist (DIA1/DIA2), wird es gezeichnet
+      // Falls DIA1 oder DIA2: `g` als Durchschnittswert verwenden
-      else if (
+      if (
-        selectedMode !== "DIA1" &&
+        (selectedMode === "DIA1" || selectedMode === "DIA2") &&
-        processedData.some((entry) => entry.g !== undefined)
+        filteredData.some((entry) => entry.g !== undefined)
-      ) {
-        datasets.push({
-          label: "Messwert Durchschnitt",
-          data: processedData.map((entry) => ({
-            x: entry.timestampMs,
-            y: entry.g ?? NaN, // Falls `g` nicht existiert, wird `NaN` gesetzt
-          })),
-          borderColor: "rgba(75, 75, 192, 1)", // Blau
-          backgroundColor: "rgba(75, 75, 192, 0.2)",
-          fill: false,
-        });
-      } else if (
-        selectedMode !== "DIA2" &&
-        processedData.some((entry) => entry.g !== undefined)
       ) {
         datasets.push({
           label: "Messwert Durchschnitt (g)",
-          data: processedData.map((entry) => ({
+          data: filteredData.map((entry) => ({
-            x: entry.timestampMs,
+            x: new Date(entry.t).getTime(),
-            y: entry.g ?? NaN, // Falls `g` nicht existiert, wird `NaN` gesetzt
+            y: entry.g ?? NaN,
           })),
           borderColor: "rgba(75, 75, 192, 1)", // Blau
           backgroundColor: "rgba(75, 75, 192, 0.2)",
@@ -118,83 +106,41 @@ const LoopMeasurementChart = () => {
             responsive: true,
             maintainAspectRatio: false,
             elements: {
-              line: {
+              line: { spanGaps: true },
-                spanGaps: true, // Ermöglicht das Zeichnen von Lücken
-              },
             },
             scales: {
               x: {
                 type: "time",
                 time: {
-                  unit: "minute",
+                  unit: "day",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
+                  tooltipFormat: "dd.MM.yyyy",
-                  displayFormats: {
+                  displayFormats: { day: "dd.MM.yyyy" },
-                    minute: "dd.MM.yyyy HH:mm",
-                    hour: "dd.MM.yyyy HH:mm",
-                    day: "dd.MM.yyyy",
-                  },
-                },
-                title: {
-                  display: true,
-                  text: "Zeit (Datum & Uhrzeit)",
-                },
-                ticks: {
-                  autoSkip: false,
-                  maxRotation: 45,
-                  minRotation: 45,
-                  callback: function (value) {
-                    const date = new Date(value);
-                    return `${date.getDate().toString().padStart(2, "0")}.${(
-                      date.getMonth() + 1
-                    )
-                      .toString()
-                      .padStart(2, "0")}.${date.getFullYear()} ${date
-                      .getHours()
-                      .toString()
-                      .padStart(2, "0")}:${date
-                      .getMinutes()
-                      .toString()
-                      .padStart(2, "0")}`;
-                  },
                 },
+                title: { display: true, text: "Zeit (Datum)" },
+                min: new Date(vonDatum).getTime(),
+                max: new Date(bisDatum).getTime(),
               },
               y: {
                 ticks: {
-                  callback: function (value) {
+                  callback: (value) => value.toFixed(2) + " kOhm",
-                    return value.toFixed(2); // Y-Achse Werte mit zwei Dezimalstellen anzeigen
-                  },
                 },
               },
             },
             plugins: {
               tooltip: {
                 callbacks: {
-                  label: function (tooltipItem) {
+                  label: (tooltipItem) =>
-                    let label = tooltipItem.dataset.label || "";
+                    `${tooltipItem.dataset.label}: ${tooltipItem.raw.y.toFixed(
-                    if (label) {
+                      2
-                      label += ": ";
+                    )} kOhm`,
-                    }
-                    if (tooltipItem.raw !== null) {
-                      label +=
-                        parseFloat(tooltipItem.raw.y).toFixed(2) + " kOhm"; // Dezimalstellen im Tooltip
-                    }
-                    return label;
-                  },
                 },
               },
               zoom: {
-                pan: {
+                pan: { enabled: true, mode: "x" },
-                  enabled: true,
-                  mode: "x", // Nur horizontal scrollen
-                },
                 zoom: {
-                  wheel: {
+                  wheel: { enabled: true },
-                    enabled: true,
+                  pinch: { enabled: true },
-                  },
+                  mode: "x",
-                  pinch: {
-                    enabled: true,
-                  },
-                  mode: "x", // Nur horizontal zoomen
                 },
               },
             },
@@ -202,7 +148,7 @@ const LoopMeasurementChart = () => {
         });
       }
     }
-  }, [chartData, selectedMode]);
+  }, [chartData, vonDatum, bisDatum, selectedMode]);
 
   return (
     <div style={{ position: "relative", width: "100%", height: "400px" }}>

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.76";
+const webVersion = "1.6.77";
 export default webVersion;

redux/slices/dateRangeKueChartSlice.ts

@@ -1,34 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-
-interface DateRangeState {
-  vonDatum: string;
-  bisDatum: string;
-}
-
-const initialState: DateRangeState = {
-  vonDatum: "2025;01;01",
-  bisDatum: "2025;07;31",
-};
-
-const formatDate = (isoDate: string) => {
-  const date = new Date(isoDate);
-  return `${date.getFullYear()};${(date.getMonth() + 1)
-    .toString()
-    .padStart(2, "0")};${date.getDate().toString().padStart(2, "0")}`;
-};
-
-const dateRangeKueChartSlice = createSlice({
-  name: "dateRangeKueChart",
-  initialState,
-  reducers: {
-    setVonDatum: (state, action: PayloadAction<string>) => {
-      state.vonDatum = formatDate(action.payload);
-    },
-    setBisDatum: (state, action: PayloadAction<string>) => {
-      state.bisDatum = formatDate(action.payload);
-    },
-  },
-});
-
-export const { setVonDatum, setBisDatum } = dateRangeKueChartSlice.actions;
-export default dateRangeKueChartSlice.reducer;

redux/slices/kabelueberwachungChartSlice.ts

@@ -0,0 +1,55 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface KabelueberwachungChartState {
+  chartData: any[];
+  vonDatum: string;
+  bisDatum: string;
+  selectedMode: "DIA0" | "DIA1" | "DIA2";
+  selectedSlotType: "isolationswiderstand" | "schleifenwiderstand";
+}
+
+const initialState: KabelueberwachungChartState = {
+  chartData: [],
+  vonDatum: "2025-02-01",
+  bisDatum: "2025-02-28",
+  selectedMode: "DIA0",
+  selectedSlotType: "schleifenwiderstand",
+};
+
+const kabelueberwachungChartSlice = createSlice({
+  name: "kabelueberwachungChart",
+  initialState,
+  reducers: {
+    setChartData: (state, action: PayloadAction<any[]>) => {
+      state.chartData = action.payload;
+    },
+    setVonDatum: (state, action: PayloadAction<string>) => {
+      state.vonDatum = action.payload;
+    },
+    setBisDatum: (state, action: PayloadAction<string>) => {
+      state.bisDatum = action.payload;
+    },
+    setSelectedMode: (
+      state,
+      action: PayloadAction<"DIA0" | "DIA1" | "DIA2">
+    ) => {
+      state.selectedMode = action.payload;
+    },
+    setSelectedSlotType: (
+      state,
+      action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand">
+    ) => {
+      state.selectedSlotType = action.payload;
+    },
+  },
+});
+
+export const {
+  setChartData,
+  setVonDatum,
+  setBisDatum,
+  setSelectedMode,
+  setSelectedSlotType,
+} = kabelueberwachungChartSlice.actions;
+
+export default kabelueberwachungChartSlice.reducer;

redux/store.ts

@@ -5,7 +5,7 @@ import variablesReducer from "./slices/variablesSlice";
 import chartDataReducer from "./slices/chartDataSlice";
 import webVersionReducer from "./slices/webVersionSlice";
 import digitalInputsReducer from "./slices/digitalInputsSlice";
-import dateRangeKueChartReducer from "./slices/dateRangeKueChartSlice";
+import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice";
 
 const store = configureStore({
   reducer: {
@@ -14,7 +14,7 @@ const store = configureStore({
     chartData: chartDataReducer,
     webVersion: webVersionReducer,
     digitalInputs: digitalInputsReducer,
-    dateRangeKueChart: dateRangeKueChartReducer,
+    kabelueberwachungChart: kabelueberwachungChartReducer,
   },
 });