---
id: "US-TRD-001"
title: "Ver Chart de un Simbolo"
type: "User Story"
status: "Done"
priority: "Alta"
epic: "OQI-003"
story_points: 5
created_date: "2025-12-05"
updated_date: "2026-01-04"
---

# US-TRD-001: Ver Chart de un Símbolo

## Metadata

| Campo | Valor |
|-------|-------|
| **ID** | US-TRD-001 |
| **Épica** | OQI-003 - Trading y Charts |
| **Módulo** | trading |
| **Prioridad** | P0 |
| **Story Points** | 5 |
| **Sprint** | Sprint 3 |
| **Estado** | Pendiente |
| **Asignado a** | Por asignar |

---

## Historia de Usuario

**Como** trader/inversor,
**quiero** ver un gráfico de velas de un activo específico,
**para** analizar el comportamiento del precio y tomar decisiones de trading.

## Descripción Detallada

El usuario debe poder acceder a la página de trading y visualizar un chart profesional de velas japonesas (candlestick) para cualquier símbolo disponible en la plataforma. El chart debe mostrar datos históricos y actualizarse en tiempo real.

## Mockups/Wireframes

```
┌─────────────────────────────────────────────────────────────────┐
│  BTCUSDT   $97,234.50   +2.34% ▲                               │
├─────────────────────────────────────────────────────────────────┤
│  [1m] [5m] [15m] [1h] [4h] [1D] [1W]    [Indicators ▼]        │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│    ████                                                         │
│    ████  ████                    ████                           │
│    ████  ████                    ████  ████                     │
│    ████  ████  ████              ████  ████  ████               │
│          ████  ████  ████        ████  ████  ████  ████         │
│                ████  ████  ████        ████  ████  ████ ████    │
│                      ████  ████              ████  ████ ████    │
│                            ████                    ████ ████    │
│                                                         ████    │
│                                                                  │
├─────────────────────────────────────────────────────────────────┤
│  ▓▓▓  ▓▓▓▓  ▓▓▓  ▓▓▓▓▓  ▓▓▓  ▓▓▓▓  ▓▓▓  ▓▓▓▓▓  ▓▓▓  ▓▓  VOLUME│
└─────────────────────────────────────────────────────────────────┘
```

---

## Criterios de Aceptación

**Escenario 1: Ver chart por defecto**
```gherkin
DADO que el usuario está autenticado
Y navega a la página de trading
CUANDO la página carga
ENTONCES se muestra el chart de BTCUSDT (símbolo por defecto)
Y el timeframe es 1h por defecto
Y se muestran al menos 168 velas históricas
Y se muestra el panel de volumen debajo
```

**Escenario 2: Cambiar símbolo**
```gherkin
DADO que el usuario está viendo un chart
CUANDO selecciona otro símbolo del dropdown (ej: ETHUSDT)
ENTONCES el chart se actualiza con datos de ETHUSDT
Y se mantiene el timeframe seleccionado
Y el header muestra el nuevo símbolo y precio
```

**Escenario 3: Actualización en tiempo real**
```gherkin
DADO que el usuario está viendo un chart
CUANDO pasa 1 segundo
ENTONCES la última vela se actualiza con el precio actual
Y el precio en el header se actualiza
Y el porcentaje de cambio se recalcula
```

**Escenario 4: Información en tooltip**
```gherkin
DADO que el usuario está viendo un chart
CUANDO pasa el cursor sobre una vela
ENTONCES se muestra un tooltip con:
  - Fecha y hora
  - Open, High, Low, Close
  - Volumen
  - Cambio porcentual de la vela
```

## Criterios Adicionales

- [ ] El chart debe cargar en menos de 2 segundos
- [ ] El chart debe ser responsive y funcionar en mobile
- [ ] Colores de velas: Verde para alcista, Rojo para bajista
- [ ] Crosshair debe seguir el cursor
- [ ] Logo watermark de Trading Platform en esquina

---

## Tareas Técnicas

**Backend:**
- [ ] BE-TRD-001: Crear endpoint GET /trading/candles/:symbol
- [ ] BE-TRD-002: Implementar servicio de conexión con Binance API
- [ ] BE-TRD-003: Implementar caché de datos con Redis (TTL: 60s)

**Frontend:**
- [ ] FE-TRD-001: Instalar y configurar Lightweight Charts
- [ ] FE-TRD-002: Crear componente TradingChart.tsx
- [ ] FE-TRD-003: Crear componente ChartHeader.tsx
- [ ] FE-TRD-004: Crear tradingStore con Zustand
- [ ] FE-TRD-005: Implementar conexión WebSocket para updates

**Tests:**
- [ ] TEST-TRD-001: Test unitario de transformación de datos
- [ ] TEST-TRD-002: Test de integración del endpoint candles
- [ ] TEST-TRD-003: Test E2E de carga del chart

---

## Dependencias

**Depende de:**
- [ ] US-AUTH-001: Autenticación - Estado: ✅ Completado

**Bloquea:**
- [ ] US-TRD-002: Cambiar timeframe
- [ ] US-TRD-003: Agregar indicador

---

## Notas Técnicas

**Endpoints involucrados:**
| Método | Endpoint | Descripción |
|--------|----------|-------------|
| GET | /trading/candles/:symbol | Obtener velas históricas |
| WS | /trading/stream/:symbol | Stream de actualizaciones |

**Entidades/Tablas:**
- No requiere persistencia (datos de API externa)

**Componentes UI:**
- `TradingChart`: Componente principal del gráfico
- `ChartHeader`: Header con símbolo, precio, cambio
- `TimeframeSelector`: Selector de intervalos
- `VolumePanel`: Panel de barras de volumen

---

## Definition of Ready (DoR)

- [x] Historia claramente escrita (quién, qué, por qué)
- [x] Criterios de aceptación definidos
- [x] Story points estimados
- [x] Dependencias identificadas
- [x] Sin bloqueadores
- [ ] Diseño/mockup disponible
- [ ] API spec disponible

## Definition of Done (DoD)

- [ ] Código implementado según criterios
- [ ] Tests unitarios escritos y pasando
- [ ] Tests de integración pasando
- [ ] Code review aprobado
- [ ] Documentación actualizada
- [ ] QA aprobado
- [ ] Desplegado en ambiente de pruebas

---

## Historial de Cambios

| Fecha | Cambio | Autor |
|-------|--------|-------|
| 2025-12-05 | Creación | Requirements-Analyst |

---

**Creada por:** Requirements-Analyst
**Fecha:** 2025-12-05
**Última actualización:** 2025-12-05