Show total and average usage for current day and month

4 files changed, 87 insertions, 31 deletions

diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js
index 4ac25b5..2dab0de 100644
--- a/public/javascripts/dash.js
+++ b/public/javascripts/dash.js
@@ -1,6 +1,7 @@
 var dash = {
   realtimeUsagePollRateMs: 1000,
-  powerStatePollRateMs: 10000,
+  powerStatePollRateMs: 60000,
+  historicalStatsPollRateMs: 300000,
   pollingEnabled: true,
 
   realtimeGauge: null,
@@ -17,8 +18,6 @@ var dash = {
     this.initMonthlyUsageChart();
     
     this.startPolling();
-    this.getDailyUsageData();
-    this.getMonthlyUsageData();
   },
 
   initRealtimeGauge: function() {
@@ -200,6 +199,8 @@ var dash = {
     
     this.pollUsage();
     this.pollPowerStatus();
+    this.pollDayStats();
+    this.pollMonthStats();
   },
 
   stopPolling: function() {
@@ -207,19 +208,29 @@ 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
-    });
+  pollDayStats: function() {
+    if(this.pollingEnabled) {
+      $.ajax({
+        url: "/energy-usage/1/day-stats",
+        type: "GET",
+        success: function(data) {
+          dash.parseDailyUsageData(data);
+        },
+        dataType: "json",
+        complete: setTimeout(function() {dash.pollDayStats()}, dash.historicalStatsPollRateMs),
+        timeout: 4000
+      });
+    }
   },
 
   parseDailyUsageData: function(usageData) {
+
+    // Clear previous data
+    dash.dailyUsageChart.data.labels = [];
+    dash.dailyUsageChart.data.datasets.forEach(function(dataset) {
+      dataset.data = [];
+    });
+
     usageData.forEach(function(entry) {
       // Months from API response are 1 based
       var day = moment([entry.year, entry.month - 1, entry.day]);
@@ -231,21 +242,47 @@ var dash = {
     });
 
     dash.dailyUsageChart.update();
+    dash.setDailyUsageStats(usageData);
   },
 
-  getMonthlyUsageData: function() {
-    $.ajax({
-      url: "/energy-usage/1/month-stats",
-      type: "GET",
-      success: function(data) {
-        dash.parseMonthlyUsageData(data);
-      },
-      dataType: "json",
-      timeout: 4000
+  setDailyUsageStats: function(usageData) {
+
+    var dailyTotal = usageData.find(function(d) {
+      return d.day === moment().date() && d.month === (moment().month()+1) && d.year === moment().year()
     });
+
+    $("#total-day").text(dailyTotal.energy.toFixed(2));
+
+    var total = usageData.reduce(function(t, d) {return t + d.energy}, 0);
+    var avg = total/usageData.length;
+
+    $("#avg-day").text(avg.toFixed(2));
+
+  },
+
+  pollMonthStats: function() {
+    if(this.pollingEnabled) {
+      $.ajax({
+        url: "/energy-usage/1/month-stats",
+        type: "GET",
+        success: function(data) {
+          dash.parseMonthlyUsageData(data);
+        },
+        dataType: "json",
+        complete: setTimeout(function() {dash.pollMonthStats()}, dash.historicalStatsPollRateMs),
+        timeout: 4000
+      });
+    }
   },
 
   parseMonthlyUsageData: function(usageData) {
+    
+    // Clear previous data
+    dash.monthlyUsageChart.data.labels = [];
+    dash.monthlyUsageChart.data.datasets.forEach(function(dataset) {
+      dataset.data = [];
+    });
+
     usageData.forEach(function(entry) {
       // Months from API response are 1 based
       var month = moment().month(entry.month -1);
@@ -257,6 +294,21 @@ var dash = {
     });
 
     dash.monthlyUsageChart.update();
+    dash.setMonthlyUsageStats(usageData);
+  },
+
+  setMonthlyUsageStats: function(usageData) {
+
+    var monthlyTotal = usageData.find(function(m) {
+      return m.month === (moment().month()+1) && m.year === moment().year()
+    });
+
+    $("#total-month").text(monthlyTotal.energy.toFixed(2));
+
+    var total = usageData.reduce(function(t, m) {return t + m.energy}, 0);
+    var avg = total/usageData.length;
+
+    $("#avg-month").text(avg.toFixed(2));
   },
 
   pollPowerStatus: function() {
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 919696c..3f4c1ca 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -20,3 +20,9 @@ footer ul {
   justify-content: center;
   margin-top: 0;
 }
+
+.btn-success {
+  color: #fff;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
\ No newline at end of file
diff --git a/routes/energy-usage.js b/routes/energy-usage.js
index 740e29e..eb21eb9 100644
--- a/routes/energy-usage.js
+++ b/routes/energy-usage.js
@@ -130,9 +130,9 @@ function fillMissingMonths(sparseMonthStats, statsMoment) {
   let denseMonthStats = [];
 
   let maxMonths;
-  // Dont fill months in months which havent happened yet
+  // Dont fill in months which exist in the future
   if(statsMoment.year() === moment().year()) {
-    maxMonths = moment().month();
+    maxMonths = moment().month() + 1; // API months are 1 based
   }
   else {
     maxMonths = 12;
diff --git a/views/index.hbs b/views/index.hbs
index 3f023e6..7b2806d 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -40,7 +40,7 @@
             </div>
             <div class="col-sm-4">
               <h2 class="pull-right">
-              <input id="toggle-polling" class="form-control" type="checkbox" checked data-toggle="toggle" data-on="Auto refresh on" data-off="Auto refresh off" data-offstyle="danger">
+              <input id="toggle-polling" class="form-control" type="checkbox" checked data-toggle="toggle" data-on="Auto refresh on" data-off="Auto refresh off" data-onstyle="success" data-offstyle="danger">
               </h2>
             </div>
           </div>
@@ -99,8 +99,6 @@
 
         </div>
 
-        
-
         <div class="row">
 
           <div class="col-md-2 col-sm-2 col-xs-12">
@@ -142,7 +140,7 @@
                 <div class="clearfix"></div>
               </div>
               <div class="x_content small">
-                <h1>- <small>kWH</small></h1>
+                <h1><span id="total-day">-</span> <small>kWH</small></h1>
               </div>
             </div>
           </div>
@@ -156,7 +154,7 @@
                 <div class="clearfix"></div>
               </div>
               <div class="x_content small">
-                <h1>- <small>kWH</small></h1>
+                <h1><span id="total-month">-</span> <small>kWH</small></h1>
               </div>
             </div>
           </div>
@@ -170,7 +168,7 @@
                 <div class="clearfix"></div>
               </div>
               <div class="x_content small">
-                <h1>- <small>kWH</small></h1>
+                <h1><span id="avg-day">-</span> <small>kWH</small></h1>
               </div>
             </div>
           </div>
@@ -184,7 +182,7 @@
                 <div class="clearfix"></div>
               </div>
               <div class="x_content small">
-                <h1>- <small>kWH</small></h1>
+                <h1><span id="avg-month">-</span> <small>kWH</small></h1>
               </div>
             </div>
           </div>