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 =
+  // Mock-Daten für das Beispiel
-    useSelector((state: RootState) => state.chartData.data) ?? [];
+  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",
+                type: "time",
-                position: "bottom",
+                time: {
-                ticks: {
+                  unit: "day",
-                  callback: function (value, index, values) {
+                  tooltipFormat: "dd.MM.yyyy HH:mm",
-                    const date = new Date(value);
+                  displayFormats: {
-                    return `${date.getDate()}.${
+                    day: "dd.MM.yyyy",
-                      date.getMonth() + 1
-                    }.${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`;
                   },
                 },
                 title: {
@@ -85,8 +94,8 @@ const LoopMeasurementChart: React.FC = () => {
                   display: true,
                   text: "kOhm",
                 },
-                min: 0,
+                min: 50,
-                max: 2,
+                max: 80,
               },
             },
           },
@@ -100,7 +109,7 @@ const LoopMeasurementChart: React.FC = () => {
         chartInstance.current = null;
       }
     };
-  }, [chartData]);
+  }, []);
 
   return (
     <div style={{ position: "relative", width: "100%", height: "400px" }}>

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.44";
+const webVersion = "1.6.45";
 export default webVersion;

package-lock.json

@@ -18,6 +18,7 @@
         "bootstrap-icons": "^1.11.3",
         "chart.js": "^4.4.5",
         "chartjs-adapter-date-fns": "^3.0.0",
+        "chartjs-adapter-moment": "^1.0.1",
         "chartjs-plugin-zoom": "^2.0.1",
         "crypto-js": "^4.2.0",
         "date-fns": "^4.1.0",
@@ -2664,6 +2665,15 @@
         "date-fns": ">=2.0.0"
       }
     },
+    "node_modules/chartjs-adapter-moment": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz",
+      "integrity": "sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0",
+        "moment": "^2.10.2"
+      }
+    },
     "node_modules/chartjs-plugin-zoom": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.2.0.tgz",
@@ -6176,6 +6186,15 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -23,6 +23,7 @@
     "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.4.5",
     "chartjs-adapter-date-fns": "^3.0.0",
+    "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-zoom": "^2.0.1",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",

public/mockData.json

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