ecodash/templates/default/index.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>
                <svg viewBox="0 0 100 100">
                    <use href="assets/light-bulb.svg#layer" xlink:href="#layer" />
                </svg>
                <p><b>{{divide .PerDayUsage 0.072}} desk lights</b> running for a day</p>
            </div>
            <div>
                <svg viewBox="0 0 64 64">
                    <use href="assets/washing.svg#layer" xlink:href="#layer" />
                </svg>
                <p><b>{{divide .PerDayUsage 0.66}} washing machines</b> completing a cycle</p>
            </div>
            <div>
                <svg viewBox="0 0 64 64">
                    <use href="assets/oven.svg#layer" xlink:href="#layer"/>
                </svg>
                <p><b>{{divide .PerDayUsage 1.2}} electric ovens</b> baking a cake</p>
            </div>
            <div>
                <svg viewBox="0 0 140 141.347">
                    <use href="assets/bitcoin.svg#layer" xlink:href="#layer" />
                </svg>
                <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>