aboutsummaryrefslogtreecommitdiff
path: root/web/static/app
diff options
context:
space:
mode:
Diffstat (limited to 'web/static/app')
-rw-r--r--web/static/app/diller/client.js23
-rw-r--r--web/static/app/diller/global.js72
-rw-r--r--web/static/app/diller/line-chart.js56
-rw-r--r--web/static/app/diller/web.js55
-rw-r--r--web/static/app/templates/line-chart.html12
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>