Zwischenstand: eigene Chart-Legende

SvenoF54 · Jan 19, 2025 · d0bd41e · d0bd41e
1 parent 71d443c
commit d0bd41e
Show file tree

Hide file tree

Showing 17 changed files with 198 additions and 209 deletions.
diff --git a/daysOverview.php b/daysOverview.php
@@ -33,7 +33,7 @@
     $pageTitle = "Tagesübersicht";
     $jsHeaderFiles = ["/js/utils.js", "js/overview-pages/configureEnergyChart.js", "js/overview-pages/configureAutarkyChart.js", 
                       "js/overview-pages/formFunctionsForDayOverview.js"];
-    $jsFooterFiles = ["/js/overview-pages/documentReady.js"];
+    $jsFooterFiles = ["/js/overview-pages/documentReady.js", "/js/overview-pages/configureDataTable.js"];
     $cssFiles = ["/css/overviewPage.css"];
     $jsVars = [   
         "timestampsTooltip" => json_encode($overviewPageService->getLabelsTooltip()),
@@ -48,9 +48,10 @@
 
     // Filter settings
     $tableMainCaptionTimeUnit = "Monat";
-    $tableRow1CaptionTimeUnit = TimeHelper::formatMonthLongAndYear($startTime1);
-    $tableRow2CaptionTimeUnit = TimeHelper::formatMonthLongAndYear($startTime2);
-    $energyTableCaption = "Energiewerte für ".TimeHelper::formatMonthLongAndYear($startTime1);
+    $tableRow1CaptionTimeUnit = TimeHelper::formatMonthNameAndYear($startTime1);
+    $tableRow2CaptionTimeUnit = TimeHelper::formatMonthNameAndYear($startTime2);
+    $energyTableCaption = "Energiewerte für ".TimeHelper::formatMonthNameAndYear($startTime1);
+
 
     $partialTop = "views/pages/overview/filter-for-days-overview.phtml";
     $partialBottom = "views/partials/chart-and-table-canvas.phtml";

diff --git a/hoursOverview.php b/hoursOverview.php
@@ -25,7 +25,7 @@
     $pageTitle = "Stundenübersicht";
     $jsHeaderFiles = ["/js/utils.js", "js/overview-pages/configureEnergyChart.js", "js/overview-pages/configureAutarkyChart.js", 
                       "js/overview-pages/formFunctionsForHoursOverview.js"];
-    $jsFooterFiles = ["/js/overview-pages/documentReady.js"];
+    $jsFooterFiles = ["/js/overview-pages/documentReady.js", "/js/overview-pages/configureDataTable.js"];
     $cssFiles = ["/css/overviewPage.css"];
     $jsVars = [
         "timestampsTooltip" => json_encode($overviewPageService->getLabelsTooltip()),
@@ -42,7 +42,7 @@
     $tableMainCaptionTimeUnit = "Tag";
     $tableRow1CaptionTimeUnit = TimeHelper::formatDate($selectedDay1);
     $tableRow2CaptionTimeUnit = TimeHelper::formatDate($selectedDay2);
-    $energyTableCaption = "Energiewerte für ".TimeHelper::getWeekday($selectedDay1).", ".TimeHelper::formatDate($startTime1);
+    $energyTableCaption = "Energiewerte für ".TimeHelper::getWeekday($selectedDay1).", ".TimeHelper::formatDate($startTime1);    
 
     $partialTop = "views/pages/overview/filter-for-hours-overview.phtml";
     $partialBottom = "views/partials/chart-and-table-canvas.phtml";

diff --git a/js/overview-pages/configureAutarkyChart.js b/js/overview-pages/configureAutarkyChart.js
@@ -66,86 +66,12 @@ const optionsAutarky = {
             }
         },
         legend: {
-            display: true,
-            onClick: function(event, legendItem) {
-                const clickedDatasetIndex = legendItem.datasetIndex;
-                const clickedLabel = legendItem.text;
-                const dataset = autarkyChart.data.datasets[clickedDatasetIndex];
-
-                // Update chart
-                dataset.hidden = !dataset.hidden;
-                autarkyChart.update();
-
-                // Set hidden form field to recover chart settings on next page call
-                const customFormFieldName = dataset.customFormFieldName;
-                $('#' + customFormFieldName).val(!dataset.hidden);
-            },
+            display: false,
         },
     },
     scales: scalesAutarky
 };
 
-// Plugins, here the button for the table view
-const pluginsAutarky = [{
-    id: 'customButtonPlugin',
-    afterDraw(chart) {
-        const { ctx, chartArea } = chart;
-
-        if (!chartArea) return;
-
-        // Button 1: table-view
-        const button1X = chartArea.right - 220;
-        const button1Y = chartArea.top - 30;
-
-        ctx.fillStyle = 'blue';
-        ctx.fillRect(button1X, button1Y, 100, 25);
-
-        ctx.fillStyle = 'white';
-        ctx.font = '12px Arial';
-        ctx.textBaseline = 'middle';
-        ctx.fillText('Tabellenansicht', button1X + 10, button1Y + 12);
-
-        // Button 2: energy-chart-view
-        const button2X = chartArea.right - 110;
-        const button2Y = chartArea.top - 30;
-
-        ctx.fillStyle = 'blue';
-        ctx.fillRect(button2X, button2Y, 100, 25);
-
-        ctx.fillStyle = 'white';
-        ctx.font = '12px Arial';
-        ctx.textBaseline = 'middle';
-        ctx.fillText('Energieansicht', button2X + 10, button2Y + 12);
-
-        // Add event listeners if not already added
-        if (!chart.customButtonListener) {
-            chart.customButtonListener = true;
-
-            chart.canvas.addEventListener('click', function(event) {
-                const rect = chart.canvas.getBoundingClientRect();
-                const x = event.clientX - rect.left;
-                const y = event.clientY - rect.top;
-
-                // Button 1: table-view
-                if (x > button1X && x < button1X + 100 && y > button1Y && y < button1Y + 25) {
-                    $('#energy-chart-container').hide();
-                    $('#autarky-chart-container').hide();
-                    $('#energy-table-container').show();
-                    $('#chartOrTableView').val('EnergyTable');
-                }
-
-                // Button 2: energy-chart-view
-                if (x > button2X && x < button2X + 100 && y > button2Y && y < button2Y + 25) {
-                    $('#autarky-chart-container').hide();
-                    $('#energy-table-container').hide();
-                    $('#energy-chart-container').show();
-                    $('#chartOrTableView').val('EnergyChart');
-                }
-            });
-        }
-    }
-}];
-
 const autarkyData1 = {
     label: '(1) Anteil selbst produzierter Strom',
     data: autarky1.map(item => item.autInPct),
@@ -181,6 +107,5 @@ const configAutarky = {
         labels: timestampsXAxis,
         datasets: autarkyDataset
     },
-    options: optionsAutarky,
-    plugins: pluginsAutarky
+    options: optionsAutarky
 };
diff --git a/js/overview-pages/configureDataTable.js b/js/overview-pages/configureDataTable.js
@@ -0,0 +1,59 @@
+$(document).ready(function() {
+    // add datatable (Sort + Filter table)
+    var energyDataTable = $('#energyTable').DataTable({
+        "paging": true,
+        "searching": false,
+        "ordering": true,
+        "orderMulti": false,
+        "autoWidth": false,
+        "scrollX": false,
+        "orderCellsTop": false,
+        "pageLength": config.energy1.tablePageLength || 10,
+        "responsive": true,
+        "columnDefs": [{
+            "targets": '_all',
+            "orderDataType": "dom-text",
+            "type": "num",
+            "render": function(data, type, row, meta) {
+                var sortData = $(row).find('td').eq(meta.col).data('sort');
+                return sortData !== undefined ? sortData : data;
+            }
+        }],
+        language: {
+            lengthMenu: "Zeige _MENU_ Einträge pro Seite",
+            zeroRecords: "Keine Einträge gefunden",
+            info: "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
+            infoEmpty: "Keine Einträge verfügbar",
+            infoFiltered: "(gefiltert von _MAX_ gesamten Einträgen)",
+            search: "Suchen:",
+        }
+    });
+
+    setTimeout(function() {
+        energyDataTable.columns.adjust();
+    }, 200);
+
+    function toggleColumnVisibility(className, show) {
+        energyDataTable.columns().every(function() {
+            var column = this;
+            if ($(column.header()).hasClass(className)) {
+                column.visible(show);
+            }
+        });
+    }
+
+    $('#toggleProductionColumns').on('change', function() {
+        toggleColumnVisibility('production-pm1', !this.checked);
+        toggleColumnVisibility('production-pm2', !this.checked);
+        toggleColumnVisibility('production-pm3', !this.checked);
+        toggleColumnVisibility('production-pmtotal', this.checked);
+        if ($('#tableEnergyShowProductionTotal').length) {
+            $('#tableEnergyShowProductionTotal').val(this.checked ? "true" : "false");
+        }
+    });
+
+    toggleColumnVisibility('production-pm1', !$('#toggleProductionColumns').prop('checked'));
+    toggleColumnVisibility('production-pm2', !$('#toggleProductionColumns').prop('checked'));
+    toggleColumnVisibility('production-pm3', !$('#toggleProductionColumns').prop('checked'));
+    toggleColumnVisibility('production-pmtotal', $('#toggleProductionColumns').prop('checked'));
+});
diff --git a/js/overview-pages/documentReady.js b/js/overview-pages/documentReady.js
@@ -8,19 +8,20 @@ $(document).ready(function() {
         ctxEnergy,
         configEnergy
     );
-    $('#energy-chart-container').data('chart', energyChart);
+    $('#energy-chart-container').data('chart', energyChart); // Add chart to container for later access
 
     ctxAutarky = document.getElementById('autarkyChart').getContext('2d');
     autarkyChart = new Chart(
         ctxAutarky,
         configAutarky
     );
-    $('#autarky-chart-container').data('chart', autarkyChart);
-
+    $('#autarky-chart-container').data('chart', autarkyChart); // Add chart to container for later access
 
+    // 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-fame');
-        var customFormFieldName2 = $(this).data('custom-form-field-fame2');
+        var customFormFieldName = $(this).data('custom-form-field-field');
+        var customFormFieldName2 = $(this).data('custom-form-field-field2');
         var chartId = $(this).data('chart-id');
         var chart = $('#' + chartId).data('chart');
 
@@ -59,6 +60,7 @@ $(document).ready(function() {
 
     });
 
+    // Helper: Hides / shows the chart line and sets new status to the hidden form field
     function hideOrShowChartLine(chart, dataset1, hide1, dataset2 = undefined, hide2 = undefined) {
         // Hide or show chart line
         dataset1.hidden = hide1;
@@ -70,6 +72,7 @@ $(document).ready(function() {
         if (dataset2 !== undefined) $('#' + dataset2.customFormFieldName).val(!hide2);
     }
 
+    // Helper: Strikethrough the legend from the chart
     function strikethroughLegendText($buttonElement, hide) {
         // Set strikethrough outside foreach
         if (hide) {
@@ -79,85 +82,46 @@ $(document).ready(function() {
         }
     }
 
+    // Switches the energy- or autarky chart or the energy table on/off, also the buttons
+    // Sets the state in the hidden form field
     $(".switch-chart").on("click", function() {
         const chartType = $(this).data("chart");
         switch (chartType) {
             case "EnergyChart":
                 $('#autarky-chart-container').hide();
                 $('#energy-table-container').hide();
                 $('#energy-chart-container').show();
-                //$('#legendBtnEnergyChart').hide();
+
+                $('#legendBtnEnergyChart').hide();
+                $('#legendBtnEnergyTable').show();
+                $('#legendBtnAutarkyChart').show();
+
+                $('#line-buttons').addClass('d-none').addClass('d-sm-flex').show();
                 break;
             case "EnergyTable":
                 $('#autarky-chart-container').hide();
                 $('#energy-chart-container').hide();
                 $('#energy-table-container').show();
+
+                $('#legendBtnEnergyChart').show();
+                $('#legendBtnEnergyTable').hide();
+                $('#legendBtnAutarkyChart').show();
+
+                $('#line-buttons').removeClass('d-none').removeClass('d-sm-flex').hide();
                 break;
             case "AutarkyChart":
                 $('#energy-table-container').hide();
                 $('#energy-chart-container').hide();
                 $('#autarky-chart-container').show();
-                break;
-        }
-        $('#chartOrTableView').val(chartType);
-    });
-
-    //-------------------------------------------------------
-
-    // add datatable (Sort + Filter table)
-    var energyDataTable = $('#energyTable').DataTable({
-        "paging": true,
-        "searching": false,
-        "ordering": true,
-        "orderMulti": false,
-        "autoWidth": false,
-        "scrollX": false,
-        "orderCellsTop": false,
-        "pageLength": config.energy1.tablePageLength,
-        "columnDefs": [{
-            "targets": '_all',
-            "orderDataType": "dom-text",
-            "type": "num",
-            "render": function(data, type, row, meta) {
-                return $(row).find('td').eq(meta.col).data('sort') || data;
-            }
-        }],
-        language: {
-            lengthMenu: "Zeige _MENU_ Einträge pro Seite",
-            zeroRecords: "Keine Einträge gefunden",
-            info: "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
-            infoEmpty: "Keine Einträge verfügbar",
-            infoFiltered: "(gefiltert von _MAX_ gesamten Einträgen)",
-            search: "Suchen:",
-        }
-    });
 
-    setTimeout(function() {
-        energyDataTable.columns.adjust();
-    }, 200);
-
-    function toggleColumnVisibility(className, show) {
-        energyDataTable.columns().every(function() {
-            var column = this;
-            if ($(column.header()).hasClass(className)) {
-                column.visible(show);
-            }
-        });
-    }
+                $('#legendBtnEnergyChart').show();
+                $('#legendBtnEnergyTable').show();
+                $('#legendBtnAutarkyChart').hide();
 
-    $('#toggleProductionColumns').on('change', function() {
-        toggleColumnVisibility('production-pm1', !this.checked);
-        toggleColumnVisibility('production-pm2', !this.checked);
-        toggleColumnVisibility('production-pm3', !this.checked);
-        toggleColumnVisibility('production-pmtotal', this.checked);
-        if ($('#tableEnergyShowProductionTotal').length) {
-            $('#tableEnergyShowProductionTotal').val(this.checked ? "true" : "false");
+                $('#line-buttons').removeClass('d-none').removeClass('d-sm-flex').hide();
+                break;
         }
+        $('#chartOrTableView').val(chartType);
     });
 
-    toggleColumnVisibility('production-pm1', !$('#toggleProductionColumns').prop('checked'));
-    toggleColumnVisibility('production-pm2', !$('#toggleProductionColumns').prop('checked'));
-    toggleColumnVisibility('production-pm3', !$('#toggleProductionColumns').prop('checked'));
-    toggleColumnVisibility('production-pmtotal', $('#toggleProductionColumns').prop('checked'));
-
 });
diff --git a/lib/utils/timeHelper.php b/lib/utils/timeHelper.php
@@ -24,9 +24,11 @@ public static function formatDate($mysqlDate)
         return date("d.m.Y", strtotime($mysqlDate));
     }
 
-    public static function formatMonthLongAndYear($mysqlDate)
+    public static function formatMonthNameAndYear($mysqlDate, $monthNameShort = true)
     {
-        return MONTH_LIST[date("n", strtotime($mysqlDate))]." ".date("Y", strtotime($mysqlDate));
+        $monthName = MONTH_LIST[date("n", strtotime($mysqlDate))];
+        $monthName = $monthNameShort ? substr($monthName, 0, 3) : $monthName;
+        return $monthName." ".date("Y", strtotime($mysqlDate));
     }
 
     public static function formatDateTime($mysqlDate, $withSeconds = false)

diff --git a/monthsOverview.php b/monthsOverview.php
@@ -26,7 +26,7 @@
     $pageTitle = "Monatsübersicht";
     $jsHeaderFiles = ["/js/utils.js", "js/overview-pages/configureEnergyChart.js", "js/overview-pages/configureAutarkyChart.js", 
                       "js/overview-pages/formFunctionsForMonthOverview.js"];
-    $jsFooterFiles = ["/js/overview-pages/documentReady.js"];
+    $jsFooterFiles = ["/js/overview-pages/documentReady.js", "/js/overview-pages/configureDataTable.js"];
     $cssFiles = ["/css/overviewPage.css"];
     $jsVars = [        
         "timestampsTooltip" => json_encode($overviewPageService->getLabelsTooltip()),
@@ -45,6 +45,7 @@
     $tableRow2CaptionTimeUnit = $selectedYear2;
     $energyTableCaption = "Energiewerte für ".$selectedYear1;
 
+
     $partialTop = "views/pages/overview/filter-for-months-overview.phtml";
     $partialBottom = "views/partials/chart-and-table-canvas.phtml";