Echtzeitdaten: Mobiles Styling, eigene Legende, Konfiguration der Cha…

…rtlinien
SvenoF54 · Jan 22, 2025 · ee9ca57 · ee9ca57
1 parent 612d9f5
commit ee9ca57
Show file tree

Hide file tree

Showing 16 changed files with 626 additions and 282 deletions.
diff --git a/config/local-config.php.sample b/config/local-config.php.sample
@@ -59,6 +59,6 @@ $config->monthsOverview()->xy
 $config->yearsOverview()->xy
 
 // Die Echtzeitübersichtsseite hat zusätzlich folgende Optionen, es sind nicht alle Optionen der Übersichtsseite benutzbar
-$config->realtimeOverview()->setLastHoursPossibilities([0.5, 1, 2, 4, 6, 8, 12, 24, 24*7, 24*14, 24*28]);
+$config->realtimeOverview()->setPastPeriodPossibilities([0.5, 1, 2, 4, 6, 8, 12, 24, 24*7, 24*14, 24*28]);
 $config->realtimeOverview()->setRefreshIntervalInSec(5);
 ?>
diff --git a/css/overviewPage.css b/css/overviewPage.css
@@ -104,7 +104,7 @@ h1 {
     #autarky-chart-container,
     #energy-chart-container {
         width: 95vw !important;
-        height: 62vh !important;
+        height: 56vh !important;
     }
 }
 
@@ -141,13 +141,6 @@ canvas {
     margin-left: 10px;
 }
 
-@media (max-width: 768px) {
-    .chart-container {
-        display: none !important;
-        /* Verstecke die Legende */
-    }
-}
-
 
 /* Energy-table-container */
 

diff --git a/css/realtimePage.css b/css/realtimePage.css
@@ -1,6 +1,67 @@
+/* Realtime-Chart Legend Buttons */
+
+.legend-line {
+    display: inline-block;
+    width: 20px;
+    height: 10px;
+    margin-right: 8px;
+    margin-left: 8px;
+    transition: opacity 0.3s;
+}
+
+.legend-label {
+    color: #333;
+    font-size: 0.75rem;
+    white-space: nowrap !important;
+    cursor: pointer;
+}
+
+.hidden {
+    opacity: 0.2;
+}
+
+.legend-navbar-toggler {
+    height: 28px;
+    line-height: 28px;
+    margin-right: 1px;
+}
+
+.legend-navbar-toggler-icon {
+    width: 20px;
+    height: 20px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+}
+
+@media (min-width: 1200px) {
+    #chart-buttons {
+        margin-right: 25px;
+    }
+}
+
+
+/* Realtime-Chart */
+
+#realtime-chart-container {
+    width: 100% !important;
+    min-height: 300px;
+    margin: 0;
+    padding: 0;
+}
+
+@media (min-width: 1200px) {
+    /* out size xl (> 1200px) */
+    #realtime-chart-container {
+        width: 95vw !important;
+        height: 56vh !important;
+    }
+}
+
 canvas {
-    width: 80%;
-    height: 50% !important;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0;
+    padding: 0;
 }
 
 h1 {

diff --git a/js/realtime-page/configureEnergyChart.js → js/realtime-page/configureRealtimeChart.js b/js/realtime-page/configureEnergyChart.js → js/realtime-page/configureRealtimeChart.js
@@ -10,7 +10,7 @@ const lineZeroColor = getComputedStyle(document.documentElement).getPropertyValu
 
 
 
-const scalesEnergy = {
+const scalesRealtime = {
     x: {
         type: 'time',
         time: {
@@ -46,17 +46,10 @@ const scalesEnergy = {
 }
 
 
-const optionsEnergy = {
+const optionsRealtime = {
+    layout: {},
     responsive: true,
     maintainAspectRatio: false,
-    layout: {
-        padding: {
-            left: 20,
-            right: 20,
-            top: 20,
-            bottom: 20
-        }
-    },
     plugins: {
         tooltip: {
             mode: 'x',
@@ -79,25 +72,25 @@ const optionsEnergy = {
             annotations: {
                 line1: {
                     type: 'line',
-                    yMin: line1_selected,
-                    yMax: line1_selected,
+                    yMin: config.line1,
+                    yMax: config.line1,
                     borderColor: line1Color,
                     borderWidth: 2,
                     borderDash: [5, 5],
                     label: {
-                        content: line1_selected + ' W',
+                        content: config.line1 + ' W',
                         display: false
                     }
                 },
                 line2: {
                     type: 'line',
-                    yMin: line2_selected,
-                    yMax: line2_selected,
+                    yMin: config.line2,
+                    yMax: config.line2,
                     borderColor: line2Color,
                     borderWidth: 2,
                     borderDash: [5, 5],
                     label: {
-                        content: line2_selected + ' W',
+                        content: config.line2 + ' W',
                         display: false
                     }
                 },
@@ -112,14 +105,14 @@ const optionsEnergy = {
         },
 
         legend: {
-            display: true
+            display: false
         },
     },
-    scales: scalesEnergy
+    scales: scalesRealtime
 };
 
 // Configure diagram
-const configEnergy = {
+const configRealtime = {
     type: 'line',
     data: {
         labels: timestamps, // timestamp on X-Axis
@@ -128,35 +121,42 @@ const configEnergy = {
                 data: emPowerRows,
                 borderColor: emColor,
                 fill: false,
+                customFormFieldName: 'realtime_chartShowEM',
+                hidden: !config.realtime.chartShowEM
+            },
+            {
+                label: '-PTotal',
+                data: pmTotalPowerRows,
+                borderColor: pmTotalColor,
+                fill: false,
+                customFormFieldName: 'realtime_chartShowPMTotal',
+                hidden: !config.realtime.chartShowPMTotal,
             },
             {
                 label: '-P1',
                 data: pm1PowerRows,
                 borderColor: pm1Color,
                 fill: false,
-                hidden: true
+                customFormFieldName: 'realtime_chartShowPM1',
+                hidden: !config.realtime.chartShowPM1,
             },
             {
                 label: '-P2',
                 data: pm2PowerRows,
                 borderColor: pm2Color,
                 fill: false,
-                hidden: true
+                customFormFieldName: 'realtime_chartShowPM2',
+                hidden: !config.realtime.chartShowPM2,
             },
             {
                 label: '-P3',
                 data: pm3PowerRows,
                 borderColor: pm3Color,
                 fill: false,
-                hidden: true
-            },
-            {
-                label: '-PTotal',
-                data: pmTotalPowerRows,
-                borderColor: pmTotalColor,
-                fill: false
+                customFormFieldName: 'realtime_chartShowPM3',
+                hidden: !config.realtime.chartShowPM3,
             },
         ]
     },
-    options: optionsEnergy
+    options: optionsRealtime
 };
diff --git a/js/realtime-page/documentReady.js b/js/realtime-page/documentReady.js
@@ -1,14 +1,57 @@
 $(document).ready(function() {
 
     // Configure chart
-    const myEnergyChart = new Chart(
-        $('#energyChart')[0].getContext('2d'),
-        configEnergy
+    ctxRealtime = document.getElementById('realtimeChart').getContext('2d');
+    realtimeChart = new Chart(
+        ctxRealtime,
+        configRealtime
     );
+    $('#realtime-chart-container').data('chart', realtimeChart); // Add chart to container for later access
 
-    $('#reloadCheckbox').on('change', checkAndReload);
-    checkAndReload();
+    // Toggles the chart lines and strikethrough the legend
+    // If 2 custom-form-fields are given, toggles between the 2 fields
+    $('.chart-toggle-line').on('click', function() {
+        var customFormFieldName = $(this).data('custom-form-field-field');
+        var chartId = $(this).data('chart-id');
+        var chart = $('#' + chartId).data('chart');
+
+        var dataset1;
+        chart.data.datasets.forEach(function(dataset) {
+            if (dataset.customFormFieldName === customFormFieldName) {
+                dataset1 = dataset;
+            }
+        });
+
+        if (dataset1 !== undefined) {
+            hideOrShowChartLine(chart, dataset1, !dataset1.hidden);
+            strikethroughLegendText($(this), dataset1.hidden);
+        }
+
+    });
+
+    // Helper: Hides / shows the chart line and sets new status to the hidden form field
+    function hideOrShowChartLine(chart, dataset1, hide1) {
+        // Hide or show chart line
+        dataset1.hidden = hide1;
+        chart.update();
+
+        // Set hidden form field to recover chart settings on next page call
+        $('#' + dataset1.customFormFieldName).val(!hide1);
+    }
 
+    // Helper: Strikethrough the legend from the chart
+    function strikethroughLegendText($buttonElement, hide) {
+        // Set strikethrough outside foreach
+        if (hide) {
+            $buttonElement.find('.legend-label').addClass('strikethrough');
+        } else {
+            $buttonElement.find('.legend-label').removeClass('strikethrough');
+        }
+    }
+
+    // --- Auto-Reload function ---
+
+    // Set data range, needed for auto reload
     function setDateRange(hours) {
         const now = new Date();
         var timestamp = now.getTime() - now.getTimezoneOffset() * 60000;
@@ -21,20 +64,24 @@ $(document).ready(function() {
         $('#from-date').val(fromDate);
     }
 
+    // Auto-Reload Checkbox
+    $('#reloadCheckbox').on('change', checkAndReload);
+    checkAndReload();
+
     // Function to check if the checkbox is enabled and control the reloading process
-    var intervalId;
+    var realtimeIntervalId;
 
     function checkAndReload() {
         var checkbox = document.getElementById('reloadCheckbox');
 
         if (checkbox.checked) {
-            intervalId = setInterval(function() {
-                setDateRange($('#hours').val());
+            realtimeIntervalId = setInterval(function() {
+                setDateRange($('#pastperiod').val());
                 $('#date-range-form').submit();
-            }, refreshIntervalInSec * 1000);
+            }, config.refreshIntervalInSec * 1000);
         } else {
-            clearInterval(intervalId);
+            clearInterval(realtimeIntervalId);
         }
     }
 
-});
+});
diff --git a/lib/config/ConfigOverviewPages.php b/lib/config/ConfigOverviewPages.php
@@ -109,44 +109,6 @@ public function configEnergy2() : ConfigEnergyViewSettings {
 
 }
 
-class ConfigRealtimeOverviewPages extends ConfigOverviewPages
-{
-    private $lastHoursPossibilities = [0.5, 1, 2, 4, 6, 8, 12, 24, 24*7, 24*14, 24*28];
-    private $averagePossibilitiesInSec = [2, 5, 10, 30, 60, 120, 300, 600, 900, 1800, 3600];
-    private $refreshIntervalInSec = 10;
-
-    public function getLastHoursPossibilities()
-    {
-        return $this->lastHoursPossibilities;
-    }
-
-    public function setLastHoursPossibilities($lastHoursPossibilities)
-    {
-        $this->lastHoursPossibilities = $lastHoursPossibilities;
-    }
-
-    public function getAveragePossibilitiesInSec()
-    {
-        return $this->averagePossibilitiesInSec;
-    }
-
-    public function setAveragePossibilitiesInSec($averagePossibilitiesInSec)
-    {
-        $this->averagePossibilitiesInSec = $averagePossibilitiesInSec;
-    }
-
-    public function getRefreshIntervalInSec()
-    {
-        return $this->refreshIntervalInSec;
-    }
-
-    public function setRefreshIntervalInSec($refreshIntervalInSec)
-    {
-        $this->refreshIntervalInSec = $refreshIntervalInSec;
-    }
-
-}
-
 class ConfigEnergyViewSettings {
     private $chartNumber;
     private $chartShowEnergyOverZero = false;