Easy Way to Make a Contributions Graph in Your Application
Tags: javascript, vue, github, tooling
Published: 2022-03-25 07:10:00

Hello!
In this article, I will show you a nice tool which help you make a contributions graph like github in your application and basic and optional usage of it.

## About Tools
The tool I show is [**vue-calendar-heatmap**](https://github.com/julienr114/vue-calendar-heatmap).
It not only provides SVG data which contains a contributions graph, but enables you to customize graphs .
Next, I will show basic and optional usage of it.

> warning
I used it in only vue2 so I don't know whether it can work correctly in vue3

## Basic Usage
Basic usage scripts of it are 
```vue
<calendar-heatmap :values="[{ date: '', count: }, ...]" end-date=""/>
``` 
`date` = date you want to paint
`count` = count in the date
`end-date` = last date of the graph. 

If you want to make a graph which contains count 3 in `2021/09/22` and count 6 in `2022/01/11`, scripts are 
```vue
<calendar-heatmap :values="[{ date: '2021-9-22', count: 3 },{date: '2022-1-11', count: 6}]" :end-date="Date()"></calendar-heatmap>
// Date() is 2022/02/18
```
and the output is 

![Basic Usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl5cvpuxhd2x4ngy1lyj.png) 

> warning
It can show only count in date **within one year** of `end-date`.

## Optional Usage
### change color of count
`:range-color` enables you to change color of count.
If you want to use yellow, scripts are 
```vue
<calendar-heatmap 
:values="[{ date: '2021-9-22', count: 3 }, {date: '2022-1-11', count: 6}]" 
:end-date="2022/02/18" 
:range-color="[                                                                                                                     
  '#ebedf0',
  'rgba(255,202,43,0.4)',
  'rgba(255,202,43,0.6)',
  'rgba(255,202,43,0.8)',
  'rgba(255,202,43,1.0)',
]"></calendar-heatmap>
```
and output is

![change color of count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf9yqs7ly7enhe79qbxq.png)

### change color gradation
In default setting, color of count which is more than 5 is the deepest ( In other words, `:range-color[4]`) but if you set `:max` , you can change  color gradation according to count.
If you set `:max = 10`,
```vue
<calendar-heatmap :values="[{ date: '2021-9-22', count: 3 }, {date: '2022-1-11', count: 6}]" :end-date="Date()" :max="10"></calendar-heatmap>
```
the output is

![change color gradation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rijr3af30kzyxi5njwp.png)

### nothing when hovering graphs
If you set `:tooltip = "false"`, there are nothing when hovering graphs.
```vue
<calendar-heatmap :values="[]" :end-date="Date()" :tooltip="false"></calendar-heatmap>
```

### change units
`tooltip-unit` enable you to change units which are displayed when hovering graphs. (default units is contributions)
If you want to change units, scripts are
```vue
<calendar-heatmap :values="[{ date: '2021-9-22', count: 3 }, {date: '2022-1-11', count: 6}]" :end-date="Date()" tooltip-unit="こんとりびゅーと"></calendar-heatmap>
// こんとりびゅーと is Japanese word meaning contribution.
```
output is

![change units](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/np4m84qdw6ih9sqk5te1.png)

### change direction 
If you set `:vertical="true"`, you can make graphs vertical.
```vue
<calendar-heatmap :values="[{ date: '2021-9-22', count: 3 }, {date: '2022-1-11', count: 6}]" :end-date="Date()" :vertical="true"></calendar-heatmap>
```
output is

![change direction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu4acriocp8d0kl5t9v7.png)