Nach Betriebsferien einmal sichern

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.602
+NEXT_PUBLIC_APP_VERSION=1.6.604
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.602
+NEXT_PUBLIC_APP_VERSION=1.6.604
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,23 @@
+## [1.6.604] – 2025-07-21
+
+- feat(analogInputs): automatisches Laden der Chart-Daten bei Tabellenklick via Redux
+
+- analogInputsHistorySlice um `autoLoad` erweitert, um automatisches Laden zu triggern
+- handleSelect in AnalogInputsTable dispatcht jetzt `setAutoLoad(true)`
+- AnalogInputsChart lauscht auf `autoLoad` + `selectedId` und lädt Daten automatisch
+- `autoLoad` wird nach dem Laden wieder auf false zurückgesetzt
+
+---
+## [1.6.603] – 2025-07-21
+
+- feat(analogInputs): automatisches Laden der Chart-Daten bei Tabellenklick via Redux
+
+- analogInputsHistorySlice um `autoLoad` erweitert, um automatisches Laden zu triggern
+- handleSelect in AnalogInputsTable dispatcht jetzt `setAutoLoad(true)`
+- AnalogInputsChart lauscht auf `autoLoad` + `selectedId` und lädt Daten automatisch
+- `autoLoad` wird nach dem Laden wieder auf false zurückgesetzt
+
+---
 ## [1.6.602] – 2025-07-15
 
 - feat(analogInputs): automatisches Laden der Chart-Daten bei Tabellenklick via Redux

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

docs/TODO.md

@@ -19,3 +19,4 @@
       ![Zusatzfunktionen Kai 25.06.2025](./TODOsScreenshots/Zusatzfunktionen_25-06-2025.png)
       Zeit bis Ende August
 - [ ] TODO: Überall Littwin-Blau und ausgewählt und grau wie bei Navigation bei Mouse over
+- [ ] TODO: Messwerteingänge Diagrammme /Messkurven

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.602",
+  "version": "1.6.604",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.602",
+      "version": "1.6.604",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.602",
+  "version": "1.6.604",
   "private": true,
   "scripts": {
     "dev": "next dev",

redux/slices/dateRangePickerSlice.ts

@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface DateRangePickerState {
+  vonDatum: string | null;
+  bisDatum: string | null;
+}
+
+const initialState: DateRangePickerState = {
+  vonDatum: null,
+  bisDatum: null,
+};
+
+const dateRangePickerSlice = createSlice({
+  name: "dateRangePicker",
+  initialState,
+  reducers: {
+    setVonDatum(state, action: PayloadAction<string>) {
+      state.vonDatum = action.payload;
+    },
+    setBisDatum(state, action: PayloadAction<string>) {
+      state.bisDatum = action.payload;
+    },
+    resetDateRange(state) {
+      state.vonDatum = null;
+      state.bisDatum = null;
+    },
+  },
+});
+
+export const { setVonDatum, setBisDatum, resetDateRange } =
+  dateRangePickerSlice.actions;
+export default dateRangePickerSlice.reducer;

redux/store.ts

@@ -38,6 +38,7 @@ import { combineReducers } from "@reduxjs/toolkit";
 import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
 import systemChartReducer from "./slices/systemChartSlice";
 import analogInputsUiReducer from "./slices/analogInputs/analogInputsUiSlice";
+import dateRangePickerReducer from "./slices/dateRangePickerSlice";
 
 const rootReducer = combineReducers({
   systemspannung5Vplus: systemspannung5VplusReducer,
@@ -76,6 +77,7 @@ const rootReducer = combineReducers({
   analogInputsHistory: analogInputsHistoryReducer,
   selectedAnalogInput: selectedAnalogInputReducer,
   analogInputsUi: analogInputsUiReducer,
+  dateRangePicker: dateRangePickerReducer,
 });
 // ⬆️ Alle deine Imports und combineReducers bleiben so wie du sie geschrieben hast ...
 

redux/thunks/getAnalogInputsHistoryThunk.ts

@@ -21,7 +21,12 @@ export const getAnalogInputsHistoryThunk = createAsyncThunk(
     thunkAPI
   ) => {
     try {
-      const response = await fetchAnalogInputsHistory(eingang, zeitraum);
+      const response = await fetchAnalogInputsHistory(
+        eingang,
+        zeitraum,
+        vonDatum,
+        bisDatum
+      );
 
       return {
         eingang,

services/fetchAnalogInputsHistoryService.ts

@@ -4,11 +4,16 @@ import { AnalogInputsHistoryEntry } from "@/redux/slices/analogInputs/analogInpu
 
 export async function fetchAnalogInputsHistory(
   eingang: number,
-  zeitraum: string
+  zeitraum: string,
+  vonDatum?: string,
+  bisDatum?: string
 ): Promise<{ daten: AnalogInputsHistoryEntry[] }> {
-  const res = await fetch(
-    `/api/cpl/getAnalogInputsHistory?eingang=${eingang}&zeitraum=${zeitraum}`
-  );
+  const url =
+    `/api/cpl/getAnalogInputsHistory?eingang=${eingang}&zeitraum=${zeitraum}` +
+    (vonDatum ? `&von=${vonDatum}` : "") +
+    (bisDatum ? `&bis=${bisDatum}` : "");
+
+  const res = await fetch(url);
 
   if (!res.ok) {
     throw new Error("Serverantwort war nicht erfolgreich");

src/components/AnalogInputsChart.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from "react";
+import { Chart } from "some-chart-library"; // Replace with actual chart library import
+
+const AnalogInputsChart = () => {
+  const [startDate, setStartDate] = useState("2025-06-27");
+  const [endDate, setEndDate] = useState("2025-07-01");
+  const [chartData, setChartData] = useState([]);
+
+  const fetchData = async () => {
+    // Replace with actual API call or data fetching logic
+    const response = await fetch(`/api/data?start=${startDate}&end=${endDate}`);
+    const data = await response.json();
+    setChartData(data);
+  };
+
+  useEffect(() => {
+    fetchData(); // Fetch data initially
+  }, []);
+
+  const handleLoadData = () => {
+    fetchData(); // Fetch data when button is clicked
+  };
+
+  return (
+    <div>
+      <div>
+        <label>Von</label>
+        <input
+          type="date"
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+        />
+        <label>Bis</label>
+        <input
+          type="date"
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+        />
+        <button onClick={handleLoadData}>Daten laden</button>
+      </div>
+      <Chart
+        data={chartData}
+        xAxis={{
+          type: "datetime",
+          title: "Zeit",
+        }}
+        yAxis={{
+          title: "Messwert V",
+        }}
+      />
+    </div>
+  );
+};
+
+export default AnalogInputsChart;