forked from massivebox/ecodash
106 lines
3 KiB
HTML
106 lines
3 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 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>
|