122 lines
3.6 KiB
TypeScript
122 lines
3.6 KiB
TypeScript
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);
|
|
|
|
// 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) {
|
|
if (chartInstance.current) {
|
|
chartInstance.current.destroy();
|
|
}
|
|
|
|
// Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden
|
|
const processedData = chartData.map((entry) => ({
|
|
...entry,
|
|
timestampMs: new Date(
|
|
entry.t.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3")
|
|
).getTime(),
|
|
}));
|
|
|
|
const ctx = chartRef.current.getContext("2d");
|
|
if (ctx) {
|
|
chartInstance.current = new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: "Messwert i (kOhm)",
|
|
data: processedData.map((entry) => ({
|
|
x: entry.timestampMs,
|
|
y: entry.i,
|
|
})),
|
|
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,
|
|
})),
|
|
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,
|
|
})),
|
|
borderColor: "rgba(75, 75, 192, 1)",
|
|
backgroundColor: "rgba(75, 75, 192, 0.2)",
|
|
fill: true,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
type: "time",
|
|
time: {
|
|
unit: "day",
|
|
tooltipFormat: "dd.MM.yyyy HH:mm",
|
|
displayFormats: {
|
|
day: "dd.MM.yyyy",
|
|
},
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: "Zeit",
|
|
},
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: "kOhm",
|
|
},
|
|
min: 50,
|
|
max: 80,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
if (chartInstance.current) {
|
|
chartInstance.current.destroy();
|
|
chartInstance.current = null;
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div style={{ position: "relative", width: "100%", height: "400px" }}>
|
|
<canvas ref={chartRef} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoopMeasurementChart;
|