Créez des pages web dynamiques avec JavaScript

Table of contents

Table of contents

Utilisez la librairie pour enrichir votre projet

La librairie Chart.js est installĂ©e sur votre ordinateur, mais vous ne savez pas encore comment l’utiliser. C’est ce que nous allons voir dans ce chapitre en nous aidant de la documentation officielle. Alors c’est parti !

Utilisez la documentation de Chart.js

Lorsque vous utilisez une librairie que vous ne connaissez pas, le premier rĂ©flexe Ă  adopter est de vous documenter sur cette librairie. Pas de chance pour vous, le site de NPM ne propose pas de page de description pour la librairie Chart.js. đŸ˜©

Pas d’inquiĂ©tude cependant, vous trouverez toujours des informations utiles sur la droite de la page de description sur le site NPM.

Page de description de la librairie Chart.js sur le site de NPM : - En haut, une barre de recherche - Au milieu 5 onglets - En-dessous, le logo et la documentation - À droite, les URL Repository et Homepage
Page de description de la librairie Chart.js sur le site de NPM

En cliquant sur l’URL “Repository”, vous arriverez sur le dĂ©pĂŽt de code source, le plus souvent hĂ©bergĂ© sur GitHub. Vous devriez aussi avoir une URL intitulĂ©e “Homepage” en dessous de l’URL “Repository”. Cliquez dessus pour vous rendre sur la page d’accueil de la librairie.

Capture d'Ă©cran “Homepage” de la librairie Chart.js. Au milieu Ă  gauche, le bouton
Site web “Homepage” de la librairie Chart.js

Une fois arrivĂ© sur la page d’accueil, cliquez sur le bouton “Get Started” pour accĂ©der Ă  la documentation.

Capture d'Ă©cran de la documentation en ligne de la librairie Chart.js. - À gauche, le menu/sommaire - Au milieu : le texte
Documentation en ligne de la librairie Chart.js

La documentation est composĂ©e de plusieurs Ă©lĂ©ments. La page d’accueil contient les liens Ă  suivre pour installer la librairie selon sa situation. En dessous, vous trouverez un exemple d’utilisation de la librairie sous la forme d’extrait de code.

Le menu Ă  gauche organise le contenu de la documentation grĂące Ă  un sommaire. On y retrouve le “Getting Started”, des informations gĂ©nĂ©rales, et des informations spĂ©cifiques aux types de graphiques et Ă  la documentation de l’API. À vous d’explorer le site Ă  la recherche de ce dont vous avez besoin. 😉

Ajoutez un graphique sur le site des Bonnes PiĂšces

Placez les balises script et canvas dans le fichier HTML

La documentation nous indique qu’il faut ajouter une balise script dans notre fichier HTML pour importer la librairie dans notre page. Comme nous l’avons vu au chapitre prĂ©cĂ©dent, les paquets tĂ©lĂ©chargĂ©s avec la commande NPM s’installent dans le rĂ©pertoire node_modules. En explorant ce rĂ©pertoire, on peut trouver l’emplacement du fichier Ă  importer : node_modules/chart.js/dist/chart.umd.js.

Nous ajoutons donc la balise script avec le bon chemin, dans le fichier index.html :

<head>
    ...
    <script src="node_modules/chart.js/dist/chart.umd.js" defer></script>
</head>

Continuons de suivre la documentation. Sur la page Get Started, on nous indique qu’il faut ajouter une balise canvas. Cette balise permet de dessiner librement Ă  l’écran, en utilisant des lignes et des formes gĂ©omĂ©triques.

Ajoutons la balise canvas dans la balise section, aprÚs le bouton de mise à jour des piÚces :

<h3>Aperçu des avis</h3>
<canvas id="graphique-avis" width="300" height="300"></canvas>

Calculez les données à afficher

Il faut maintenant trouver un type de graphique adaptĂ© Ă  notre besoin. La documentation de Chart.js en propose dĂ©jĂ  plusieurs sous le titre “Chart Types”. Parmi les liens proposĂ©s, l’option “Bar Chart” est probablement celle qui nous correspond.

Capture d'Ă©cran du menu du site Chart.js. Le 5eme lien de haut en bas
Menu du site Chart.js montrant les différents types de graphiques

Cependant, les barres sont verticales, alors que nous les voudrions Ă  l’horizontale. Heureusement, en bas de la page, la documentation nous explique quelle option utiliser pour passer en mode horizontal. C’est parfait ! Nous avons trouvĂ© le graphique adaptĂ©, et nous avons des exemples pour nous aider.

Avant d’afficher le graphique Ă  l’écran, nous avons besoin de calculer les donnĂ©es qui seront affichĂ©es. La rĂ©ponse de l’API HTTP Ă  la requĂȘte GET /avis contient tous les avis, avec le nombre d’étoiles attribuĂ©es par chaque commentaire. Nous utilisons donc les donnĂ©es des avis pour calculer une liste de nombres correspondant Ă  la quantitĂ© de commentaires avec une Ă©toile, avec deux Ă©toiles, et ainsi de suite.

On rajoute ce code de calcul à la fin du fichier avis.js dans une fonction asynchrone afficherGraphiqueAvis() :

export async function afficherGraphiqueAvis(){
// Votre code ici
}
// Calcul du nombre total de commentaires par quantité d'étoiles attribuées
const avis = await fetch("http://localhost:8081/avis").then(avis => avis.json());
const nb_commentaires = [0, 0, 0, 0, 0];
for (let commentaire of avis) {
  nb_commentaires[commentaire.nbEtoiles - 1]++;
}

AprĂšs la boucle, on se retrouve avec la constante nb_commentaires qui contient une liste de nombres, [1, 1, 3, 6, 9]. C’est-Ă -dire qu’il y a neuf commentaires qui ont attribuĂ© 5 étoiles, six commentaires qui ont attribuĂ© 4 étoiles, et ainsi de suite.

Nous avons calculĂ© les donnĂ©es Ă  afficher, intĂ©ressons-nous maintenant Ă  l’utilisation de la librairie Ă  proprement parler. 😉

Configurez la librairie pour afficher le graphique

Dans un premier temps, on configure une liste qui servira de légende aux barres horizontales. Le premier élément de la liste sera la barre la plus haute sur le graphique.

// Légende qui s'affichera sur la gauche à cÎté de la barre horizontale
const labels = ["5", "4", "3", "2", "1"];

Dans un deuxiĂšme temps, on rassemble toutes les donnĂ©es visibles sur le graphique dans un objet data. On y retrouve deux propriĂ©tĂ©s : labels et datasets. La premiĂšre a comme valeur la liste labels que l’on a dĂ©finie juste avant, et la deuxiĂšme est une liste d’objets.

// Données et personnalisation du graphique
const data = {
   labels: labels,
   datasets: [{
    label: "Étoiles attribuĂ©es",
    data: nb_commentaires.reverse(),
     backgroundColor: "rgba(255, 230, 0, 1)", // couleur jaune
   }],
};

Revenons ensemble sur la propriété datasets. Un objet de cette liste peut contenir, à son tour, plusieurs propriétés :

  • label : le nom de la sĂ©rie de donnĂ©es. Elle s'affiche en haut du graphique avec la couleur correspondante utilisĂ©e pour les barres ;

  • data : les donnĂ©es Ă  mettre en forme ;

  • backgroundColor : une chaĂźne de caractĂšres spĂ©cifiant le code couleur pour la sĂ©rie de donnĂ©es.

Pour le moment, la liste nb_commentaires prĂ©sente le nombre de commentaires par ordre croissant d’étoiles (de 1 Ă  5 Ă©toiles). Nous devons donc inverser l’ordre de la liste, de maniĂšre Ă  afficher les donnĂ©es par ordre dĂ©croissant, de 5 Ă  1 étoiles.

La couleur choisie correspond à un jaune doré. La valeur de la propriété backgroundColor est une chaßne de caractÚres qui reprend le format de la fonction CSS  rgba(rouge, vert, bleu, transparence)  .

Dans un troisiÚme temps, on crée un objet de configuration qui indique le type de graphique, les données et une option pour rendre les barres horizontales.

// Objet de configuration final
const config = {
   type: "bar",
   data: data,
   options: {
      indexAxis: "y",
   },
};

Et enfin, il ne nous reste plus qu’à dĂ©clencher le rendu du graphique dans l’élĂ©ment canvas.

// Rendu du graphique dans l'élément canvas
const graphiqueAvis = new Chart(
   document.querySelector("#graphique-avis"),
   config,
);

Il ne nous reste plus qu’à importer la fonction afficherGraphique avis dans pieces.js et à l’appeler à la fin du fichier.

Et voilĂ  đŸ„ł ! Notre joli graphique s’affiche sur notre page web !

Capture d'écran du graphique montrant la quantité de commentaires ayant attribué 5, 4, 3, 2 et 1 étoiles
Graphique montrant la quantité de commentaires ayant attribué 5, 4, 3, 2 et 1 étoiles

Récapitulons en vidéo

Vous pouvez revoir les différentes étapes de cette démonstration dans la vidéo ci-dessous :

À vous de jouer !

Retrouvez le code développé dans ce chapitre sur la branche P4C3-Exercice.

Rajoutez un deuxiÚme graphique sur votre site web. Ce graphique devra afficher deux barres verticales représentant chacune la quantité de commentaires déposés sur :

  • les piĂšces disponibles ;

  • les piĂšces non disponibles.

Corrigé

Vous pouvez vérifier votre travail en consultant la branche P4C3-Solution, et en regardant la vidéo ci-dessous :

En résumé

  • Pour utiliser votre librairie et enrichir votre page web :

    • IntĂ©grez la librairie Ă  votre page en ajoutant une balise script.

    • Utilisez les fonctionnalitĂ©s de la librairie en vous appuyant sur de la documentation.

Toutes mes fĂ©licitations, vous avez terminĂ© ce cours ! 🎉 Le site web des Bonnes PiĂšces est dĂ©sormais interactif, dynamique, et il intĂšgre des fonctionnalitĂ©s avancĂ©es Ă  partir d’une librairie. N’oubliez pas de tester vos connaissances avec le dernier quiz. Et si vous voulez aller encore plus loin, dĂ©couvrez comment rendre votre code plus lisible, dans notre chapitre bonus !

Any feedback to share with us?
Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best
Guide meCompare training types