# Analytics & Metrics Dashboards Build data visualization components with Recharts. ## Quick Start ```bash npm install recharts ``` ## Line Chart ```tsx import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts'; const data = [ { month: 'Jan', revenue: 4000, users: 2400 }, { month: 'Feb', revenue: 3000, users: 1398 }, { month: 'Mar', revenue: 2000, users: 9800 }, { month: 'Apr', revenue: 2780, users: 3908 }, ]; function RevenueChart() { return ( ); } ``` ## Bar Chart ```tsx import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'; function SalesChart({ data }) { return ( ); } ``` ## KPI Card ```tsx interface KPICardProps { title: string; value: string | number; change: number; trend: 'up' | 'down'; icon?: React.ReactNode; } function KPICard({ title, value, change, trend, icon }: KPICardProps) { const isPositive = trend === 'up'; return (

{title}

{icon &&

{icon}

}

{value}

{isPositive ? '↑' : '↓'} {Math.abs(change)}% vs last period

); } ``` ## Dashboard Layout ```tsx function Dashboard() { return (

{/* KPI Grid */}

{/* Charts Grid */}

Revenue Over Time

Sales by Category

); } ``` ## Pie Chart ```tsx import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts'; const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444']; function DistributionChart({ data }) { return ( {data.map((_, index) => ( ))} ); } ``` ## Formatting Utilities ```typescript export function formatNumber(value: number): string { if (value >= 1_000_000) { return `${(value / 1_000_000).toFixed(1)}M`; } if (value >= 1_000) { return `${(value / 1_000).toFixed(1)}K`; } return value.toLocaleString(); } export function formatCurrency(value: number, currency = 'USD'): string { return new Intl.NumberFormat('en-US', { style: 'currency', currency, minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(value); } export function formatPercent(value: number): string { return `${value >= 0 ? '+' : ''}${value.toFixed(1)}%`; } ``` ## Resources - **Recharts**: https://recharts.org - **D3.js**: https://d3js.org ---