web:

o Adding level to Interval that specifies what kind of aggregate level the server should use.

5 files changed, 124 insertions, 94 deletions

diff --git a/web/static/app/diller/client.js b/web/static/app/diller/client.js
index 6641ffb..e73ac5f 100644
--- a/web/static/app/diller/client.js
+++ b/web/static/app/diller/client.js
@@ -4,13 +4,26 @@
   }
 
   function Property($http, DillerRpc, propertyId) {
-    function getInterval(interval) {
 
-      // moment().subtract(24, 'hour')
+    /**
+     * @param {Diller.Interval} interval
+     * @returns {Promise}
+     */
+    function getInterval(interval) {
       var req = DillerRpc.getValuesReq(propertyId);
-      req.params = {
-        from: interval.getFrom().toISOString()
-      };
+      req.params = {};
+      var from = interval.getFrom();
+      if(from.isValid()) {
+        req.params.from = from.toISOString();
+      }
+
+      var to = interval.getTo();
+      if(to.isValid()) {
+        req.params.to = to.toISOString();
+      }
+
+      req.params.aggregateLevel = interval.getLevel();
+
       return $http(req).then(extractData);
     }
 
diff --git a/web/static/app/diller/global.js b/web/static/app/diller/global.js
index 0da8da7..866b124 100644
--- a/web/static/app/diller/global.js
+++ b/web/static/app/diller/global.js
@@ -21,40 +21,72 @@
     }
   }
 
-  Diller.Interval = function (from, to) {
-    var f = toDate(from),
-      t = toDate(to);
+  Diller.Interval = function (from, to, level) {
+    // console.log('Diller.Interval, from', from && from.toISOString(), 'to', to && to.toISOString(), 'level', level);
+    var f = moment.isMoment(from) && from || moment(from),
+      t = moment.isMoment(to) && to || moment(to);
 
-    if (f.isAfter(t)) {
+    f = f.isValid() ? f : moment();
+    t = t.isValid() ? t : moment();
+
+    if (f && t && f.isAfter(t)) {
       var tmp = f;
       f = t;
       t = tmp;
     }
 
-    return {
-      getFrom: function () {
-        return f || moment();
-      },
-      getTo: function () {
-        return t || moment();
-      },
-      toString: function () {
-        return 'yo'
+    var diffMs = t.diff(f);
+    var diffMinutes = diffMs / (1000 * 60);
+    var diffHours = diffMinutes / 60;
+
+    var l = level;
+
+    if (!l) {
+      if (diffMinutes < 100) {
+        l = 'minute';
+      } else if (diffHours < 100) {
+        l = 'hour';
+      } else {
+        l = 'day';
       }
-    };
-  };
+    }
+
+    function getFrom() {
+      return f;
+    }
+
+    function getTo() {
+      return t;
+    }
 
-  Diller.Interval.create = function (value) {
-    if (value instanceof Diller.Interval) {
-      return value;
+    function getLevel() {
+      return l;
     }
 
-    return new Diller.Interval.hours(24);
+    /** @lends Diller.Interval.prototype */
+    return {
+      getFrom: getFrom,
+      getTo: getTo,
+      getLevel: getLevel
+    };
   };
 
   Diller.Interval.hours = function (hours) {
     var to = moment();
-    var from = to.subtract(hours, 'hours');
+    var from = moment(to).subtract(hours, 'hours');
+
+    return new Diller.Interval(from, to);
+  };
+
+  Diller.Interval.days = function (days) {
+    var to = moment();
+    var from = moment(to).subtract(hours, 'days');
+    return new Diller.Interval(from, to);
+  };
+
+  Diller.Interval.months = function (months) {
+    var to = moment();
+    var from = moment(to).subtract(months, 'months');
     return new Diller.Interval(from, to);
   };
 })();
diff --git a/web/static/app/diller/line-chart.js b/web/static/app/diller/line-chart.js
index 69b6f77..4c93b03 100644
--- a/web/static/app/diller/line-chart.js
+++ b/web/static/app/diller/line-chart.js
@@ -14,7 +14,7 @@
         interval: '='
       },
       replace: true,
-      template: '<div/>',
+      templateUrl: 'app/templates/line-chart.html',
       link: function (scope, element, attrs) {
         var elementId = element.attr('id');
         if (!elementId) {
@@ -24,34 +24,60 @@
 
         var deviceId = scope.device;
         var propertyId = scope.property;
-        var interval = Diller.Interval.create(scope.interval);
+        var interval = scope.interval; // TODO: watch scope.interval
         var property = DillerClient.getDevice(deviceId).getProperty(propertyId);
 
+        var chart, chartData;
         var options = {
           axisX: {
             showLabel: true,
             showGrid: true,
+            labelInterval: 1,
             labelInterpolationFnc: function (value, index) {
-              return index % 4 === 0 ? value.format('HH:mm') : null;
+              return index % options.labelInterval === 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);
+        function refresh() {
+          property.getInterval(interval).then(function (data) {
+            var avgs = _.pluck(data.values, 'avg');
+            var timestamps = _.map(data.values, function (row) {
+              return moment(row.timestamp, isoFormat);
+            });
+
+            chartData = {
+              labels: timestamps,
+              series: [
+                avgs
+              ]
+            };
+
+            options.labelInterval = Math.round(data.values.length / 10);
+
+            if (!chart) {
+              chart = new Chartist.Line('#' + elementId + ' .chart', chartData, options);
+            } else {
+              chart.update(chartData);
+            }
           });
+        }
 
-          var chartData = {
-            labels: timestamps,
-            series: [
-              avgs
-            ]
-          };
+        scope.setInterval = function (amount, type) {
+          if (type == 'hours') {
+            interval = Diller.Interval.hours(amount);
+          } else if (type == 'days') {
+            interval = Diller.Interval.days(amount);
+          } else if (type == 'months') {
+            interval = Diller.Interval.months(amount);
+          }
+
+          console.log('new interval', interval);
+
+          interval && refresh();
+        };
 
-          var chart = new Chartist.Line('#' + elementId, chartData, options);
-        });
+        interval && refresh();
       }
     };
   }
diff --git a/web/static/app/diller/web.js b/web/static/app/diller/web.js
index 4b173ad..911cae5 100644
--- a/web/static/app/diller/web.js
+++ b/web/static/app/diller/web.js
@@ -48,6 +48,7 @@
       ctrl.device = device.data.device;
       ctrl.property = _.find(ctrl.device.properties, {id: $route.current.params.propertyId});
     }
+
     updateData(device);
     ctrl.values = values.data.values;
 
@@ -92,60 +93,6 @@
     };
 
     ctrl.interval = Diller.Interval.hours(5);
-
-    // ctrl.values24h = values24h.data.values;
-
-    function chartist() {
-      var avgs = _.pluck(ctrl.values24h, 'avg');
-      var timestamps = _.map(ctrl.values24h, function(row) {
-        var m = moment(row.timestamp, isoFormat);
-        return m.format('HH:mm');
-      });
-
-      var data = {
-        labels: timestamps,
-        series: [
-          avgs
-        ]
-      };
-
-      var options = {
-        axisX: {
-          showLabel: false,
-          showGrid: false
-        }
-      };
-
-//      options.lineSmooth = Chartist.Interpolation.cardinal({
-//        fillHoles: true,
-//      })
-
-      options.axisX = {
-        showLabel: true,
-        showGrid: true,
-        labelInterpolationFnc: function(value, index) {
-          return index % 4 === 0 ? value : null;
-        }
-      };
-
-      var chartData = {
-        series: [[]],
-        labels: []
-      };
-
-      // var chart = new Chartist.Line('#values-chart', chartData, options);
-      // console.log('chart', chart);
-/*
-      $timeout(function() {
-        chartData = data;
-        // console.log(data);
-        var chart = new Chartist.Line('#values-chart', chartData, options);
-        console.log('chart', chart);
-      });
-*/
-    }
-
-    // chartist();
   }
 
   function TimestampFilter() {
diff --git a/web/static/app/templates/line-chart.html b/web/static/app/templates/line-chart.html
new file mode 100644
index 0000000..d4b43a8
--- /dev/null
+++ b/web/static/app/templates/line-chart.html
@@ -0,0 +1,12 @@
+<section>
+  <div class="row">
+    <div class="col-md-12 text-right text-muted">
+      <span ng-click="setInterval(1, 'hours')">1 hour</span> |
+      <span ng-click="setInterval(24, 'hours')">24 hours</span> |
+      <span ng-click="setInterval(1, 'months')">1 month</span>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12 chart"></div>
+  </div>
+</section>