在 React 中构建 GitHub 热图贡献日历

🎯 任务

在本项目中，你将学习：

• 如何安装热图日历所需的依赖项。
• 如何创建热图组件的基本结构。
• 如何添加用于过滤数据的状态。
• 如何生成虚拟数据来填充热图。
• 如何使用虚拟数据渲染日历热图。
• 如何实现过滤逻辑，根据活动水平过滤热图。
• 如何为热图组件和过滤按钮设置样式。
• 如何将热图组件集成到主应用程序文件中。
• 如何启动应用程序以查看热图日历。

🏆 成果

完成本项目后，你将能够：

• 在 React 应用程序中集成日历热图。
• 在 React 组件中管理状态和过滤数据。
• 使用 React 和 CSS 渲染和设置日历热图的样式。
• 理解生成和填充虚拟数据以进行可视化的过程。
• 启动并查看热图日历应用程序。

安装必要的依赖项

我们的热图日历项目基于一个全新的 React 应用程序。

功能：

• 安装项目依赖项。
• 安装用于热图的 react-calendar-heatmap 库。
• 安装 date-fns 以便轻松进行日期操作。

要安装项目依赖项，请使用以下命令：

cd github-heatmap-calendar
npm install

要添加日历热图功能，我们需要安装一个特定于 React 的库以及一个日期实用工具库。（该库已包含在项目中，无需安装。）

npm install react-calendar-heatmap date-fns

创建热图组件框架

我们将从创建热图组件的基本结构开始，此时它还没有任何功能。

功能：

• 为热图组件创建一个新文件。
• 使用占位符内容定义函数组件。

代码：

// src/GitHubCalendar.js
import React from "react";

const GitHubCalendar = () => {
  return (
    <div>
      {/* 热图的占位符 */}
      <div>Heatmap will go here</div>
    </div>
  );
};

export default GitHubCalendar;

添加用于过滤的状态

在填充热图之前，让我们添加一些状态来管理基于用户交互的数据过滤。

功能：

• 导入 useState 钩子。
• 初始化 colorFilter 状态变量。

代码：

// src/GitHubCalendar.js
import React, { useState } from "react";

const GitHubCalendar = () => {
  const [colorFilter, setColorFilter] = useState(null);

  return (
    <div>
      {/* 热图的占位符 */}
      <div>Heatmap will go here</div>
    </div>
  );
};

export default GitHubCalendar;

生成虚拟数据

生成虚拟数据以模拟活动。在实际应用中，我们会用真实数据替换这些虚拟数据。

功能：

• 使用 date-fns 创建一个日期范围。
• 为每一天填充包含虚拟数据的数组。

代码：

// src/GitHubCalendar.js
import { subYears, isBefore, format } from "date-fns";

// 在 GitHubCalendar 组件内部添加
const startDate = subYears(new Date(), 1);
const endDate = new Date();
const values = [];
let currentDate = startDate;

while (isBefore(currentDate, endDate)) {
  values.push({
    date: format(currentDate, "yyyy-MM-dd"),
    count: Math.floor(Math.random() * 5)
  });
  currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
}

渲染日历热图

现在我们将引入 CalendarHeatmap 组件，并将虚拟数据传递给它。

功能：

• 使用数据渲染热图。
• 根据计数定义颜色比例。

代码：

// src/GitHubCalendar.js
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";

// 在 GitHubCalendar 组件的返回语句中添加
<CalendarHeatmap
  startDate={startDate}
  endDate={endDate}
  values={values}
  classForValue={(value) => {
    if (!value || value.count === 0) {
      return "color-empty";
    }
    return `color-scale-${value.count}`;
  }}
  showWeekdayLabels={true}
/>;

实现过滤逻辑

为每个活动级别创建按钮，点击时将对热图进行过滤。

功能：

• 添加设置 colorFilter 状态的按钮。
• 根据所选过滤器过滤热图数据。

代码：

// src/GitHubCalendar.js
// 在返回语句中的 CalendarHeatmap 组件下方添加
<div className="filter-bar">
  {Array.from({ length: 5 }, (_, i) => (
    <button
      key={i}
      className={`filter-btn color-scale-${i}`}
      onClick={() => setColorFilter(colorFilter === i ? null : i)}
    >
      过滤 {i}
    </button>
  ))}
</div>

为组件设置样式

定义热图和过滤按钮的 CSS，以便直观地传达数据。

功能：

• 为热图颜色和按钮样式添加 CSS 规则。

代码：

/* src/App.css */
/* 在此处添加你的 CSS 规则 */
.color-empty {
  fill: #ebedf0; /* 无贡献 - 白色 */
}
.color-scale-0 {
  fill: #ebedf0; /* 最浅的绿色 - 可将其更改为你最浅的绿色 */
}
.color-scale-1 {
  fill: #9be9a8; /* 浅绿 */
}
.color-scale-2 {
  fill: #40c463; /* 中绿 */
}
.color-scale-3 {
  fill: #30a14e; /* 深绿 */
}
.color-scale-4 {
  fill: #216e39; /* 最深的绿色 */
}

.filter-bar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.filter-btn {
  background: none;
  border: 2px solid transparent;
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

/* 为过滤按钮应用相同的颜色 */
.filter-btn.color-scale-0 {
  border-color: #ebedf0;
}
.filter-btn.color-scale-1 {
  border-color: #9be9a8;
}
.filter-btn.color-scale-2 {
  border-color: #40c463;
}
.filter-btn.color-scale-3 {
  border-color: #30a14e;
}
.filter-btn.color-scale-4 {
  border-color: #216e39;
}

.filter-btn:hover,
.filter-btn:focus {
  background-color: #ddd;
}

.reset {
  border-color: #000; /* 重置按钮边框颜色 */
}

/* 突出显示活动过滤器 */
.filter-btn.active {
  border-color: #666; /* 活动按钮边框颜色 */
  font-weight: bold;
}

有关设置颜色比例和按钮样式的指导，请参考之前的 CSS 示例。

组装应用程序

将热图组件集成到你的主应用程序文件中。

功能：

• 将 GitHubCalendar 组件导入到 App.js 中。
• 在应用程序中渲染 GitHubCalendar 组件。

代码：

// src/App.js
import React from "react";
import "./App.css";
import GitHubCalendar from "./GitHubCalendar";

function App() {
  return (
    <div className="App">
      <GitHubCalendar />
    </div>
  );
}

export default App;

启动应用程序

所有组件都已就位，现在是时候看看你的热图日历实际运行的效果了。

功能：

• 运行应用程序并查看热图日历。

命令：

npm start

这将编译 React 应用程序，并在默认的网页浏览器中以 8080 端口打开它。

总结

恭喜你！你刚刚创建了一个 React 应用程序，其中包含一个类似于 GitHub 贡献图的热图日历。从项目初始化开始，你安装了必要的库，创建了一个热图组件，实现了过滤功能，并为组件设置了样式。这个项目提供了一种在 React 中逐步构建复杂 UI 组件的方法，该方法可用于显示各种类型的时间序列数据或用户活动。