67 lines
1.7 KiB
JavaScript
67 lines
1.7 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();
|
||
|
|
|
||
|
|
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,
|
||
|
|
legendColors: {
|
||
|
|
empty: "#f4f4f4",
|
||
|
|
min: "#c9e9fb",
|
||
|
|
max: "steelblue",
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
cal.update(formatData(data));
|
||
|
|
};
|
||
|
|
|
||
|
|
var formatData = function(data) {
|
||
|
|
var timestamps = {};
|
||
|
|
data.forEach(function(entry) {
|
||
|
|
timestamps[moment(entry.date).unix()] = entry.count;
|
||
|
|
});
|
||
|
|
return timestamps;
|
||
|
|
};
|
||
|
|
|
||
|
|
$scope.$watch('data', function() {
|
||
|
|
$timeout(refresh, 500);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return directiveDefinitionObject;
|
||
|
|
});
|