Skip to content

feat: Add interactive analytics charts with volume and token breakdown #152

Description

@Austinaminu2

Description

The analytics page (/app/analytics) exists but lacks meaningful data visualizations. For a streaming protocol, users need to understand their streaming activity through charts and metrics.

Proposed Charts

  1. Streaming Volume Over Time — area chart showing total tokens streamed per day/week/month
  2. Token Distribution — donut chart breaking down streams by token (XLM, USDC, EURC)
  3. Stream Status Breakdown — bar chart showing active vs completed vs cancelled streams
  4. Top Recipients — table showing most-streamed-to addresses with totals
  5. Unlock Progress — aggregate progress bar showing total unlocked vs locked across all streams

Technical Approach

Use recharts (already common in React ecosystems) or @visx/xys for lightweight, composable charts. Data derived from the existing useStreams hook — no new contract calls needed.

Acceptance Criteria

  • At least 3 chart types rendered on the analytics page
  • Charts update when new streams are created or status changes
  • Date range selector (7d, 30d, 90d, all time)
  • Empty states for users with no streams
  • Charts render correctly in both light and dark themes
  • Responsive layout — charts stack vertically on mobile

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature requestfrontendNext.js frontenduxUser experience improvement

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions