Analytics
A data-intensive analytics block with KPI deltas, comparison charts, breakdowns, and trend indicators. Ideal for performance dashboards.
Installation
$ npx shadcn@latest add @orecus/analyticsRegistry:
@orecus/header@orecus/stat-delta@orecus/stat-trend@orecus/stat-list@orecus/chart@orecus/card
Component
Analytics Block
Analytics
Track your website performance
Total Revenue$45,231 this period
Active Users2,350 users
Conversion Rate3.24% this period
Bounce Rate45.2% (improved!)
Revenue Comparison
Current period vs previous period
Traffic Sources
Where your visitors come from
Top Pages
Most visited pages this period
1
12,453/products
2
8,234/pricing
3
5,432/about
4
3,876/contact
5
2,543/blog
Revenue
+12.5%
Users
+11.2%
Conversions
+8.3%
Bounce Rate
-5.2%
Minimal Analytics
Quick Insights
Key performance indicators
Page Views24,532 views
Unique Visitors8,234 visitors
Avg. Session2m 34s
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Analytics compound components (Analytics.Header, Analytics.KPIs, etc.) |
className | string | — | Additional CSS classes for the container |
Compound Components
Analytics.Header
Header with title, date range controls, and actions. Extends Header component props.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Header title |
description | string | — | Header description |
icon | LucideIcon | — | Header icon |
controls | ReactNode | — | Date range selector or other controls |
actions | ReactNode | — | Actions to display on the right side |
className | string | — | Additional CSS classes |
Analytics.KPIs
Grid of KPI stat deltas with configurable columns.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | KPI stat components (StatDelta, StatComparison) |
columns | 2 | 3 | 4 | 4 | Number of grid columns |
className | string | — | Additional CSS classes |
Analytics.Chart
Main visualization chart with title and description.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Main chart component |
title | string | — | Chart title |
description | string | — | Chart description |
actions | ReactNode | — | Actions for the chart header |
className | string | — | Additional CSS classes |
Analytics.Breakdown
Breakdown section with single, split, or triple layout.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Breakdown content (charts, lists, tables) |
layout | 'single' | 'split' | 'triple' | 'split' | Layout mode |
className | string | — | Additional CSS classes |
Analytics.Trends
Grid of trend sparklines with configurable columns.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Trend components (StatTrend with sparklines) |
columns | 2 | 3 | 4 | 4 | Number of grid columns |
className | string | — | Additional CSS classes |
Analytics.Section
Custom section with optional title and actions.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Section content |
title | string | — | Section title |
description | string | — | Section description |
actions | ReactNode | — | Actions for the section header |
className | string | — | Additional CSS classes |