Ce que vous obtenez
- Un tableau de bord KPI complet en un seul fichier HTML avec des vues sur 7, 30 et 90 jours
- Un script qui transforme les exports CSV ou JSON en données du tableau de bord
- Un bloc React sur recharts, plus une version ECharts du graphique
- Pastilles de variation, lignes de la période précédente, tableau de répartition et barres d’objectifs
- En option : visuel d’en-tête de rapport PopNow, chiffré avant lancement
Idéal pour
- Indicateurs produit, boutique, support ou croissance
- Pages de rapports KPI hebdomadaires et mensuels
- L’écran de synthèse d’un outil interne
Pas fait pour
- Applications d’administration complètes avec de nombreux écrans
- Données en flux continu
- Comparer de nombreuses séries sur un seul graphique
Comment l’utiliser
Dans Claude ou ChatGPT
Utilisez le skill PopNow « Modèle de tableau de bord KPI » (kpi-dashboard-template) pour ceci : Construisez un tableau de bord KPI à partir de exports/orders.csv : commandes, chiffre d’affaires, visiteurs et délai de première réponse, ventilés par canal.
Dans un agent de code
/popnow-kpi-dashboard-template Construisez un tableau de bord KPI à partir de exports/orders.csv : commandes, chiffre d’affaires, visiteurs et délai de première réponse, ventilés par canal.
Puis essayez
Ajoutez un objectif de chiffre d’affaires de 150 000 par mois et affichez par défaut les 7 derniers jours.
Donnez-moi la version React pour notre application d’administration Next.js.
À préparer
- Un export CSV ou JSON, ou la commande qui le produit
- Les quatre indicateurs, et lesquels sont meilleurs quand ils baissent
- En option : des objectifs et une colonne selon laquelle ventiler un indicateur
Skills similaires
Tout voir →Créateur d’avatar 3D
+3Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
Calendrier heatmap d’activité
+3Une année d’activité quotidienne en calendrier de cases colorées, avec séries, totaux et navigation au clavier.
Modèle de landing page SaaS IA
+3Papier sable et filets fins autour d’un tableau kanban où un assistant planifie les tâches.
Section hero animée
+3Un hero de landing page avec un mot de titre qui change en douceur, deux boutons et un large cadre d’image.
Modèle de site d’agence créative à shader
+3Héros shader orange vivant, déclaration en bas, navigation en pilules et grille d’études de cas décalée.
Landing page SaaS sombre
+3Un site marketing sombre et très animé pour un logiciel, livré en un seul fichier HTML autonome.
Site portfolio de designer
+3Six cartes inclinées autour d’un titre qui s’estompe, une carte portrait rouge, des études de cas éditoriales.
Site portfolio de développeur
+3Un site personnel sombre pour développeurs, avec études de cas, articles, conférences, CV et formulaire de contact.
Site SaaS éditorial
+3Héros scindé bleu marine, titre serif sur cinq lignes, photo documentaire, bandeaux inclinés et accent cobalt.
Modèle de site glassmorphism
+3Verre dépoli sur fond noir, grand titre serif à un mot en italique, et inscription par e-mail.
Site web de produit matériel
+3Noms de modèles fins et géants sur studio argenté, cartes de fiches et gamme à l’échelle réelle.
Diagramme d’architecture interactif
+3Un schéma système cliquable et hors ligne, construit à partir d’un modèle JSON vérifié, avec les preuves derrière chaque bloc.
Héros à grille interactive
+3Grille sombre de fins filaments qui se courbe vers le curseur et envoie un anneau à chaque clic.
Explorateur de graphe de connaissances
+3Transformez vos notes de projet en graphe consultable hors ligne, où chaque affirmation renvoie à sa ligne source.
Landing page à partir de maquettes IA
+3Voyez trois maquettes de page complète, choisissez-en une, et votre agent la code proprement.
Modèle de site web magazine
+3Un site de magazine digne de l’imprimé, avec articles, rubriques, petite boutique et abonnements, en un seul fichier HTML.
Héros à animation de particules
+3Texte sur papier chaud, à côté d’une sphère de points qui change à chaque idée.
Site de marque personnelle
+3Portrait fondu dans du papier chaud sous un fin crochet, affirmations de chaque côté.
Page de lancement produit cinématique
+3Page presque noire façon cinéma : titre serif, scène de nuit encadrée, formulaire de réservation.
Modèle de dashboard admin
+3Une console de back-office fonctionnelle avec graphiques, tableaux, kanban et calendrier, en un seul fichier HTML hors ligne.
Modèle de landing page SaaS
+3Un site marketing clair et apaisé pour un logiciel, avec console produit fonctionnelle, tarifs et inscription.
Site CV portfolio façon scrapbook
+3Un CV en ligne sur plusieurs pages fait d’objets en papier, avec études de cas et CV imprimable.
Modèle de site e-commerce de sneakers
+3Une boutique complète de chaussures ou de vêtements avec catalogue, fiches produit, panier et paiement de démo, en un fichier HTML.
Modèle de page d’automatisation de workflows
+3Page graphite au titre court, avec un graphe de nœuds vivant qui s’exécute et relance les étapes.
Questions
D’où viennent les chiffres ?
De votre propre export. Le script fourni lit du CSV ou du JSON, des totaux quotidiens ou des événements bruts, construit une ligne par jour et par indicateur ainsi qu’une ventilation facultative, puis les écrit dans la page.
Comment le pourcentage de variation est-il calculé ?
Les 7, 30 ou 90 derniers jours sont comparés aux mêmes nombres de jours qui les précèdent. Les totaux comparent des sommes, les durées et taux comparent des moyennes, et les niveaux comme les utilisateurs actifs comparent la dernière valeur. Un indicateur marqué « plus il baisse, mieux c’est » affiche une baisse comme positive.
A-t-il besoin d’une bibliothèque de graphiques ?
La version HTML n’en a pas besoin et fonctionne hors ligne. La version React utilise recharts, et une version ECharts du graphique est incluse pour les projets qui l’utilisent déjà.
PopNow peut-il dessiner les graphiques ?
Non, et il ne le doit pas : les modèles d’image peuvent se tromper dans les chiffres. PopNow ne sert qu’à un fond d’en-tête ou de carte de partage sans texte, et les vrais chiffres sont posés par-dessus en HTML.