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

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment installer les dépendances nécessaires pour le calendrier en heatmap.
• Comment créer la structure de base du composant en heatmap.
• Comment ajouter un état pour filtrer les données.
• Comment générer des données fictives pour alimenter le heatmap.
• Comment afficher le calendrier en heatmap avec des données fictives.
• Comment implémenter la logique de filtrage pour filtrer le heatmap en fonction du niveau d'activité.
• Comment styliser le composant en heatmap et les boutons de filtrage.
• Comment intégrer le composant en heatmap dans le fichier principal de l'application.
• Comment lancer l'application pour voir le calendrier en heatmap.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Intégrer un calendrier en heatmap dans une application React.
• Gérer l'état et filtrer les données dans un composant React.
• Afficher et styliser un calendrier en heatmap à l'aide de React et de CSS.
• Comprendre le processus de génération et d'alimentation de données fictives pour la visualisation.
• Lancer et voir l'application du calendrier en heatmap.

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 le squelette 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 heatmap du calendrier

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>

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

Lancer 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.