web:

o Adding an API method to get per-hour aggregate values. Doesn't use the by_hour table yet.
o Adding a simple line graph component that can graph a single property's value.

1 files changed, 62 insertions, 0 deletions

diff --git a/web/static/app/diller/line-chart.js b/web/static/app/diller/line-chart.js
new file mode 100644
index 0000000..69b6f77
--- /dev/null
+++ b/web/static/app/diller/line-chart.js
@@ -0,0 +1,62 @@
+(function () {
+
+  var isoFormat = 'YYYY-MM-DDTHH:mm:ss';
+
+  function DlLineChartDirective($timeout, DillerClient) {
+    var id_seq = 0;
+
+    return {
+      restrict: 'E',
+      scope: {
+        device: '=',
+        property: '=',
+        value: '=',
+        interval: '='
+      },
+      replace: true,
+      template: '<div/>',
+      link: function (scope, element, attrs) {
+        var elementId = element.attr('id');
+        if (!elementId) {
+          elementId = 'dl-line-chart-' + id_seq++;
+          element.attr('id', elementId);
+        }
+
+        var deviceId = scope.device;
+        var propertyId = scope.property;
+        var interval = Diller.Interval.create(scope.interval);
+        var property = DillerClient.getDevice(deviceId).getProperty(propertyId);
+
+        var options = {
+          axisX: {
+            showLabel: true,
+            showGrid: true,
+            labelInterpolationFnc: function (value, index) {
+              return index % 4 === 0 ? value.format('HH:mm') : null;
+            }
+          }
+        };
+
+        property.getInterval(interval).then(function (data) {
+          var avgs = _.pluck(data.values, 'avg');
+          var timestamps = _.map(data.values, function (row) {
+            return moment(row.timestamp, isoFormat);
+          });
+
+          var chartData = {
+            labels: timestamps,
+            series: [
+              avgs
+            ]
+          };
+
+          var chart = new Chartist.Line('#' + elementId, chartData, options);
+        });
+      }
+    };
+  }
+
+  angular
+    .module('diller.line-chart', ['diller.client'])
+    .directive('dlLineChart', DlLineChartDirective);
+})();