From 136d3151cf71b2d76286ef7220bee7a2f2329b88 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 1 Aug 2025 13:10:32 +0200 Subject: [PATCH] fix: Chart System --- .env.development | 2 +- .env.production | 2 +- CHANGELOG.md | 5 ++ components/main/system/DetailModal.tsx | 112 +++++++++++++++++++------ package-lock.json | 4 +- package.json | 2 +- 6 files changed, 98 insertions(+), 29 deletions(-) diff --git a/.env.development b/.env.development index 398d3c9..8f66c39 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.677 +NEXT_PUBLIC_APP_VERSION=1.6.678 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 3e64057..9a6baf7 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.677 +NEXT_PUBLIC_APP_VERSION=1.6.678 NEXT_PUBLIC_CPL_MODE=production \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index a518bc1..8539c9a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## [1.6.678] – 2025-08-01 + +- fix: nur Daten abrufen, wenn 'Daten laden' button geklickt wird + +--- ## [1.6.677] – 2025-08-01 - fix: link in console diff --git a/components/main/system/DetailModal.tsx b/components/main/system/DetailModal.tsx index fe643e1..1504e8c 100644 --- a/components/main/system/DetailModal.tsx +++ b/components/main/system/DetailModal.tsx @@ -48,6 +48,18 @@ ChartJS.register( TimeScale ); +// Tailwind-basierte Farbdefinitionen für Chart.js +const chartColors = { + gray: { + line: "#6B7280", // tailwind gray-500 + background: "rgba(107, 114, 128, 0.2)", // tailwind gray-500 mit opacity + }, + littwinBlue: { + line: "#00AEEF", // littwin-blue + background: "rgba(0, 174, 239, 0.2)", // littwin-blue mit opacity + }, +}; + type ReduxDataEntry = { //Alle DIA0 t,m,i,a , DIA1 und DIA2 t,i,a,g t: string; // Zeitstempel @@ -136,14 +148,6 @@ export const DetailModal = ({ }); const [isLoading, setIsLoading] = useState(false); const [shouldUpdateChart, setShouldUpdateChart] = useState(false); - const vonDatum = useSelector( - (state: RootState) => state.kabelueberwachungChartSlice.vonDatum - ); - const bisDatum = useSelector( - (state: RootState) => state.kabelueberwachungChartSlice.bisDatum - ); - - const [filteredData, setFilteredData] = useState([]); const reduxData = useSelector((state: RootState) => { switch (selectedKey) { @@ -264,26 +268,86 @@ export const DetailModal = ({ if (shouldUpdateChart && reduxData && reduxData.length > 0) { console.log("Redux data for chart:", reduxData); - // Convert Redux data to Chart.js format - const chartDataPoints = reduxData.map((entry) => ({ - x: new Date(entry.t).getTime(), - y: entry.m || entry.a || entry.i || 0, // Use current value, max, min, or 0 - })); + // Create datasets array for multiple lines + const datasets = []; + + // Check which data fields are available and create datasets accordingly + const hasMinimum = reduxData.some( + (entry) => entry.i !== undefined && entry.i !== null && entry.i !== 0 + ); + const hasMaximum = reduxData.some( + (entry) => entry.a !== undefined && entry.a !== null + ); + const hasAverage = reduxData.some( + (entry) => entry.g !== undefined && entry.g !== null + ); + const hasCurrent = reduxData.some( + (entry) => entry.m !== undefined && entry.m !== null + ); + + // Zuerst Hintergrund-Linien (Minimum/Maximum) - grau + if (hasMinimum) { + datasets.push({ + label: "Minimum", + data: reduxData.map((entry) => ({ + x: new Date(entry.t).getTime(), + y: entry.i || 0, + })), + borderColor: chartColors.gray.line, + backgroundColor: chartColors.gray.background, + tension: 0.1, + fill: false, + }); + } + + if (hasMaximum) { + datasets.push({ + label: "Maximum", + data: reduxData.map((entry) => ({ + x: new Date(entry.t).getTime(), + y: entry.a || 0, + })), + borderColor: chartColors.gray.line, + backgroundColor: chartColors.gray.background, + tension: 0.1, + fill: false, + }); + } + + // Dann Vordergrund-Linien (Durchschnitt/Messwert) - littwin-blue + if (hasAverage) { + datasets.push({ + label: "Durchschnitt", + data: reduxData.map((entry) => ({ + x: new Date(entry.t).getTime(), + y: entry.g || 0, + })), + borderColor: chartColors.littwinBlue.line, + backgroundColor: chartColors.littwinBlue.background, + tension: 0.1, + fill: false, + }); + } + + if (hasCurrent) { + datasets.push({ + label: "Messwert", + data: reduxData.map((entry) => ({ + x: new Date(entry.t).getTime(), + y: entry.m || 0, + })), + borderColor: chartColors.littwinBlue.line, + backgroundColor: chartColors.littwinBlue.background, + tension: 0.1, + fill: false, + }); + } const newChartData = { - datasets: [ - { - label: selectedKey || "Messwerte", - data: chartDataPoints, - borderColor: "#00AEEF", // littwin-blue - backgroundColor: "rgba(0, 174, 239, 0.2)", // littwin-blue mit Transparenz - tension: 0.1, - fill: false, - }, - ], + datasets: datasets, }; - console.log("Chart data points:", chartDataPoints); + console.log("Chart datasets:", datasets.length, "lines"); setChartData(newChartData); setShouldUpdateChart(false); // Reset flag } else if (shouldUpdateChart && (!reduxData || reduxData.length === 0)) { diff --git a/package-lock.json b/package-lock.json index 23c233d..23353d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cpl-v4", - "version": "1.6.677", + "version": "1.6.678", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cpl-v4", - "version": "1.6.677", + "version": "1.6.678", "dependencies": { "@fontsource/roboto": "^5.1.0", "@headlessui/react": "^2.2.4", diff --git a/package.json b/package.json index ac70d19..23abaf3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cpl-v4", - "version": "1.6.677", + "version": "1.6.678", "private": true, "scripts": { "dev": "next dev",