feat: AnalogInputsChart mit DateRangePicker und vollständiger Redux-Integration erweitert

- analogInputsHistorySlice angepasst: zeitraum, vonDatum, bisDatum und data hinzugefügt
- Typdefinitionen im Slice und Thunk korrigiert
- getAnalogInputsHistoryThunk erweitert, um vonDatum und bisDatum zu akzeptieren
- DateRangePicker korrekt in AnalogInputsChart.tsx integriert
- Fehler bei Selector-Zugriffen und Dispatch behoben

.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.597
+NEXT_PUBLIC_APP_VERSION=1.6.598
 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.597
+NEXT_PUBLIC_APP_VERSION=1.6.598
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.6.598] – 2025-07-11
+
+- feat: AnalogInputsChart mit DateRangePicker und vollständiger Redux-Integration erweitert
+
+- analogInputsHistorySlice angepasst: zeitraum, vonDatum, bisDatum und data hinzugefügt
+- Typdefinitionen im Slice und Thunk korrigiert
+- getAnalogInputsHistoryThunk erweitert, um vonDatum und bisDatum zu akzeptieren
+- DateRangePicker korrekt in AnalogInputsChart.tsx integriert
+- Fehler bei Selector-Zugriffen und Dispatch behoben
+
+---
 ## [1.6.597] – 2025-07-11
 
 - feat(api): Zeitraum und Eingang als Pflichtparameter für AnalogInputs-API eingeführt

components/main/analogInputs/AnalogInputsChart.tsx

@@ -1,12 +1,8 @@
 "use client";
-type AnalogInput = {
+import React, { useEffect, useRef } from "react";
-  id: number;
+import { useDispatch, useSelector } from "react-redux";
-  label: string;
+import { RootState, AppDispatch } from "@/redux/store";
-  unit: string;
-};
-import React, { useEffect } from "react";
 import { Line } from "react-chartjs-2";
-import { getColor } from "@/utils/colors";
 import {
   Chart as ChartJS,
   LineElement,
@@ -18,19 +14,19 @@ import {
   Filler,
   TimeScale,
 } from "chart.js";
+import type { ChartOptions } from "chart.js";
 import "chartjs-adapter-date-fns";
 import { de } from "date-fns/locale";
-import { useSelector, useDispatch } from "react-redux";
-import type { RootState, AppDispatch } from "@/redux/store";
 import { getAnalogInputsHistoryThunk } from "@/redux/thunks/getAnalogInputsHistoryThunk";
-import DateRangePicker from "@/components/common/DateRangePicker";
-import { Listbox } from "@headlessui/react";
 import {
   setVonDatum,
   setBisDatum,
-} from "@/redux/slices/analogInputsChartSlice";
+  setZeitraum,
+} from "@/redux/slices/analogInputsHistorySlice";
+import DateRangePicker from "@/components/common/DateRangePicker";
+import { Listbox } from "@headlessui/react";
+import { getColor } from "@/utils/colors";
 
-// Basis-Registrierung (ohne Zoom-Plugin)
 ChartJS.register(
   LineElement,
   PointElement,
@@ -42,160 +38,142 @@ ChartJS.register(
   TimeScale
 );
 
+type AnalogInputHistoryPoint = {
+  t: string;
+  m: number;
+};
+
 export default function AnalogInputsChart({
   selectedId,
 }: {
   selectedId: number | null;
 }) {
-  const selectedInput = useSelector(
-    (state: RootState) => state.selectedAnalogInput
-  ) as unknown as AnalogInput | null;
-
   const dispatch = useDispatch<AppDispatch>();
+  const chartRef = useRef<any>(null);
 
-  type AnalogInputHistoryPoint = { t: string | number | Date; m: number };
+  const { zeitraum, vonDatum, bisDatum, data, isLoading } = useSelector(
-
-  const { data } = useSelector(
     (state: RootState) => state.analogInputsHistory
-  ) as {
-    data: { [key: string]: AnalogInputHistoryPoint[] };
-  };
-  const zeitraum = useSelector(
-    (state: RootState) => state.analogInputsHistory.zeitraum
   );
 
-  const handleFetchData = () => {
+  useEffect(() => {
-    if (!selectedId || !zeitraum) return;
+    const today = new Date();
-    dispatch(getAnalogInputsHistoryThunk({ eingang: selectedId, zeitraum }));
+    const vor30Tagen = new Date(today);
+    vor30Tagen.setDate(today.getDate() - 30);
+
+    if (!vonDatum) dispatch(setVonDatum(vor30Tagen.toISOString().slice(0, 10)));
+    if (!bisDatum) dispatch(setBisDatum(today.toISOString().slice(0, 10)));
+  }, [dispatch, vonDatum, bisDatum]);
+
+  const handleFetchChartData = () => {
+    if (!selectedId) return;
+    dispatch(
+      getAnalogInputsHistoryThunk({
+        eingang: selectedId,
+        zeitraum,
+        vonDatum,
+        bisDatum,
+      })
+    );
   };
 
-  useEffect(() => {
+  const dataKey = selectedId ? String(selectedId + 99) : null;
-    if (selectedId && zeitraum) {
-      dispatch(getAnalogInputsHistoryThunk({ eingang: selectedId, zeitraum }));
-    }
-  }, [dispatch, selectedId, zeitraum]);
-
-  // ✅ 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>
-    );
-  }
-
-  const key = String(selectedId + 99);
-  const inputData = data[key];
-
-  if (!inputData) {
-    return (
-      <div className="text-red-500">
-        Keine Verlaufsdaten für Messwerteingang {selectedId} gefunden.
-      </div>
-    );
-  }
-
   const chartData = {
-    datasets: [
+    datasets:
-      {
+      dataKey && data[dataKey]
-        label: `Messkurve ${selectedInput?.label ?? "Eingang"} [${
+        ? [
-          selectedInput?.unit ?? ""
+            {
-        }]`,
+              label: `Messwerteingang ${selectedId}`,
-        data: inputData.map((point: AnalogInputHistoryPoint) => ({
+              data: data[dataKey].map((p: AnalogInputHistoryPoint) => ({
-          x: point.t,
+                x: new Date(p.t),
-          y: point.m,
+                y: p.m,
-        })),
+              })),
-        fill: false,
+              fill: false,
-        borderColor: getColor("littwin-blue"),
+              borderColor: getColor("littwin-blue"),
-        backgroundColor: "rgba(59,130,246,0.5)",
+              backgroundColor: "rgba(59,130,246,0.3)",
-        borderWidth: 2,
+              borderWidth: 2,
-        pointRadius: 0,
+              pointRadius: 0,
-        pointHoverRadius: 10,
+              tension: 0.1,
-        tension: 0.1,
+            },
-      },
+          ]
-    ],
+        : [],
   };
 
-  const chartOptions = {
+  const chartOptions: ChartOptions<"line"> = {
     responsive: true,
     plugins: {
-      legend: { position: "top" as const },
+      legend: { position: "top" },
+      title: { display: true, text: "Verlauf" },
       tooltip: {
-        mode: "index" as const,
+        mode: "index",
         intersect: false,
         callbacks: {
-          label: function (context: import("chart.js").TooltipItem<"line">) {
+          label: (ctx) => `Messwert: ${ctx.parsed.y}`,
-            const y = context.parsed.y;
+          title: (items) =>
-            return `Messwert: ${y}`;
+            `Zeitpunkt: ${new Date(items[0].parsed.x).toLocaleString("de-DE")}`,
-          },
-          title: function (
-            tooltipItems: import("chart.js").TooltipItem<"line">[]
-          ) {
-            const date = tooltipItems[0].parsed.x;
-            return `Zeitpunkt: ${new Date(date).toLocaleString("de-DE")}`;
-          },
-        },
-      },
-
-      title: {
-        display: true,
-        text: `Verlauf der letzten 30 Tage`,
-      },
-      zoom: {
-        pan: {
-          enabled: true,
-          mode: "x" as const,
-        },
-        zoom: {
-          wheel: { enabled: true },
-          pinch: { enabled: true },
-          mode: "x" as const,
         },
       },
     },
     scales: {
       x: {
-        type: "time" as const,
+        type: "time",
         time: {
-          unit: "day" as const, // nur Datum in Achse
+          unit: "day",
-          tooltipFormat: "dd.MM.yyyy HH:mm", // aber Uhrzeit im Tooltip sichtbar
+          tooltipFormat: "dd.MM.yyyy HH:mm",
-          displayFormats: {
+          displayFormats: { day: "dd.MM.yyyy" },
-            day: "dd.MM.yyyy",
-          },
-        },
-
-        adapters: {
-          date: {
-            locale: de,
-          },
-        },
-        title: {
-          display: true,
-          text: "Zeit",
-        },
-      },
-      y: {
-        title: {
-          display: true,
-          text: `Messwert [${selectedInput?.unit ?? ""}]`,
         },
+        adapters: { date: { locale: de } },
+        title: { display: true, text: "Zeit" },
       },
+      y: { title: { display: true, text: "Messwert" } },
     },
   };
 
   return (
-    <div className="w-full h-full">
+    <div className="flex flex-col gap-3">
-      <Line data={chartData} options={chartOptions} />
+      <div className="flex flex-wrap items-center gap-4 mb-2">
+        <DateRangePicker />
+
+        <Listbox value={zeitraum} onChange={(v) => dispatch(setZeitraum(v))}>
+          <div className="relative w-48">
+            <Listbox.Button className="w-full border px-3 py-1 rounded bg-white flex justify-between items-center text-sm">
+              <span>
+                {zeitraum === "DIA0"
+                  ? "Alle Messwerte"
+                  : zeitraum === "DIA1"
+                  ? "Stündlich"
+                  : "Täglich"}
+              </span>
+              <i className="bi bi-chevron-down text-gray-400" />
+            </Listbox.Button>
+            <Listbox.Options className="absolute z-10 mt-1 w-full border bg-white shadow rounded text-sm">
+              {["DIA0", "DIA1", "DIA2"].map((option) => (
+                <Listbox.Option
+                  key={option}
+                  value={option}
+                  className="px-4 py-1 cursor-pointer hover:bg-gray-200"
+                >
+                  {option === "DIA0"
+                    ? "Alle Messwerte"
+                    : option === "DIA1"
+                    ? "Stündlich"
+                    : "Täglich"}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>
+
+        <button
+          onClick={handleFetchChartData}
+          className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
+        >
+          Daten laden
+        </button>
+      </div>
+
+      <div className="h-[50vh] w-full">
+        <Line ref={chartRef} data={chartData} options={chartOptions} />
+      </div>
     </div>
   );
 }

package-lock.json

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

package.json

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

pages/_app.tsx

@@ -87,7 +87,14 @@ function AppContent({
       } else if (pathname.includes("digitalOutputs")) {
         dispatch(getDigitalOutputsThunk());
       } else if (pathname.includes("analogHistory")) {
-        dispatch(getAnalogInputsHistoryThunk());
+        dispatch(
+          getAnalogInputsHistoryThunk({
+            eingang: 1, // Beispielwert, ggf. dynamisch setzen
+            zeitraum: "tag", // Beispielwert, ggf. dynamisch setzen
+            vonDatum: new Date().toISOString().split("T")[0], // heutiges Datum
+            bisDatum: new Date().toISOString().split("T")[0], // heutiges Datum
+          })
+        );
       } else if (pathname.includes("dashboard")) {
         dispatch(getLast20MessagesThunk());
       } else if (pathname.includes("einstellungen")) {

redux/slices/analogInputsChartSlice.ts

@@ -1,40 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-
-export type Zeitraum = "DIA0" | "DIA1" | "DIA2";
-
-interface ChartState {
-  zeitraum: Zeitraum;
-  vonDatum: string;
-  bisDatum: string;
-  isLoading: boolean;
-}
-
-const initialState: ChartState = {
-  zeitraum: "DIA0",
-  vonDatum: "",
-  bisDatum: "",
-  isLoading: false,
-};
-
-const analogInputsChartSlice = createSlice({
-  name: "analogInputsChart",
-  initialState,
-  reducers: {
-    setZeitraum: (state, action: PayloadAction<Zeitraum>) => {
-      state.zeitraum = action.payload;
-    },
-    setVonDatum: (state, action: PayloadAction<string>) => {
-      state.vonDatum = action.payload;
-    },
-    setBisDatum: (state, action: PayloadAction<string>) => {
-      state.bisDatum = action.payload;
-    },
-    setIsLoading: (state, action: PayloadAction<boolean>) => {
-      state.isLoading = action.payload;
-    },
-  },
-});
-
-export const { setZeitraum, setVonDatum, setBisDatum, setIsLoading } =
-  analogInputsChartSlice.actions;
-export default analogInputsChartSlice.reducer;

redux/slices/analogInputsHistorySlice.ts

@@ -1,4 +1,3 @@
-// /redux/slices/analogInputsHistorySlice.ts
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { getAnalogInputsHistoryThunk } from "../thunks/getAnalogInputsHistoryThunk";
 
@@ -7,27 +6,37 @@ export type AnalogInputsHistoryEntry = {
   m: number;
 };
 
-interface AnalogInputsHistoryState {
+export interface InputHistoryState {
-  data: Record<string, AnalogInputsHistoryEntry[]>;
+  zeitraum: string;
+  vonDatum: string;
+  bisDatum: string;
   isLoading: boolean;
   error: string | null;
-  zeitraum: string; // z.B. "DIA0", "DIA1", "DIA2"
+  data: Record<string, AnalogInputsHistoryEntry[]>;
 }
 
-const initialState: AnalogInputsHistoryState = {
+const initialState: InputHistoryState = {
-  data: {},
+  zeitraum: "DIA0",
+  vonDatum: "",
+  bisDatum: "",
   isLoading: false,
   error: null,
-  zeitraum: "DIA0",
+  data: {},
 };
 
-const analogInputsHistorySlice = createSlice({
+export const analogInputsHistorySlice = createSlice({
   name: "analogInputsHistory",
   initialState,
   reducers: {
     setZeitraum: (state, action: PayloadAction<string>) => {
       state.zeitraum = action.payload;
     },
+    setVonDatum: (state, action: PayloadAction<string>) => {
+      state.vonDatum = action.payload;
+    },
+    setBisDatum: (state, action: PayloadAction<string>) => {
+      state.bisDatum = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -35,22 +44,11 @@ const analogInputsHistorySlice = createSlice({
         state.isLoading = true;
         state.error = null;
       })
-      .addCase(
+      .addCase(getAnalogInputsHistoryThunk.fulfilled, (state, action) => {
-        getAnalogInputsHistoryThunk.fulfilled,
+        const key = String(action.payload.eingang + 99);
-        (
+        state.data[key] = action.payload.daten;
-          state,
+        state.isLoading = false;
-          action: PayloadAction<{
+      })
-            eingang: number;
-            zeitraum: string;
-            daten: AnalogInputsHistoryEntry[];
-          }>
-        ) => {
-          const key = String(action.payload.eingang + 99); // z.B. 100 für AE1
-          state.data[key] = action.payload.daten;
-          state.zeitraum = action.payload.zeitraum;
-          state.isLoading = false;
-        }
-      )
       .addCase(getAnalogInputsHistoryThunk.rejected, (state, action) => {
         state.isLoading = false;
         state.error = action.payload as string;
@@ -58,6 +56,7 @@ const analogInputsHistorySlice = createSlice({
   },
 });
 
-export const { setZeitraum } = analogInputsHistorySlice.actions;
+export const { setZeitraum, setVonDatum, setBisDatum } =
+  analogInputsHistorySlice.actions;
 
 export default analogInputsHistorySlice.reducer;

redux/thunks/getAnalogInputsChartDataThunk.ts

@@ -1,6 +1,5 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
 import { RootState } from "@/redux/store";
-import { Zeitraum } from "@/redux/slices/analogInputsChartSlice";
 
 export const getAnalogInputsChartDataThunk = createAsyncThunk(
   "analogInputsChart/fetchChartData",

redux/thunks/getAnalogInputsHistoryThunk.ts

@@ -4,22 +4,32 @@ import { createAsyncThunk } from "@reduxjs/toolkit";
 import { fetchAnalogInputsHistory } from "@/services/fetchAnalogInputsHistoryService";
 import { AnalogInputsHistoryEntry } from "../slices/analogInputsHistorySlice";
 
-export const getAnalogInputsHistoryThunk = createAsyncThunk<
+export const getAnalogInputsHistoryThunk = createAsyncThunk(
-  {
+  "analogInputsHistory/fetch",
-    eingang: number;
+  async (
-    zeitraum: string;
+    {
-    daten: AnalogInputsHistoryEntry[];
-  },
-  { eingang: number; zeitraum: string }
->("analogInputsHistory/fetch", async ({ eingang, zeitraum }, thunkAPI) => {
-  try {
-    const response = await fetchAnalogInputsHistory(eingang, zeitraum);
-    return {
       eingang,
       zeitraum,
-      daten: response.daten,
+      vonDatum,
-    };
+      bisDatum,
-  } catch (error: any) {
+    }: {
-    return thunkAPI.rejectWithValue(error.message ?? "Fehler beim Laden");
+      eingang: number;
+      zeitraum: string;
+      vonDatum: string;
+      bisDatum: string;
+    },
+    thunkAPI
+  ) => {
+    try {
+      const response = await fetchAnalogInputsHistory(eingang, zeitraum);
+
+      return {
+        eingang,
+        zeitraum,
+        daten: response.daten as AnalogInputsHistoryEntry[],
+      };
+    } catch (error: any) {
+      return thunkAPI.rejectWithValue(error.message ?? "Fehler beim Laden");
+    }
   }
-});
+);