2 files changed, 75 insertions, 13 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