From 45267e41368fbb9fb318fb455981110e83c97953 Mon Sep 17 00:00:00 2001 From: Trygve Laugstøl Date: Sun, 6 Mar 2016 21:21:12 +0100 Subject: web: o Adding level to Interval that specifies what kind of aggregate level the server should use. --- web/static/app/diller/client.js | 23 +++++++--- web/static/app/diller/global.js | 72 +++++++++++++++++++++++--------- web/static/app/diller/line-chart.js | 56 ++++++++++++++++++------- web/static/app/diller/web.js | 55 +----------------------- web/static/app/templates/line-chart.html | 12 ++++++ 5 files changed, 124 insertions(+), 94 deletions(-) create mode 100644 web/static/app/templates/line-chart.html 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: '
', + 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 @@ +
+
+
+ 1 hour | + 24 hours | + 1 month +
+
+
+
+
+
-- cgit v1.2.3