/ /

/ /

Métodos y opciones del SDK de tableros embebidos

El SDK de Embedding proporciona el JavaScript createDashboard() método para renderizar un tablero dentro de una página web. Puede utilizar opciones para controlar muchos aspectos de un tablero (por ejemplo, su altura y anchura).

Ejemplo

El siguiente ejemplo muestra cómo usar el método createDashboard con opciones que especifican la altura y el ancho del tablero.

const dashboard = sdk.createDashboard({
  dashboardId: "8d4dff93-e7ca-4ccd-a622-e20e8a100197",
  baseUrl: "https://charts.mongodb.com/dashboards-embedding-examples-hmewt",
  height: 300,
  width: 400
});

Opciones de tablero embebido `createDashboard()`

El método createDashboard() toma las siguientes opciones:

Opción	Tipo	Descripción	¿Requerido?
`autoRefresh`	booleano	Indicador que especifica si el tablero se actualiza automáticamente. Si se omite, los tableros no se actualizan automáticamente. Usa esta opción con la opción `maxDataAge` para configurar la frecuencia de actualización automática del tablero.	no
`background`	string	Color de fondo para aplicar a tu tablero en lugar del fondo `theme`. Se puede especificar: Un código hexadecimal de color A CSS nombre de color Un segundo plano transparente usando el valor `transparent` Si se omite, el color de fondo será el `theme` actual por defecto: `#F1F5F4` para el tema `light`, o `#12212C` para el tema `dark`.	no
`baseUrl`	string	URL base del tablero.	Sí
`dashboardId`	string	string única que identifica el tablero.	Sí
`getUserToken`	Objeto	Función que devuelve un token JWT codificado en `base64`. Charts valida este token para determinar si se debe renderizar un tablero autenticado. Si activaste el acceso autenticado, Atlas Charts renderiza la vista autenticada del tablero solo si Charts puede validar el token utilizando el proveedores de autenticación configurados. Si el token no es válido, Charts no renderizar el tablero. Si activas el acceso no autenticado, Atlas Charts siempre renderiza la vista de tablero no autenticado. Para saber más, consulta Cómo incrustar una gráfica autenticada usando un proveedor personalizado de JWT.	no
`height`	Número	Altura del tablero. Si se omite, se establece por defecto la altura del contenedor. Si provees un valor sin unidades, se aplicará por defecto pixels (px).	no
`maxDataAge`	Número	Edad máxima de los datos que se cargarán desde la caché al cargar o actualizar el panel de control. Si se omite, Atlas Charts renderiza el tablero con datos de la caché solo si los datos tienen menos de una hora de antigüedad. Si los datos de la caché tienen más de una hora de antigüedad, Charts query la fuente de datos para obtener los datos más recientes, actualiza la caché y renderiza el tablero usando estos datos. Para aprender cómo los gráficos Atlas Charts cargan datos desde la caché al cargar o actualizar el tablero según los valores de `autoRefresh` y `maxDataAge`, consulta Comportamiento de actualización y almacenamiento en caché de datos.	no
`showAttribution`	booleano	Especifica si desea mostrar el MongoDB logotipo debajo del tablero. Por defecto, es `true`.	no
`theme`	string	Tema para usar en el tablero. Las siguientes opciones son válidas: `light` para un fondo claro con texto y elementos de tablero oscuros, o `dark` para un fondo oscuro con texto claro y elementos del tablero. Si se omite, se establece por defecto en `light`.	no
`width`	Número	Ancho del tablero. Si se omite, por defecto, se utiliza la anchura de su contenedor. Si se especifica un valor sin unidades, por defecto será píxeles (px).	no

Una vez que se haya creado el tablero, puede controlar la configuración del tablero llamando métodos en la instancia Dashboard devuelta por DashboardsEmbedSDK.createDashboard({ ... }).

Métodos de configuración del tablero

Después de crear un tablero, se puede controlar la configuración del tablero invocando métodos en la instancia de Dashboard que devuelve DashboardsEmbedSDK.createDashboard({ ... }).

`getChart('<chartID>')`

Recupera una gráfica específica del tablero incrustado utilizando la cadena chartId de la gráfica. Después de llamar a este método, puedes resaltar elementos o filtrar datos en la gráfica.

`setAutoRefresh()`

Bandera que especifica si el tablero se actualiza automáticamente. Si no se incluye, los tableros no se actualizan automáticamente.

Utiliza este método con el método setMaxDataAge para configurar la frecuencia de actualización del tablero.

`setMaxDataAge()`

Edad máxima de los datos para cargar desde la caché al cargar o actualizar el tablero. Si se omite, Atlas Charts renderiza el tablero con datos desde la caché solo si los datos tienen menos de una hora de antigüedad.

Si los datos de la caché tienen más de una hora de antigüedad, Charts query la fuente de datos para obtener los datos más recientes, actualiza la caché y renderiza el tablero usando estos datos.

Para aprender cómo los gráficos Atlas Charts cargan datos desde la caché al cargar o actualizar el tablero según los valores de setAutoRefresh y setMaxDataAge, consulta Comportamiento de actualización y almacenamiento en caché de datos.

`setTheme(theme: 'dark' | 'light')`

Tema actual del tablero integrado. Al configurar el tema en dark, asegúrate de que el color de segundo plano de tu tablero tenga un contraste adecuado para que la información sea visible.

Tip

Ejemplo de configuración del tablero

Los fragmentos de código de ejemplo configuran las siguientes opciones para una instancia de tablero llamada dashboard:

El tema para dark
La tasa de actualización automática cada 60 segundos

dashboard.setTheme("dark");
dashboard.setAutoRefresh(true);
dashboard.setMaxDataAge(60);

Volver

opciones

Configura el estilo y el tema del iframe

Ejemplo

Opciones de tablero embebido createDashboard()

Métodos de configuración del tablero

getChart('<chartID>')

setAutoRefresh()

setMaxDataAge()

setTheme(theme: 'dark' | 'light')

Tip

Ejemplo de configuración del tablero

Opciones de tablero embebido `createDashboard()`

`getChart('<chartID>')`

`setAutoRefresh()`

`setMaxDataAge()`

`setTheme(theme: 'dark' | 'light')`