-
Notifications
You must be signed in to change notification settings - Fork 16
Open
Labels
frontendFrontend / UI workFrontend / UI work
Description
Overview
Build the FeeChart component — a Recharts bar chart showing fee history over selectable time windows, with spike annotations.
Acceptance Criteria
- Component at
src/app/components/dashboard/FeeChart.tsx - Uses Recharts (
BarChart,Bar,XAxis,YAxis,Tooltip,ResponsiveContainer) - Time window toggle:
1H|6H|24H— buttons above the chart - On window change, fetches
fetchFeeHistory(window)fromlib/api.tsand re-renders - X-axis: timestamps formatted to readable time labels
- Y-axis: fee values in stroops
- Bar colour: primary green (
#00ff9d); spike bars coloured red/yellow - Spike detection: bars where
max_fee > avg_fee * 3rendered in accent colour with aReferenceLineor custom dot annotation - Custom
Tooltipshowing: time, base fee, avg fee, max fee - Accepts props:
{ initialWindow?: '1h' | '6h' | '24h' } - Responsive — fills container width via
ResponsiveContainer - Loading state while fetching history
Notes
FeeChartmanages its own history fetch state independently (separate fromDashboardShellpolling)- Install Recharts:
npm install recharts
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
frontendFrontend / UI workFrontend / UI work