Ember Stats Dashboard
An analytics stats overview with warm ember/fire aesthetics and industrial data feel.
Features
- Ember palette — Charcoal (#1C1917) with orange (#F97316) and amber (#F59E0B) gradients
- 4 stat cards — Total visitors, active users, click rate, avg session with trend badges
- Progress bars — Visual progress indicators per metric
- Channel breakdown — Color-coded traffic source bars with percentages
- Top pages table — Path, views, bounce rate, and trend indicators
- Live badge — Animated pulse indicator for real-time data
- Typography — Space Mono for numbers/stats, Outfit for labels
- Light mode — Warm stone (#F5F0EB) background with dark text
- Hover effects — Animated bottom gradient borders on stat cards
Dependencies
@/components/vue-ui/card — Stat and data card composition@/components/vue-ui/progress — Metric progress bars@/components/vue-ui/badge — Trend indicators and status badges@/components/vue-ui/separator — Section and table dividerslucide-vue-next — TrendingUp, TrendingDown, Users, Eye, MousePointerClick, Timer, ArrowUpRight, ArrowDownRight, BarChart3, Flame icons
Customization
- Stats: Edit
primaryStats array for your key metrics
- Channels: Modify
channelBreakdown for your traffic sources
- Pages: Update
topPages for your most visited pages
- Colors: Replace #F97316 (orange) and #F59E0B (amber) for different accent themes
