feat: Zoom- und Panning-Funktion für LoopMeasurementChart hinzugefügt
- chartjs-plugin-zoom importiert und in Chart.js registriert - Zoom per Mausrad und Pinch-Gesten auf Touch-Geräten aktiviert - Panning (horizontal scrollen) über Dragging hinzugefügt - Chart-Logik und bestehende Datenverarbeitung beibehalten
This commit is contained in:
@@ -3,6 +3,9 @@ import React, { useEffect, useRef } from "react";
|
|||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import Chart from "chart.js/auto";
|
import Chart from "chart.js/auto";
|
||||||
import "chartjs-adapter-moment";
|
import "chartjs-adapter-moment";
|
||||||
|
import zoomPlugin from "chartjs-plugin-zoom"; // Zoom-Plugin importieren
|
||||||
|
|
||||||
|
Chart.register(zoomPlugin); // Plugin registrieren
|
||||||
|
|
||||||
const LoopMeasurementChart = () => {
|
const LoopMeasurementChart = () => {
|
||||||
const chartRef = useRef<HTMLCanvasElement>(null);
|
const chartRef = useRef<HTMLCanvasElement>(null);
|
||||||
@@ -139,7 +142,7 @@ const LoopMeasurementChart = () => {
|
|||||||
autoSkip: false,
|
autoSkip: false,
|
||||||
maxRotation: 45,
|
maxRotation: 45,
|
||||||
minRotation: 45,
|
minRotation: 45,
|
||||||
callback: function (value, index, values) {
|
callback: function (value) {
|
||||||
const date = new Date(value);
|
const date = new Date(value);
|
||||||
return `${date.getDate().toString().padStart(2, "0")}.${(
|
return `${date.getDate().toString().padStart(2, "0")}.${(
|
||||||
date.getMonth() + 1
|
date.getMonth() + 1
|
||||||
@@ -179,6 +182,21 @@ const LoopMeasurementChart = () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
zoom: {
|
||||||
|
pan: {
|
||||||
|
enabled: true,
|
||||||
|
mode: "x", // Nur horizontal scrollen
|
||||||
|
},
|
||||||
|
zoom: {
|
||||||
|
wheel: {
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
pinch: {
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
mode: "x", // Nur horizontal zoomen
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.73";
|
const webVersion = "1.6.74";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
Reference in New Issue
Block a user