https://github.com/g1eb/reactjs-calendar-heatmap
React component for d3.js calendar heatmap graph
https://github.com/g1eb/reactjs-calendar-heatmap
calendar calendar-heatmap d3 d3-heatmap heatmap react reactjs visualization
Last synced: 6 months ago
JSON representation
React component for d3.js calendar heatmap graph
- Host: GitHub
- URL: https://github.com/g1eb/reactjs-calendar-heatmap
- Owner: g1eb
- License: mit
- Created: 2017-10-19T08:12:48.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2023-03-14T19:32:52.000Z (over 2 years ago)
- Last Synced: 2024-05-10T11:22:05.061Z (over 1 year ago)
- Topics: calendar, calendar-heatmap, d3, d3-heatmap, heatmap, react, reactjs, visualization
- Language: JavaScript
- Homepage: https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/
- Size: 1.19 MB
- Stars: 148
- Watchers: 6
- Forks: 35
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React 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.
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/reactjs-calendar-heatmap/master/)
### Year overview
[](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)
### Month overview
[](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)
### Week overview
[](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)
### Day overview
[](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)
## Install
1) Install 'reactjs-calendar-heatmap' with npm
```
npm install reactjs-calendar-heatmap
```
2) Import `CalendarHeatmap` in your component
```javascript
import CalendarHeatmap from 'reactjs-calendar-heatmap'
```
3) Render `CalendarHeatmap` component
```html
```
### Properties
|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 |
### 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/reactjs-calendar-heatmap/blob/master/index.html) for an example implementation with random data or click here for a live demo.
## Vanilla.js 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)
## AngularJS
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)
Or as an Angular component (version 2.x), see [angular2-calendar-heatmap](https://github.com/g1eb/angular2-calendar-heatmap)
## Dependencies
* [react.js](https://reactjs.org/)
* [moment.js](https://momentjs.com/)
* [d3.js](https://d3js.org/)