noch Fehler für Charts

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

@@ -6,7 +6,7 @@ import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
 import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
 import TDRChart from "./TDRChart/TDRChart";
 import { useSelector } from "react-redux";
-import { RootState } from "../../../../redux/store";
+import { RootState } from "../../../../../redux/store";
 
 interface ChartSwitcherProps {
   isOpen: boolean;
@@ -28,15 +28,14 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
         content: {
           top: "50%",
           left: "50%",
-          right: "auto",
+
           bottom: "auto",
           marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          width: "80%",
+          width: "100%",
-          maxWidth: "50rem",
+          maxWidth: "70rem",
-          height: "35rem",
+          height: "50rem",
           padding: "1rem",
-          overflow: "hidden",
         },
       }}
     >

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

@@ -1,4 +1,4 @@
-// /components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx
+// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
 import React, { useState } from "react";
 import DateRangePicker from "../DateRangePicker";
 import LoopMeasurementChart from "./LoopMeasurementChart";
@@ -7,20 +7,26 @@ import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
 
 const LoopChartActionBar: React.FC = () => {
   const dispatch = useDispatch();
-  const BASE_URL = "http://localhost:3002";
-
   const [showChart, setShowChart] = useState(false);
 
   const handleFetchData = async () => {
     try {
-      const response = await fetch(`${BASE_URL}/loop`);
+      const response = await fetch("/mockData.json");
-      if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
-
       const data = await response.json();
+      if (Array.isArray(data)) {
+        // data ist ein Array und kann mit .map() verwendet werden
+        console.log("Daten geladen:", data);
+      } else {
+        console.error("Erwartetes Array, aber erhalten:", data);
+      }
       dispatch(setChartData(data));
       setShowChart(true);
     } catch (error) {
       console.error("Fehler beim Laden der Daten:", error);
+      if (error instanceof Response) {
+        const errorMessage = await error.text();
+        console.error("Fehlermeldung vom Server:", errorMessage);
+      }
     }
   };
 

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

@@ -1,20 +1,14 @@
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import { RootState } from "../../../../redux/store";
+import { RootState } from "../../../../../../redux/store";
 import Chart from "chart.js/auto";
-import "chartjs-adapter-date-fns";
-import { parseISO } from "date-fns";
 
 const LoopMeasurementChart: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
-  // Nutze entweder Redux-Daten oder Mock-Daten
+  const chartData =
-  const chartData = useSelector((state: RootState) => state.chartData.data) || [
+    useSelector((state: RootState) => state.chartData.data) ?? [];
-    { timestamp: "2025-02-13T12:00:00", loop: 0.8 },
-    { timestamp: "2025-02-13T12:10:00", loop: 1.2 },
-    { timestamp: "2025-02-13T12:20:00", loop: 1.5 },
-  ];
 
   useEffect(() => {
     if (chartRef.current) {
@@ -22,19 +16,47 @@ const LoopMeasurementChart: React.FC = () => {
         chartInstance.current.destroy();
       }
 
+      // Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden
+      const processedData = chartData.map((entry) => ({
+        ...entry,
+        timestampMs: new Date(entry.timestamp).getTime(),
+      }));
+
       const ctx = chartRef.current.getContext("2d");
       if (ctx) {
         chartInstance.current = new Chart(ctx, {
           type: "line",
           data: {
-            labels: chartData.map((entry) => parseISO(entry.timestamp)),
             datasets: [
               {
-                label: "Schleifenwiderstand (kOhm)",
+                label: "Messwert i (kOhm)",
-                data: chartData.map((entry) => entry.loop ?? 0),
+                data: processedData.map((entry) => ({
-                borderColor: "rgba(0, 123, 255, 1)",
+                  x: entry.timestampMs,
-                backgroundColor: "rgba(0, 123, 255, 0.2)",
+                  y: entry.i ?? 0,
-                tension: 0.1,
+                })),
+                borderColor: "rgba(75, 192, 192, 1)",
+                backgroundColor: "rgba(75, 192, 192, 0.2)",
+                fill: true,
+              },
+              {
+                label: "Messwert a (kOhm)",
+                data: processedData.map((entry) => ({
+                  x: entry.timestampMs,
+                  y: entry.a ?? 0,
+                })),
+                borderColor: "rgba(192, 75, 75, 1)",
+                backgroundColor: "rgba(192, 75, 75, 0.2)",
+                fill: true,
+              },
+              {
+                label: "Messwert g (kOhm)",
+                data: processedData.map((entry) => ({
+                  x: entry.timestampMs,
+                  y: entry.g ?? 0,
+                })),
+                borderColor: "rgba(75, 75, 192, 1)",
+                backgroundColor: "rgba(75, 75, 192, 0.2)",
+                fill: true,
               },
             ],
           },
@@ -43,12 +65,26 @@ const LoopMeasurementChart: React.FC = () => {
             maintainAspectRatio: false,
             scales: {
               x: {
-                type: "time",
+                type: "linear",
-                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
+                position: "bottom",
-                title: { display: true, text: "Zeit" },
+                ticks: {
+                  callback: function (value, index, values) {
+                    const date = new Date(value);
+                    return `${date.getDate()}.${
+                      date.getMonth() + 1
+                    }.${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`;
+                  },
+                },
+                title: {
+                  display: true,
+                  text: "Zeit",
+                },
               },
               y: {
-                title: { display: true, text: "kOhm" },
+                title: {
+                  display: true,
+                  text: "kOhm",
+                },
                 min: 0,
                 max: 2,
               },

public/mockData.json

@@ -0,0 +1,9 @@
+[ 
+{"t":"13-02-2025 15:00:00","i":65.000,"a":65.000,"g":65.000} ,
+{"t":"13-02-2025 14:00:00","i":65.000,"a":65.000,"g":65.000} ,
+{"t":"13-02-2025 13:00:00","i":65.000,"a":65.000,"g":65.000} ,
+{"t":"13-02-2025 12:00:00","i":65.000,"a":65.000,"g":65.000} ,
+{"t":"13-02-2025 11:00:00","i":65.000,"a":65.000,"g":65.000} ,
+{"t":"13-02-2025 10:00:00","i":65.000,"a":65.000,"g":65.000} ,
+{"t":"13-02-2025 09:00:00","i":65.000,"a":65.000,"g":65.000} 
+]