90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
|
/**
|
||
|
|
* An element which displays a date+count heatmap.
|
||
|
|
*/
|
||
|
|
angular.module('quay').directive('heatmap', function () {
|
||
|
|
var directiveDefinitionObject = {
|
||
|
|
priority: 0,
|
||
|
|
templateUrl: '/static/directives/heatmap.html',
|
||
|
|
replace: false,
|
||
|
|
transclude: true,
|
||
|
|
restrict: 'C',
|
||
|
|
scope: {
|
||
|
|
'data': '=data',
|
||
|
|
'startCount': '@startCount',
|
||
|
|
'startDomain': '@startDomain',
|
||
|
|
|
||
|
|
'itemName': '@itemName',
|
||
|
|
'domain': '@domain',
|
||
|
|
'range': '@range'
|
||
|
|
},
|
||
|
|
controller: function($scope, $element, $timeout) {
|
||
|
|
var cal = null;
|
||
|
|
|
||
|
|
var refresh = function() {
|
||
|
|
var data = $scope.data;
|
||
|
|
if (!data) { return; }
|
||
|
|
|
||
|
|
if (!cal) {
|
||
|
|
var start = moment().add($scope.startCount * 1, $scope.startDomain).toDate();
|
||
|
|
var highlight = [];
|
||
|
|
for (i = 0; i < 31; ++i) {
|
||
|
|
var d = moment().add('day', i).toDate();
|
||
|
|
highlight.push(d);
|
||
|
|
}
|
||
|
|
|
||
|
|
cal = new CalHeatMap();
|
||
|
|
cal.init({
|
||
|
|
itemName: $scope.itemName,
|
||
|
|
domain: $scope.domain,
|
||
|
|
range: $scope.range * 1,
|
||
|
|
|
||
|
|
start: start,
|
||
|
|
itemSelector: $element.find('.heatmap-element')[0],
|
||
|
|
cellSize: 15,
|
||
|
|
domainMargin: [10, 10, 10, 10],
|
||
|
|
displayLegend: false,
|
||
|
|
tooltip: true,
|
||
|
|
weekStartOnMonday: false,
|
||
|
|
highlight: highlight,
|
||
|
|
legendColors: {
|
||
|
|
empty: "#f4f4f4",
|
||
|
|
min: "#c9e9fb",
|
||
|
|
max: "steelblue",
|
||
|
|
base: 'white'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var formatted = formatData(data);
|
||
|
|
cal.update(formatted.data);
|
||
|
|
cal.setLegend(formatted.legendDomain);
|
||
|
|
};
|
||
|
|
|
||
|
|
var formatData = function(data) {
|
||
|
|
var timestamps = {};
|
||
|
|
var max = 1;
|
||
|
|
data.forEach(function(entry) {
|
||
|
|
timestamps[moment(entry.date).unix()] = entry.count;
|
||
|
|
max = Math.max(max, entry.count);
|
||
|
|
});
|
||
|
|
|
||
|
|
var domain = [];
|
||
|
|
var current = 1;
|
||
|
|
for (var i = 0; i < 4; ++i) {
|
||
|
|
domain.push(current);
|
||
|
|
current += max / 5;
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
data: timestamps,
|
||
|
|
legendDomain: domain
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
$scope.$watch('data', function() {
|
||
|
|
$timeout(refresh, 750);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return directiveDefinitionObject;
|
||
|
|
});
|