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
2025-07-11 14:01:57 +02:00
parent d278a79030
commit 99294f26da
11 changed files with 187 additions and 223 deletions
--- a/.env.development
+++ b/.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)

--- a/.env.production
+++ b/.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
--- a/CHANGELOG.md
+++ b/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
--- a/components/main/analogInputs/AnalogInputsChart.tsx
+++ b/components/main/analogInputs/AnalogInputsChart.tsx
@@ -1,12 +1,8 @@
 "use client";
-type AnalogInput = {
-  id: number;
-  label: string;
-  unit: string;
-};
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState, AppDispatch } from "@/redux/store";
 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 { data } = useSelector(
+  const { zeitraum, vonDatum, bisDatum, data, isLoading } = useSelector(
    (state: RootState) => state.analogInputsHistory
-  ) as {
-    data: { [key: string]: AnalogInputHistoryPoint[] };
-  };
-  const zeitraum = useSelector(
-    (state: RootState) => state.analogInputsHistory.zeitraum
  );

-  const handleFetchData = () => {
-    if (!selectedId || !zeitraum) return;
-    dispatch(getAnalogInputsHistoryThunk({ eingang: selectedId, zeitraum }));
-  };
-
  useEffect(() => {
-    if (selectedId && zeitraum) {
-      dispatch(getAnalogInputsHistoryThunk({ eingang: selectedId, zeitraum }));
-    }
-  }, [dispatch, selectedId, zeitraum]);
+    const today = new Date();
+    const vor30Tagen = new Date(today);
+    vor30Tagen.setDate(today.getDate() - 30);

-  // ✅ 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);
-        }
-      }
+    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,
+      })
+    );
  };
-    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 dataKey = selectedId ? String(selectedId + 99) : null;
  const chartData = {
-    datasets: [
+    datasets:
+      dataKey && data[dataKey]
+        ? [
            {
-        label: `Messkurve ${selectedInput?.label ?? "Eingang"} [${
-          selectedInput?.unit ?? ""
-        }]`,
-        data: inputData.map((point: AnalogInputHistoryPoint) => ({
-          x: point.t,
-          y: point.m,
+              label: `Messwerteingang ${selectedId}`,
+              data: data[dataKey].map((p: AnalogInputHistoryPoint) => ({
+                x: new Date(p.t),
+                y: p.m,
              })),
              fill: false,
              borderColor: getColor("littwin-blue"),
-        backgroundColor: "rgba(59,130,246,0.5)",
+              backgroundColor: "rgba(59,130,246,0.3)",
              borderWidth: 2,
              pointRadius: 0,
-        pointHoverRadius: 10,
              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">) {
-            const y = context.parsed.y;
-            return `Messwert: ${y}`;
-          },
-          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,
+          label: (ctx) => `Messwert: ${ctx.parsed.y}`,
+          title: (items) =>
+            `Zeitpunkt: ${new Date(items[0].parsed.x).toLocaleString("de-DE")}`,
        },
      },
    },
    scales: {
      x: {
-        type: "time" as const,
+        type: "time",
        time: {
-          unit: "day" as const, // nur Datum in Achse
-          tooltipFormat: "dd.MM.yyyy HH:mm", // aber Uhrzeit im Tooltip sichtbar
-          displayFormats: {
-            day: "dd.MM.yyyy",
-          },
-        },
-
-        adapters: {
-          date: {
-            locale: de,
-          },
-        },
-        title: {
-          display: true,
-          text: "Zeit",
-        },
-      },
-      y: {
-        title: {
-          display: true,
-          text: `Messwert [${selectedInput?.unit ?? ""}]`,
+          unit: "day",
+          tooltipFormat: "dd.MM.yyyy HH:mm",
+          displayFormats: { day: "dd.MM.yyyy" },
        },
+        adapters: { date: { locale: de } },
+        title: { display: true, text: "Zeit" },
      },
+      y: { title: { display: true, text: "Messwert" } },
    },
  };

  return (
-    <div className="w-full h-full">
-      <Line data={chartData} options={chartOptions} />
+    <div className="flex flex-col gap-3">
+      <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>
  );
 }
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.597",
+  "version": "1.6.598",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/pages/_app.tsx
+++ b/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")) {
--- a/redux/slices/analogInputsChartSlice.ts
+++ b/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;
--- a/redux/slices/analogInputsHistorySlice.ts
+++ b/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 {
-  data: Record<string, AnalogInputsHistoryEntry[]>;
+export interface InputHistoryState {
+  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 = {
-  data: {},
+const initialState: InputHistoryState = {
+  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(
-        getAnalogInputsHistoryThunk.fulfilled,
-        (
-          state,
-          action: PayloadAction<{
-            eingang: number;
-            zeitraum: string;
-            daten: AnalogInputsHistoryEntry[];
-          }>
-        ) => {
-          const key = String(action.payload.eingang + 99); // z.B. 100 für AE1
+      .addCase(getAnalogInputsHistoryThunk.fulfilled, (state, action) => {
+        const key = String(action.payload.eingang + 99);
        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;
--- a/redux/thunks/getAnalogInputsChartDataThunk.ts
+++ b/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",
--- a/redux/thunks/getAnalogInputsHistoryThunk.ts
+++ b/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",
+  async (
    {
+      eingang,
+      zeitraum,
+      vonDatum,
+      bisDatum,
+    }: {
      eingang: number;
      zeitraum: string;
-    daten: AnalogInputsHistoryEntry[];
+      vonDatum: string;
+      bisDatum: string;
    },
-  { eingang: number; zeitraum: string }
->("analogInputsHistory/fetch", async ({ eingang, zeitraum }, thunkAPI) => {
+    thunkAPI
+  ) => {
    try {
      const response = await fetchAnalogInputsHistory(eingang, zeitraum);
+
      return {
        eingang,
        zeitraum,
-      daten: response.daten,
+        daten: response.daten as AnalogInputsHistoryEntry[],
      };
    } catch (error: any) {
      return thunkAPI.rejectWithValue(error.message ?? "Fehler beim Laden");
    }
-});
+  }
+);