Dashboard Analytics Charts

[JosueBrenes]

Description

Enhance the dashboard with interactive charts showing pool analytics, historical data, and performance metrics. This will provide users with valuable insights into pool performance and market trends.

What to Implement

• Interactive chart library integration
• Historical data fetching and caching
• Multiple chart types for different metrics
• Time range selectors and filters
• Responsive chart design for mobile

Acceptance Criteria

• APY historical chart with multiple assets
• Pool utilization rate trends over time
• Supply/borrow volume charts
• Total Value Locked (TVL) tracking
• Responsive design for all screen sizes
• Data export functionality

Technical Requirements

Files to Create

1. Chart Components Directory

   • Path: src/components/modules/dashboard/ui/charts/
   • Contents: Individual chart components

2. Chart Data Hook

   • Path: src/hooks/useChartData.ts
   • Purpose: Fetch and manage chart data

3. Chart Utilities

   • Path: src/helpers/chart.helper.ts
   • Purpose: Chart data formatting and calculations

4. Analytics Service

   • Path: src/services/analytics.service.ts
   • Purpose: Data aggregation and API calls

Chart Components to Create

• APYChart.tsx - Historical APY trends
• UtilizationChart.tsx - Pool utilization over time
• VolumeChart.tsx - Supply/borrow volume
• TVLChart.tsx - Total Value Locked tracking
• ChartContainer.tsx - Reusable chart wrapper

Files to Modify

• src/components/modules/dashboard/ui/pages/DashboardPage.tsx
• Add new analytics section with charts

Implementation Details

Recommended Libraries

• Chart.js with react-chartjs-2 (lightweight, good performance)
• Or Recharts (React-native, good for responsive design)
• date-fns for date manipulation

Data Sources

• Blend Protocol APIs for historical data
• Local state management for real-time updates
• Caching strategy for performance optimization

Chart Features

• Time range selectors (24h, 7d, 30d, 90d)
• Zoom and pan functionality
• Tooltip with detailed information
• Legend with asset filtering
• Dark/light theme support

Design Considerations

• Consistent color scheme with existing UI
• Responsive breakpoints for mobile
• Loading states and skeleton screens
• Empty states for no data scenarios
• Accessibility considerations for screen readers

Performance Requirements

• Efficient data fetching and caching
• Debounced updates for real-time data
• Optimized rendering for large datasets
• Lazy loading for off-screen charts

Dependencies

• Chart library (Chart.js or Recharts)
• Date manipulation library
• Existing theme system
• API integration for historical data

Definition of Done

• All charts render correctly with real data
• Time range selectors work properly
• Charts are responsive on all devices
• Performance is optimized for large datasets
• Error handling for data fetching failures
• Accessibility standards met

[kabugatti]

Hi @JosueBrenes 👋,

I'm an experienced frontend engineer.

Would like to give this a shot.

[kabugatti]

On it