The Prompt
Create an Analytics dashboard example that demonstrates a clear, client-ready data story.
Layout:
- Top: Date range selector and key metric cards
- Middle: Primary trend chart with period comparison
- Bottom: Supporting charts and a small data table
Include:
- 4 metric cards: Visitors, Conversions, Revenue, Bounce Rate
- Main trend chart with realistic data and comparison
- Supporting bar chart (traffic sources)
- Supporting pie/donut chart (device distribution)
- Table showing top pages with conversion rates
Outcome: This should feel like a real analytics view a client could react to.
Uses recharts for charts — see components/vendor/charts.tsx
Total Visitors
45,231
+12.5%vs last period
Conversions
2,847
+8.2%vs last period
Revenue
$128,430
-3.1%vs last period
Bounce Rate
42.3%
-5.4%lower is better
Visitor Trends
Daily visitors compared to previous period
Current PeriodPrevious Period
Traffic Sources
Where your visitors come from
Device Distribution
Breakdown by device type
58%32%10%
Top Pages
Best performing pages by visitor count
| Page | Visitors | Conversions | Conv. Rate | Performance |
|---|---|---|---|---|
1/products | 8,420 | 342 | 4.1% | |
2/pricing | 6,180 | 289 | 4.7% | |
3/features | 5,340 | 198 | 3.7% | |
4/blog/guide | 4,890 | 156 | 3.2% | |
5/contact | 3,210 | 245 | 7.6% |