React 5 7 Ajout de styles dynamiques

Maintenant que la structure de notre graphique est en place, nous allons construire le composant ChartBar qui affiche une barre individuelle, avec une hauteur dynamique calculée à partir de la valeur et de la valeur maximale.

Structure HTML/CSS du ChartBar

Dans ChartBar.js, on importe React et ChartBar.css, puis on déclare le composant en fonction fléchée recevant les props. Le JSX se compose de trois <div> imbriquées plus un <div> pour le label en bas :

<div className="chart-bar">
  <div className="chart-bar__inner">
    <div className="chart-bar__fill" style={{ height: barFillHeight }}></div>
  </div>
  <div className="chart-bar__label">{props.label}</div>
</div>

Les noms de classes chart-bar, chart-bar__inner, chart-bar__fill et chart-bar__label correspondent aux styles définis dans le CSS. Le label affiche dynamiquement {props.label} (par exemple « Jan », « Fév »…).

Calcul de la hauteur de remplissage

Avant le return, on déclare une variable barFillHeight à '0%' par défaut. Si props.maxValue est supérieur à zéro, on calcule le pourcentage que représente props.value par rapport à props.maxValue, arrondi à l'entier le plus proche :

let barFillHeight = '0%';

if (props.maxValue > 0) {
  barFillHeight = Math.round((props.value / props.maxValue) * 100) + '%';
}

La hauteur est ainsi calculée entre 0 % et 100 %. On passe cette valeur à l'attribut style de la barre via style={{ height: barFillHeight }}. Attention à la syntaxe : les doubles accolades ne sont pas spécifiques aux styles : les accolades extérieures ouvrent l'expression JSX, et les intérieures déclarent un objet JavaScript que React utilise comme styles inline. On obtient ainsi une barre dont la hauteur s'adapte automatiquement aux données.

N'oubliez pas export default ChartBar;. Avec ce composant fini, il ne reste plus qu'à utiliser le graphique et à lui transmettre les points de données. On se retrouve dans le prochain cours.