GitHub のような JS のコントリビューション ヒートマップ

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
    },
});

最後に、スケール プロパティを使用してヒートマップの外観を定義し、ツールチップとカレンダー ラベル プラグインを追加します。

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) でフォローしてください

以上がGitHub のような JS のコントリビューション ヒートマップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。