Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

statische Werte in Chart zeichnenfür Loop

Browse Source
This commit is contained in:
ISA
2025-02-14 11:21:35 +01:00
parent 919c0b1d4a
commit 16309b3f2d
5 changed files with 56 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -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" }}>

2
config/webVersion.ts
View File

@@ -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;

19
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

18
public/mockData.json
View File

@@ -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}
]
[
{ "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 }
]