Создание тепловой карты вклада на GitHub с использованием React

🎯 Задачи

В этом проекте вы научитесь:

• Как устанавливать необходимые зависимости для календаря тепловой карты.
• Как создавать базовую структуру компонента тепловой карты.
• Как добавить состояние для фильтрации данных.
• Как генерировать фиктивные данные для заполнения тепловой карты.
• Как отображать календарь тепловой карты с фиктивными данными.
• Как реализовать логику фильтрации для фильтрации тепловой карты по уровню активности.
• Как стилизовать компонент тепловой карты и кнопки фильтрации.
• Как интегрировать компонент тепловой карты в главный файл приложения.
• Как запускать приложение для просмотра календаря тепловой карты.

🏆 Достижения

После завершения этого проекта вы сможете:

• Интегрировать календарь тепловой карты в 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>Тепловая карта будет здесь</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 для тепловой карты и кнопок фильтрации, чтобы наглядно передать данные.

Функциональность:

• Добавьте 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, который можно адаптировать для отображения различных типов временных рядов данных или активности пользователей.