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

.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.584
+NEXT_PUBLIC_APP_VERSION=1.6.586
 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.584
+NEXT_PUBLIC_APP_VERSION=1.6.586
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.6.586] – 2025-07-11
+
+- feat: DetailModal um Min/Max/Durchschnitt ergänzt
+
+- Chart zeigt jetzt zusätzlich zu Messwert auch Minimal-, Maximal- und Durchschnittswerte an
+- Datenstruktur an Redux angepasst (i, a, g)
+- Darstellung entspricht jetzt LoopMeasurementChart
+
+---
+## [1.6.585] – 2025-07-10
+
+- feat: DetailModal um Min/Max/Durchschnitt ergänzt
+
+- Chart zeigt jetzt zusätzlich zu Messwert auch Minimal-, Maximal- und Durchschnittswerte an
+- Datenstruktur an Redux angepasst (i, a, g)
+- Darstellung entspricht jetzt LoopMeasurementChart
+
+---
 ## [1.6.584] – 2025-07-10
 
 - feat: DetailModal um Min/Max/Durchschnitt ergänzt

components/main/system/DetailModal.tsx

@@ -6,12 +6,6 @@ import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "@/redux/store";
 import { Listbox } from "@headlessui/react";
 import { setFullScreen } from "@/redux/slices/kabelueberwachungChartSlice";
-type ReduxDataEntry = {
-  t: string;
-  i: number;
-  a?: number; // Maximalwert
-  g?: number; // Durchschnittswert
-};
 
 import {
   Chart as ChartJS,
@@ -41,36 +35,11 @@ ChartJS.register(
   TimeScale
 );
 
-const initialChartData = {
+type ReduxDataEntry = {
-  datasets: [
+  t: string;
-    {
+  i: number;
-      label: "Minimum",
+  a?: number;
-      data: [],
+  g?: number;
-      borderColor: "lightgrey",
-      backgroundColor: "rgba(211,211,211,0.3)",
-      borderWidth: 2,
-      pointRadius: 0,
-      tension: 0.1,
-    },
-    {
-      label: "Maximum",
-      data: [],
-      borderColor: "lightgrey",
-      backgroundColor: "rgba(211,211,211,0.3)",
-      borderWidth: 2,
-      pointRadius: 0,
-      tension: 0.1,
-    },
-    {
-      label: "Durchschnitt",
-      data: [],
-      borderColor: "rgba(59,130,246,1)",
-      backgroundColor: "rgba(59,130,246,0.3)",
-      borderWidth: 2,
-      pointRadius: 0,
-      tension: 0.1,
-    },
-  ],
 };
 
 const chartOptions = {
@@ -147,23 +116,26 @@ export const DetailModal = ({
   setZeitraum,
 }: Props) => {
   const chartRef = useRef<any>(null);
+  const [chartData, setChartData] = useState<any>({
+    datasets: [],
+  });
 
   const reduxData: ReduxDataEntry[] = useSelector((state: RootState) => {
     switch (selectedKey) {
       case "+5V":
-        return state.systemspannung5Vplus[zeitraum] as ReduxDataEntry[];
+        return state.systemspannung5Vplus[zeitraum];
       case "+15V":
-        return state.systemspannung15Vplus[zeitraum] as ReduxDataEntry[];
+        return state.systemspannung15Vplus[zeitraum];
       case "-15V":
-        return state.systemspannung15Vminus[zeitraum] as ReduxDataEntry[];
+        return state.systemspannung15Vminus[zeitraum];
       case "-98V":
-        return state.systemspannung98Vminus[zeitraum] as ReduxDataEntry[];
+        return state.systemspannung98Vminus[zeitraum];
       case "ADC Temp":
-        return state.temperaturAdWandler[zeitraum] as ReduxDataEntry[];
+        return state.temperaturAdWandler[zeitraum];
       case "CPU Temp":
-        return state.temperaturProzessor[zeitraum] as ReduxDataEntry[];
+        return state.temperaturProzessor[zeitraum];
       default:
-        return [] as ReduxDataEntry[];
+        return [];
     }
   });
 
@@ -172,7 +144,6 @@ export const DetailModal = ({
   );
   const dispatch = useDispatch();
 
-  // **Vollbildmodus umschalten**
   const toggleFullScreen = () => {
     dispatch(setFullScreen(!isFullScreen));
     setTimeout(() => {
@@ -181,10 +152,7 @@ export const DetailModal = ({
   };
 
   const handleClose = () => {
-    dispatch({
+    dispatch(setFullScreen(false));
-      type: "kabelueberwachungChartSlice/setFullScreen",
-      payload: false,
-    }); // Beim Schließen zurücksetzen
     onClose();
   };
 
@@ -201,23 +169,39 @@ export const DetailModal = ({
   }, []);
 
   useEffect(() => {
-    if (chartRef.current) {
+    const sortedData = [...reduxData].reverse();
-      const chart = chartRef.current;
-      const sortedData = [...reduxData].reverse();
 
-      chart.data.datasets[0].data = sortedData.map((p) => ({
+    setChartData({
-        x: new Date(p.t),
+      datasets: [
-        y: p.i,
+        {
-      }));
+          label: "Minimum",
-      chart.data.datasets[1].data = sortedData.map((p) => ({
+          data: sortedData.map((p) => ({ x: new Date(p.t), y: p.i })),
-        x: new Date(p.t),
+          borderColor: "lightgrey",
-        y: p.a,
+          backgroundColor: "rgba(211,211,211,0.3)",
-      }));
+          borderWidth: 2,
-      chart.data.datasets[2].data = sortedData.map((p) => ({
+          pointRadius: 0,
-        x: new Date(p.t),
+          tension: 0.1,
-        y: p.g,
+        },
-      }));
+        {
-    }
+          label: "Maximum",
+          data: sortedData.map((p) => ({ x: new Date(p.t), y: p.a })),
+          borderColor: "lightgrey",
+          backgroundColor: "rgba(211,211,211,0.3)",
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+        },
+        {
+          label: "Durchschnitt",
+          data: sortedData.map((p) => ({ x: new Date(p.t), y: p.g })),
+          borderColor: "rgba(59,130,246,1)",
+          backgroundColor: "rgba(59,130,246,0.3)",
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+        },
+      ],
+    });
   }, [reduxData]);
 
   useEffect(() => {
@@ -247,9 +231,7 @@ export const DetailModal = ({
             Detailansicht: {selectedKey}
           </h2>
 
-          {/* Action-Buttons */}
           <div className="absolute top-0 right-0 flex gap-3">
-            {/* Fullscreen-Button */}
             <button
               onClick={toggleFullScreen}
               className="text-2xl text-gray-600 hover:text-gray-800"
@@ -263,7 +245,6 @@ export const DetailModal = ({
               ></i>
             </button>
 
-            {/* Schließen-Button */}
             <button
               onClick={handleClose}
               className="text-2xl text-gray-600 hover:text-gray-800"
@@ -329,7 +310,7 @@ export const DetailModal = ({
         </div>
 
         <div className="h-[85%]">
-          <Line ref={chartRef} data={initialChartData} options={chartOptions} />
+          <Line ref={chartRef} data={chartData} options={chartOptions} />
         </div>
       </div>
     </div>

package-lock.json

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

package.json

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