Schleifenmessung von Mock->Redux
This commit is contained in:
@@ -1,26 +1,14 @@
|
||||
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 LoopMeasurementChart = () => {
|
||||
const chartRef = useRef(null);
|
||||
const chartInstance = useRef(null);
|
||||
|
||||
// Mock-Daten für das Beispiel
|
||||
const chartData = [
|
||||
{ t: "14-02-2025 10:00:00", i: 3.116, a: 3.116, g: 3.116 },
|
||||
{ t: "14-02-2025 09:00:00", i: 8.116, a: 3.116, g: 15.116 },
|
||||
{ t: "14-02-2025 08:00:00", i: 3.116, a: 3.116, g: 3.116 },
|
||||
{ t: "13-02-2025 15:00:00", i: 9.116, a: 21.0, g: 65.0 },
|
||||
{ t: "13-02-2025 14:00:00", i: 65.0, a: 65.0, g: 65.0 },
|
||||
{ t: "13-02-2025 13:00:00", i: 65.0, a: 65.0, g: 65.0 },
|
||||
{ t: "13-02-2025 12:00:00", i: 65.0, a: 65.0, g: 65.0 },
|
||||
{ t: "13-02-2025 11:00:00", i: 65.0, a: 65.0, g: 65.0 },
|
||||
{ t: "13-02-2025 10:00:00", i: 65.0, a: 65.0, g: 65.0 },
|
||||
{ t: "13-02-2025 09:00:00", i: 50.0, a: 30.0, g: 25.0 },
|
||||
];
|
||||
// Daten aus dem Redux-Store abrufen
|
||||
const chartData = useSelector((state) => state.chartData.data) ?? [];
|
||||
|
||||
useEffect(() => {
|
||||
if (chartRef.current) {
|
||||
@@ -112,7 +100,7 @@ const LoopMeasurementChart: React.FC = () => {
|
||||
chartInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
}, [chartData]);
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative", width: "100%", height: "400px" }}>
|
||||
|
||||
Reference in New Issue
Block a user