애플리케이션에서 기여도 그래프를 만드는 쉬운 방법

안녕하세요!
이 기사에서는 애플리케이션에서 github과 같은 기여도 그래프를 만드는 데 도움이 되는 멋진 도구와 기본 및 선택적 사용법을 보여줍니다.

도구 정보

내가 보여주는 도구는 vue-calendar-heatmap 입니다.
기여 그래프가 포함된 SVG 데이터를 제공할 뿐만 아니라 그래프를 사용자 정의할 수 있습니다.
다음으로 기본 및 선택적 사용법을 보여 드리겠습니다.

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

기본 사용법

기본 사용 스크립트는 다음과 같습니다.

<calendar-heatmap :values="[{ date: '', count: }, ...]" end-date=""/>

date = 칠하고 싶은 날짜count = 날짜 계산end-date = 그래프의 마지막 날짜.
2021/09/22의 카운트 3과 2022/01/11의 카운트 6을 포함하는 그래프를 만들려는 경우 스크립트는 다음과 같습니다.

<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

출력은

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

선택적 사용법

카운트 색상 변경

:range-color를 사용하면 카운트 색상을 변경할 수 있습니다.
노란색을 사용하려면 스크립트가

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

출력은

색상 그라데이션 변경

기본 설정에서는 5이상 카운트의 색상이 가장 진하지만(즉, :range-color[4]) 설정하면 카운트에 따라 컬러 그라데이션을 변경할 수 있습니다.:max를 설정하면,

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

출력은

그래프를 가리키면 아무 것도 표시되지 않음

:max = 10 로 설정하면 그래프에 마우스를 올렸을 때 아무 것도 표시되지 않습니다.

<calendar-heatmap :values="[]" :end-date="Date()" :tooltip="false"></calendar-heatmap>

단위 변경

:tooltip = "false" 그래프를 가리키면 표시되는 단위를 변경할 수 있습니다. (기본 단위는 기부금)
단위를 변경하려는 경우 스크립트는 다음과 같습니다.

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

출력은

방향 전환

tooltip-unit 로 설정하면 그래프를 세로로 만들 수 있습니다.

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

출력은