Assembler votre tableau de bord déployable
Assembler votre tableau de bord déployable
C'est le projet final. Vous avez construit des cartes KPI, un graphique et une mise en page de rapport — vous allez maintenant réunir toutes les pièces en une seule page de tableau de bord, complète et déployable, que vous pourriez publier sur une vraie URL.
Vous assemblerez une page entière : un en-tête à votre image, une rangée de cartes KPI, une section graphique et un tableau de données — le tout sur un seul écran cohérent. C'est le livrable que vous remettez à une partie prenante en disant « voici le tableau de bord en direct ».
Pensez de bout en bout. Une application déployable n'est pas seulement jolie ; elle est organisée, lisible et se comprend d'elle-même. À la fin de cette leçon, vous aurez une application de données digne d'un portfolio. Allez, on la met en ligne.
Instructions
Ajoutez un en-tête de page avec un titre h1 « Analyse des ventes ».
Indice : Utilisez : `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">Analyse des ventes</h1></header>`.
Où faut-il écrire ça ?
<!-- Assemblez votre tableau de bord complet ici -->Écrivez-le à la ligne 11 — sous ce commentaire, après le code que vous avez déjà ajouté.
Ajoutez une rangée de KPI avec un conteneur en grille responsive.
Ajoutez une section graphique avec des barres en divs stylées avec la couleur bg-purple-500.
Ajoutez un tableau de données pour les commandes récentes afin de terminer le tableau de bord.
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 de page avec un titre h1 « Analyse des ventes ».