Analytics & Metrics Dashboards

Build data visualization components with Recharts.

Quick Start npm install recharts

Line Chart 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 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

function SalesChart({ data }) { return ( ); }

KPI Card 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}

}

  <div className="mt-2">
    <p className="text-3xl font-semibold text-gray-900">{value}</p>

    <div className="mt-2 flex items-center">
      <span
        className={`text-sm font-medium ${
          isPositive ? 'text-green-600' : 'text-red-600'
        }`}
      >
        {isPositive ? '↑' : '↓'} {Math.abs(change)}%
      </span>
      <span className="ml-2 text-sm text-gray-500">vs last period</span>
    </div>
  </div>
</div>

); }

Dashboard Layout function Dashboard() { return (

{/ KPI Grid /}

  {/* Charts Grid */}
  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div className="bg-white rounded-lg p-6 shadow-sm border">
      <h3 className="text-lg font-medium mb-4">Revenue Over Time</h3>
      <RevenueChart />
    </div>

    <div className="bg-white rounded-lg p-6 shadow-sm border">
      <h3 className="text-lg font-medium mb-4">Sales by Category</h3>
      <SalesChart data={salesData} />
    </div>
  </div>
</div>

); }

Pie Chart import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444'];

function DistributionChart({ data }) { return ( {data.map((_, index) => ( ))} ); }

Formatting Utilities 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

analytics-metrics

安装