Analytics Platform
AnalyticsTraffic overview with area chart, geographic distribution on a geo map, content breakdown treemap, user segment analysis with parallel coordinates, and source distribution.
Total Users
284,521
+12.4%Page Views
1.2M
+8.1%Bounce Rate
32.4%
-3.2%Avg Session
4m 12s
+0.8%Implementation
import { AreaChart, DonutChart, HeatmapChart, BarChart, FunnelChart, Sparkline } from "@chartts/react"
export function AnalyticsDashboard() {
return (
<div className="space-y-6">
{/* KPIs */}
<div className="grid grid-cols-4 gap-4">
<KPICard label="Total Users" value="284,521" change="+12.4%" sparkline={userTrend} />
<KPICard label="Page Views" value="1.2M" change="+8.1%" />
<KPICard label="Bounce Rate" value="32.4%" change="-3.2%" />
<KPICard label="Avg Session" value="4m 12s" change="+0.8%" />
</div>
{/* Main row */}
<div className="grid grid-cols-3 gap-4">
<AreaChart data={traffic} x="day" y={["views", "users"]} className="col-span-2 h-72" />
<DonutChart data={sources} value="count" label="source" className="h-72" />
</div>
{/* Heatmap */}
<HeatmapChart data={activity} x="hour" y="day" value="sessions" className="h-48" />
{/* Bottom row */}
<div className="grid grid-cols-2 gap-4">
<BarChart data={topPages} x="page" y="views" className="h-64" />
<FunnelChart data={conversion} value="users" label="stage" className="h-64" />
</div>
</div>
)
}