React 6 1 Conclusion and Next Steps

Pour brancher notre graphique sur les vraies dépenses, nous créons un nouveau composant ExpensesChart.js dans le dossier des dépenses. Il importe React, le composant Chart depuis le dossier chart/, reçoit ses props (notamment la liste des dépenses) et exporte par défaut le composant ExpensesChart. Son rôle : transformer un tableau de dépenses en points de données mensuels exploitables par Chart.

Construire les dataPoints mensuels

À l'intérieur du composant, nous déclarons une constante dataPoints qui est un tableau de douze objets, un par mois. Chaque objet contient deux propriétés : label (par exemple 'Jan', 'Feb', etc.) et value initialisée à zéro. Ensuite, nous parcourons les dépenses reçues avec for (const expense of props.expenses) et pour chaque dépense, nous récupérons le mois via expense.date.getMonth() puis incrémentons dataPoints[expenseMonth].value avec expense.amount. Important : utiliser for...of et non for...in pour itérer correctement sur les valeurs du tableau.

Dans Chart.js, nous modifions la prop max passée à chaque <ChartBar> : au lieu de zéro, nous calculons un maximum global. Une constante dataPointValues = props.dataPoints.map(dataPoint => dataPoint.value) extrait les valeurs, puis const totalMaximum = Math.max(...dataPointValues) récupère la plus grande. Ce totalMaximum devient le max de chaque barre, garantissant des hauteurs relatives cohérentes.

Enfin, dans Expenses.js, nous importons ExpensesChart et nous l'insérons entre le filtre et la liste avec <ExpensesChart expenses={filteredExpenses} />, pour que le graphique reflète uniquement les dépenses filtrées de l'année sélectionnée. Le prochain module abordera d'autres fonctionnalités avancées de React.

• dataPoints : un tableau de 12 objets { label, value }.
• for...of sur les dépenses, et non for...in.
• Math.max(...values) pour normaliser la hauteur des barres.