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中文网其他相关文章！