index.html • Voici les instructions pour concevoir le table...

Prompt

index.html • Voici les instructions pour concevoir le tableau de bord. • Vous devez afficher des graphiques ; veuillez donc utiliser une bibliothèque graphique appropriée, telle que apexcharts.js. • Le script est lié à la feuille Google Sheets nommée « DASHBOARD » et, à l’intérieur de cette feuille, se trouve une feuille nommée « dataset ». (a) Titre principal • Titre : « Tableau de bord » | Sous-titre : « Tendances clés et analyses commerciales » | Alignement centré | Couleur d’arrière-plan : #021640 | • Feuille index.html | Point d’entrée principal. (b) Cartes de nombres calculés !INSTRUCTIONS IMPORTANTES POUR LES « Cartes de nombres calculés » • Créez un conteneur de ligne distinct après (a) le titre principal et créez 6 petites cartes (dimension horizontale). Intégrez ces 6 cartes dans un conteneur à une seule ligne avec un espacement de 24 px. Couleur de police pour les titres, les résultats et les icônes : #021640 Carte 1 o Titre (H1) : « Total des ventes » (aligné en haut à gauche) avec icône Font Awesome o Largeur : 290 px | Hauteur : 100 px o Accédez à la feuille « dataset » et à la colonne « F » (« Ventes »). o Additionnez les valeurs de cette colonne et affichez le résultat dans la carte « Total des ventes » avec le symbole monétaire « $ » (aligné à gauche) (H2). Carte 2 o Titre (H1) : « Coût total » (aligné en haut à gauche) avec icône Font Awesome o Largeur : 290 px | Hauteur : 100 px O Accédez à la feuille « dataset » et à la colonne « G » (« Coût »). o Additionnez les valeurs de cette colonne et affichez le résultat dans la carte « Coût total » avec le symbole monétaire « $ » (aligné à gauche) (H2). Fiche 3 o Titre (H1) : « Marge moyenne » (aligné en haut à gauche) avec icône Font Awesome o Largeur : 290 px | Hauteur : 100 px o Accédez à la feuille « dataset », puis à la colonne « H » (« Marge ») et additionnez les valeurs de cette colonne. o Accédez ensuite à la feuille « dataset », puis à la colonne « F » (« Ventes ») et additionnez les valeurs de cette colonne. o Divisez le résultat de la colonne « H » (« Marge ») par celui de la colonne « F » (« Ventes »). o Affichez le résultat sur la fiche « Marge moyenne » avec le symbole « % » (aligné à gauche) (H2). Fiche 4 o Titre (H1) : « Meilleur emplacement des ventes » (aligné en haut à gauche) avec icône Font Awesome o Largeur : 290 px | Hauteur : 100 px O Accédez à la feuille « dataset », à la colonne E (« Emplacement ») et récupérez les valeurs uniques de « Emplacement » parmi toutes les entrées de cette colonne. O Pour chaque « Emplacement » unique de la colonne E de la feuille « dataset », additionnez les montants de la colonne F (« Ventes ») de la feuille « dataset » (à l’aide de la fonction SOMME.SI). O Pour l’« Emplacement » ayant enregistré le chiffre d’affaires le plus élevé, récupérez cet « Emplacement » dans la colonne E (« Emplacement ») de la feuille « dataset ». O Affichez le résultat sur la carte « Meilleur emplacement des ventes » (aligné à gauche) (H2). Carte 5 O Titre de la carte (H1) : « Produit le plus vendu » (aligné en haut à gauche) avec une icône Font Awesome O Largeur : 290 px | Hauteur : 100 px O Accédez à la feuille « dataset », à la colonne C (« Produit ») et récupérez les valeurs uniques de « Produit » parmi toutes les entrées de cette colonne. Pour chaque « Produit » unique de la « Colonne C » de la feuille « dataset », additionnez les montants de la « Colonne F » (« Ventes ») de cette même feuille (à l'aide de la fonction SOMME.SI). Pour le « Produit » ayant réalisé le plus de ventes, récupérez son nom dans la « Colonne C » (« Produit ») de la feuille « dataset ». Affichez le résultat sur la fiche « Meilleure vente » (alignée à gauche) (H2). Fiche 6 Titre de la fiche (H1) : « Meilleur client » (aligné en haut à gauche) avec une icône Font Awesome. Largeur : 290 px | Hauteur : 100 px Dans la feuille « dataset », accédez à la « Colonne B » (« Nom de l'entité ») et récupérez les valeurs uniques de « Nom de l'entité » parmi toutes les entrées de cette colonne. Pour chaque nom d'entité unique figurant dans la colonne B de la feuille « dataset », additionnez les montants de la colonne F (« Ventes ») de cette même feuille (à l'aide de la fonction SOMME.SI). Pour l'entité ayant le chiffre d'affaires le plus élevé, récupérez son nom dans la colonne B (« Nom d'entité ») de la feuille « dataset ». Afficher le résultat sur la fiche « Meilleur client » (aligné à gauche) (H2) · INSTRUCTIONS CSS ET DE STYLE POUR LES « Fiches de nombres calculés » o Couleur de la police des titres : #021640 o Couleur de la police des icônes Font Awesome : #021640 o Couleur de la police des résultats/valeurs des fiches : #021640 (c) Graphiques !INSTRUCTIONS IMPORTANTES POUR LES GRAPHIQUES · Utilisez les codes couleur suivants pour les graphiques, les titres, les en-têtes, les sous-titres et les axes : #021640, #0066CC, #0099CC, #4572C4, #558ED5, #1F4E79 · Créez 3 colonnes · Placez le « Graphique 1 » dans la 1re colonne (occupant 100 % de la largeur de la colonne) · Placez les « Graphiques 2 » et « Graphique 3 » dans la 1re colonne (sous le graphique 1) ; chaque graphique occupe 50 % de la largeur de la colonne. • Placez le graphique 4 dans la 2e colonne. Sa hauteur doit correspondre à celle de la 1re colonne. • Placez les graphiques 5 et 6 dans la 3e colonne (chaque graphique occupe 50 % de la largeur de la colonne). • Placez le graphique 7 dans la 3e colonne (sous les graphiques 5 et 6). Il occupe 25 % de la largeur de la colonne. • Placez le graphique 8 dans la 3e colonne (sous les graphiques 5 et 6). Il occupe 75 % de la largeur de la colonne. Graphique 1 • Titre de la carte : « Tendance des ventes » (aligné en haut à gauche) • Largeur : 700 px | Hauteur : 300 px • Accédez à la feuille « dataset », puis aux colonnes A (« Date ») et F (« Ventes »). • À partir des valeurs de « Date » dans la colonne A et des montants de « Ventes » dans la colonne F, créez un graphique en aires splines lissé.

A system prompt was added to support web rendering