danog/ecodash
1
0
Fork 0
forked from massivebox/ecodash
Code Pull requests Activity

First commit

Browse source
This commit is contained in:
MassiveBox 2022-10-15 19:58:44 +02:00
commit 82bba66fd6
30 changed files with 2176 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

105
templates/default/index.html Normal file
View file

@ -0,0 +1,105 @@
<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 width="100%" 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 width="100%" 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="Lightbulb" style="width: 100%">
<p><b>{{divide .PerDayUsage 0.072}} desk lights</b> running for a day</p>
</div>
<div>
<img src="assets/washing.svg" alt="Air Conditioner" style="width: 100%">
<p><b>{{divide .PerDayUsage 0.66}} washing machines</b> completing a cycle</p>
</div>
<div>
<img src="assets/oven.svg" alt="Oven" style="width: 100%">
<p><b>{{divide .PerDayUsage 1.2}} electric ovens</b> baking a cake</p>
</div>
<div>
<img src="assets/bitcoin.svg" alt="Bitcoin" style="width: 100%">
<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>