React 5 6 Demo application Adding a graph

Après avoir ajouté nos dépenses et les filtres, nous pouvons offrir une meilleure représentation graphique en construisant un composant Chart. Pour mieux structurer le code, nous créons un nouveau dossier chart/ à côté des dossiers de dépenses. À l'intérieur, nous ajoutons Chart.js pour le graphique global et ChartBar.js pour chaque barre individuelle, plus leurs feuilles de style Chart.css et ChartBar.css.

Dans Chart.js, nous importons React et le composant ChartBar, puis nous définissons une fonction fléchée qui reçoit les props et exporte le composant Chart. Le rendu retourne une <div> avec la classe chart, suivie de l'import de Chart.css. À l'intérieur de cette div, nous générons les barres dynamiquement à partir d'un tableau de points de données.

Mapper les points de données en barres

Le composant attend props.dataPoints sous forme de tableau. Nous appliquons la méthode map() sur ce tableau : pour chaque point de données, nous générons un <ChartBar> et lui passons trois props essentielles. La valeur du point via value={dataPoint.value}, la valeur maximale de l'ensemble via max (qui sera la même pour toutes les barres et servira à calculer la hauteur relative), et un libellé via label={dataPoint.label} pour afficher janvier, février, mars, etc.

Puisque nous produisons une liste d'éléments avec map(), React a besoin d'une clé unique pour optimiser le rendu : nous utilisons key={dataPoint.label} car chaque étiquette est unique. Le composant ChartBar reste vide pour l'instant — nous le construirons dans le prochain cours pour donner vie à ces barres avec les styles dynamiques.

  • Chart.js rend la div globale et boucle sur les points de données.
  • ChartBar.js reçoit value, max et label en props.
  • La prop key évite les warnings React sur les listes.

Summary

This lesson demonstrates how to integrate a modular bar chart component into a React expense tracking application. Students learn to create a scalable component architecture by splitting the chart into two separate components: Chart.js (main container) and ChartBar.js (individual bar elements), each with dedicated CSS files. The lesson covers prop management, data mapping with .map(), and how to dynamically bind expense values to visual bar representations, enabling users to visualize their spending patterns graphically.

Key points

  • Create a dedicated 'chart' folder to organize all chart-related components, improving project structure and maintainability
  • Divide the chart into two modular components: Chart.js (data container and aggregator) and ChartBar.js (individual bar renderer) to enable reusability and easier maintenance
  • Use props like dataPoints, label, value, and max to control bar rendering dynamically and adapt the component to different datasets
  • Implement the .map() function to iterate through the dataPoints array and generate a ChartBar component for each data point in the expense list
  • Pair each JavaScript component with corresponding CSS files (Chart.css and ChartBar.css) to handle styling separately and maintain clean code organization

FAQ

Why split the chart into two separate components (Chart and ChartBar)?

Splitting into two components improves modularity and reusability. The Chart component manages the overall container and data flow, while ChartBar focuses solely on rendering individual bars. This separation makes the code easier to maintain, test, and extend.

How are data points passed to individual ChartBar components?

The Chart component uses the .map() function to iterate through the dataPoints array and renders a ChartBar component for each item. This passes extracted properties like label and value as props to each bar, allowing them to render with specific data.

What role does the 'max' prop play in the ChartBar component?

The 'max' prop represents the highest value in the entire dataset, enabling each bar to scale proportionally relative to this maximum. This ensures bars are visually balanced and accurately represent the relative size of each expense value compared to the total range.