1 files changed, 41 insertions, 15 deletions
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();
       }
     };
   }