# Paneles y vistas dinámicas

- Human documentation: [https://docs.univer.ai/es-ES/guides/bases/features/dashboard](https://docs.univer.ai/es-ES/guides/bases/features/dashboard)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/bases/features/dashboard.md](https://docs.univer.ai/es-ES/guides/bases/features/dashboard.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [bases/features/dashboard.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/features/dashboard.es-ES.mdx)

---

#### Package metadata

```json
{
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/bases-dashboard",
      "facade": "@univerjs-pro/bases-dashboard/facade",
      "locale": "@univerjs-pro/bases-dashboard/locale/es-ES"
    },
    {
      "client": "@univerjs-pro/bases-dashboard-ui",
      "locale": "@univerjs-pro/bases-dashboard-ui/locale/es-ES"
    }
  ],
  "license": true,
  "server": false
}
```

Una vista dinámica resume una tabla, por ejemplo los ingresos por región. Un panel combina gráficos, filtros, texto e imágenes en una página. Estas funciones se proporcionan mediante plugins independientes; la visualización local no requiere colaboración.

## Registrar los plugins

Regístralos después de los plugins principales y de interfaz de Bases:

#### npm

```bash
npm install @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
```

#### pnpm

```bash
pnpm add @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
```

#### yarn

```bash
yarn add @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
```

#### bun

```bash
bun add @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
```

```ts
import { UniverBaseDashboardPlugin } from '@univerjs-pro/bases-dashboard'
import { UniverBaseDashboardUIPlugin } from '@univerjs-pro/bases-dashboard-ui'

import '@univerjs-pro/bases-dashboard/facade'

univer.registerPlugin(UniverBaseDashboardPlugin)
univer.registerPlugin(UniverBaseDashboardUIPlugin)
```

Combina los recursos de idioma de los paquetes añadidos en tu aplicación. Los plugins declaran dependencias de gráficos, documentos y formas. Registra primero esas dependencias si necesitas personalizar su configuración.

## Crear una vista dinámica de ingresos

Este ejemplo crea una tabla y agrupa los ingresos por región:

```ts
import { PivotTableFiledAreaEnum } from '@univerjs-pro/engine-pivot'

const base = univerAPI.getActiveBase()
if (!base) throw new Error('Open a Base first')

const table = base.insertTable('Orders', { primaryFieldName: 'Region' })
const revenue = table.addField('Revenue', univerAPI.Enum.BaseFieldType.Number)
table.addRecords([
  { values: { [table.getPrimaryFieldId()]: 'East', [revenue.getId()]: 120 } },
  { values: { [table.getPrimaryFieldId()]: 'West', [revenue.getId()]: 80 } },
])

const pivot = base.createPivotView('Revenue by region', table.getId())
const pivotTable = pivot.getPivotTable()
pivotTable.addFieldWithSourceId(table.getPrimaryFieldId(), PivotTableFiledAreaEnum.Row)
pivotTable.addFieldWithSourceId(revenue.getId(), PivotTableFiledAreaEnum.Value)
pivot.updateConfig({ pivot: pivotTable.toJSON(), displayMode: 'chart-and-table' })

const baseUI = univerAPI.getBaseUI()
await baseUI.activateTable(table.getId())
await baseUI.activateView(pivot.getId())
```

`getPivotTable()` devuelve un modelo de cálculo independiente. Llama a `updateConfig()` después de editarlo para guardar los cambios en la Base. `displayMode` admite `table`, `chart` o `chart-and-table`.

## Añadir su gráfico a un panel

```ts
const dashboard = base.createDashboard('Sales overview')
dashboard.addPivotChart(table.getId(), pivot.getId(), {
  title: 'Revenue by region',
  layout: { column: 0, row: 0, columnSpan: 6, rowSpan: 6 },
})
```

El gráfico referencia una vista dinámica existente. Esa vista gestiona los campos de agregación y los cálculos; el panel gestiona la distribución y la presentación. Abre el nuevo panel desde la barra lateral de Bases.

Usa `addTableFilter()`, `addText()`, `addImage()` y `addFormulaShape()` para añadir filtros, texto enriquecido, imágenes y formas con fórmulas. Lee los widgets con `getWidgets()` y elimínalos con `removeWidget()`.

## Guardado y permisos

Guarda la instantánea completa con `base.save()`, incluidos los recursos del panel. Guardar solo los registros de la tabla pierde esta configuración. Registra los plugins del panel antes de restaurar una instantánea.

Los paneles y las vistas dinámicas exponen `getPermission()` para configurar individualmente el modo de solo lectura; consulta [Permisos](https://docs.univer.ai/es-ES/guides/bases/features/core/permissions.md). La API completa está en [Bases Facade](https://docs.univer.ai/es-ES/reference/facade/base.md).