Construindo um Heatmap de Contribuições no React (GitHub)

🎯 Tarefas

Neste projeto, você aprenderá:

• Como instalar as dependências necessárias para o calendário de mapa de calor.
• Como criar a estrutura básica do componente de mapa de calor.
• Como adicionar estado para filtrar os dados.
• Como gerar dados fictícios (dummy data) para preencher o mapa de calor.
• Como renderizar o calendário de mapa de calor com dados fictícios.
• Como implementar a lógica de filtragem para filtrar o mapa de calor com base no nível de atividade.
• Como estilizar o componente de mapa de calor e os botões de filtro.
• Como integrar o componente de mapa de calor no arquivo principal da aplicação.
• Como iniciar a aplicação para visualizar o calendário de mapa de calor.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Integrar um mapa de calor de calendário em uma aplicação React.
• Gerenciar o estado e filtrar dados em um componente React.
• Renderizar e estilizar um mapa de calor de calendário usando React e CSS.
• Compreender o processo de geração e preenchimento de dados fictícios para visualização.
• Iniciar e visualizar a aplicação do calendário de mapa de calor.

Instalar as Dependências Necessárias

A base do nosso calendário de mapa de calor é uma nova aplicação React.

Funcionalidade:

• Instalar as dependências do projeto.
• Instalar a biblioteca react-calendar-heatmap para o mapa de calor.
• Instalar 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 install

Para 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-fns

Criar a Estrutura do Componente Heatmap

Começaremos criando a estrutura básica do nosso componente heatmap sem nenhuma funcionalidade.

Funcionalidade:

• Criar um novo arquivo para o componente heatmap.
• Definir o componente funcional com conteúdo de espaço reservado (placeholder).

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;

Adicionar Estado para Filtragem

Antes de preenchermos nosso heatmap, vamos adicionar algum estado para gerenciar a filtragem de dados com base na interação do usuário.

Funcionalidade:

• Importar o hook useState.
• Inicializar a variável de estado 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;

Gerar Dados Fictícios

Gere dados fictícios para simular atividade. Substituiremos isso por dados reais em uma aplicação do mundo real.

Funcionalidade:

• Utilizar date-fns para criar um intervalo de datas.
• Preencher um array com dados fictícios para cada dia.

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));
}

Renderizar o Mapa de Calor do Calendário

Agora, incluiremos o componente CalendarHeatmap e passaremos nossos dados fictícios para ele.

Funcionalidade:

• Renderizar o heatmap com dados.
• Definir uma escala de cores com base na contagem.

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}
/>;

Implementar Lógica de Filtragem

Crie botões para cada nível de atividade que filtrarão o heatmap quando clicados.

Funcionalidade:

• Adicionar botões que definem o estado colorFilter.
• Filtrar os dados do heatmap com base no filtro selecionado.

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>

Estilizar o Componente

Defina o CSS para o heatmap e os botões de filtro para comunicar visualmente os dados.

Funcionalidade:

• Adicionar regras CSS para as cores do heatmap e a estilização dos botões.

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.

Montar a Aplicação

Integre o componente heatmap no seu arquivo principal da aplicação.

Funcionalidade:

• Importar o componente GitHubCalendar para App.js.
• Renderizar o componente 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;

Iniciar a Aplicação

Com todas as peças no lugar, é hora de ver seu calendário heatmap em ação.

Funcionalidade:

• Executar a aplicação e visualizar o calendário heatmap.

Comandos:

npm start

Isso compilará a aplicação React e a abrirá no seu navegador web padrão na porta 8080.

Resumo

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.