# Analytics overview dashboard

> A violet analytics dashboard: KPI numbers roll up, a revenue line draws itself, bars grow and a live activity ticker rotates.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/analytics-overview-dashboard/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

The AI builds the layout, chart and ticker.

Prompt:

```text
Create a single-file HTML analytics overview dashboard, 1280x720, lavender background #f3f1ff, ink #1c1840, accent violet #8b5cf6. White cards with 18-20px radius and a soft violet shadow. System fonts only, no libraries.
Layout: an 84px dark sidebar (#1c1840) with five rounded icon squares (the first uses a violet-to-pink gradient, the second is highlighted). Main area: H1 "Analytics overview", subtitle "Last 30 days - all channels".
KPI row of four cards: Visitors 48210 (+12.4%), Signups 9380 (+8.1%), Paying teams 312 (+21%), Churn 68 bps (-0.3% in red). Each number counts up with a CSS @property integer animation.
Below, a two column grid: left card "Revenue growth" with an inline SVG area chart (smooth cubic path, violet 4px stroke, gradient fill fading to transparent, white ring marker at the last point); right card "Signups by channel" with six vertical bars (rounded top, violet gradient, different heights).
Bottom: a dark rounded ticker bar that cycles three messages (a new signup, a milestone, a churn alert), each sliding up in and out.
Motion (8 second loop): cards rise in staggered, the line draws with stroke-dashoffset then the area fades in and the ring pops, bars scale up from the bottom with staggered delays. Fade everything out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.
```

### 2. Check the counters

All four KPI numbers should roll up from zero.

### 3. Check the charts

The line should draw itself and the bars should grow.

Done when: You can see it working in the browser.

### 4. Connect your data

Replace the sample numbers and path with your real metrics.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/analytics-overview-dashboard/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/analytics-overview-dashboard/index-html/ (Complete code of the result in the video.)

## About

A polished SaaS overview screen with a dark sidebar. Four KPI tiles count up, the revenue area chart draws its line and ends on a ring marker, six bars grow and a dark ticker at the bottom cycles through activity messages. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.

---
Also available as JSON: https://ownlyplans.com/bhaskar/analytics-overview-dashboard/?format=json
MCP server: https://ownlyplans.com/mcp