Construire l'ossature d'un tableau de bord KPI en direct
Construire l'ossature d'un tableau de bord KPI en direct
Tout grand tableau de bord de données commence par la même ossature : une grille propre de cartes KPI qui met en avant, d'un coup d'œil, les chiffres qui comptent. Dans cette leçon, vous allez construire cette structure — le genre de mise en page qu'une API alimenterait avec des métriques en temps réel.
Vous disposerez une grille responsive de cartes, chacune affichant le libellé d'une métrique, une grande valeur et un indicateur de tendance. Nous la stylerons comme si une source de données en direct envoyait de nouveaux chiffres toutes les quelques secondes.
Pensez comme un analyste : l'objectif est une lisibilité instantanée. Un décideur doit saisir l'état de l'entreprise en deux secondes. Construisons le cadre qui rend cela possible.
Instructions
Ajoutez un en-tête avec un h1 intitulé « Métriques en direct » pour montrer que le tableau de bord est alimenté par une API.
Indice : Utilisez : `<h1 class="text-3xl font-bold">Métriques en direct</h1>` à l'intérieur d'un `<header>`.
Où faut-il écrire ça ?
<!-- Construisez l'ossature de votre tableau de bord KPI ici -->Écrivez-le à la ligne 11 — sous ce commentaire, après le code que vous avez déjà ajouté.
Créez un conteneur en grille responsive pour les cartes KPI avec la classe grid.
Ajoutez des cartes KPI sous forme de blocs stylés, dont une pour « Revenu total ».
Donnez à chaque carte un fond de type carte avec la classe bg-gray-800.
Votre code
Décrivez ce que vous voulez créer pour cette étape et je rédige le code — puis cliquez sur Appliquer pour l'insérer dans votre éditeur. Cette étape : Ajoutez un en-tête avec un h1 intitulé « Métriques en direct » pour montrer que le tableau de bord est alimenté par une API.