Este projeto irá guiá-lo através da criação de um calendário de mapa de calor (heatmap) em React, semelhante ao gráfico de contribuições do GitHub. Este tipo de calendário pode ser uma forma atraente de visualizar dados de atividade ao longo do tempo, com a intensidade da cor indicando o nível de atividade em um determinado dia. Ao final deste projeto, você terá uma compreensão clara de como integrar e usar um calendário de mapa de calor em uma aplicação React.
A base do nosso calendário de mapa de calor é uma nova aplicação React.
Funcionalidade:
react-calendar-heatmap para o mapa de calor.date-fns para fácil manipulação de datas.Para instalar as dependências do projeto, use o seguinte comando:
cd github-heatmap-calendar
npm installPara adicionar a funcionalidade do calendário de mapa de calor, precisamos instalar uma biblioteca específica para React, juntamente com uma biblioteca de utilidade de datas. (A biblioteca já está incluída no projeto e não precisa ser instalada.)
npm install react-calendar-heatmap date-fnsComeçaremos criando a estrutura básica do nosso componente heatmap sem nenhuma funcionalidade.
Funcionalidade:
Código:
// src/GitHubCalendar.js
import React from "react";
const GitHubCalendar = () => {
return (
<div>
{/* Placeholder for the heatmap */}
<div>Heatmap will go here</div>
</div>
);
};
export default GitHubCalendar;Antes de preenchermos nosso heatmap, vamos adicionar algum estado para gerenciar a filtragem de dados com base na interação do usuário.
Funcionalidade:
useState.colorFilter.Código:
// src/GitHubCalendar.js
import React, { useState } from "react";
const GitHubCalendar = () => {
const [colorFilter, setColorFilter] = useState(null);
return (
<div>
{/* Placeholder for the heatmap */}
<div>Heatmap will go here</div>
</div>
);
};
export default GitHubCalendar;Gere dados fictícios para simular atividade. Substituiremos isso por dados reais em uma aplicação do mundo real.
Funcionalidade:
date-fns para criar um intervalo de datas.Código:
// src/GitHubCalendar.js
import { subYears, isBefore, format } from "date-fns";
// Add inside the GitHubCalendar component
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));
}Agora, incluiremos o componente CalendarHeatmap e passaremos nossos dados fictícios para ele.
Funcionalidade:
Código:
// src/GitHubCalendar.js
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";
// Add inside the GitHubCalendar component's return statement
<CalendarHeatmap
startDate={startDate}
endDate={endDate}
values={values}
classForValue={(value) => {
if (!value || value.count === 0) {
return "color-empty";
}
return `color-scale-${value.count}`;
}}
showWeekdayLabels={true}
/>;Crie botões para cada nível de atividade que filtrarão o heatmap quando clicados.
Funcionalidade:
colorFilter.Código:
// src/GitHubCalendar.js
// Add below the CalendarHeatmap component in the return statement
<div className="filter-bar">
{Array.from({ length: 5 }, (_, i) => (
<button
key={i}
className={`filter-btn color-scale-${i}`}
onClick={() => setColorFilter(colorFilter === i ? null : i)}
>
Filter {i}
</button>
))}
</div>Defina o CSS para o heatmap e os botões de filtro para comunicar visualmente os dados.
Funcionalidade:
Código:
/* src/App.css */
/* Adicione suas regras CSS aqui */
.color-empty {
fill: #ebedf0; /* Sem contribuições - cor branca */
}
.color-scale-0 {
fill: #ebedf0; /* Verde mais claro - Altere para o seu verde mais claro */
}
.color-scale-1 {
fill: #9be9a8; /* Verde claro */
}
.color-scale-2 {
fill: #40c463; /* Verde médio */
}
.color-scale-3 {
fill: #30a14e; /* Verde escuro */
}
.color-scale-4 {
fill: #216e39; /* Verde mais escuro */
}
.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;
}
/* Aplique as mesmas cores aos botões de filtro */
.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; /* Cor da borda do botão Reset */
}
/* Destaque o filtro ativo */
.filter-btn.active {
border-color: #666; /* Cor da borda do botão ativo */
font-weight: bold;
}Consulte os exemplos de CSS anteriores para obter orientação sobre como configurar as escalas de cores e os estilos dos botões.
Integre o componente heatmap no seu arquivo principal da aplicação.
Funcionalidade:
GitHubCalendar para App.js.GitHubCalendar na aplicação.Código:
// 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;Com todas as peças no lugar, é hora de ver seu calendário heatmap em ação.
Funcionalidade:
Comandos:
npm startIsso compilará a aplicação React e a abrirá no seu navegador web padrão na porta 8080.
Parabéns! Você acabou de criar uma aplicação React que inclui um calendário heatmap semelhante ao gráfico de contribuições do GitHub. Começando com a inicialização do projeto, você instalou as bibliotecas necessárias, criou um componente heatmap, implementou a funcionalidade de filtragem e estilizado o componente. Este projeto forneceu uma abordagem passo a passo para construir um componente de interface do usuário (UI) complexo em React, que pode ser adaptado para exibir vários tipos de dados de séries temporais ou atividade do usuário.
