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? |
|---|---|---|---|
| booleano | Indicador que especifica si el tablero se actualiza automáticamente. Si se omite, los tableros no se actualizan automáticamente. Utilice esta opción con la opción | no |
| string | Color de fondo para tu panel en lugar del fondo
Si se omite, el color de fondo predeterminado será el
| no |
| string | URL base del panel de control. | Sí |
| string | string única que identifica el tablero. | Sí |
| Objeto | Función que devuelve un token JWT codificado en 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 muestra el panel. Si habilitó el acceso no autenticado, Atlas Charts siempre mostrará la vista del panel no autenticado. Para obtener más información, consulte Incrustar un gráfico autenticado con un proveedor JWT personalizado. | no |
| 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 |
| 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 | no |
| booleano | Especifica si desea mostrar el
MongoDB logotipo debajo del tablero. Por defecto, es | no |
| string | Tema para usar en el panel. Las siguientes opciones son válidas:
Si se omite, se establece por defecto en | no |
| 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()
Marca que especifica si el panel se actualiza automáticamente. Si se omite, los paneles no se actualizan automáticamente.
Utiliza este método con el método setMaxDataAge para configurar la frecuencia de actualización del tablero.
setMaxDataAge()
Antigüedad máxima de los datos que se cargan desde la caché al cargar o actualizar el panel. Si se omite, Atlas Charts renderiza el panel con datos de la caché solo si estos 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.
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
darkLa frecuencia de actualización automática es cada 60 segundos.
dashboard.setTheme("dark"); dashboard.setAutoRefresh(true); dashboard.setMaxDataAge(60);