statische Werte in Chart zeichnenfür Loop

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

@@ -2,13 +2,22 @@ import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
 import Chart from "chart.js/auto";
+import "chartjs-adapter-moment";
 
 const LoopMeasurementChart: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
-  const chartData =
-    useSelector((state: RootState) => state.chartData.data) ?? [];
+  // Mock-Daten für das Beispiel
+  const chartData = [
+    { t: "13-02-2025 15:00:00", i: 60.0, a: 65.0, g: 70.0 },
+    { t: "14-02-2025 14:00:00", i: 65.0, a: 65.0, g: 65.0 },
+    { t: "14-02-2025 13:00:00", i: 65.0, a: 65.0, g: 65.0 },
+    { t: "15-02-2025 12:00:00", i: 65.0, a: 65.0, g: 65.0 },
+    { t: "15-02-2025 11:00:00", i: 65.0, a: 65.0, g: 65.0 },
+    { t: "16-02-2025 10:00:00", i: 65.0, a: 65.0, g: 65.0 },
+    { t: "17-02-2025 09:00:00", i: 65.0, a: 65.0, g: 65.0 },
+  ];
 
   useEffect(() => {
     if (chartRef.current) {
@@ -19,7 +28,9 @@ const LoopMeasurementChart: React.FC = () => {
       // Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden
       const processedData = chartData.map((entry) => ({
         ...entry,
-        timestampMs: new Date(entry.timestamp).getTime(),
+        timestampMs: new Date(
+          entry.t.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3")
+        ).getTime(),
       }));
 
       const ctx = chartRef.current.getContext("2d");
@@ -32,7 +43,7 @@ const LoopMeasurementChart: React.FC = () => {
                 label: "Messwert i (kOhm)",
                 data: processedData.map((entry) => ({
                   x: entry.timestampMs,
-                  y: entry.i ?? 0,
+                  y: entry.i,
                 })),
                 borderColor: "rgba(75, 192, 192, 1)",
                 backgroundColor: "rgba(75, 192, 192, 0.2)",
@@ -42,7 +53,7 @@ const LoopMeasurementChart: React.FC = () => {
                 label: "Messwert a (kOhm)",
                 data: processedData.map((entry) => ({
                   x: entry.timestampMs,
-                  y: entry.a ?? 0,
+                  y: entry.a,
                 })),
                 borderColor: "rgba(192, 75, 75, 1)",
                 backgroundColor: "rgba(192, 75, 75, 0.2)",
@@ -52,7 +63,7 @@ const LoopMeasurementChart: React.FC = () => {
                 label: "Messwert g (kOhm)",
                 data: processedData.map((entry) => ({
                   x: entry.timestampMs,
-                  y: entry.g ?? 0,
+                  y: entry.g,
                 })),
                 borderColor: "rgba(75, 75, 192, 1)",
                 backgroundColor: "rgba(75, 75, 192, 0.2)",
@@ -65,14 +76,12 @@ const LoopMeasurementChart: React.FC = () => {
             maintainAspectRatio: false,
             scales: {
               x: {
-                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()}`;
+                type: "time",
+                time: {
+                  unit: "day",
+                  tooltipFormat: "dd.MM.yyyy HH:mm",
+                  displayFormats: {
+                    day: "dd.MM.yyyy",
                   },
                 },
                 title: {
@@ -85,8 +94,8 @@ const LoopMeasurementChart: React.FC = () => {
                   display: true,
                   text: "kOhm",
                 },
-                min: 0,
-                max: 2,
+                min: 50,
+                max: 80,
               },
             },
           },
@@ -100,7 +109,7 @@ const LoopMeasurementChart: React.FC = () => {
         chartInstance.current = null;
       }
     };
-  }, [chartData]);
+  }, []);
 
   return (
     <div style={{ position: "relative", width: "100%", height: "400px" }}>