# 15 - Basic UI Elements ### Overview OpenAlgo provides core trading UI components including Dashboard, OrderBook, TradeBook, Positions, and Holdings, along with advanced analytics tools (GEX Dashboard, IV Smile, OI Profile, Volatility Surface, etc.). These components display real-time data with auto-refresh via the React frontend. ### Architecture Diagram ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ Basic UI Components │ └──────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ Dashboard │ │ /dashboard │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Funds │ │ Positions │ │ P&L │ │ Orders │ │ │ │ Summary │ │ Count │ │ Summary │ │ Pending │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ Quick Actions: Place Order | View Positions | API Key │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ OrderBook │ │ /orderbook │ │ │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │ │ Order ID | Symbol | Exchange | Action | Qty | Price | Status | Time │ │ │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ 123456 | SBIN | NSE | BUY | 100 | MKT | Complete| 09:30 │ │ │ │ 123457 | INFY | NSE | SELL | 50 | 1650 | Pending | 10:15 │ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │ │ │ Actions: Cancel Order | Modify Order | Refresh │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ TradeBook │ │ /tradebook │ │ │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │ │ Trade ID | Symbol | Exchange | Action | Qty | Price | Time │ │ │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ T001 | SBIN | NSE | BUY | 100 | 625.50| 09:30:15 │ │ │ │ T002 | SBIN | NSE | SELL | 100 | 627.25| 14:45:30 │ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │ │ │ Summary: Total Trades | Buy Value | Sell Value | Net P&L │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ Positions │ │ /positions │ │ │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │ │ Symbol | Exchange | Product | Qty | Avg Price | LTP | P&L | P&L% │ │ │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ SBIN | NSE | MIS | 100 | 625.50 | 627 | +150 | +0.24% │ │ │ │ INFY | NSE | MIS | -50 | 1655.00 | 1650| +250 | +0.30% │ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │ │ │ Actions: Close Position | Close All | Refresh │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ Holdings │ │ /holdings │ │ │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │ │ Symbol | Exchange | Qty | Avg Price | LTP | Current Value | P&L │ │ │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ SBIN | NSE | 500 | 580.00 | 625 | 312,500 | +22,500 │ │ │ │ INFY | NSE | 100 | 1500.00 | 1650| 165,000 | +15,000 │ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │ │ │ Summary: Total Investment | Current Value | Overall P&L │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### Data Sources #### API Endpoints | Component | API Endpoint | Method | | --------- | ------------------- | ------ | | Dashboard | Multiple | GET | | OrderBook | `/api/v1/orderbook` | POST | | TradeBook | `/api/v1/tradebook` | POST | | Positions | `/api/v1/positions` | POST | | Holdings | `/api/v1/holdings` | POST | | Funds | `/api/v1/funds` | POST | #### Real-Time Updates Socket.IO events for live updates: | Event | Description | | ----------------- | ------------------- | | `order_update` | Order status change | | `trade_update` | New trade executed | | `position_update` | Position change | | `pnl_update` | P\&L refresh | ### Component Details #### Dashboard **Route:** `/dashboard` Features: * Account summary (funds, margin) * Open positions count * Today's P\&L * Pending orders count * Quick action buttons #### OrderBook **Route:** `/orderbook` Columns: * Order ID * Symbol * Exchange * Action (BUY/SELL) * Quantity * Price / Price Type * Status (pending/complete/cancelled/rejected) * Timestamp Actions: * Cancel pending order * Modify order (qty, price) * Filter by status #### TradeBook **Route:** `/tradebook` Columns: * Trade ID * Order ID (linked) * Symbol * Exchange * Action * Quantity * Execution Price * Timestamp Summary: * Total trades count * Buy/Sell breakdown * Turnover #### Positions **Route:** `/positions` Columns: * Symbol * Exchange * Product (MIS/CNC/NRML) * Quantity (+ve long, -ve short) * Average Price * LTP (Last Traded Price) * P\&L (absolute) * P\&L % (percentage) Actions: * Close individual position * Close all positions * Add to position #### Holdings **Route:** `/holdings` Columns: * Symbol * Exchange * Quantity * Average Cost * Current Price * Current Value * Day's P\&L * Overall P\&L Features: * T1 holdings (unsettled) * Pledged quantities * Portfolio value ### React Components #### File Structure ``` frontend/src/ ├── pages/ │ ├── Dashboard.tsx │ ├── OrderBook.tsx │ ├── TradeBook.tsx │ ├── Positions.tsx │ └── Holdings.tsx ├── components/ │ ├── DataTable.tsx # Reusable table │ ├── PnLBadge.tsx # P&L display │ ├── StatusBadge.tsx # Order status │ └── ActionButton.tsx # Quick actions └── hooks/ ├── useOrders.ts ├── useTrades.ts ├── usePositions.ts └── useHoldings.ts ``` #### TanStack Query Usage ```typescript // hooks/usePositions.ts export function usePositions() { return useQuery({ queryKey: ['positions'], queryFn: () => api.getPositions(), refetchInterval: 5000, // Auto-refresh every 5 seconds }); } ``` ### Analytics Tools OpenAlgo includes a suite of options analytics tools accessible from the **Tools** hub page (`/tools`). These tools use Plotly.js for interactive charting and visualization. #### Tools Hub (`/tools`) Central navigation page listing all available analytical tools with descriptions. #### GEX Dashboard (`/gex`) Gamma Exposure (GEX) analysis showing the net gamma exposure across strike prices. Helps identify key support/resistance levels driven by options market makers. * **Blueprint:** `blueprints/gex.py` * **Service:** `services/gex_service.py` * **API:** `frontend/src/api/gex.ts` #### IV Smile (`/ivsmile`) Implied Volatility Smile chart showing IV across different strike prices for a given expiry. Visualizes the volatility skew pattern. * **Blueprint:** `blueprints/ivsmile.py` * **Service:** `services/iv_smile_service.py` #### IV Chart (`/ivchart`) IV time series chart tracking implied volatility changes over time for specific options contracts. * **Blueprint:** `blueprints/ivchart.py` * **Service:** `services/iv_chart_service.py` #### OI Profile (`/oiprofile`) Open Interest profile analysis showing OI distribution across strike prices. Identifies where maximum OI is concentrated. * **Blueprint:** `blueprints/oiprofile.py` * **Service:** `services/oi_profile_service.py` #### OI Tracker (`/oitracker`) Real-time OI change tracker monitoring changes in open interest across strikes. Useful for tracking smart money positioning. * **Blueprint:** `blueprints/oitracker.py` * **Service:** `services/oi_tracker_service.py` #### Max Pain (`/maxpain`) Max Pain analysis calculating the strike price at which the maximum number of options contracts would expire worthless. * **Blueprint:** (shared with option chain infrastructure) * **Service:** Option chain data with max pain calculation #### ATM Straddle Chart (`/straddle`) Dynamic ATM Straddle chart showing combined premium of at-the-money call and put options over time. * **Blueprint:** `blueprints/straddle_chart.py` * **Service:** `services/straddle_chart_service.py` #### 3D Volatility Surface (`/volsurface`) Interactive 3D visualization of implied volatility across strike prices and expiry dates, rendered with Plotly. * **Blueprint:** `blueprints/vol_surface.py` * **Service:** `services/vol_surface_service.py` ### Key Files Reference | File | Purpose | | ------------------------------ | -------------------------- | | `blueprints/dashboard.py` | Dashboard routes | | `blueprints/orders.py` | OrderBook/TradeBook routes | | `restx_api/positionbook.py` | Positions API | | `restx_api/holdings.py` | Holdings API | | `blueprints/gex.py` | GEX Dashboard routes | | `blueprints/ivsmile.py` | IV Smile routes | | `blueprints/oiprofile.py` | OI Profile routes | | `blueprints/oitracker.py` | OI Tracker routes | | `blueprints/straddle_chart.py` | Straddle Chart routes | | `blueprints/vol_surface.py` | Volatility Surface routes | | `frontend/src/pages/` | React UI components | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openalgo.in/developers/design-documentation/15-basic-ui-elements.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.