fix: Messwertlinie (m) im DIA0-Modus in DetailModal sichtbar gemacht

.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.586
+NEXT_PUBLIC_APP_VERSION=1.6.587
 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.586
+NEXT_PUBLIC_APP_VERSION=1.6.587
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.6.587] – 2025-07-11
+
+- fix: Anzeige der Messwertlinie (m) im DIA0-Modus in DetailModal korrigiert
+
+- Unterscheidung zwischen Durchschnitt (g) und Einzelwert (m) je nach Modus eingebaut
+- Fehler behoben, bei dem im DIA0-Modus keine blaue Linie angezeigt wurde
+
+---
 ## [1.6.586] – 2025-07-11
 
 - feat: DetailModal um Min/Max/Durchschnitt ergänzt

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

@@ -31,7 +31,7 @@ ChartJS.register(
   Legend,
   Filler
 );
-import { getColor } from "../../../../../../utils/colors";
+import { getColor } from "@/utils/colors";
 import { PulseLoader } from "react-spinners";
 
 type LoopMeasurementEntry = {

components/main/system/DetailModal.tsx

@@ -36,10 +36,12 @@ ChartJS.register(
 );
 
 type ReduxDataEntry = {
-  t: string;
-  i: number;
-  a?: number;
-  g?: number;
+  //Alle DIA0 t,m,i,a , DIA1 und DIA2 t,i,a,g
+  t: string; // Zeitstempel
+  i: number; // Minimum
+  a: number; // Maximum
+  g?: number; // Durchschnitt (optional, falls vorhanden)
+  m?: number; // aktueller Messwert (optional, falls vorhanden)
 };
 
 const chartOptions = {
@@ -120,7 +122,7 @@ export const DetailModal = ({
     datasets: [],
   });
 
-  const reduxData: ReduxDataEntry[] = useSelector((state: RootState) => {
+  const reduxData = useSelector((state: RootState) => {
     switch (selectedKey) {
       case "+5V":
         return state.systemspannung5Vplus[zeitraum];
@@ -137,7 +139,7 @@ export const DetailModal = ({
       default:
         return [];
     }
-  });
+  }) as ReduxDataEntry[];
 
   const isFullScreen = useSelector(
     (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
@@ -192,8 +194,11 @@ export const DetailModal = ({
           tension: 0.1,
         },
         {
-          label: "Durchschnitt",
-          data: sortedData.map((p) => ({ x: new Date(p.t), y: p.g })),
+          label: zeitraum === "DIA0" ? "Messwert" : "Durchschnitt",
+          data: sortedData.map((p) => ({
+            x: new Date(p.t),
+            y: zeitraum === "DIA0" ? p.m : p.g,
+          })),
           borderColor: "rgba(59,130,246,1)",
           backgroundColor: "rgba(59,130,246,0.3)",
           borderWidth: 2,

package-lock.json

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

package.json

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

redux/slices/systemChartSlice.ts

@@ -0,0 +1,48 @@
+// /redux/slices/systemChartSlice.ts
+import { createSlice } from "@reduxjs/toolkit";
+import { getSystemChartDataThunk } from "@/redux/thunks/getSystemChartDataThunk";
+
+interface ChartData {
+  [mode: string]: {
+    [type: number]: any;
+  };
+}
+
+interface SystemChartState {
+  data: ChartData;
+  loading: boolean;
+  error: string | null;
+}
+
+const initialState: SystemChartState = {
+  data: {},
+  loading: false,
+  error: null,
+};
+
+const systemChartSlice = createSlice({
+  name: "systemChartSlice",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(getSystemChartDataThunk.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(getSystemChartDataThunk.fulfilled, (state, action) => {
+        state.loading = false;
+        const { mode, type } = action.meta.arg;
+        if (!state.data[mode]) {
+          state.data[mode] = {};
+        }
+        state.data[mode][type] = action.payload;
+      })
+      .addCase(getSystemChartDataThunk.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload as string;
+      });
+  },
+});
+
+export default systemChartSlice.reducer;

redux/store.ts

@@ -38,6 +38,7 @@ import temperaturAdWandlerReducer from "./slices/temperaturAdWandlerSlice";
 import temperaturProzessorReducer from "./slices/temperaturProzessorSlice";
 import { combineReducers } from "@reduxjs/toolkit";
 import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
+import systemChartReducer from "./slices/systemChartSlice";
 
 //---------------------------------------
 // 🧠 Nur diese Slices werden persistiert
@@ -91,6 +92,7 @@ const rootReducer = combineReducers({
   firmwareUpdate: firmwareUpdateReducer,
   confirmModal: confirmModalReducer,
   firmwareProgress: firmwareProgressReducer,
+  systemChartSlice: systemChartReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

redux/thunks/getLoopChartDataThunk.ts

@@ -1,6 +1,6 @@
 // /redux/thunks/getLoopChartDataThunk.ts
 import { createAsyncThunk } from "@reduxjs/toolkit";
-import { fetchLoopChartData } from "../../services/fetchLoopChartDataService";
+import { fetchLoopChartData } from "@/services/fetchLoopChartDataService";
 
 interface FetchLoopChartDataParams {
   mode: "DIA0" | "DIA1" | "DIA2";

redux/thunks/getSystemChartDataThunk.ts

@@ -0,0 +1,35 @@
+// /redux/thunks/getSystemChartDataThunk.ts
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { fetchSystemChartData } from "@/services/fetchSystemChartDataService";
+
+interface FetchSystemChartDataParams {
+  mode: "DIA0" | "DIA1" | "DIA2";
+  type: number;
+  slotNumber: number;
+  vonDatum: string;
+  bisDatum: string;
+}
+
+export const getSystemChartDataThunk = createAsyncThunk(
+  "systemChart/fetchSystemChartData",
+  async (params: FetchSystemChartDataParams, { rejectWithValue }) => {
+    try {
+      const data = await fetchSystemChartData(
+        params.mode,
+        params.type,
+        params.slotNumber,
+        params.vonDatum,
+        params.bisDatum
+      );
+
+      if (!data) {
+        return rejectWithValue("Keine Daten erhalten");
+      }
+
+      return data;
+    } catch (error: any) {
+      console.error("❌ Fehler in getSystemChartDataThunk:", error);
+      return rejectWithValue(error.message || "Unbekannter Fehler");
+    }
+  }
+);

services/fetchSystemChartDataService.ts

@@ -0,0 +1,81 @@
+// /services/fetchSystemChartDataService.ts
+/**
+ * hier ist nur noch ein Test, wenn nicht gebraucht, kann die Datei gelöscht werden.
+ */
+const getApiUrl = (
+  mode: "DIA0" | "DIA1" | "DIA2",
+  type: number,
+  slotNumber: number,
+  vonDatum: string,
+  bisDatum: string
+) => {
+  if (!slotNumber) {
+    console.error("⚠️ Slot-Nummer nicht gesetzt!");
+    return "";
+  }
+  // type: 3 → Isolationswiderstand
+  // type: 4 → Schleifenwiderstand
+  const typeFolder =
+    type === 3
+      ? "isolationswiderstand"
+      : type === 4
+      ? "schleifenwiderstand"
+      : "unbekannterTyp";
+
+  return process.env.NEXT_PUBLIC_NODE_ENV === "development"
+    ? `/api/cpl/slotDataAPIHandler?slot=${slotNumber}&messart=${typeFolder}&dia=${mode}&vonDatum=${vonDatum}&bisDatum=${bisDatum}`
+    : `${window.location.origin}/CPL?seite.ACP&${mode}=${formatDate(
+        vonDatum
+      )};${formatDate(bisDatum)};${slotNumber};${type};`;
+};
+
+/**
+ * Wandelt ein Datum von "YYYY-MM-DD" zu "YYYY;MM;DD" um (für die API-URL).
+ */
+const formatDate = (dateString: string) => {
+  const dateParts = dateString.split("-");
+  return `${dateParts[0]};${dateParts[1]};${dateParts[2]}`;
+};
+
+/**
+ * Holt die Messwerte vom Embedded-System oder einer JSON-Datei.
+ */
+export const fetchSystemChartData = async (
+  mode: "DIA0" | "DIA1" | "DIA2",
+  type: number,
+  slotNumber: number,
+  vonDatum: string,
+  bisDatum: string
+) => {
+  try {
+    const apiUrl = getApiUrl(mode, type, slotNumber, vonDatum, bisDatum);
+    if (!apiUrl) {
+      throw new Error(
+        "❌ Keine gültige API-URL! in /services/fetchSystemChartData.ts"
+      );
+    }
+
+    console.log(
+      `📡 Fetching data from in /services/fetchSystemChartData.ts: ${apiUrl}`
+    );
+    const response = await fetch(apiUrl);
+
+    if (!response.ok) {
+      throw new Error(`❌ Fehler: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    console.log(
+      "✅ Daten erfolgreich geladen in /services/fetchSystemChartData.ts:",
+      data
+    );
+
+    return data;
+  } catch (error) {
+    console.error(
+      "❌ Fehler beim Laden der Schleifenmesskurvendaten in /services/fetchSystemChartData.ts:",
+      error
+    );
+    return null;
+  }
+};