Files
power-consumption/public/year.php
Christian Steinle 9f72a69347
Some checks failed
Build power-consumtion image / Build-and-release-image (push) Failing after 26s
Change some styling. Fix undefined array_key in functions and show overview values in yearly view.
2025-10-15 17:56:51 +02:00

126 lines
4.5 KiB
PHP

<?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);
$aggregation = get_year_aggregation($local_db, $table_aggregation, $chosen_year);
$year_production = get_year_production($local_db, $table_production, $chosen_year);
$grid_feed_by_month = get_grid_feed_by_month($local_db, $table_aggregation, $table_production, $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: 20% 20% 20% 20% 20%; gap: 10px;"
action="/year.php"
method="post">
<?php
if ($years['first'] < $chosen_year) {
echo "<button type='button' onclick='submit_form(" . $chosen_year - 1 . ")'><</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>';
}
?>
<a class="button" href="index.php">Monat</a>
<a class="button" href="production.php">Werte</a>
<input type="hidden" name="year" id="year" value=""/>
</form>
<div style="display: grid; grid-template-columns: 5% 15% 15%; gap: 2px 10px; margin-top: 5px; border-top: 2px solid gray; padding-top: 5px;">
<span class="color"></span>
<label><b>Messung</b></label>
<span><b>Jahr</b></span>
<span class="color color-1"></span>
<label>Verbrauch</label>
<span><?php echo number_format($aggregation['meter_consumption'], 1, ',', '.'); ?> KWh</span>
<span class="color color-2"></span>
<label>Berechnet</label>
<span><?php echo number_format($aggregation['power_sensor'], 1, ',', '.'); ?> KWh</span>
<span class="color color-3"></span>
<label>Einspeisung</label>
<span><?php echo number_format($aggregation['grid_feed'], 1, ',', '.'); ?> KWh</span>
<span class="color color-4"></span>
<label>Produktion</label>
<span><?php echo number_format($year_production['eg'] + $year_production['og'], 1, ',', '.'); ?> KWh</span>
<span class="color"></span>
<label><b>Ersparnis</b></label>
<span><b><?php echo number_format(($year_production['eg_price'] + $year_production['og_price'] - array_sum($grid_feed_by_month)), 2, ',', '.'); ?> €</b></span>
<span class="color"></span>
<label><b>Eigenverbrauch</b></label>
<span><b><?php echo number_format(100 - $aggregation['grid_feed'] * 100 / ($year_production['eg'] + $year_production['og']), 2, ',', '.'); ?> %</b></span>
</div>
<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>