Skip to content

Instantly share code, notes, and snippets.

@jpbberry
Last active May 22, 2019
Embed
What would you like to do?
For shaye boi
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment