https://github.com/g1eb/angular2-calendar-heatmap
📊 Angular component for d3.js calendar heatmap graph
https://github.com/g1eb/angular2-calendar-heatmap
angular angular-component angular2 calendar calendar-heatmap d3 d3-heatmap heatmap visualization
Last synced: about 1 month ago
JSON representation
📊 Angular component for d3.js calendar heatmap graph
- Host: GitHub
- URL: https://github.com/g1eb/angular2-calendar-heatmap
- Owner: g1eb
- License: mit
- Created: 2017-03-03T09:24:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-09-29T14:54:38.000Z (about 3 years ago)
- Last Synced: 2025-08-30T08:14:09.657Z (about 1 month ago)
- Topics: angular, angular-component, angular2, calendar, calendar-heatmap, d3, d3-heatmap, heatmap, visualization
- Language: TypeScript
- Homepage: https://rawgit.com/g1eb/angular2-calendar-heatmap/master/
- Size: 1.27 MB
- Stars: 38
- Watchers: 2
- Forks: 15
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular component for D3.js Calendar Heatmap
This [d3.js](https://d3js.org/) heatmap representing time series data is used to visualize tracked time over the past year, showing details for each of the days on demand. Converted into an angular component for your convenience :)
Includes a global overview of multiple years and visualizations of year, month, week and day overview with zoom for details-on-demand.
Inspired by [Github's contribution graph](https://help.github.com/articles/viewing-contributions-on-your-profile/#contributions-calendar)
Based on [Calendar View](https://bl.ocks.org/mbostock/4063318) by [Mike Bostock](https://github.com/mbostock)
Aaand [D3.js Calendar Heatmap](https://github.com/DKirwan/calendar-heatmap) by [Darragh Kirwan](https://github.com/DKirwan)
## Demo
Click here for a live demo.
### Global overview
[](https://rawgit.com/g1eb/angular2-calendar-heatmap/master/)
### Year overview
[](https://rawgit.com/g1eb/angular2-calendar-heatmap/master/)
### Month overview
[](https://rawgit.com/g1eb/angular2-calendar-heatmap/master/)
### Week overview
[](https://rawgit.com/g1eb/angular2-calendar-heatmap/master/)
### Day overview
[](https://rawgit.com/g1eb/angular2-calendar-heatmap/master/)
## Installation
1) Install 'angular2-calendar-heatmap' with npm
```
npm install angular2-calendar-heatmap
```
2) Import CalendarHeatmap component in your angular module
```javascript
import { CalendarHeatmap } from 'angular2-calendar-heatmap';
declarations: [ ...... , CalendarHeatmap ],
```
3) Use 'calendar-heatmap' component inside a template
```html
```
### Attributes
|Property | Usage | Default | Required |
|:------------- |:-------------|:-----:|:-----:|
| data | Time series data from max a year back | none | yes |
| color | Theme hex color | #45ff00 | no |
| overview | Initial overview type (choices are: year, month, day) | year | no |
| handler | Handler function is fired on click of a time entry in daily overview | none | no |
| onChange | Handler function is fired on change of the overview | none | no |
### Example data
Time series data where each day has a total time tracked (in seconds).
Details, if provided, are shown in a tooltip on mouseover in different overviews.
```
var data = [{
"date": "2016-01-01",
"total": 17164,
"details": [{
"name": "Project 1",
"date": "2016-01-01 12:30:45",
"value": 9192
}, {
"name": "Project 2",
"date": "2016-01-01 13:37:00",
"value": 6753
},
.....
{
"name": "Project N",
"date": "2016-01-01 17:52:41",
"value": 1219
}]
}]
```
### Optimization
In some cases details array could be large and in order to fit the data into the tooltip a short summary is generated with distinct projects and their total tracked time for that date.
In terms of optimization, summary data can be computed server-side and passed in using the ```summary``` attribute.
And in addition to the data structure described above this would result in a summary dictionary with distinct project names and total values of tracked time in seconds, e.g.:
```
var data = [{
"date": "2016-01-01",
"total": 17164,
"details": [.....],
"summary": [{
"name": "Project 1",
"value": 9192
}, {
"name": "Project 2",
"value": 6753
},
.....
{
"name": "Project N",
"value": 1219
}]
}]
```
See [index.html](https://github.com/g1eb/angular2-calendar-heatmap/blob/master/index.html) for an example implementation with random data or click here for a live demo.
## Angular directive
If you want to use this heatmap as an AngularJS directive (version 1.x), see [angular-calendar-heatmap](https://github.com/g1eb/angular-calendar-heatmap)
## React component
If you want to use this heatmap as a React component, see [reactjs-calendar-heatmap](https://github.com/g1eb/reactjs-calendar-heatmap)
## Non-Angular version
If you are looking for a plain vanilla javascript version of the heatmap, check out [calendar-heatmap-graph](https://github.com/g1eb/calendar-heatmap)
## Dependencies
* [Angular](https://angular.io/)
* [moment.js](https://momentjs.com/)
* [d3.js](https://d3js.org/)