114 lines
3.7 KiB
Markdown
114 lines
3.7 KiB
Markdown
# Live Chart Implementation Summary
|
|
|
|
## Overview
|
|
The gold trading chart has been upgraded to display live price updates without requiring manual page refreshes. The chart now automatically updates every 10 seconds with the latest gold prices.
|
|
|
|
## What Was Implemented
|
|
|
|
### 1. Backend Live Price Endpoint
|
|
**File:** `backend/app/api/market.py`
|
|
|
|
Added a new `/api/market/gold/live` endpoint that:
|
|
- Fetches the current gold price in real-time
|
|
- Returns OHLC (Open, High, Low, Close) data with simulated micro-movements
|
|
- Timestamps data to the current minute
|
|
|
|
### 2. Frontend API Integration
|
|
**File:** `frontend/src/services/api.ts`
|
|
|
|
Added `getLivePrice()` method to the `marketDataApi` service to fetch live price data from the backend.
|
|
|
|
### 3. Custom React Hook for Live Updates
|
|
**File:** `frontend/src/hooks/useLivePrice.ts`
|
|
|
|
Created a reusable `useLivePrice` hook that:
|
|
- Polls the backend every 10 seconds (configurable)
|
|
- Maintains connection state
|
|
- Handles errors gracefully
|
|
- Provides callbacks for updates and errors
|
|
- Can be enabled/disabled dynamically
|
|
|
|
### 4. Chart Component Updates
|
|
**File:** `frontend/src/components/GoldChart.tsx`
|
|
|
|
Modified the GoldChart component to:
|
|
- Accept a `liveUpdate` prop for new price data
|
|
- Use the `update()` method instead of `setData()` to append new candles
|
|
- Update the current price display in real-time
|
|
- Maintain smooth chart animations without full reloads
|
|
|
|
### 5. App Integration
|
|
**File:** `frontend/src/App.tsx`
|
|
|
|
Integrated live updates into the main app:
|
|
- Added the `useLivePrice` hook with 10-second polling
|
|
- Connected live updates to the chart component
|
|
- Added a visual "Live" indicator in the header with a pulsing green dot
|
|
- Live price updates also sync with the current price state for trading controls
|
|
|
|
## Key Features
|
|
|
|
### ✅ Real-Time Updates
|
|
- Chart updates automatically every 10 seconds
|
|
- No manual refresh required
|
|
- Smooth animations as new data arrives
|
|
|
|
### ✅ Visual Feedback
|
|
- "Live" badge with animated pulse indicator in the header
|
|
- Shows connection status
|
|
- Current price updates in sync with chart
|
|
|
|
### ✅ Efficient Data Handling
|
|
- Polling-based approach (more reliable than WebSockets for this use case)
|
|
- Only fetches the latest candle, not the entire history
|
|
- Uses lightweight-charts' `update()` method for optimal performance
|
|
|
|
### ✅ Error Handling
|
|
- Graceful degradation if backend is unavailable
|
|
- Connection status tracking
|
|
- Automatic retry on errors
|
|
|
|
## How It Works
|
|
|
|
1. **Initial Load**: When the app starts, it loads historical price data as before
|
|
2. **Live Polling**: Every 10 seconds, the hook fetches the latest price tick
|
|
3. **Chart Update**: The new candle is appended to the chart using `update()`
|
|
4. **Price Sync**: Current price state is updated for trading controls
|
|
5. **Visual Feedback**: "Live" indicator shows active connection
|
|
|
|
## Configuration
|
|
|
|
The polling interval can be adjusted in `App.tsx`:
|
|
|
|
```typescript
|
|
const { latestPrice, isConnected } = useLivePrice({
|
|
enabled: true,
|
|
interval: 10000, // 10 seconds (adjustable)
|
|
onUpdate: (priceData) => {
|
|
setCurrentPrice(priceData.close);
|
|
},
|
|
});
|
|
```
|
|
|
|
## Testing
|
|
|
|
The implementation is now running at:
|
|
- **Frontend**: http://localhost:3000/
|
|
- **Backend**: http://localhost:8000/
|
|
- **Live Endpoint**: http://localhost:8000/api/market/gold/live
|
|
|
|
You should see:
|
|
1. The chart loads with historical data
|
|
2. A green "Live" badge appears in the header
|
|
3. Every 10 seconds, a new candle appears on the chart
|
|
4. The current price updates automatically
|
|
|
|
## Future Enhancements
|
|
|
|
Potential improvements:
|
|
- Add WebSocket support for even faster updates
|
|
- Make polling interval user-configurable
|
|
- Add tick-by-tick updates for intraday timeframes
|
|
- Display last update timestamp
|
|
- Add reconnection logic with exponential backoff
|