Zbudujesz panel analityczny (dashboard) prezentujący dane biznesowe — wykresy sprzedaży, karty KPI, tabele i filtry zakresu dat. Temat wolny — możecie wybrać dziedzinę: sprzedaż, strona www, analityka sportowa.
Czego się nauczycie?
Karty KPI — kluczowe wskaźniki: łączna sprzedaż, liczba zamówień, konwersja, średnia wartość
Wykres liniowy — trend sprzedaży w czasie (tygodnie / miesiące)
Wykres słupkowy — sprzedaż per kategoria / region
Wykres kołowy — podział procentowy (np. kategorie produktów)
Tabela danych — pełne dane z sortowaniem i paginacją
Filtry — zakres dat, kategoria, region
Główny dashboard
Karty KPI + wykresy w gridzie 2-3 kolumn. Filtry u góry wpływają na wszystkie elementy.
Tabela szczegółowa
Pełna tabela danych z sortowaniem per kolumna i paginacją.
{ "sales": [ { "date": "2025-01-01", "revenue": 12500, "orders": 87, "category": "Electronics", "region": "Mazowieckie" }, { "date": "2025-01-08", "revenue": 15300, "orders": 102, "category": "Clothing", "region": "Małopolskie" } ]}/, /tableuseDashboardData z memoizowanymi obliczeniamiimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
function RevenueChart({ data }) { return ( <ResponsiveContainer width="100%" height={300}> <LineChart data={data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="date" /> <YAxis /> <Tooltip formatter={(value) => [`${value.toLocaleString()} PLN`, 'Przychód']} /> <Legend /> <Line type="monotone" dataKey="revenue" stroke="#3b82f6" strokeWidth={2} /></LineChart> </ResponsiveContainer> );}export function aggregateByPeriod(data, period = 'week') { const grouped = data.reduce((acc, item) => { const date = new Date(item.date); let key;
if (period === 'week') { const weekStart = new Date(date); weekStart.setDate(date.getDate() - date.getDay()); key = weekStart.toISOString().split('T')[0]; } else if (period === 'month') { key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`; }
if (!acc[key]) acc[key] = { date: key, revenue: 0, orders: 0 }; acc[key].revenue += item.revenue; acc[key].orders += item.orders; return acc; }, {});
return Object.values(grouped).sort((a, b) => a.date.localeCompare(b.date));}function KPICard({ title, value, unit, change, icon }) { const isPositive = change >= 0; return ( <div className="kpi-card"> <div className="kpi-icon">{icon}</div> <div className="kpi-content"> <h3 className="kpi-title">{title}</h3> <div className="kpi-value">{value} {unit}</div> <div className={`kpi-change ${isPositive ? 'positive' : 'negative'}`}> {isPositive ? '+' : ''}{change}% vs poprzedni okres </div> </div> </div> );}Powodzenia!
Dashboard statystyk to projekt o wysokim efekcie wizualnym — wykresy Recharts wyglądają profesjonalnie od razu. Kluczem jest prawidłowe przygotowanie danych do wykresów. Zacznijcie od jednego wykresu i danych lokalnych — potem dodawajcie filtry i kolejne wykresy iteracyjnie!