Easy Way to Make a Contributions Graph in Your Application

Shunsuke — Fri, 25 Mar 2022 07:10:00 +0000

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

New Corona Charts

Shunsuke — Fri, 18 Sep 2020 00:52:44 +0000

I made a web application with Vue.js, Chart.js and a free API(COVID 19 API) tells us many kind of data of corona virus.
The name of the application is Corona Report Made by a Failure.
In it,You can get

Number of new confirmed, new deaths, new recovered, total confirmed, total deaths and total recovered of the world
Top 10 countries of number of them
Number of them of countries around the world
Line charts of number of confirmed, deaths, recovered and active per day

If you want to know codes in it, Please check my repository.
Github CRMF

DEV Community: Shunsuke