Skip to content

feat(ui): dashboard — FeeChart with time window toggle #79

@Tinna23

Description

@Tinna23

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) from lib/api.ts and 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 * 3 rendered in accent colour with a ReferenceLine or custom dot annotation
  • Custom Tooltip showing: 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

  • FeeChart manages its own history fetch state independently (separate from DashboardShell polling)
  • Install Recharts: npm install recharts

Metadata

Metadata

Assignees

No one assigned

    Labels

    frontendFrontend / UI work

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions