简介
本项目将引导你在 React 中创建一个热图日历，类似于 GitHub 的贡献图。这种日历是一种直观的方式，可以随着时间可视化活动数据，颜色的深浅表示给定日期的活动水平。在本项目结束时，你将清楚地了解如何在 React 应用程序中集成和使用日历热图。
安装必要的依赖项
我们的热图日历项目基于一个全新的 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组件的方法，该方法可用于显示各种类型的时间序列数据或用户活动。
