What you get
- A complete KPI dashboard as one HTML file with 7, 30 and 90 day views
- A script that turns CSV or JSON exports into the dashboard data
- A React block on recharts, plus an ECharts version of the chart
- Change chips, previous-period lines, breakdown table and target bars
- Optional report header art from PopNow, quoted before it runs
Good for
- Product, store, support or growth KPIs
- Weekly and monthly KPI report pages
- The overview screen of an internal tool
Not for
- Full admin apps with many screens
- Live streaming data
- Comparing many series on one chart
How to use it
In Claude or ChatGPT
Use the PopNow skill "KPI Dashboard Template" (kpi-dashboard-template) for this: Build a KPI dashboard from exports/orders.csv: orders, revenue, visitors and first reply time, broken down by channel.
In a coding agent
/popnow-kpi-dashboard-template Build a KPI dashboard from exports/orders.csv: orders, revenue, visitors and first reply time, broken down by channel.
Then try
Add a revenue target of 150,000 a month and default to the last 7 days.
Give me the React version for our Next.js admin app.
What to have ready
- A CSV or JSON export, or the command that produces it
- The four metrics and which are better when lower
- Optional targets and a column to break one metric down by
Similar skills
View all →3D Avatar Maker
+3Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Calendar Heatmap
+3A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
AI SaaS Landing Page
+3Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
Animated Hero Section
+3A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
Shader Hero Agency Website
+3A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
Dark SaaS Landing Page
+3A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
Designer Portfolio Website
+3Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
Developer Portfolio Website
+3A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
Editorial SaaS Website
+3Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Hardware Product Website
+3Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
Interactive Architecture Diagram
+3An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
Interactive Grid Hero
+3A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
Knowledge Graph Explorer
+3Turn project notes into an offline, searchable graph where every claim links back to its source line.
Landing Page from AI Mockups
+3See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
Magazine Website Template
+3A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
Particle Animation Hero
+3Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
Personal Brand Website
+3A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
Cinematic Product Launch Page
+3Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
Admin Dashboard Template
+3A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
SaaS Landing Page Template
+3A calm, light marketing site for a software product with a working product console, pricing and sign-up.
Scrapbook Portfolio Website
+3A multi-page online CV made of paper objects, with case studies and a printable resume.
Sneaker Store Website Template
+3A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
Workflow Automation Landing Page
+3Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
Questions
Where do the numbers come from?
From your own export. The bundled script reads CSV or JSON, either daily totals or raw events, and builds one row per day for each metric plus an optional breakdown, then writes it into the page.
How is the change percentage worked out?
The last 7, 30 or 90 days are compared with the same number of days before them. Totals compare sums, times and rates compare averages, and levels such as active users compare the latest value. A metric marked lower-is-better shows a fall as good.
Does it need a charting library?
The HTML version needs nothing and works offline. The React version uses recharts, and an ECharts version of the chart is included for projects that already use it.
Can PopNow draw the charts?
No, and it should not: image models can get numbers wrong. PopNow is only used for an optional text-free header or share-card background, and the real figures sit on top in HTML.