React 组件来读取 GitHub 贡献热力图

要实现一个 React 组件来读取 GitHub 贡献热力图（贡献日历），可以使用 GitHub GraphQL API 来获取数据，并将这些数据展示在自定义的热力图组件中。

步骤

获取 GitHub API Token：前往 GitHub 设置页面，生成一个个人访问令牌（Personal Access Token），并确保它有必要的权限（如public_repo或repo）。
创建 React 组件：使用 fetch 或其他 HTTP 请求库（如 axios）来调用 GitHub API。
使用 D3.js 或其他图表库：来构建热力图，并将从 GitHub API 获取的数据填充到热力图中。

示例代码

1. 安装必要的库

在你的 React 项目中，安装以下依赖项：

npm install axios

2. 创建组件

import React, { useEffect, useState } from "react";
import axios from "axios";
 
const GitHubHeatmap = ({ username }) => {
  const [contributions, setContributions] = useState([]);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const fetchContributions = async () => {
      const token = "YOUR_GITHUB_TOKEN"; // 你的 GitHub 个人访问令牌
      const query = `
        {
          user(login: "${username}") {
            contributionsCollection {
              contributionCalendar {
                totalContributions
                weeks {
                  contributionDays {
                    contributionCount
                    date
                    weekday
                  }
                }
              }
            }
          }
        }
      `;
 
      try {
        const response = await axios.post(
          "https://api.github.com/graphql",
          { query },
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        );
 
        const data =
          response.data.data.user.contributionsCollection.contributionCalendar
            .weeks || [];
 
        const contributionsData = data.flatMap((week) =>
          week.contributionDays.map((day) => ({
            date: day.date,
            count: day.contributionCount,
          }))
        );
 
        setContributions(contributionsData);
      } catch (err) {
        console.error("Error fetching GitHub contributions:", err);
        setError(err.message || "Error fetching data");
      }
    };
 
    fetchContributions();
  }, [username]);
 
  return (
    <div>
      {error ? (
        <div>Error: {error}</div>
      ) : (
        <div>
          <h3>{username}'s GitHub Heatmap</h3>
          <div className="heatmap">
            {contributions.map((day) => (
              <div
                key={day.date}
                title={`Date: ${day.date}, Contributions: ${day.count}`}
                style={{
                  display: "inline-block",
                  width: "15px",
                  height: "15px",
                  margin: "1px",
                  backgroundColor: `rgba(0, 128, 0, ${
                    day.count > 0 ? day.count / 10 : 0.1
                  })`,
                }}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
};
 
export default GitHubHeatmap;

3. 使用组件

你可以在你的应用程序中使用这个组件，传入需要查询的 GitHub 用户名：

import React from "react";
import GitHubHeatmap from "./GitHubHeatmap";
 
function App() {
  return (
    <div className="App">
      <GitHubHeatmap username="your-github-username" />
    </div>
  );
}
 
export default App;

4. 样式（可选）

你可以添加一些样式来更好地展示热力图：

.heatmap {
  display: grid;
  grid-template-columns: repeat(53, 15px); /* 每行显示 53 个方块（52周+1列日期） */
  gap: 1px;
}

解释

数据获取：组件通过 GitHub GraphQL API 获取指定用户的贡献数据。
数据展示：数据处理后在 div 中展示热力图，每个小方块代表一天的贡献量。
颜色变化：使用 rgba 动态设置每个方块的背景颜色，根据贡献数量调整颜色深浅。

总结

这种方法展示了如何通过 React 组件获取并展示 GitHub 热力图数据。通过使用 GitHub API，你可以获取准确的贡献数据，并且利用 React 的状态管理和样式系统来实现动态、直观的图表展示。

muliminty note

探索