feat(redux): Rename all Redux slices and store keys to match file names for clarity

- Renamed all slice names (createSlice `name` attribute) to match their file names (e.g. loopChartSlice, authSlice, kueDataSlice etc.)
- Updated `store.ts` to register each reducer with consistent key names (e.g. state.loopChartSlice instead of state.loopChart)
- Adjusted all `useSelector` and Redux state accesses across the codebase
- Improves maintainability, searchability and consistency across files and Redux DevTools

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

@@ -20,10 +20,10 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
   const dispatch = useDispatch();
 
   const reduxVonDatum = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.vonDatum
+    (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
   );
   const reduxBisDatum = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.bisDatum
+    (state: RootState) => state.kabelueberwachungChartSlice.bisDatum
   );
 
   const today = new Date();

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

@@ -25,7 +25,7 @@ const LoopChartActionBar: React.FC = () => {
     isChartOpen,
     slotNumber,
     loopMeasurementCurveChartData,
-  } = useSelector((state: RootState) => state.kabelueberwachungChart);
+  } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
 
   /**
    * API-URL-Erstellung für Entwicklung und Produktion

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

@@ -1,242 +1,149 @@
-"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
-import React, { useCallback, useEffect, useMemo } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { RootState } from "../../../../../../redux/store";
+"use client"; // components/main/Kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+
+import React, { useEffect, useRef, useState } from "react";
 import {
-  ComposedChart,
-  XAxis,
-  YAxis,
-  CartesianGrid,
+  Chart as ChartJS,
+  LineElement,
+  PointElement,
+  LinearScale,
+  TimeScale,
+  Title,
   Tooltip,
   Legend,
-  ResponsiveContainer,
-  Line,
-  Brush,
-} from "recharts";
-import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
+  Filler,
+  ChartOptions,
+} from "chart.js";
+import zoomPlugin from "chartjs-plugin-zoom";
+import "chartjs-adapter-date-fns";
+import { Line } from "react-chartjs-2";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../../redux/store";
 
-import CustomTooltip from "./CustomTooltip";
+ChartJS.register(
+  LineElement,
+  PointElement,
+  LinearScale,
+  TimeScale,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  zoomPlugin
+);
 
 const LoopMeasurementChart = () => {
-  const dispatch = useDispatch();
-  const unit = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.unit
-  );
+  const chartRef = useRef<any>(null);
+  const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } =
+    useSelector((state: RootState) => state.kabelueberwachungChartSlice);
 
-  const brushRange = useSelector((state: RootState) => state.brush);
-  const {
-    loopMeasurementCurveChartData,
-    selectedMode,
-    vonDatum,
-    bisDatum,
-    isFullScreen,
-  } = useSelector((state: RootState) => state.kabelueberwachungChart);
+  const [zoomed, setZoomed] = useState(false);
 
-  const formatierteDaten = useMemo(
-    () =>
-      loopMeasurementCurveChartData
-        .map((eintrag) => ({
-          zeit: new Date(eintrag.t).getTime(),
-          messwertMinimum: eintrag.i,
-          messwertMaximum: eintrag.a,
-          messwert: eintrag.m ?? null,
-          messwertDurchschnitt: ["DIA0", "DIA1", "DIA2"].includes(selectedMode)
-            ? eintrag.g ?? null
-            : null,
-        }))
-        .reverse(),
-    [loopMeasurementCurveChartData, selectedMode]
-  );
-
-  useEffect(() => {
-    if (brushRange.endIndex === 0 && formatierteDaten.length) {
-      dispatch(
-        setBrushRange({
-          startIndex: 0,
-          endIndex: formatierteDaten.length - 1,
-        })
-      );
-    }
-  }, [formatierteDaten, brushRange.endIndex, dispatch]);
-
-  const handleBrushChange = useCallback(
-    ({ startIndex, endIndex }: { startIndex?: number; endIndex?: number }) => {
-      if (startIndex === undefined || endIndex === undefined) return;
-
-      dispatch(
-        setBrushRange({
-          startIndex,
-          endIndex,
-          startDate: new Date(
-            formatierteDaten[startIndex]?.zeit || formatierteDaten[0].zeit
-          )
-            .toISOString()
-            .split("T")[0],
-          endDate: new Date(
-            formatierteDaten[endIndex]?.zeit ||
-              formatierteDaten[formatierteDaten.length - 1].zeit
-          )
-            .toISOString()
-            .split("T")[0],
-        })
-      );
-    },
-    [dispatch, formatierteDaten]
-  );
-
-  useEffect(() => {
-    if (formatierteDaten.length) {
-      const startIndex = formatierteDaten.findIndex(
-        (d) => new Date(d.zeit).toISOString().split("T")[0] === vonDatum
-      );
-
-      const endIndex = formatierteDaten.findIndex(
-        (d) => new Date(d.zeit).toISOString().split("T")[0] === bisDatum
-      );
-
-      if (startIndex !== -1 && endIndex !== -1) {
-        dispatch(
-          setBrushRange({
-            startIndex,
-            endIndex,
-            startDate: vonDatum,
-            endDate: bisDatum,
-          })
-        );
-      }
-    }
-  }, [vonDatum, bisDatum, formatierteDaten, dispatch]);
-
-  useEffect(() => {
-    if (formatierteDaten.length > 0) {
-      dispatch(
-        setBrushRange({
-          startIndex: 0,
-          endIndex: formatierteDaten.length - 1,
-          startDate: new Date(formatierteDaten[0].zeit)
-            .toISOString()
-            .split("T")[0],
-          endDate: new Date(formatierteDaten[formatierteDaten.length - 1].zeit)
-            .toISOString()
-            .split("T")[0],
-        })
-      );
-    }
-  }, [selectedMode, formatierteDaten, dispatch]);
-
-  const legendLabelMap: Record<string, string> = {
-    messwertMinimum: "Minimum",
-    messwert: "Messwert",
-    messwertMaximum: "Maximum",
-    messwertDurchschnitt: "Durchschnitt",
+  const data = {
+    labels: loopMeasurementCurveChartData
+      .map((entry) => new Date(entry.t))
+      .reverse(),
+    datasets: [
+      {
+        label: "Messwert Minimum",
+        data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
+        borderColor: "lightgrey",
+        borderWidth: 1,
+        fill: false,
+        pointRadius: 0,
+      },
+      {
+        label: "Messwert Maximum",
+        data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
+        borderColor: "lightgrey",
+        borderWidth: 1,
+        fill: false,
+        pointRadius: 0,
+      },
+      selectedMode === "DIA0"
+        ? {
+            label: "Messwert",
+            data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
+            borderColor: "#00AEEF",
+            borderWidth: 2,
+            fill: false,
+            pointRadius: 2,
+          }
+        : {
+            label: "Messwert Durchschnitt",
+            data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
+            borderColor: "#00AEEF",
+            borderWidth: 2,
+            fill: false,
+            pointRadius: 2,
+          },
+    ],
   };
 
+  const options: ChartOptions<"line"> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: "top" as const,
+      },
+      tooltip: {
+        mode: "index",
+        intersect: false,
+      },
+      zoom: {
+        pan: {
+          enabled: true,
+          mode: "x",
+        },
+        zoom: {
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true,
+          },
+          mode: "x",
+          onZoomComplete: () => setZoomed(true),
+        },
+        limits: {
+          x: { min: "original", max: "original" },
+          y: { min: "original", max: "original" },
+        },
+      },
+    },
+    scales: {
+      x: {
+        type: "time",
+        time: {
+          unit: "day",
+          tooltipFormat: "dd.MM.yyyy HH:mm",
+        },
+        title: {
+          display: true,
+          text: "Zeit",
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: unit,
+        },
+        ticks: {
+          precision: 0,
+        },
+      },
+    },
+  };
+
+  useEffect(() => {
+    if (!zoomed && chartRef.current) {
+      chartRef.current.resetZoom?.();
+    }
+  }, [loopMeasurementCurveChartData, selectedMode]);
+
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ComposedChart data={formatierteDaten} margin={{ right: 90, left: 20 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis
-            dataKey="zeit"
-            domain={["dataMin", "dataMax"]}
-            allowDataOverflow={true}
-            interval={Math.floor(formatierteDaten.length / 15)}
-            tickFormatter={(zeit) => {
-              const date = new Date(zeit);
-              return `${date.getDate()}.${date.getMonth() + 1}`;
-            }}
-            tick={(props) => {
-              const { x, y, payload } = props;
-              const date = new Date(payload.value);
-              return (
-                <text
-                  x={x}
-                  y={y}
-                  dy={5}
-                  textAnchor="end"
-                  transform={`rotate(-25, ${x}, ${y})`}
-                >
-                  {`${date.getDate()}.${date.getMonth() + 1}`}
-                </text>
-              );
-            }}
-          />
-
-          <YAxis
-            label={{ value: unit, angle: -90, position: "insideLeft" }}
-            domain={["auto", "auto"]}
-            tickFormatter={(wert) => `${wert.toFixed(0)} `}
-          />
-          <Tooltip content={<CustomTooltip unit={unit} />} />
-          <Legend
-            verticalAlign="top"
-            align="center"
-            content={({ payload }) => {
-              if (!payload) return null;
-              const orderedPayload = [...payload].sort((a, b) => {
-                const order = [
-                  "messwertMinimum",
-                  "messwert",
-                  "messwertDurchschnitt",
-                  "messwertMaximum",
-                ];
-                return order.indexOf(a.value) - order.indexOf(b.value);
-              });
-              return (
-                <div
-                  style={{
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                  }}
-                >
-                  {orderedPayload.map((entry, index) => (
-                    <span
-                      key={index}
-                      style={{ margin: "0 10px", color: entry.color }}
-                    >
-                      ⬤ {legendLabelMap[entry.value] ?? entry.value}
-                    </span>
-                  ))}
-                </div>
-              );
-            }}
-          />
-
-          <Line
-            type="monotone"
-            dataKey="messwertMinimum"
-            stroke="lightgrey"
-            dot={false}
-          />
-          <Line
-            type="monotone"
-            dataKey="messwertMaximum"
-            stroke="lightgrey"
-            dot={false}
-          />
-          {["DIA1", "DIA2"].includes(selectedMode) && (
-            <Line
-              type="monotone"
-              dataKey="messwertDurchschnitt"
-              stroke="#00AEEF"
-              dot
-            />
-          )}
-          {selectedMode === "DIA0" && (
-            <Line type="monotone" dataKey="messwert" stroke="#00AEEF" dot />
-          )}
-          <Brush
-            dataKey="zeit"
-            height={30}
-            stroke="#8884d8"
-            onChange={handleBrushChange}
-            startIndex={brushRange.startIndex}
-            endIndex={brushRange.endIndex || formatierteDaten.length - 1}
-            tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
-          />
-        </ComposedChart>
-      </ResponsiveContainer>
+      <Line ref={chartRef} data={data} options={options} />
     </div>
   );
 };

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/README.md

@@ -0,0 +1,54 @@
+### 🧭 Zoom-Verhalten beim Schleifen-/Isolationsdiagramm
+
+In dieser Komponente wird das automatische Nachladen der Messwerte temporär deaktiviert, wenn der Benutzer per Maus in das Diagramm zoomt oder pannt. Nach 30 Sekunden ohne Zoom/Pan-Aktion wird die automatische Aktualisierung wieder aktiviert. Dieses Verhalten dient dazu, den Zoom-Zustand nicht durch neue Daten zu verlieren.
+
+---
+
+### 📁 Enthaltene Komponenten
+
+- `LoopChartActionBar.tsx`  
+  → Auswahlleiste für Slot-Nummer, Zeitraum (über `DateRangePicker`), Messmodus (`DIA0`, `DIA1`, `DIA2`) und Slot-Typ (Schleife/Isolation).  
+  → Ruft alle 10 Sekunden neue Messdaten ab – außer der Zoom-Modus pausiert das.
+- `LoopMeasurementChart.tsx`  
+  → Das eigentliche Liniendiagramm mit Chart.js + Zoom-Plugin.  
+  → Erkennt Zoom/Pan und setzt `chartUpdatePaused`, bis 30 Sekunden Inaktivität vergangen sind.
+
+- `DateRangePicker.tsx`  
+  → Zeigt zwei Felder für Von-/Bis-Datum. Nutzt Redux, um globale Zeitfenster zu setzen.
+
+- `CustomTooltip.tsx`  
+  → Zeigt beim Hover über die Kurve kontextbezogene Werte wie Messwert, Min, Max und Durchschnitt (DIA0/1/2).
+
+---
+
+### 🟢 UML-Aktivitätsdiagramm (Zoom → Pause → Timer → Auto-Update)
+
+```mermaid
+flowchart TD
+    Start([Start])
+    ZoomEvent[[Zoom oder Pan erkannt]]
+    SetPause[Setze chartUpdatePaused = true]
+    StartTimer[Starte 30s Timer]
+    Check[Timer abgelaufen?]
+    SetResume[Setze chartUpdatePaused = false]
+    FetchData[[Datenabruf wieder erlaubt]]
+    End([Ende])
+
+    Start --> ZoomEvent --> SetPause --> StartTimer --> Check
+    Check -- Nein --> StartTimer
+    Check -- Ja --> SetResume --> FetchData --> End
+```
+
+stateDiagram-v2
+[*] --> AktualisierungAktiv
+
+    AktualisierungAktiv --> ZoomPause : Zoom/Pan erkannt
+    ZoomPause --> AktualisierungAktiv : 30 Sekunden Inaktivität
+
+    state AktualisierungAktiv {
+        [*] --> Normalbetrieb
+    }
+
+    state ZoomPause {
+        [*] --> CountdownLäuft
+    }