JS의 Contribution HeatMap과 같은 GitHub

GitHub 기여 차트를 어떻게 복제할 수 있는지 궁금한 적이 있나요? 우리 대부분은 그랬으므로 여러분도 그렇게 할 수 있는 방법은 다음과 같습니다.

cal-heatmap이라는 라이브러리를 사용할 예정입니다

npm install cal-heatmap을 사용하여 라이브러리를 설치한 다음 라이브러리를 애플리케이션으로 가져올 수 있습니다.

import CalHeatmap from 'cal-heatmap';

// Optionally import the CSS
import 'cal-heatmap/cal-heatmap.css';

삽입 히트맵을 렌더링하고 페인트 기능을 인스턴스화하려면:

const cal = new CalHeatmap();
cal.paint({
   itemSelector: '#cal-heatmap',
});

도메인과 하위 도메인을 정의합니다. 여기서 도메인은 기본 시간 단위이고 하위 도메인은 하위 시간 단위입니다. 이 경우 차트에 공백이 없도록 도메인을 월로, 하위 도메인을 ghDay로 지정합니다

cal.paint({
   itemSelector: '#cal-heatmap',
   domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
});

여백은 각 도메인이나 하위 도메인 사이의 공간을 정의합니다. 즉, 우리의 경우 매월 또는 날짜를 정의합니다.

날짜 옵션은 달력의 시작 날짜를 정의하고 범위 옵션은 표시할 도메인 수를 정의합니다. 이 경우 개월 수는 12입니다.

cal.paint({
   itemSelector: '#cal-heatmap',
   domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
    date: { start: new Date('2012-01-01') },
    range: 12,
});

이제 GraphQL을 사용하여 GitHub의 데이터를 추가해 보겠습니다. 여기서 userName은 GitHub의 사용자 이름입니다

query($userName:String!) { 
  user(login: $userName){
    contributionsCollection {
      contributionCalendar {
        totalContributions
        weeks {
          contributionDays {
            contributionCount
            date
          }
        }
      }
    }
  }
}

GraphQL 쿼리의 응답은 데이터 소스로 사용됩니다

cal.paint({
   itemSelector: '#cal-heatmap',
   domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
    date: { start: new Date('2012-01-01') },
    range: 12,
    data: {
       source: response,
       x: 'date',
       y: 'contributionCount',
       defaultValue: 0
    },
});

마지막으로 scale 속성을 사용하여 히트맵의 모양을 정의하고 툴팁과 캘린더 라벨 플러그인을 추가하겠습니다.

cal.paint({
   itemSelector: '#cal-heatmap',
   domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
    date: { start: new Date('2012-01-01') },
    range: 12,
    data: {
       source: response,
       x: 'date',
       y: 'contributionCount',
       defaultValue: 0
    },
    scale: {
      color: {
        type: 'threshold',
        range: ['#14432a', '#166b34', '#37a446', '#4dd05a'],
        domain: [10, 20, 30],
      },
    },
    [
    [
      Tooltip,
      {
        text: function (date, value, dayjsDate) {
          return (
            (value ? value : 'No') +
            ' contributions on ' +
            dayjsDate.format('dddd, MMMM D, YYYY')
          );
        },
      },
    ],
    [
      CalendarLabel,
      {
        width: 30,
        textAlign: 'start',
        text: () => dayjs.weekdaysShort().map((d, i) => (i % 2 == 0 ? '' : d)),
        padding: [25, 0, 0, 0],
      },
    ],
]
});

이제 GitHub 기여에 대한 아름다운 히트맵을 볼 수 있습니다.

더 많은 기술 관련 내용을 보려면 X(이전 Twitter)에서 저를 팔로우하세요

위 내용은 JS의 Contribution HeatMap과 같은 GitHub의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!