fix: Chart System

.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)
 

.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

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

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<ReduxDataEntry[]>([]);
 
   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)) {

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.677",
+  "version": "1.6.678",
   "private": true,
   "scripts": {
     "dev": "next dev",