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

TDR Chart Implementierung der Zoom- und Pan-Funktionalität

Browse Source
This commit is contained in:
Ismail Ali
2025-02-22 11:40:57 +01:00
parent e6bac2d4ba
commit 9b93771047
4 changed files with 76 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
View File

@@ -1,7 +1,7 @@
// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import Chart from "chart.js/auto";
import { Chart, registerables } from "chart.js";
import "chartjs-adapter-date-fns";
const TDRChart: React.FC = () => {
@@ -12,58 +12,80 @@ const TDRChart: React.FC = () => {
const chartData = useSelector((state: any) => state.tdrData.data);
useEffect(() => {
if (chartRef.current && chartData.length > 0) {
if (chartInstance.current) {
chartInstance.current.destroy();
}
// Importiere und registriere das Zoom-Plugin innerhalb des useEffect-Hooks
import("chartjs-plugin-zoom").then((zoomPlugin) => {
Chart.register(...registerables, zoomPlugin.default);
const ctx = chartRef.current.getContext("2d");
if (ctx) {
chartInstance.current = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "TDR Entfernung (km)",
data: chartData,
borderColor: "rgba(255, 99, 132, 1)",
backgroundColor: "rgba(255, 99, 132, 0.2)",
tension: 0.1,
parsing: {
xAxisKey: "t", // Schlüssel für den Zeitstempel
yAxisKey: "m", // Schlüssel für den Messwert
if (chartRef.current && chartData.length > 0) {
if (chartInstance.current) {
chartInstance.current.destroy();
}
const ctx = chartRef.current.getContext("2d");
if (ctx) {
chartInstance.current = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "TDR Entfernung (km)",
data: chartData,
borderColor: "rgba(255, 99, 132, 1)",
backgroundColor: "rgba(255, 99, 132, 0.2)",
tension: 0.1,
parsing: {
xAxisKey: "t", // Schlüssel für den Zeitstempel
yAxisKey: "m", // Schlüssel für den Messwert
},
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: "time",
time: {
unit: "minute",
tooltipFormat: "dd.MM.yyyy HH:mm",
},
title: {
display: true,
text: "Zeit",
},
},
y: {
title: {
display: true,
text: "km",
},
min: 0,
max: 3,
},
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: "time",
time: {
unit: "minute",
tooltipFormat: "dd.MM.yyyy HH:mm",
plugins: {
zoom: {
pan: {
enabled: true,
mode: "xy",
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "xy",
},
},
title: {
display: true,
text: "Zeit",
},
},
y: {
title: {
display: true,
text: "km",
},
min: 0,
max: 3,
},
},
},
});
});
}
}
}
});
}, [chartData]);
return (