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

24
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,6 +12,10 @@ const TDRChart: React.FC = () => {
const chartData = useSelector((state: any) => state.tdrData.data);
useEffect(() => {
// Importiere und registriere das Zoom-Plugin innerhalb des useEffect-Hooks
import("chartjs-plugin-zoom").then((zoomPlugin) => {
Chart.register(...registerables, zoomPlugin.default);
if (chartRef.current && chartData.length > 0) {
if (chartInstance.current) {
chartInstance.current.destroy();
@@ -60,10 +64,28 @@ const TDRChart: React.FC = () => {
max: 3,
},
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: "xy",
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "xy",
},
},
},
},
});
}
}
});
}, [chartData]);
return (

2
config/webVersion.ts
View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.86";
const webVersion = "1.6.87";
export default webVersion;

10
package-lock.json generated
View File

@@ -16,10 +16,10 @@
"autoprefixer": "^10.4.20",
"bcryptjs": "^2.4.3",
"bootstrap-icons": "^1.11.3",
"chart.js": "^4.4.5",
"chart.js": "^4.4.8",
"chartjs-adapter-date-fns": "^3.0.0",
"chartjs-adapter-moment": "^1.0.1",
"chartjs-plugin-zoom": "^2.0.1",
"chartjs-plugin-zoom": "^2.2.0",
"crypto-js": "^4.2.0",
"date-fns": "^4.1.0",
"idb": "^8.0.0",
@@ -2646,9 +2646,9 @@
}
},
"node_modules/chart.js": {
"version": "4.4.7",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
"integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
"version": "4.4.8",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
"integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
"dependencies": {
"@kurkle/color": "^0.3.0"
},

4
package.json
View File

@@ -21,10 +21,10 @@
"autoprefixer": "^10.4.20",
"bcryptjs": "^2.4.3",
"bootstrap-icons": "^1.11.3",
"chart.js": "^4.4.5",
"chart.js": "^4.4.8",
"chartjs-adapter-date-fns": "^3.0.0",
"chartjs-adapter-moment": "^1.0.1",
"chartjs-plugin-zoom": "^2.0.1",
"chartjs-plugin-zoom": "^2.2.0",
"crypto-js": "^4.2.0",
"date-fns": "^4.1.0",
"idb": "^8.0.0",