Context
Визуализация данных от прокси. Нам нужны карточки с текущим трафиком и график истории.
Checklist
[ ] Установить библиотеку графиков: npm install recharts.
[ ] Создать StatsPanel.tsx: 4 карточки (Uptime, Users, CPU, RAM).
[ ] Создать HistoryChart.tsx: линейный график (LineChart) для отображения скорости (Inbound/Outbound).
[ ] Использовать Framer Motion для появления карточек с эффектом high-inertia.
[ ] Настроить recharts: кастомный Tooltip в стиле Glassmorphism и градиентная заливка под линией графика (AreaChart).
[ ] Реализовать "Live" эффект: плавное перемещение линии графика при обновлении данных.
Context
Визуализация данных от прокси. Нам нужны карточки с текущим трафиком и график истории.
Checklist
[ ] Установить библиотеку графиков: npm install recharts.
[ ] Создать StatsPanel.tsx: 4 карточки (Uptime, Users, CPU, RAM).
[ ] Создать HistoryChart.tsx: линейный график (LineChart) для отображения скорости (Inbound/Outbound).
[ ] Использовать
Framer Motionдля появления карточек с эффектом high-inertia.[ ] Настроить
recharts: кастомный Tooltip в стиле Glassmorphism и градиентная заливка под линией графика (AreaChart).[ ] Реализовать "Live" эффект: плавное перемещение линии графика при обновлении данных.