aboutsummaryrefslogtreecommitdiff
path: root/public/javascripts
diff options
context:
space:
mode:
Diffstat (limited to 'public/javascripts')
-rw-r--r--public/javascripts/dash.js66
1 files changed, 64 insertions, 2 deletions
diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js
index 510f804..3d02fd8 100644
--- a/public/javascripts/dash.js
+++ b/public/javascripts/dash.js
@@ -6,10 +6,15 @@ var dash = {
realtimeTrendChart: null,
realtimeTrendLastSample: 0,
+ dailyUsageChart: null,
+
init: function() {
this.initRealtimeGauge();
this.initRealtimeTrendChart();
+ this.initDailyUsageChart();
+
this.startPolling();
+ this.getDailyUsageData();
},
initRealtimeGauge: function() {
@@ -77,6 +82,37 @@ var dash = {
});
},
+ initDailyUsageChart: function() {
+ var ctx = document.getElementById('du-chart').getContext('2d');
+ this.dailyUsageChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ datasets: [{
+ label: "Energy (kWH)",
+ borderColor: 'rgb(255, 99, 132)',
+ backgroundColor: 'rgb(255, 99, 132)',
+ data: []
+ }]
+ },
+ options: {
+ legend: {
+ display: false
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero:true
+ }
+ }]
+ },
+ maintainAspectRatio: false,
+ tooltips: {
+ intersect: false
+ },
+ }
+ });
+ },
+
realtimeTrendChartOnRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
@@ -110,7 +146,7 @@ var dash = {
this.realtimeGauge.set(power);
// might switch to Vue.js if this gets tedious
- $("#rtu-power").text(power + " kW")
+ $("#rtu-power").text(power + " W")
$("#rtu-current").text(current + " A")
$("#rtu-voltage").text(voltage + " V")
@@ -134,7 +170,33 @@ var dash = {
this.realtimeTrendChart.options.plugins.streaming = false;
},
-}
+ getDailyUsageData: function() {
+ $.ajax({
+ url: "/energy-usage/1/day-stats",
+ type: "GET",
+ success: function(data) {
+ dash.parseDailyUsageData(data);
+ },
+ dataType: "json",
+ timeout: 4000
+ });
+ },
+
+ parseDailyUsageData: function(usageData) {
+ usageData.forEach(function(entry) {
+ // Months from API response are 1 based
+ var day = moment([entry.year, entry.month - 1, entry.day]);
+
+ dash.dailyUsageChart.data.labels.push(day.format('MMM D'));
+ dash.dailyUsageChart.data.datasets.forEach(function(dataset) {
+ dataset.data.push(entry.energy);
+ });
+ });
+
+ dash.dailyUsageChart.update();
+ }
+
+};
$(document).ready(function () {