Add realtime usage trend graph

3 files changed, 93 insertions, 54 deletions

diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js
index 48b5fd5..510f804 100644
--- a/public/javascripts/dash.js
+++ b/public/javascripts/dash.js
@@ -1,14 +1,18 @@
 var dash = {
   pollRateMs: 1000,
   pollingEnabled: true,
-  realtimeGuage: null,
+
+  realtimeGauge: null,
+  realtimeTrendChart: null,
+  realtimeTrendLastSample: 0,
 
   init: function() {
-    this.initRealtimeGuage();
+    this.initRealtimeGauge();
+    this.initRealtimeTrendChart();
     this.startPolling();
   },
 
-  initRealtimeGuage: function() {
+  initRealtimeGauge: function() {
     var opts = {
       angle: 0,
       lineWidth: 0.2,
@@ -33,11 +37,53 @@ var dash = {
     };
     var target = document.getElementById('rtu-gauge');
   
-    dash.realtimeGuage = new Gauge(target).setOptions(opts);
-    dash.realtimeGuage.maxValue = 3000;
-    dash.realtimeGuage.setMinValue(0);
-    dash.realtimeGuage.animationSpeed = 32;
-    dash.realtimeGuage.set(500);
+    dash.realtimeGauge = new Gauge(target).setOptions(opts);
+    dash.realtimeGauge.maxValue = 3000;
+    dash.realtimeGauge.setMinValue(0);
+    dash.realtimeGauge.animationSpeed = 32;
+  },
+
+  initRealtimeTrendChart: function() {
+    var ctx = document.getElementById('rtt-chart').getContext('2d');
+    this.realtimeTrendChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        datasets: [{
+          label: "Power (W)",
+          borderColor: 'rgb(255, 99, 132)',
+          data: []
+        }]
+      },
+      options: {
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            display: false,
+            type: 'realtime'
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero:true
+            }
+          }]
+        },
+        maintainAspectRatio: false,
+        tooltips: {
+          intersect: false
+        },
+      }
+    });
+  },
+
+  realtimeTrendChartOnRefresh: function(chart) {
+    chart.data.datasets.forEach(function(dataset) {
+      dataset.data.push({
+        x: Date.now(),
+        y: dash.realtimeTrendLastSample
+      });
+    });
   },
 
   // TODO - should probably use websockets 
@@ -50,7 +96,7 @@ var dash = {
           dash.refreshDashboard(data);
         },
         dataType: "json",
-        complete: setTimeout(function() {dash.poll()}, 1000),
+        complete: setTimeout(function() {dash.poll()}, dash.pollRateMs),
         timeout: 2000
       });
     }
@@ -62,28 +108,39 @@ var dash = {
     var current = realtime.current.toFixed(2);
     var voltage = Math.round(realtime.voltage);
 
-    this.realtimeGuage.set(power);
-    // might switch to Vue.js is this gets tedious 
+    this.realtimeGauge.set(power);
+    // might switch to Vue.js if this gets tedious 
     $("#rtu-power").text(power + " kW")
     $("#rtu-current").text(current + " A")
     $("#rtu-voltage").text(voltage + " V")
-    
+
+    this.realtimeTrendLastSample = power;
   },
 
   startPolling: function() {
     this.pollingEnabled = true;
+    this.realtimeTrendChart.options.plugins.streaming = {
+      duration: 60000,
+      refresh: 1000,
+      delay: 1000,
+      frameRate: 30,
+      onRefresh: dash.realtimeTrendChartOnRefresh
+    };
     this.poll();
   },
 
   stopPolling: function() {
     this.pollingEnabled = false;
+    this.realtimeTrendChart.options.plugins.streaming = false;
   },
 
 }
 
 
 $(document).ready(function () {
+
   dash.init();
+
   $("#toggle-polling").change(function() {
     if(this.checked) {
       dash.startPolling();
@@ -91,5 +148,6 @@ $(document).ready(function () {
     else {
       dash.stopPolling();
     }
-  })
+  });
+
 });
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 320eb01..62b7873 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -4,4 +4,8 @@ footer ul {
 
 .page-header {
   margin: 10px 0 20px;
+}
+
+.x_panel {
+  height: 350px;
 }
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
index 8885933..33d5549 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -52,8 +52,7 @@
 
         <div class="row">
 
-
-          <div class="col-md-5 col-sm-5 col-xs-12">
+          <div class="col-md-4 col-sm-4 col-xs-12">
             <div class="x_panel tile">
               <div class="x_title">
                 <h2>
@@ -67,14 +66,11 @@
                     <strong id="rtu-power">- kW</strong>
                   </h1>
                 </div>
-
                 <div class="row text-center">
                   <div>
                     <canvas id="rtu-gauge"></canvas>
                   </div>
                 </div>
-
-
                 <div class="row">
                   <div class="col-md-6 col-xs-6 text-center">
                     <h1>
@@ -87,11 +83,24 @@
                     </h1>
                   </div>
                 </div>
-
               </div>
+            </div>
+          </div>
 
+          <div class="col-md-8 col-sm-8 col-xs-12">
+            <div class="x_panel tile">
+              <div class="x_title">
+                <h2>
+                  <strong>Realtime Trend</strong>
+                </h2>
+                <div class="clearfix"></div>
+              </div>
+              <div class="x_content">
+                <canvas id="rtt-chart" height="270"></canvas>
+              </div>
             </div>
           </div>
+
         </div>
 
       </div>
@@ -117,40 +126,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
   <script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
   <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.4.0/dist/chartjs-plugin-streaming.min.js"></script>
 
   <script src="/javascripts/dash.js"></script>
-
-  {{!-- <script>
-
-    $(document).ready(function () {
-      var opts = {
-        angle: 0,
-        lineWidth: 0.2,
-        pointer: {
-          length: 0.6,
-          strokeWidth: 0.035,
-          color: '#000000'
-        },
-        limitMax: true,
-        limitMin: true,
-        generateGradient: true,
-        highDpiSupport: true, 
-        staticLabels: {
-          font: "12px sans-serif",
-          labels: [500, 1500, 3000]
-        },
-        staticZones: [
-          { strokeStyle: "#30B32D", min: 0, max: 500 },
-          { strokeStyle: "#FFDD00", min: 500, max: 1500 },
-          { strokeStyle: "#F03E3E", min: 1500, max: 3000 }
-        ]
-      };
-      var target = document.getElementById('realtime-gauge');
-
-      var gauge = new Gauge(target).setOptions(opts);
-      gauge.maxValue = 3000;
-      gauge.setMinValue(0);
-      gauge.animationSpeed = 1;
-      gauge.set({{ realtimeUsage.power }});
-    })
-  </script> --}}
\ No newline at end of file