diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index e9898ae..0bf3815 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx @@ -4,6 +4,7 @@ import { useSelector, useDispatch } from "react-redux"; import { RootState } from "../../../../../../redux/store"; import Chart from "chart.js/auto"; import "chartjs-adapter-moment"; +import "chartjs-plugin-zoom"; import { setVonDatum, setBisDatum, @@ -23,16 +24,6 @@ const LoopMeasurementChart = () => { const chartRef = useRef(null); const chartInstance = useRef(null); - const [zoomPlugin, setZoomPlugin] = useState(null); - - useEffect(() => { - if (typeof window !== "undefined") { - import("chartjs-plugin-zoom").then((mod) => { - setZoomPlugin(mod.default); - Chart.register(mod.default); - }); - } - }, []); useEffect(() => { if (chartRef.current) { @@ -44,7 +35,6 @@ const LoopMeasurementChart = () => { console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum); console.log("Selected Mode:", selectedMode); - // Basis-Datasets für alle Datenpunkte const datasets = [ { label: "Messwert Minimum (kOhm)", @@ -52,8 +42,10 @@ const LoopMeasurementChart = () => { x: new Date(entry.t).getTime(), y: entry.i, })), - borderColor: "rgba(75, 192, 192, 1)", // Türkis - backgroundColor: "rgba(75, 192, 192, 0.2)", + borderColor: "#17a2b8", // Türkis + backgroundColor: "rgba(23, 162, 184, 0.2)", + pointRadius: 2, + borderWidth: 2, fill: false, }, { @@ -62,45 +54,25 @@ const LoopMeasurementChart = () => { x: new Date(entry.t).getTime(), y: entry.a, })), - borderColor: "rgba(192, 75, 75, 1)", // Rot - backgroundColor: "rgba(192, 75, 75, 0.2)", + borderColor: "#dc3545", // Rot + backgroundColor: "rgba(220, 53, 69, 0.2)", + pointRadius: 2, + borderWidth: 2, fill: false, }, - ]; - - // Falls DIA0: `m` als aktueller Messwert verwenden - if ( - selectedMode === "DIA0" && - loopMeasurementCurveChartData.some((entry) => entry.m !== undefined) - ) { - datasets.push({ + { label: "Messwert Aktuell (m)", data: loopMeasurementCurveChartData.map((entry) => ({ x: new Date(entry.t).getTime(), y: entry.m ?? NaN, })), - borderColor: "rgba(255, 165, 0, 1)", // Orange - backgroundColor: "rgba(255, 165, 0, 0.2)", + borderColor: "#ffc107", // Gelb + backgroundColor: "rgba(255, 193, 7, 0.2)", + pointRadius: 2, + borderWidth: 2, fill: false, - }); - } - - // Falls DIA1 oder DIA2: `g` als Durchschnittswert verwenden - if ( - (selectedMode === "DIA1" || selectedMode === "DIA2") && - loopMeasurementCurveChartData.some((entry) => entry.g !== undefined) - ) { - datasets.push({ - label: "Messwert Durchschnitt (g)", - data: loopMeasurementCurveChartData.map((entry) => ({ - x: new Date(entry.t).getTime(), - y: entry.g ?? NaN, - })), - borderColor: "rgba(75, 75, 192, 1)", // Blau - backgroundColor: "rgba(75, 75, 192, 0.2)", - fill: false, - }); - } + }, + ]; const ctx = chartRef.current.getContext("2d"); if (ctx) { @@ -126,6 +98,7 @@ const LoopMeasurementChart = () => { max: new Date(bisDatum).getTime(), }, y: { + title: { display: true, text: "Messwert (kOhm)" }, ticks: { callback: (value) => (typeof value === "number" ? value.toFixed(2) : value) + @@ -145,22 +118,29 @@ const LoopMeasurementChart = () => { }, }, zoom: { - pan: { enabled: true, mode: "x" }, + pan: { + enabled: true, + mode: "xy", + }, zoom: { wheel: { enabled: true }, pinch: { enabled: true }, - mode: "x", - onZoomComplete: (chart) => { - const xScale = chart.chart.scales.x; - const newVonDatum = new Date(xScale.min) - .toISOString() - .split("T")[0]; - const newBisDatum = new Date(xScale.max) - .toISOString() - .split("T")[0]; + mode: "xy", + onZoom: ({ chart }) => { + const xScale = chart.scales.x; + if (xScale.min && xScale.max) { + const newVonDatum = new Date(xScale.min) + .toISOString() + .split("T")[0]; + const newBisDatum = new Date(xScale.max) + .toISOString() + .split("T")[0]; - dispatch(setVonDatum(newVonDatum)); - dispatch(setBisDatum(newBisDatum)); + if (newVonDatum !== vonDatum) + dispatch(setVonDatum(newVonDatum)); + if (newBisDatum !== bisDatum) + dispatch(setBisDatum(newBisDatum)); + } }, }, }, diff --git a/config/webVersion.ts b/config/webVersion.ts index 431dd7a..0b1fea4 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.112"; +const webVersion = "1.6.113"; export default webVersion;