/ /

/ /

Configura el estilo y el tema del iframe

Puede configurar opciones del tablero dentro de un iframe agregando etiquetas de estilo en línea y agregando parámetros de query a la URL del tablero. Las etiquetas de estilo en línea te permiten especificar opciones de visualización como altura, anchura, color de segundo plano y anchura del borde. Los parámetros de query te permiten especificar un tema de visualización claro u oscuro.

Configurar el comportamiento de actualización y almacenamiento en caché de datos

Usa el autoRefresh query parameter para configurar el tablero para que se actualice automáticamente.

Utilice el parámetro de query maxDataAge para:

Determine el intervalo en el que el tablero se actualiza si autoRefresh es true.
Configura la edad máxima de los datos que se cargarán desde el caché al cargar o actualizar manualmente el tablero si autoRefresh es false o se omite.

Para aprender cómo Atlas Charts carga datos desde la caché al cargar o actualizar el tablero en función de los valores de autoRefresh y maxDataAge, consulta Comportamiento de actualización y cacheo de datos.

Use las opciones en el Unauthenticated pestaña en el Embed dashboard cuadro de diálogo para personalizar el valor de autoRefresh en el fragmento iframe.

Actualizar ejemplo

El siguiente iframe integra un tablero que se actualiza automáticamente cada 60 segundos, según lo definido por los parámetros de query autoRefresh=true y maxDataAge=60:

<iframe style="border: none;border-radius: 2px;box-shadow: 0 2px
10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="
{charts-host}/embed/dashboards?id=b3ca720f-4b4a-40b4-a726-e7dc0c49aa1c&
autoRefresh=true&maxDataAge=60"></iframe>

Considerations

La duración mínima de almacenamiento en caché es de 60 segundos. Si autoRefresh es true y se especifica un valor de maxDataAge inferior a 60, el tablero se actualiza cada 60 segundos.
Si especifica un valor de maxDataAge que no es un entero o es menor que -1, Charts devuelve un "error".

Especificar un tema de pantalla

Utiliza el parámetro de query theme para seleccionar un tema de visualización:

light: optimiza los ejes del tablero y el texto para la presentación sobre un fondo claro o blanco.
dark⚡️: optimiza los ejes y el texto del tablero para su presentación sobre un segundo plano oscuro o negro.

Seleccionar un valor theme solo actualiza el snippet de iframe que se utiliza para incrustar el panel en la aplicación. El tablero no se guarda con un valor theme. El tablero se renderiza con el tema claro por defecto. Los tableros integrados que no incluyen el parámetro del tema también se renderizan con el tema claro.

Nota

Elegir el tema light o dark no cambia la paleta de colores que usan los elementos de datos del tablero. Todas las barras y marcas se muestran utilizando la paleta predeterminada o la paleta personalizada que el autor del tablero elija.

Por ejemplo, si eliges que una barra del tablero se renderice en negro, elegir el tema dark no cambia el color de esta barra para hacerla más visible sobre un segundo plano oscuro.

Personalizar las opciones de visualización

Atlas Charts agrega propiedades de estilo en línea al snippet de iframe que copias desde la Interfaz de Usuario. Estas propiedades de estilo en línea agregan un color de fondo y un borde con una sombra de cuadro al tablero incrustado basado en el tema que seleccione:

light tema background: #F1F5F4
dark tema background: #12212C
border: none
border-radius: 2px
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2)
width: 640
height: 480

Cambia los valores de las propiedades de estilo en línea para cambiar la forma en que el tablero integrado se muestra en tu aplicación.

Color de segundo plano

Cambia el valor de la propiedad background a cualquier valor compatible con la propiedad CSS background para mostrar el tablero en ella. Ver Segundo plano en los MDN Web Docs para obtener más información.
Cambie la propiedad background a transparent para mostrar el tablero con un segundo plano transparente, permitiendo que el segundo plano de su aplicación se muestre a través del tablero.
Remueve la propiedad background para utilizar el color de fondo por defecto del tema que elijas:
#F1F5F4 para el tema light (por defecto), o
#12212C para el tema dark.

Borde del tablero

Modifica o elimina las siguientes propiedades para personalizar o eliminar el borde del tablero:

border
border-radius
box-shadow

Tema de Visualización

Puedes cambiar el valor del parámetro de query theme en el snippet del iframe después de pegarlo en tu aplicación. Si lo haces, debes ajustar las propiedades de estilo en línea del iframe para que coincidan con el tema que elijas.

Ejemplo de tema de visualización

Si cambia el theme de light a dark, ajuste el valor de la propiedad background en el snippet de iframe para mostrar el panel de control con un fondo oscuro.

Tablero usando el tema light con el tema por defecto light background de #F1F5F4:

Tablero mostrado usando el tema claro con estilo de tema claro.

haga clic para ampliar

Tablero usando el tema dark con el tema por defecto dark background de #12212C:

Tablero mostrado utilizando el tema oscuro con el estilo de tema oscuro.

haga clic para ampliar

Ejemplo de Iframe

El siguiente iframe integra un tablero con el tema dark y las propiedades de estilo en línea por defecto del tema dark. El código está formateado para ser legible.

<iframe style="
background: #21313C;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/charts-crllr/embed/dashboards?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=dark
"></iframe>

remover el logotipo de MongoDB

Utilice el parámetro de query attribution con el valor de false para mostrar su tablero incrustado sin el logo de MongoDB.

El siguiente iframe snippet renderiza un tablero que no muestra el logotipo de MongoDB:

<iframe
style="background: #FFFFFF;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/mongodb-charts-twsqq/embed/dashboards
?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=light&
attribution=false
"></iframe>

Volver

Métodos y opciones del SDK de tableros embebidos

filtro