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

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 = {
-  datasets: [
-    {
-      label: "Minimum",
-      data: [],
-      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,
-    },
-  ],
+type ReduxDataEntry = {
+  t: string;
+  i: number;
+  a?: number;
+  g?: number;
 };
 
 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({
-      type: "kabelueberwachungChartSlice/setFullScreen",
-      payload: false,
-    }); // Beim Schließen zurücksetzen
+    dispatch(setFullScreen(false));
     onClose();
   };
 
@@ -201,23 +169,39 @@ export const DetailModal = ({
   }, []);
 
   useEffect(() => {
-    if (chartRef.current) {
-      const chart = chartRef.current;
-      const sortedData = [...reduxData].reverse();
+    const sortedData = [...reduxData].reverse();
 
-      chart.data.datasets[0].data = sortedData.map((p) => ({
-        x: new Date(p.t),
-        y: p.i,
-      }));
-      chart.data.datasets[1].data = sortedData.map((p) => ({
-        x: new Date(p.t),
-        y: p.a,
-      }));
-      chart.data.datasets[2].data = sortedData.map((p) => ({
-        x: new Date(p.t),
-        y: p.g,
-      }));
-    }
+    setChartData({
+      datasets: [
+        {
+          label: "Minimum",
+          data: sortedData.map((p) => ({ x: new Date(p.t), y: p.i })),
+          borderColor: "lightgrey",
+          backgroundColor: "rgba(211,211,211,0.3)",
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+        },
+        {
+          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>