noch Fehler für Charts

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 = 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 },
-  ];
+  const chartData =
+    useSelector((state: RootState) => state.chartData.data) ?? [];
 
   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)",
-                data: chartData.map((entry) => entry.loop ?? 0),
-                borderColor: "rgba(0, 123, 255, 1)",
-                backgroundColor: "rgba(0, 123, 255, 0.2)",
-                tension: 0.1,
+                label: "Messwert i (kOhm)",
+                data: processedData.map((entry) => ({
+                  x: entry.timestampMs,
+                  y: entry.i ?? 0,
+                })),
+                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",
-                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
-                title: { display: true, text: "Zeit" },
+                type: "linear",
+                position: "bottom",
+                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,
               },