Easy Way to Make a Contributions Graph in Your Application

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.
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

<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

<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

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

<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 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,

<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

nothing when hovering graphs

If you set :tooltip = "false", there are nothing when hovering graphs.

<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

<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 direction

If you set :vertical="true", you can make graphs vertical.

<calendar-heatmap :values="[{ date: '2021-9-22', count: 3 }, {date: '2022-1-11', count: 6}]" :end-date="Date()" :vertical="true"></calendar-heatmap>

output is