React 5 6 Application de démonstration Ajout d’un graphique

Après avoir ajouté les dépenses et les filtres, nous allons maintenant améliorer l'application avec un graphique (en anglais chart) qui offrira une représentation visuelle plus parlante des dépenses mensuelles. Dans ce cours, nous mettons en place la structure des composants.

Création du dossier Chart et des composants

À la racine de components/, créez un nouveau dossier Chart/. À l'intérieur, on va placer tous les composants liés au graphique. Le graphique sera divisé en deux composants principaux :

  • Chart.js + Chart.css : le graphique global
  • ChartBar.js + ChartBar.css : une barre individuelle du graphique

Recopiez le CSS fourni pour chaque fichier (mettez la vidéo en pause). Dans Chart.js, on importe React et on déclare le composant en fonction fléchée. Le composant reçoit en props un tableau dataPoints et utilise map() pour générer une ChartBar par point de donnée : 

import './Chart.css';
import ChartBar from './ChartBar';

const Chart = (props) => {
  return (
    <div className="chart">
      {props.dataPoints.map((dataPoint) => (
        <ChartBar
          key={dataPoint.label}
          value={dataPoint.value}
          maxValue={null}
          label={dataPoint.label}
        />
      ))}
    </div>
  );
};

export default Chart;

Chaque dataPoint est un objet qui contient une propriété value (la valeur du mois) et une label (le nom du mois : Jan, Fév, etc.). On transmet à ChartBar trois props : value, maxValue (la valeur max sur l'ensemble du graphique, pour calculer la hauteur relative) et label. La prop spéciale key permet à React d'identifier chaque barre (on utilise label qui est unique par mois).

Pour l'instant, ChartBar.js reste vide — on l'implémentera dans le prochain cours pour donner vie aux barres avec leur hauteur dynamique calculée à partir du pourcentage de la valeur maximale.

En résumé

Ce cours explique comment ajouter un graphique en barres à une application React de gestion de dépenses. On crée un dossier « charte » contenant deux composants principaux : Chart.js (conteneur principal) et ChartBar.js (barres individuelles), chacun accompagné d'un fichier CSS. Le composant Chart reçoit les données via une props « dataPoint » (tableau d'objets), les mappe en composants ChartBar, et transmet les valeurs, étiquettes et valeur maximale pour que chaque barre se rende correctement.

Points clés

  • Organisation modulaire : créer un dossier « charte » avec deux composants React distincts (Chart et ChartBar) et leurs fichiers CSS associés, pour une meilleure maintenabilité
  • Gestion des données : utiliser une props « dataPoint » acceptant un tableau d'objets contenant les points de données du graphique
  • Mapping des données : utiliser la fonction map() pour transformer chaque point de donnée en composant ChartBar enfant
  • Structure des objets : chaque point de donnée doit être un objet avec une propriété « value » (valeur numérique) et « label » (étiquette : janvier, février, etc.)
  • Normalisation des barres : transmettre la valeur maximale (prop « max ») à ChartBar pour que chaque barre calcule sa hauteur proportionnellement
  • Props imbriquées : passer value, label et max du composant parent Chart au composant enfant ChartBar

Questions fréquentes

Pourquoi diviser le graphique en deux composants (Chart et ChartBar) au lieu d'en faire un seul ?

La division en deux composants offre une meilleure organisation et réutilisabilité. Chart gère le conteneur global et le mapping des données, tandis que ChartBar est responsable du rendu individuel d'une seule barre. Cela rend le code plus modulaire et facile à maintenir.

Comment structurer les données à passer au composant Chart via la props « dataPoint » ?

Passer un tableau d'objets. Chaque objet doit contenir au minimum deux propriétés : « value » (la valeur numérique qui détermine la hauteur de la barre) et « label » (l'étiquette textuelle comme janvier, février, mars, etc.).

À quoi sert le prop « max » passé à ChartBar ?

Le prop « max » représente la valeur maximale du dataset et permet à ChartBar de normaliser l'affichage. Chaque barre calcule sa hauteur en fonction de sa propre valeur rapportée à cette valeur maximale, assurant une représentation graphique proportionnelle et lisible.