trading-platform/orchestration/tareas/TASK-2026-01-25-OQI-003-TRADING-ADVANCED/06-DOCUMENTACION.md

DOCUMENTACIÓN - TASK-2026-01-25-OQI-003-TRADING-ADVANCED

Estado: Completada Fecha: 2026-01-25

---

Propagación de Cambios

Nivel: Proyecto (trading-platform)

Documento	Estado	Cambio
FRONTEND_INVENTORY.yml	Actualizado	+4 componentes, total 90, OQI-003 al 45%
MASTER_INVENTORY.yml	Actualizado	component count 127, OQI-003 progress 45%
index.ts (trading/components)	Actualizado	4 new exports + types

Nivel: Workspace

Documento	Estado	Cambio
Submodule reference	Pendiente	1 commit to trading-platform

---

API de Componentes Creados

OrderBookDepthVisualization

interface DepthLevel {
  price: number;
  quantity: number;
  total: number;
}

interface DepthData {
  bids: DepthLevel[];
  asks: DepthLevel[];
  midPrice: number;
  spread: number;
  spreadPercentage: number;
  lastUpdate: Date;
}

interface DepthChartConfig {
  showGrid: boolean;
  showMidLine: boolean;
  showTooltip: boolean;
  animateChanges: boolean;
  bidColor: string;
  askColor: string;
  fillOpacity: number;
  strokeWidth: number;
  priceRange: number;
}

interface OrderBookDepthVisualizationProps {
  data: DepthData | null;
  config?: Partial<DepthChartConfig>;
  onPriceClick?: (price: number, side: 'bid' | 'ask') => void;
  onRefresh?: () => void;
  isLoading?: boolean;
  height?: number;
  compact?: boolean;
}

MarketDepthPanel

interface OrderLevel {
  price: number;
  quantity: number;
  total: number;
  orders?: number;
  exchange?: string;
}

interface MarketDepthData {
  symbol: string;
  bids: OrderLevel[];
  asks: OrderLevel[];
  midPrice: number;
  spread: number;
  spreadPercentage: number;
  imbalance: number;
  lastUpdate: Date;
}

type ViewMode = 'table' | 'chart' | 'split';
type GroupingLevel = 'none' | '0.01' | '0.1' | '1' | '10' | '100';

interface MarketDepthPanelProps {
  data: MarketDepthData | null;
  onPriceClick?: (price: number, side: 'bid' | 'ask') => void;
  onRefresh?: () => void;
  onExport?: (format: 'csv' | 'json') => void;
  isLoading?: boolean;
  displayRows?: number;
  compact?: boolean;
}

SymbolComparisonChart

interface PricePoint {
  timestamp: number;
  price: number;
  volume?: number;
}

interface SymbolData {
  symbol: string;
  name: string;
  data: PricePoint[];
  color: string;
  visible: boolean;
  basePrice: number;
  currentPrice: number;
  change: number;
  changePercent: number;
}

type NormalizationMode = 'absolute' | 'percentage' | 'indexed';
type TimeframeOption = '1D' | '1W' | '1M' | '3M' | '6M' | '1Y' | 'YTD' | 'ALL';

interface SymbolComparisonChartProps {
  symbols: SymbolData[];
  onAddSymbol?: () => void;
  onRemoveSymbol?: (symbol: string) => void;
  onToggleVisibility?: (symbol: string) => void;
  onRefresh?: () => void;
  onExport?: () => void;
  onTimeframeChange?: (timeframe: TimeframeOption) => void;
  isLoading?: boolean;
  height?: number;
  compact?: boolean;
}

TradingScreener

interface ScreenerResult {
  symbol: string;
  name: string;
  sector?: string;
  industry?: string;
  exchange: string;
  price: number;
  change: number;
  changePercent: number;
  volume: number;
  avgVolume: number;
  marketCap?: number;
  pe?: number;
  eps?: number;
  high52w: number;
  low52w: number;
  rsi?: number;
  macdSignal?: 'bullish' | 'bearish' | 'neutral';
  sma20?: number;
  sma50?: number;
  sma200?: number;
  atr?: number;
  beta?: number;
  dividendYield?: number;
  isFavorite?: boolean;
}

interface ScreenerFilter {
  id: string;
  field: keyof ScreenerResult;
  operator: 'gt' | 'lt' | 'eq' | 'gte' | 'lte' | 'between' | 'contains';
  value: number | string | [number, number];
  enabled: boolean;
}

interface SavedScreener {
  id: string;
  name: string;
  filters: ScreenerFilter[];
  createdAt: Date;
}

interface TradingScreenerProps {
  results: ScreenerResult[];
  savedScreeners?: SavedScreener[];
  onSearch?: (query: string) => void;
  onFilterChange?: (filters: ScreenerFilter[]) => void;
  onSaveScreener?: (name: string, filters: ScreenerFilter[]) => void;
  onLoadScreener?: (screener: SavedScreener) => void;
  onDeleteScreener?: (id: string) => void;
  onSymbolClick?: (symbol: string) => void;
  onAddToWatchlist?: (symbol: string) => void;
  onToggleFavorite?: (symbol: string) => void;
  onExport?: (format: 'csv' | 'json') => void;
  onRefresh?: () => void;
  isLoading?: boolean;
  compact?: boolean;
}

---

Checklist de Cierre

• Componentes creados con JSDoc headers
• Types exportados correctamente
• index.ts barrel actualizado
• FRONTEND_INVENTORY.yml actualizado
• MASTER_INVENTORY.yml actualizado
• Commits realizados con formato correcto
• Push a los repositorios (frontend, trading-platform)
• METADATA.yml de tarea creado
• Documentación de ejecución completada

---

Próxima Acción Recomendada

1. Ejecutar npm run build en frontend para validar tipos
2. Integrar componentes con API de datos reales
3. Implementar WebSocket para datos en tiempo real
4. Agregar tests unitarios para componentes críticos
5. Completar persistencia de drawing tools (ET-TRD-010)