Création d'un graphique de contributions en heatmap avec React

Introduction

Ce projet vous guidera dans la création d'un calendrier en heatmap en React, ressemblant au graphique de contributions de GitHub. Ce type de calendrier peut être un moyen convaincant de visualiser les données d'activité au fil du temps, avec l'intensité de la couleur indiquant le niveau d'activité d'un jour donné. À la fin de ce projet, vous comprendrez clairement comment intégrer et utiliser un calendrier en heatmap dans une application React.

👀 Aperçu

Installer les dépendances nécessaires

La base de notre calendrier en heatmap est une nouvelle application React.

Fonctionnalité :

• Installer les dépendances du projet.
• Installer la bibliothèque react-calendar-heatmap pour le heatmap.
• Installer date-fns pour une manipulation facile des dates.

Pour installer les dépendances du projet, utilisez la commande suivante :

cd github-heatmap-calendar
npm install

Pour ajouter la fonctionnalité du calendrier en heatmap, nous devons installer une bibliothèque spécifique à React, ainsi qu'une bibliothèque d'utilitaires de dates. (La bibliothèque est déjà incluse dans le projet et n'a pas besoin d'être installée.)

npm install react-calendar-heatmap date-fns

Créer la structure de base du composant en heatmap

Nous allons commencer par créer la structure de base de notre composant en heatmap sans aucune fonctionnalité.

Fonctionnalité :

• Créer un nouveau fichier pour le composant en heatmap.
• Définir le composant fonctionnel avec un contenu de remplacement.

Code :

// src/GitHubCalendar.js
import React from "react";

const GitHubCalendar = () => {
  return (
    <div>
      {/* Placeholder pour le heatmap */}
      <div>Le heatmap sera ici</div>
    </div>
  );
};

export default GitHubCalendar;

Ajouter un état pour le filtrage

Avant de remplir notre heatmap, ajoutons un peu d'état pour gérer le filtrage des données en fonction de l'interaction de l'utilisateur.

Fonctionnalité :

• Importer le hook useState.
• Initialiser la variable d'état colorFilter.

Code :

// src/GitHubCalendar.js
import React, { useState } from "react";

const GitHubCalendar = () => {
  const [colorFilter, setColorFilter] = useState(null);

  return (
    <div>
      {/* Placeholder pour le heatmap */}
      <div>Le heatmap sera ici</div>
    </div>
  );
};

export default GitHubCalendar;

Générer des données fictives

Générez des données fictives pour simuler l'activité. Nous remplacerons cela par des données réelles dans une application réelle.

Fonctionnalité :

• Utiliser date-fns pour créer une plage de dates.
• Remplir un tableau avec des données fictives pour chaque jour.

Code :

// src/GitHubCalendar.js
import { subYears, isBefore, format } from "date-fns";

// Ajouter à l'intérieur du composant 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));
}

Afficher le calendrier en heatmap

Maintenant, nous allons inclure le composant CalendarHeatmap et lui passer nos données fictives.

Fonctionnalité :

• Afficher le heatmap avec des données.
• Définir une échelle de couleurs en fonction du compte.

Code :

// src/GitHubCalendar.js
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";

// Ajouter à l'intérieur de l'instruction de retour du composant 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}
/>;

Implémenter la logique de filtrage

Créez des boutons pour chaque niveau d'activité qui filtreront le heatmap lorsqu'ils seront cliqués.

Fonctionnalité :

• Ajoutez des boutons qui définissent l'état colorFilter.
• Filtrez les données du heatmap en fonction du filtre sélectionné.

Code :

// src/GitHubCalendar.js
// Ajoutez en dessous du composant CalendarHeatmap dans l'instruction de retour
<div className="filter-bar">
  {Array.from({ length: 5 }, (_, i) => (
    <button
      key={i}
      className={`filter-btn color-scale-${i}`}
      onClick={() => setColorFilter(colorFilter === i ? null : i)}
    >
      Filtrer {i}
    </button>
  ))}
</div>

Styliser le composant

Définissez la CSS pour le heatmap et les boutons de filtrage pour communiquer visuellement les données.

Fonctionnalité :

• Ajoutez des règles CSS pour les couleurs du heatmap et le style des boutons.

Code :

/* src/App.css */
/* Ajoutez vos règles CSS ici */
.color-empty {
  fill: #ebedf0; /* Aucune contribution - couleur blanche */
}
.color-scale-0 {
  fill: #ebedf0; /* Vert le plus clair - Changez cela en votre vert le plus clair */
}
.color-scale-1 {
  fill: #9be9a8; /* Vert clair */
}
.color-scale-2 {
  fill: #40c463; /* Vert moyen */
}
.color-scale-3 {
  fill: #30a14e; /* Vert foncé */
}
.color-scale-4 {
  fill: #216e39; /* Vert le plus foncé */
}

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

/* Appliquez les mêmes couleurs aux boutons de filtrage */
.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; /* Couleur de bord du bouton de réinitialisation */
}

/* Met en évidence le filtre actif */
.filter-btn.active {
  border-color: #666; /* Couleur de bord du bouton actif */
  font-weight: bold;
}

Consultez les exemples CSS précédents pour obtenir des conseils sur la configuration des échelles de couleurs et des styles de boutons.

Assembler l'application

Intégrez le composant heatmap dans votre fichier principal d'application.

Fonctionnalité :

• Importez le composant GitHubCalendar dans App.js.
• Affichez le composant GitHubCalendar dans l'application.

Code :

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

Démarrer l'application

Avec tous les éléments en place, il est temps de voir votre calendrier en heatmap en action.

Fonctionnalité :

• Exécutez l'application et visualisez le calendrier en heatmap.

Commandes :

npm start

Cela compilera l'application React et l'ouvrira dans votre navigateur web par défaut sur le port 8080.

Résumé

Félicitations ! Vous venez de créer une application React qui inclut un calendrier en heatmap similaire au graphique de contributions de GitHub. En commençant par l'initialisation du projet, vous avez installé les bibliothèques nécessaires, créé un composant heatmap, implémenté la fonctionnalité de filtrage et stylisé le composant. Ce projet a fourni une approche étape par étape pour construire un composant d'interface utilisateur complexe en React, qui peut être adapté pour afficher différents types de données de séries temporelles ou d'activité utilisateur.