Files

T

henry 2e22fd5635 feat: add stock detail page with chart, position, and orders

- Add /api/alpaca/orders endpoint for order history
- Add TradingView chart component for candlestick visualization
- Add /analyze/:ticker route with position and orders display
- Make ticker cells in analyze page clickable for navigation

2026-05-14 11:00:35 +02:00

2.1 KiB

Raw Blame History

Stock Detail Page Implementation Design

Goal: Create a stock detail page at /analyze/:ticker showing TradingView chart, position, orders, and trading graph results.

Architecture: Dynamic route approach - separate route from analyze page with ticker parameter.

Files to Create/Modify

app/routes/analyze.ticker.tsx - Stock detail page component
app/components/TradingViewChart.tsx - TradingView lightweight charts wrapper
app/routes/api/alpaca/orders.ts - Orders API endpoint
app/routes.ts - Add new route

Page Structure

/analyze/:ticker
├── Navbar
├── Stock Header (ticker, current price)
├── TradingView Chart (full width)
├── Position Card (quantity, avg cost, current value)
├── Orders Table (recent orders with status)
├── Trading Graph Results (expandable sections)
│   ├── Analyst Reports (fundamentals, technical, sentiment)
│   ├── Debate Summary
│   └── Final Decision

Data Sources

Chart: TradingView widget with Alpaca data
Position: /api/alpaca/positions filtered by ticker
Orders: New /api/alpaca/orders endpoint
Analysis: /api/analyze + TradingGraph results

API Changes

GET /api/alpaca/orders

Returns list of orders from Alpaca, optionally filtered by ticker.

// Response format
{
  orders: Array<{
    id: string;
    ticker: string;
    qty: number;
    side: "buy" | "sell";
    status: "new" | "filled" | "canceled";
    filled_at: string | null;
    filled_avg_price: string;
  }>
}

Component Details

TradingViewChart.tsx

Uses TradingView lightweight charts library
Props: ticker, data (price data array)
Fetches historical bars from Alpaca API
Renders candlestick chart

analyze.ticker.tsx

Loader function fetches position, orders, and runs analysis
Uses useLoaderData for server-fetched data
Client-side rerun of analysis via form action

User Flow

User clicks ticker in analyze page table
Navigates to /analyze/:ticker
Page shows chart at top, position/orders/analysis below
"Rerun Analysis" button triggers TradingGraph

2.1 KiB Raw Blame History