diff --git a/.env.development b/.env.development index 55f7575..6840d9b 100644 --- a/.env.development +++ b/.env.development @@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_USE_CGI=false # App-Versionsnummer -NEXT_PUBLIC_APP_VERSION=1.6.574 +NEXT_PUBLIC_APP_VERSION=1.6.577 NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) diff --git a/.env.production b/.env.production index 74a138a..d4eb707 100644 --- a/.env.production +++ b/.env.production @@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_USE_CGI=true # App-Versionsnummer -NEXT_PUBLIC_APP_VERSION=1.6.574 +NEXT_PUBLIC_APP_VERSION=1.6.577 NEXT_PUBLIC_CPL_MODE=production \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index bde11eb..90861b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,18 @@ +## [1.6.577] – 2025-07-10 + +- fix(detail-chart): X-Achse zeigt jetzt Datum und Uhrzeit ohne Sekunden (z. B. 10.07.2025 14:32) + +--- +## [1.6.576] – 2025-07-10 + +- fix(detail-chart): X-Achse zeigt jetzt Datum und Uhrzeit ohne Sekunden (z. B. 10.07.2025 14:32) + +--- +## [1.6.575] – 2025-07-10 + +- fix(detail-chart): X-Achse zeigt jetzt Datum und Uhrzeit ohne Sekunden (z. B. 10.07.2025 14:32) + +--- ## [1.6.574] – 2025-07-10 - fix(system-charts): Zeitachse angepasst – aktuelle Daten jetzt rechts wie bei Kabelüberwachung diff --git a/components/main/system/DetailModal.tsx b/components/main/system/DetailModal.tsx index a320ed0..155684d 100644 --- a/components/main/system/DetailModal.tsx +++ b/components/main/system/DetailModal.tsx @@ -1,11 +1,111 @@ -// components/main/system/DetailModal.tsx "use client"; -import React from "react"; +import React, { useEffect, useRef } from "react"; import { Line } from "react-chartjs-2"; import { useSelector } from "react-redux"; import { RootState } from "@/redux/store"; import { Listbox } from "@headlessui/react"; +import { + Chart as ChartJS, + LineElement, + PointElement, + CategoryScale, + LinearScale, + Title, + Tooltip, + Legend, + Filler, + TimeScale, +} from "chart.js"; + +import "chartjs-adapter-date-fns"; +import { de } from "date-fns/locale"; + +ChartJS.register( + LineElement, + PointElement, + CategoryScale, + LinearScale, + Title, + Tooltip, + Legend, + Filler, + TimeScale +); + +const initialChartData = { + datasets: [ + { + label: "Messdaten", + data: [], + borderColor: "rgba(61, 176, 242, 1)", + backgroundColor: "rgba(59,130,246,0.3)", + borderWidth: 2, + pointRadius: 0, + tension: 0.1, + fill: false, + }, + ], +}; + +const chartOptions = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { position: "top" as const }, + title: { + display: true, + text: "Verlauf", + }, + tooltip: { + mode: "index" as const, + intersect: false, + callbacks: { + label: function (ctx: any) { + return `Messwert: ${ctx.parsed.y}`; + }, + title: function (items: any[]) { + const date = items[0].parsed.x; + return `Zeitpunkt: ${new Date(date).toLocaleString("de-DE")}`; + }, + }, + }, + zoom: { + pan: { enabled: true, mode: "x" as const }, + zoom: { + wheel: { enabled: true }, + pinch: { enabled: true }, + mode: "x" as const, + }, + }, + }, + scales: { + x: { + type: "time" as const, + time: { + unit: "day" as const, + tooltipFormat: "dd.MM.yyyy HH:mm", + displayFormats: { + day: "dd.MM.yyyy", + }, + }, + adapters: { + date: { locale: de }, + }, + title: { + display: true, + text: "Zeit", + }, + }, + y: { + title: { + display: true, + text: "Messwert", + }, + }, + }, +}; + type Props = { isOpen: boolean; selectedKey: string | null; @@ -23,6 +123,8 @@ export const DetailModal = ({ zeitraum, setZeitraum, }: Props) => { + const chartRef = useRef(null); + const reduxData: ReduxDataEntry[] = useSelector((state: RootState) => { switch (selectedKey) { case "+5V": @@ -42,50 +144,50 @@ export const DetailModal = ({ } }); - const reversedData = [...reduxData].reverse(); - const labels = reversedData.map((e) => - new Date(e.t).toLocaleString("de-DE", { - day: "2-digit", - month: "2-digit", - year: "numeric", - hour: "2-digit", - minute: "2-digit", - second: undefined, // Sekunden ausschließen - }) - ); + useEffect(() => { + const loadZoomPlugin = async () => { + if (typeof window !== "undefined") { + const zoomPlugin = (await import("chartjs-plugin-zoom")).default; + if (!ChartJS.registry.plugins.get("zoom")) { + ChartJS.register(zoomPlugin); + } + } + }; + loadZoomPlugin(); + }, []); - const values = reversedData.map((e) => e.i); + useEffect(() => { + if (chartRef.current) { + const chart = chartRef.current; + chart.data.datasets[0].data = [...reduxData] + .reverse() + .map((p) => ({ x: new Date(p.t), y: p.i })); + chart.update("none"); + } + }, [reduxData]); - const baseOptions = { - responsive: true, - maintainAspectRatio: false, - scales: { - y: { - beginAtZero: false, - grid: { color: "rgba(200,200,200,0.2)" }, - title: { display: true, text: "Wert" }, - }, - x: { - grid: { color: "rgba(200,200,200,0.2)" }, - title: { display: true, text: "Zeit" }, - }, - }, - plugins: { - legend: { position: "bottom" as const }, - title: { display: true, text: `Verlauf ${selectedKey}` }, - }, - }; + useEffect(() => { + if (chartRef.current && selectedKey) { + chartRef.current.options.plugins.title.text = `Verlauf ${selectedKey}`; + chartRef.current.update("none"); + } + }, [selectedKey]); + + useEffect(() => { + if (chartRef.current) { + chartRef.current.resetZoom(); + } + }, [zeitraum]); if (!isOpen || !selectedKey) return null; return (
-
+

Detailansicht: {selectedKey}

- @@ -147,23 +249,7 @@ export const DetailModal = ({
- +
diff --git a/package-lock.json b/package-lock.json index 06b216a..47ceaee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cpl-v4", - "version": "1.6.574", + "version": "1.6.577", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cpl-v4", - "version": "1.6.574", + "version": "1.6.577", "dependencies": { "@fontsource/roboto": "^5.1.0", "@headlessui/react": "^2.2.4", diff --git a/package.json b/package.json index 2b5e275..aa41aa1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cpl-v4", - "version": "1.6.574", + "version": "1.6.577", "private": true, "scripts": { "dev": "next dev",