# ML Chart Overlays

Componentes de React para visualizar predicciones ML en gráficos de trading usando lightweight-charts.

## Componentes

### 1. MLPredictionOverlay
Renderiza predicciones de precio ML como una línea sobre el gráfico.

**Props:**
- `chartRef`: Referencia al chart de lightweight-charts
- `predictions`: Array de predicciones ML
- `visible`: Mostrar/ocultar overlay (default: true)
- `lineColor`: Color de la línea (default: '#3b82f6')
- `lineWidth`: Grosor de línea (default: 2)

### 2. SignalMarkers
Renderiza marcadores de señales BUY/SELL en el gráfico.

**Props:**
- `chartRef`: Referencia al chart de lightweight-charts
- `candleSeriesRef`: Referencia a la serie de velas
- `signals`: Array de señales
- `visible`: Mostrar/ocultar markers (default: true)

### 3. ICTConceptsOverlay
Renderiza conceptos ICT (Order Blocks, FVG, Liquidity) como rectángulos.

**Props:**
- `chartRef`: Referencia al chart de lightweight-charts
- `ictConcepts`: Array de conceptos ICT
- `visible`: Mostrar/ocultar overlay (default: true)
- `colors`: Objeto con colores por tipo de concepto

## Hook

### useMlOverlayData
Hook personalizado para obtener datos ML desde el backend con caché automático.

**Opciones:**
- `symbol`: Símbolo del activo (ej: 'EURUSD')
- `timeframe`: Temporalidad (ej: '1h', '4h')
- `enabled`: Activar/desactivar fetch (default: true)

**Retorna:**
- `predictions`: Array de predicciones
- `signals`: Array de señales
- `ictConcepts`: Array de conceptos ICT
- `isLoading`: Estado de carga
- `error`: Error si existe
- `refetch`: Función para refetch manual

## Ejemplo de Uso

```tsx
import { useRef } from 'react';
import { IChartApi, ISeriesApi } from 'lightweight-charts';
import { useMlOverlayData } from '@/hooks/charts/useMlOverlayData';
import {
  MLPredictionOverlay,
  SignalMarkers,
  ICTConceptsOverlay,
} from '@/modules/trading/components/charts/overlays';

function TradingChart() {
  const chartRef = useRef<IChartApi>(null);
  const candleSeriesRef = useRef<ISeriesApi<'Candlestick'>>(null);

  const { predictions, signals, ictConcepts, isLoading } = useMlOverlayData({
    symbol: 'EURUSD',
    timeframe: '1h',
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      {/* Tu componente de chart aquí */}

      <MLPredictionOverlay
        chartRef={chartRef}
        predictions={predictions}
        visible={true}
      />

      <SignalMarkers
        chartRef={chartRef}
        candleSeriesRef={candleSeriesRef}
        signals={signals}
        visible={true}
      />

      <ICTConceptsOverlay
        chartRef={chartRef}
        ictConcepts={ictConcepts}
        visible={true}
      />
    </div>
  );
}
```

## API Backend

Los componentes esperan que el backend exponga el siguiente endpoint:

```
GET /api/ml/predictions/:symbol/:timeframe
```

**Response:**
```json
{
  "symbol": "EURUSD",
  "timeframe": "1h",
  "predictions": [
    {
      "timestamp": 1706400000000,
      "price": 1.0850,
      "confidence": 0.85,
      "type": "buy"
    }
  ],
  "signals": [
    {
      "time": 1706400000000,
      "position": "belowBar",
      "color": "#10b981",
      "text": "BUY",
      "shape": "arrowUp"
    }
  ],
  "ictConcepts": [
    {
      "type": "OrderBlock",
      "timeStart": 1706400000000,
      "timeEnd": 1706403600000,
      "priceTop": 1.0860,
      "priceBottom": 1.0840
    }
  ],
  "generatedAt": "2026-01-28T10:00:00Z"
}
```

## Notas

- Los componentes usan TanStack Query para caché automático (60s stale time)
- Las timestamps deben estar en milisegundos
- Los overlays se limpian automáticamente al desmontar
- Los colores predeterminados son:
  - OrderBlock: Azul (#3b82f6)
  - FVG: Amarillo (#fbbf24)
  - Liquidity: Naranja (#f97316)
