Analytics Dashboard - Metryki i wykresy

Dashboard z metrykami - views, clicks, conversions.

Chart Library - Recharts 📊

1npm install recharts

1import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
2
3function ViewsChart() {
4  const data = [
5    { date: '2024-01', views: 400 },
6    { date: '2024-02', views: 300 },
7    { date: '2024-03', views: 600 },
8    { date: '2024-04', views: 800 }
9  ];
10
11  return (
12    <LineChart width={600} height={300} data={data}>
13      <CartesianGrid strokeDasharray="3 3" />
14      <XAxis dataKey="date" />
15      <YAxis />
16      <Tooltip />
17      <Line type="monotone" dataKey="views" stroke="#3b82f6" />
18    </LineChart>
19  );
20}

Stats Cards 📈

1function StatsGrid() {
2  const stats = [
3    { label: 'Total Views', value: '12.5K', change: '+12%', up: true },
4    { label: 'Clicks', value: '3.2K', change: '+5%', up: true },
5    { label: 'Conversions', value: '450', change: '-2%', up: false }
6  ];
7
8  return (
9    <div className="grid grid-cols-3 gap-4">
10      {stats.map(stat => (
11        <div key={stat.label} className="border rounded p-4 bg-white">
12          <p className="text-sm text-gray-600">{stat.label}</p>
13          <p className="text-3xl font-bold">{stat.value}</p>
14          <p className={`text-sm ${stat.up ? 'text-green-600' : 'text-red-600'}`}>
15            {stat.change}
16          </p>
17        </div>
18      ))}
19    </div>
20  );
21}

Do zobaczenia! 🚀