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.