angular-calendar-heatmap
Version:
Angular directive for d3.js calendar heatmap graph.
61 lines (53 loc) • 2.41 kB
HTML
<html ng-app="ExampleApp">
<head>
<title>Angular directive for d3.js calendar heatmap graph</title>
<link rel="stylesheet" type="text/css" href="dist/calendar-heatmap.min.css">
</head>
<body ng-controller="MainCtrl">
<calendar-heatmap data="example_data" color="color" overview="overview" handler="print"></calendar-heatmap>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js" charset="utf-8"></script>
<script src="dist/calendar-heatmap.min.js"></script>
<script>
angular.module('ExampleApp', ['g1b.calendar-heatmap']).
controller('MainCtrl', function ($scope) {
// Initialize random data for the demo
var now = moment().endOf('day').toDate();
var time_ago = moment().startOf('day').subtract(10, 'year').toDate();
$scope.example_data = d3.time.days(time_ago, now).map(function (dateElement, index) {
return {
date: dateElement,
details: Array.apply(null, new Array(Math.round(Math.random() * 15))).map(function(e, i, arr) {
return {
'name': 'Project ' + Math.ceil(Math.random() * 10),
'date': function () {
var projectDate = new Date(dateElement.getTime());
projectDate.setHours(Math.floor(Math.random() * 24))
projectDate.setMinutes(Math.floor(Math.random() * 60));
return projectDate;
}(),
'value': 3600 * ((arr.length - i) / 5) + Math.floor(Math.random() * 3600) * Math.round(Math.random() * (index / 365))
}
}),
init: function () {
this.total = this.details.reduce(function (prev, e) {
return prev + e.value;
}, 0);
return this;
}
}.init();
});
// Set custom color for the calendar heatmap
$scope.color = '#cd2327';
// Set overview type (choices are year, month and day)
$scope.overview = 'year';
// Handler function
$scope.print = function (val) {
console.log(val);
};
});
</script>
</body>
</html>