From 16309b3f2d15bd7689080e596ca2bd2234ca99b9 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 14 Feb 2025 11:21:35 +0100 Subject: [PATCH] =?UTF-8?q?statische=20Werte=20in=20Chart=20zeichnenf?= =?UTF-8?q?=C3=BCr=20Loop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LoopMeasurementChart.tsx | 43 +++++++++++-------- config/webVersion.ts | 2 +- package-lock.json | 19 ++++++++ package.json | 1 + public/mockData.json | 18 ++++---- 5 files changed, 56 insertions(+), 27 deletions(-) diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index 1c7058e..2f42db2 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/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(null); const chartInstance = useRef(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 (
diff --git a/config/webVersion.ts b/config/webVersion.ts index 5960856..943d86c 100644 --- a/config/webVersion.ts +++ b/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; diff --git a/package-lock.json b/package-lock.json index 5dd2498..7279d02 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4e1bcab..91726d7 100644 --- a/package.json +++ b/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", diff --git a/public/mockData.json b/public/mockData.json index 3390da2..fb5dc8c 100644 --- a/public/mockData.json +++ b/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 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} -] \ No newline at end of file +[ + { "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 } +]