For shaye boi

index.js

class ShaysEnergyBoi {
    constructor(config, baseURI = "api.shaybox.com", extend = "tplink") {
        this.config = config || {
            "type": "bar",
            "options": {
                "maintainAspectRatio": false,
                "scales": {
                    "yAxes": [{
                        "ticks": {
                            "beginAtZero": true
                        }
                    }]
                }
            }
        };
        this.opts = {
            uri: baseURI,
            uriE: extend
        };
        this.cache = {};
    }

    run() {
        this.monthChart();
        this.dayChart();
        this.realtimeChart();
        console.log("abortion started");
    }

    get URI() {
        return `${window.location.protocol}//${this.opts.uri}/${this.opts.uriE}`;
    }
    get monthsConfig() {
        return (async () => {
            var energy = this;
            var dat = await this.monthData;
            var monthsColors = await this.COLOR(dat);
            return {
                ...energy.config,
                data: {
                    labels: energy.monthLabels,
                    datasets: [{
                        label: 'kWh',
                        data: dat,
                        backgroundColor: monthsColors.map(color => `#${color}80`),
                        borderColor: monthsColors.map(color => `#${color}80`),
                        borderWidth: 1,
                    }],
                },
            }
        })();
    }
    get monthData() {
        return (async () => {
            var energy = this;
            var dat = await energy.months
            return this.monthLabels.map(function (_, i) {
                return ((dat.find(x => x.month === i + 1)) || {}).energy || 0;
            })
        })();
    }

    async monthChart() {
        new Chart(this.ctx("months"), await this.monthsConfig)
    }

    async dayChart() {
        new Chart(this.ctx("days"), await this.dayConfig)
    }

    async realtimeChart() {
        new Chart(this.ctx("realtime"), this.realtimeConfig);
    }

    async COLOR(dat) {
        return await this.getColor((dat).length);
    }
    async getColor(steps) {
        return await this.baseFetch("/" + steps, "https://api.shaybox.com/hex/rainbow");
    }

    baseFetch(endpoint, uri = this.URI) {
        var energy = this;
        return new Promise(function (resolve, reject) {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open("GET", uri + (endpoint.startsWith("/") ? endpoint : endpoint.slice(1)));
            xhr.onload = function () {
                var err;
                var json;
                try {
                    json = JSON.parse(xhr.response);
                } catch (error) {
                    if (error) err = error;
                }
                if (err || !json) reject(new Error({
                    message: "Failed abortion"
                }));
                resolve(json);
            }
            xhr.send(null);
        })
    }

    get realtime() {
        var energy = this;
        return new Promise(function (resolve) {
            energy.baseFetch("/realtime").then(resolve);
        })
    }

    get months() {
        var energy = this;
        return new Promise(function (resolve) {
            if (energy.cache["months"]) return resolve(energy.cache["months"]);
            energy.baseFetch("/months").then(function (data) {
                energy.cache["months"] = data;
                resolve(data);
            });
        })
    }

    get days() {
        var energy = this;
        return new Promise(function (resolve) {
            energy.baseFetch("/days").then(resolve);
        })
    }

    get dayLabels() {
        return Array.apply(null, {
            length: new Date().getDate()
        }).map(Number.call, Number);
    }
    get dayData() {
        return (async () => {
            var energy = this;
            var dat = await energy.days
            return this.dayLabels.map(function (_, i) {
                return ((dat.find(x=>x.day === i + 1) || {}).energy) || 0;
            })
        })();
    }
    get dayConfig() {
        return (async () => {
            var energy = this;
            var dat = await this.dayData;
            var daysColors = await this.COLOR(dat);
            return {
                ...energy.config,
                data: {
                    labels: energy.dayLabels,
                    datasets: [{
                        label: 'kWh',
                        data: dat,
                        backgroundColor: daysColors.map(color => `#${color}80`),
                        borderColor: daysColors.map(color => `#${color}80`),
                        borderWidth: 1,
                    }],
                },
            };
        })();
    }



    get monthLabels() {
        return [
            "January",
            "Febuary",
            "March",
            "April",
            "May",
            "June",
            "July",
            "Augest",
            "September",
            "October",
            "November",
            "December"
        ];

    }

    ctx(id) {
        var elm = document.getElementById(id);
        if (!elm) throw new Error({
            message: "Invalid Element"
        });
        var canvas = elm.getContext("2d");
        if (!canvas) throw new Error({
            message: "Invalid Canvas"
        });
        return canvas;
    }

    get realtimeConfig() {
        var energy = this;
        return {
            type: 'line',
            data: {
                datasets: [{
                    label: 'Watts',
                    backgroundColor: '#FF000080',
                    borderColor: '#FF000080',
                    borderWidth: 1,
                }],
            },
            options: {
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        type: 'realtime',
                        realtime: {
                            refresh: 5000,
                            duration: 60000,
                            delay: 10000,
                            onRefresh: async chart => {
                                const realtimeJson = await energy.realtime;
                                chart.data.datasets[0].data.push({
                                    x: Date.now(),
                                    y: realtimeJson.power,
                                });
                            },
                        },
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
            },
        };
    }
}

window.enorgay = new ShaysEnergyBoi();