Extend with yearly view.

2025-03-29 13:35:46 +01:00
parent 01e654cd14
commit 0319687d97
3 changed files with 137 additions and 30 deletions
--- a/public/year.php
+++ b/public/year.php
@@ -0,0 +1,90 @@
+<?php
+
+$app = require(__DIR__ . '/../bootstrap.php');
+$local_db = $app['local_db'];
+$table_aggregation = $app['config']['local']['table_aggregation'];
+$table_production = $app['config']['local']['table_production'];
+
+require_once(__DIR__ . '/../functions/functions.php');
+
+$chosen_year = (isset($_POST['year'])) ? $_POST['year'] : date('Y');
+$years = get_years($local_db, $table_aggregation);
+$values = get_year_values($local_db, $table_aggregation, $chosen_year);
+
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <title>Consumption values</title>
+    <link rel="stylesheet" href="/css/layout.css"/>
+</head>
+<body>
+
+<form id="year_form"
+      style="align-self: center; width: 500px; display: grid; grid-template-columns: 25% 25% 25% 25%; gap: 10px;"
+      action="/year.php"
+      method="post">
+    <a class="button" href="index.php">Monatsübersicht</a>
+    <?php
+    if ($years['first'] < $chosen_year) {
+        echo "<button type='button' onclick='submit_form(2024)'><</button>";
+    } else {
+        echo '<span></span>';
+    }
+    echo '<span style="text-align: center">' . $chosen_year . '</span>';
+    if ($years['last'] > $chosen_year) {
+        echo "<button type='button' onclick='submit_form(" . $chosen_year + 1 . ")'>></button>";
+    } else {
+        echo '<span></span>';
+    }
+    ?>
+    <input type="hidden" name="year" id="year" value=""/>
+</form>
+<div id="chart-container">
+    <canvas id="chart"></canvas>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+<script>
+    function submit_form(value) {
+        document.getElementById('year').value = value;
+        document.getElementById('year_form').submit();
+    }
+
+    const chart = document.getElementById('chart');
+
+    new Chart(chart, {
+        type: 'bar',
+        data: {
+            labels: <?php echo json_encode($values['date']); ?>,
+            datasets: [
+                {
+                    label: 'Verbrauch Zählerstand',
+                    data: <?php echo json_encode($values['meter_consumption']); ?>,
+                    backgroundColor: '#375BEB',
+                },
+                {
+                    label: 'Verbrauch berechnet',
+                    data: <?php echo json_encode($values['power_sensor']); ?>,
+                    backgroundColor: '#90EB36',
+                },
+                {
+                    label: 'Einspeisung',
+                    data: <?php echo json_encode($values['grid_feed']); ?>,
+                    backgroundColor: '#EB5F36',
+                },
+                {
+                    label: 'Erzeugung',
+                    data: <?php echo json_encode($values['production']); ?>,
+                    backgroundColor: '#DAE32D',
+                }
+            ]
+        },
+        options: {
+            aspectRatio: 2,
+        }
+
+    });
+</script>
+</body>
+</html>