El SDK de incrustación proporciona JavaScript createDashboard()
Método para representar un panel dentro de una página web. Puedes usar opciones para controlar diversos aspectos del panel (por ejemplo, su altura y anchura).
Ejemplo
El siguiente ejemplo demuestra cómo utilizar 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 del panel createDashboard() integrado
El método createDashboard() toma las siguientes opciones:
Opción | Tipo | Descripción | ¿Obligatorio? |
|---|---|---|---|
| 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 | Cadena única que identifica el tablero. | sí |
| Objeto | Función que devuelve un Si habilitó el acceso autenticado, Atlas Charts muestra la vista del panel autenticado solo si Charts puede validar el token usando 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 panel. Si se omite, se toma como valor predeterminado la altura de su contenedor. Si se proporciona un valor sin unidades, se toma como valor predeterminado píxeles (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 memoria caché tienen más de una hora de antigüedad, Charts consulta la fuente de datos para obtener los datos más recientes, actualiza la memoria caché y representa el panel usando estos datos. Para saber cómo Atlas Charts carga datos desde la memoria caché al cargar o actualizar el panel en función de los | no |
| booleano | Especifica si se debe mostrar el
MongoDB Logotipo debajo del panel. El valor predeterminado es | no |
| string | Tema para usar en el panel. Las siguientes opciones son válidas:
Si se omite, el valor predeterminado es | no |
| Número | Ancho del panel. Si se omite, se toma como valor predeterminado el ancho de su contenedor. Si se especifica un valor sin unidades, se toma como valor predeterminado píxeles (px). | no |
Una vez creado el panel, puede controlar su configuración llamando a los métodos en la instancia Dashboard devuelta por DashboardsEmbedSDK.createDashboard({ ... }).
Métodos de configuración del panel de control
Después de crear un panel, puede controlar la configuración del panel llamando a los métodos en la instancia Dashboard devuelta por DashboardsEmbedSDK.createDashboard({ ... }).
getChart('<chartID>')
Recupera un gráfico específico del panel integrado mediante la chartId cadena. Tras llamar a este método, puede resaltar elementos o filtrar datos en el gráfico.
setAutoRefresh()
Marca que especifica si el panel se actualiza automáticamente. Si se omite, los paneles no se actualizan automáticamente.
Utilice este método con el método setMaxDataAge para configurar la frecuencia con la que se actualiza el panel.
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 memoria caché tienen más de una hora de antigüedad, Charts consulta la fuente de datos para obtener los datos más recientes, actualiza la memoria caché y representa el panel usando estos datos.
Para saber cómo Atlas Charts carga datos desde la memoria caché al cargar o actualizar el panel en función de los setAutoRefresh setMaxDataAge valores y, consulte Comportamiento de actualización y almacenamiento en caché de datos.
setTheme(theme: 'dark' | 'light')
Tema actual del panel integrado. Al configurar el tema en dark, asegúrese de que el color de fondo del panel tenga el contraste adecuado para que la información sea visible.
Ejemplo de configuración del panel de control
Los fragmentos de código de ejemplo configuran las siguientes opciones para una instancia de tablero llamada dashboard:
El tema a
darkLa frecuencia de actualización automática es cada 60 segundos
dashboard.setTheme("dark"); dashboard.setAutoRefresh(true); dashboard.setMaxDataAge(60);