ecodash/templates/default/index.html
MassiveBox 08be78f907 Minor graphical improvements
- Uniform style of SVGs
- Add style directly inside SVGs to switch to dark mode - the previous solution didn't work in Chromium for some reason
2023-04-14 18:20:25 +02:00

106 lines
2.9 KiB
HTML

<script src="assets/chartjs/chart.js"></script>
<h1>Green report</h1>
<canvas id="report"></canvas>
<p class="footnote">
This server's energy statistics for the last eight days (current day included)
</p>
<div class="flex two">
<div>
<div class="home-cards card">
<div>
<h3>Energy usage per day</h3>
<svg height="50px" viewBox="0 0 80 15">
<text x="0" y="15">{{.PerDayUsage}} kWh</text>
</svg>
</div>
</div>
</div>
<div>
<div class="home-cards card">
<div>
<h3>Green energy %</h3>
<svg height="50px" viewBox="0 0 80 15">
<text x="0" y="15">{{.GreenEnergyPercent}} %</text>
</svg>
</div>
</div>
</div>
</div>
<article class="card">
<header>
<h3>This server consumes in a day as much as...</h3>
</header>
<footer>
<div class="flex two four-600">
<div>
<img src="assets/light-bulb.svg" alt="Light bulb">
<p><b>{{divide .PerDayUsage 0.072}} desk lights</b> running for a day</p>
</div>
<div>
<img src="assets/washing.svg" alt="Washing machine">
<p><b>{{divide .PerDayUsage 0.66}} washing machines</b> completing a cycle</p>
</div>
<div>
<img src="assets/oven.svg" alt="Oven">
<p><b>{{divide .PerDayUsage 1.2}} electric ovens</b> baking a cake</p>
</div>
<div>
<img src="assets/bitcoin.svg" alt="Bitcoin">
<p><b>{{divide .PerDayUsage 1300}} Bitcoin transactions</b></p>
</div>
</div>
</footer>
</article>
<p class="footnote">
Calculated on the latest seven days (current day excluded)
</p>
<script>
const data = {
labels: {{.Labels}},
datasets: [
{
label: 'Green energy usage',
backgroundColor: '#00a440',
borderColor: '#00a440',
data: {{.GreenEnergyPercents}},
}, {
label: 'Total energy usage',
backgroundColor: 'rgba(0,116,217,0.8)',
borderColor: '#0074d9',
data: {{.EnergyConsumptions}},
}
]
};
const myChart = new Chart(
document.getElementById('report'),
{
data: data,
type: 'bar',
options: {
scales: {
x: {
stacked: true
},
y: {
position: 'left',
min: 0,
title: {
display: true,
text: 'Energy usage (kWh)'
}
}
}
}
}
);
</script>