React 6 1 Conclusion et prochaines étapes

Pour utiliser le graphique avec les données réelles, on crée un nouveau composant intermédiaire : ExpensesChart.js, placé dans le dossier Expenses/. Ce composant reçoit la liste des dépenses, calcule les totaux par mois, puis transmet ces points de données au composant Chart.

Création de ExpensesChart

Dans ExpensesChart.js, on importe React et le composant Chart (avec la majuscule). Le composant définit un tableau dataPoints qui regroupe les 12 mois de l'année, chacun avec une étiquette (« Jan », « Fév », « Mar »…) et une valeur initiale à 0 :

const ExpensesChart = (props) => {
  const chartDataPoints = [
    { label: 'Jan', value: 0 },
    { label: 'Fév', value: 0 },
    { label: 'Mar', value: 0 },
    // ... jusqu'à Déc
  ];

  for (const expense of props.expenses) {
    const expenseMonth = expense.date.getMonth();
    chartDataPoints[expenseMonth].value += expense.amount;
  }

  return <Chart dataPoints={chartDataPoints} />;
};

La boucle for...of parcourt les dépenses reçues. Pour chacune, on récupère le mois via expense.date.getMonth() (qui retourne un index 0-11), et on ajoute le montant à la valeur du mois correspondant dans chartDataPoints. Attention à utiliser for...of et non for...in, sinon on itère sur les indices et le code plante.

Calcul du maximum dans Chart.js

Dans Chart.js, on remplace la prop maxValue={null} par un véritable maximum calculé. On déclare une constante dataPointValues qui extrait toutes les valeurs, puis on utilise Math.max avec le spread operator :

const dataPointValues = props.dataPoints.map((dp) => dp.value);
const totalMaximum = Math.max(...dataPointValues);

// Puis dans ChartBar :
<ChartBar ... maxValue={totalMaximum} />

Math.max prend une liste d'arguments et retourne le plus grand. Le spread ... transforme le tableau en arguments séparés. Ainsi, chaque ChartBar peut calculer son pourcentage de hauteur par rapport au maximum total, ce qui donne un graphique cohérent et bien proportionné.

Intégration finale

Dans Expenses.js, on importe ExpensesChart et on l'affiche entre le filtre et la liste, en lui transmettant les dépenses filtrées : <ExpensesChart expenses={filteredExpenses} />. Comme on ne veut afficher le graphique que pour les dépenses de l'année sélectionnée, on passe bien filteredExpenses, pas le tableau global.

Dans le prochain cours, nous regarderons de plus près les autres modules React. Sachez qu'il existe beaucoup d'autres fonctionnalités disponibles que nous explorerons ensemble : hooks personnalisés, gestion d'effets de bord, routing, Context API, etc.