💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал
В этом проекте вы создадите календарь тепловой карты в 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>Тепловая карта будет здесь</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>Тепловая карта будет здесь</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 для тепловой карты и кнопок фильтрации, чтобы наглядно передать данные.
Функциональность:
Код:
/* 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, который можно адаптировать для отображения различных типов временных рядов данных или активности пользователей.
