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中文網其他相關文章！