Eigene Legende für Energy-Chart

SvenoF54 · Jan 18, 2025 · 71d443c · 71d443c
1 parent 634f51a
commit 71d443c
Show file tree

Hide file tree

Showing 10 changed files with 366 additions and 180 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -19,7 +19,8 @@ jobs:
     - name: Search for disallowed PHP short tags
       run: |
         DISALLOWED_PATTERN='<\?(?!php|=)'
-        if grep -rE "$DISALLOWED_PATTERN" .; then
+        if grep -rP "$DISALLOWED_PATTERN" .; then
           echo "Error: Disallowed PHP short tags '<?' found!"
           exit 1
         fi
+    
diff --git a/css/allPages.css b/css/allPages.css
@@ -23,6 +23,10 @@ body {
     border: 1px solid #ccc;
 }
 
+.strikethrough {
+    text-decoration: line-through;
+}
+
 
 /* Navigation  */
 
@@ -58,8 +62,9 @@ body {
     --datetime-color: rgb(151, 147, 147);
     --em-color: rgb(190, 110, 110);
     --em-over-zero-color: rgb(190, 110, 110);
-    --consumption-complete-color: rgba(190, 110, 110, 0.2);
+    --add-savings-color: rgba(190, 110, 110, 0.2);
     --em-over-zero-color2: rgb(150, 90, 110);
+    --add-savings-color2: rgba(150, 90, 110, 0.2);
     --savings-color: rgb(127, 181, 181);
     --savings-color2: rgb(97, 141, 141);
     --feed-in-color: rgb(127, 127, 181);
@@ -74,3 +79,75 @@ body {
     --autarky-color: rgba(127, 181, 181, 0.6);
     --autarky-color2: rgba(97, 141, 141, 0.6);
 }
+
+.em-color {
+    background-color: var(--em-color);
+}
+
+.em-over-zero-color {
+    background-color: var(--em-over-zero-color);
+}
+
+.add-savings-color {
+    background-color: var(--add-savings-color);
+}
+
+.em-over-zero-color2 {
+    background-color: var(--em-over-zero-color2);
+}
+
+.add-savings-color2 {
+    background-color: var(--add-savings-color2);
+}
+
+.savings-color {
+    background-color: var(--savings-color);
+}
+
+.savings-color2 {
+    background-color: var(--savings-color2);
+}
+
+.feed-in-color {
+    background-color: var(--feed-in-color);
+}
+
+.feed-in-color2 {
+    background-color: var(--feed-in-color2);
+}
+
+.pm1-color {
+    background-color: var(--pm1-color);
+}
+
+.pm2-color {
+    background-color: var(--pm2-color);
+}
+
+.pm3-color {
+    background-color: var(--pm3-color);
+}
+
+.pm-total-color {
+    background-color: var(--pm-total-color);
+}
+
+.line1-color {
+    background-color: var(--line1-color);
+}
+
+.line2-color {
+    background-color: var(--line2-color);
+}
+
+.line-zero-color {
+    background-color: var(--line-zero-color);
+}
+
+.autarky-color {
+    background-color: var(--autarky-color);
+}
+
+.autarky-color2 {
+    background-color: var(--autarky-color2);
+}
diff --git a/css/overviewPage.css b/css/overviewPage.css
@@ -46,6 +46,59 @@ h1 {
 }
 
 
+/* Energy-Chart Legend Buttons */
+
+.custom-legend .btn-light {
+    color: #495057;
+    background-color: #f8f9fa;
+    border-color: #ced4da;
+}
+
+.custom-legend {
+    width: 95vw !important;
+    display: flex;
+    flex-wrap: nowrap !important;
+    align-items: center;
+}
+
+.legend-button {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    font-family: Arial, sans-serif;
+    white-space: nowrap !important;
+    justify-content: center;
+}
+
+.legend-vertical-line {
+    width: 2px;
+    background-color: #aaa;
+    flex-grow: 1;
+    margin: 0 0px;
+    height: 25px;
+    display: inline-block;
+}
+
+.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;
+}
+
+.hidden {
+    opacity: 0.2;
+}
+
+
 /* Chart-Container */
 
 #autarky-chart-container,
@@ -79,14 +132,21 @@ canvas {
     padding: 0.2rem 0.5rem;
 }
 
-#switchToEnergyBarView {
+.btn-table-switch-right {
     margin-left: 0;
 }
 
-#switchToAutarkyBarView {
+.btn-table-switch-left {
     margin-left: 10px;
 }
 
+@media (max-width: 768px) {
+    .chart-container {
+        display: none !important;
+        /* Verstecke die Legende */
+    }
+}
+
 
 /* Energy-table-container */
 

diff --git a/gallery.md b/gallery.md
@@ -1,5 +1,5 @@
-# Projektname
-Energie-Visualisierung für zu Hause – Beschreibung siehe hier [readme.md](./README.md).
+# Energie-Visualisierung für zu Hause
+Eine Beschreibung ist hier [readme.md](./README.md) zu finden.
 
 # Echtzeitansicht
 

diff --git a/hoursOverview.php b/hoursOverview.php
@@ -14,7 +14,6 @@
 $endTime2 = date("Y-m-d 23:59:59", strtotime($selectedDay2));
 $timeLabelUnit = TimeHelper::prepareTimeUnit($startTime1, $endTime1);
 
-
 // Prepare DB
 $errorMsg = "";
 $db = Database::getInstance();

diff --git a/js/overview-pages/configureEnergyChart.js b/js/overview-pages/configureEnergyChart.js
@@ -1,7 +1,8 @@
 const emColor = getComputedStyle(document.documentElement).getPropertyValue('--em-color').trim();
 const emOverZeroColor = getComputedStyle(document.documentElement).getPropertyValue('--em-over-zero-color').trim();
-const consumptionCompleteColor = getComputedStyle(document.documentElement).getPropertyValue('--consumption-complete-color').trim();
+const addSavingsColor = getComputedStyle(document.documentElement).getPropertyValue('--add-savings-color').trim();
 const emOverZeroColor2 = getComputedStyle(document.documentElement).getPropertyValue('--em-over-zero-color2').trim();
+const addSavingsColor2 = getComputedStyle(document.documentElement).getPropertyValue('--add-savings-color2').trim();
 
 const savingsColor = getComputedStyle(document.documentElement).getPropertyValue('--savings-color').trim();
 const savingsColor2 = getComputedStyle(document.documentElement).getPropertyValue('--savings-color2').trim();
@@ -171,86 +172,12 @@ const optionsEnergy = {
             }
         },
         legend: {
-            display: true,
-            onClick: function(event, legendItem) {
-                const clickedDatasetIndex = legendItem.datasetIndex;
-                const clickedLabel = legendItem.text;
-                const dataset = energyChart.data.datasets[clickedDatasetIndex];
-
-                // Update chart
-                dataset.hidden = !dataset.hidden;
-                energyChart.update();
-
-                // Set hidden form field to recover chart settings on next page call
-                const customFormFieldName = dataset.customFormFieldName;
-                $('#' + customFormFieldName).val(!dataset.hidden);
-            },
+            display: false,
         },
     },
     scales: scalesEnergy
 };
 
-// Plugins, here the button for the table view
-const pluginsEnergy = [{
-    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: autarky-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('Autarkieansicht', 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: autarky-view
-                if (x > button2X && x < button2X + 100 && y > button2Y && y < button2Y + 25) {
-                    $('#energy-chart-container').hide();
-                    $('#energy-table-container').hide();
-                    $('#autarky-chart-container').show();
-                    $('#chartOrTableView').val('AutarkyChart');
-                }
-            });
-        }
-    }
-}];
-
 const emOverZeroData1 = {
     label: '(1) Stromeinkauf',
     data: data1.map(item => item.emOZ),
@@ -292,7 +219,7 @@ const energyOverZeroPlusSavings1 = {
     label: '(1) Ersparnis addiert',
     data: data1.map(item => item.pmSvg),
     fill: false,
-    backgroundColor: consumptionCompleteColor,
+    backgroundColor: addSavingsColor,
     tension: 0.1,
     borderWidth: 0,
     maxBarThickness: 30,
@@ -314,6 +241,20 @@ const emOverZeroData2 = {
     customPriceFieldName: 'emOZPrice',
     hidden: !config.energy2.chartShowEnergyOverZero,
 }
+const energyOverZeroPlusSavings2 = {
+    label: '(1) Ersparnis addiert',
+    data: data2.map(item => item.pmSvg),
+    fill: false,
+    backgroundColor: addSavingsColor2,
+    tension: 0.1,
+    borderWidth: 0,
+    maxBarThickness: 30,
+    customDataSourceNo: 2,
+    customFormFieldName: 'energy2_chartShowEnergyOverZeroPlusSavings',
+    customPriceFieldName: 'pmSvgPrice',
+    stack: 'Stack EM2',
+    hidden: !config.energy2.chartShowEnergyOverZeroPlusSavings,
+};
 const feedInData2 = {
     label: '(2) Netzeinspeisung',
     data: data2.map(item => item.emUZ),
@@ -344,6 +285,7 @@ energyDataset.push(emOverZeroData1);
 energyDataset.push(energyOverZeroPlusSavings1);
 energyDataset.push(feedInData1);
 if (data2.length > 0) energyDataset.push(emOverZeroData2);
+if (data2.length > 0) energyDataset.push(energyOverZeroPlusSavings2);
 if (data2.length > 0) energyDataset.push(feedInData2);
 energyDataset.push(savingsData1);
 if (data2.length > 0) energyDataset.push(savingsData2);
@@ -355,6 +297,5 @@ const configEnergy = {
         labels: timestampsXAxis,
         datasets: energyDataset
     },
-    options: optionsEnergy,
-    plugins: pluginsEnergy
+    options: optionsEnergy
 };