diff options
| -rw-r--r-- | public/javascripts/dash.js | 96 | ||||
| -rw-r--r-- | public/stylesheets/style.css | 6 | ||||
| -rw-r--r-- | routes/energy-usage.js | 4 | ||||
| -rw-r--r-- | views/index.hbs | 12 |
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> |