# Integración Externa con NexaReport

## Visión General

NexaReport puede usarse en cualquier aplicación externa (Vue, React, Angular, HTML puro) pasando los datos del reporte via JSON. No requiere conexión a NexaBase para funcionar.

## Uso Básico

### 1. Instalar

```bash
npm install nexabase-report
```

### 2. Registrar el componente

```ts
import { registerNexaReport } from 'nexabase-report';
import 'nexabase-report/style.css';

registerNexaReport();
```

### 3. Usar en tu app

```vue
<template>
  <nexa-viewer 
    :definition="reportDefinition" 
    :data="reportData" 
    minimal 
  />
</template>

<script setup>
import { ref } from 'vue';

// Definición del reporte (puede venir de un archivo JSON o API)
const reportDefinition = ref({
  metadata: { name: 'Mi Reporte', version: '1.0', createdAt: '2024-01-15' },
  layout: {
    page: { format: 'A4', orientation: 'portrait' },
    bands: [ /* ... */ ]
  },
  dataSources: [{ id: 'ds1', alias: 'main', collection: '', enabled: true }]
});

// Datos del reporte
const reportData = ref([
  { id: 1, nombre: 'Producto A', precio: 100, cantidad: 5 },
  { id: 2, nombre: 'Producto B', precio: 200, cantidad: 3 }
]);
</script>
```

## Formato de Datos

### Single DataSource (array simple)

```json
[
  { "id": 1, "nombre": "Juan Pérez", "email": "juan@mail.com" },
  { "id": 2, "nombre": "María López", "email": "maria@mail.com" }
]
```

### Multiple DataSources (objeto con alias)

```json
{
  "clientes": [
    { "id": 1, "nombre": "Juan Pérez", "email": "juan@mail.com" },
    { "id": 2, "nombre": "María López", "email": "maria@mail.com" }
  ],
  "pedidos": [
    { "id": 101, "cliente_id": 1, "monto": 1500, "fecha": "2024-03-01" },
    { "id": 102, "cliente_id": 2, "monto": 2300, "fecha": "2024-03-02" }
  ]
}
```

## API del Viewer

### Métodos

```ts
const viewer = document.querySelector('nexa-viewer');

// Exportar a diferentes formatos
await viewer.exportPdf();
await viewer.exportExcel();
await viewer.exportWord();
await viewer.exportCsv();

// Actualizar datos dinámicamente
viewer.updateData({
  clientes: [ /* nuevos datos */ ],
  pedidos: [ /* nuevos datos */ ]
});

// Obtener campos disponibles del diccionario
const fields = viewer.getDictionaryFields();
// [{ alias: 'clientes', fields: [{ name: 'id', type: 'number' }, ...] }]

// Navegación de páginas
viewer.goToPage(2);
console.log(viewer.currentPage);  // 2
console.log(viewer.totalPages);   // 5
```

### Eventos

```vue
<nexa-viewer 
  :definition="report"
  @data-request="(alias) => fetch(`/api/data/${alias}`).then(r => r.json())"
/>
```

## Diccionario Manual

Puedés definir la estructura de datos sin conexión a NexaBase:

```json
{
  "dictionary": {
    "dataSources": [
      {
        "alias": "clientes",
        "label": "Tabla de Clientes",
        "fields": [
          { "name": "id", "type": "number", "label": "ID", "primaryKey": true },
          { "name": "nombre", "type": "string", "label": "Nombre Completo" },
          { "name": "email", "type": "string", "label": "Email" },
          { "name": "fecha_registro", "type": "date", "label": "Fecha de Registro" }
        ]
      }
    ],
    "relationships": [
      {
        "from": "pedidos.cliente_id",
        "to": "clientes.id",
        "type": "many-to-one"
      }
    ]
  }
}
```

## Variables de Sistema

Disponibles en bindings `{{...}}`:

| Variable | Descripción | Ejemplo |
|----------|-------------|---------|
| `{{Page}}` | Número de página actual | `1` |
| `{{TotalPages}}` | Total de páginas | `5` |
| `{{Now}}` | Fecha y hora actual | `2024-01-15 14:30:00` |
| `{{Today}}` | Fecha actual | `2024-01-15` |
| `{{ReportName}}` | Nombre del reporte | `Ventas Mensuales` |
| `{{RowNumber}}` | Número de fila | `1` |

## Ejemplo Completo

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/nexabase-report/dist/nexabase-report.umd.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexabase-report/dist/style.css">
</head>
<body>
  <h1>Mi Reporte</h1>
  <nexa-viewer id="viewer" minimal></nexa-viewer>

  <script>
    NexaReport.registerNexaReport();

    const viewer = document.getElementById('viewer');

    // Cargar definición del reporte
    fetch('/api/reports/ventas.json')
      .then(r => r.json())
      .then(def => { viewer.definition = def; });

    // Cargar datos
    fetch('/api/data/ventas?desde=2024-01-01')
      .then(r => r.json())
      .then(data => { viewer.data = data; });
  </script>
</body>
</html>
```

## Tipos de Datos Soportados

| Tipo JSON | Tipo en Diccionario | Icono |
|-----------|---------------------|-------|
| `string` | `string` | 🏷️ |
| `number` | `number` | #️⃣ |
| `boolean` | `boolean` | ☑️ |
| `string` (formato fecha) | `date` | 📅 |
| `object` | `object` | 📦 |
| `array` | `array` | 📋 |

## Tips

1. **Datos grandes**: Usá paginación en tu API y pasá los datos por páginas
2. **Actualización en tiempo real**: Usá `viewer.updateData()` para refrescar sin recargar
3. **Validación**: Usá `viewer.getDictionaryFields()` para validar bindings antes de renderizar
4. **Export**: Los métodos de export funcionan sin conexión a internet
