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:
Determinar el intervalo en el que se actualiza el panel si
autoRefreshestrue.Configura la edad máxima de los datos que se cargarán desde el caché al cargar o actualizar manualmente el tablero si
autoRefreshesfalseo 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 cuadro de diálogo Embed dashboard para personalizar el valor autoRefresh en el fragmento de 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
autoRefreshestruey se especifica un valor demaxDataAgeinferior a60, el tablero se actualiza cada60segundos.Si especifica un
maxDataAgevalor que no es un entero o es menor-1que, Charts devuelve un error.
Especificar un tema de visualización
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.
Al elegir un valor theme, solo se actualiza el fragmento de iframe que se usa para incrustar el panel en la aplicación. El panel no se guarda con un valor theme. El panel se renderiza con el tema claro de forma predeterminada. Los paneles incrustados que no incluyen el parámetro de 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:
lighttemabackground:#F1F5F4darktemabackground:#12212Cborder:noneborder-radius:2pxbox-shadow:0 2px 10px 0 rgba(70, 76, 79, .2)width:640height: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
backgrounda cualquier valor compatible con la propiedad CSSbackgroundpara mostrar el tablero en ella. Ver fondo en los MDN Web Docs para obtener más información.Cambie la propiedad
backgroundatransparentpara mostrar el panel con un fondo transparente, permitiendo que el fondo de su aplicación se muestre a través del panel.Elimina la propiedad
backgroundpara utilizar el color de fondo predeterminado del tema que elijas:#F1F5F4para el temalight(por defecto), o#12212Cpara el temadark.
Borde del tablero
Modifica o elimina las siguientes propiedades para personalizar o eliminar el borde del tablero:
borderborder-radiusbox-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 theme de light a dark, ajuste el valor de la propiedad background en el fragmento de iframe para mostrar el panel sobre un fondo oscuro.
Panel de control que utiliza el tema light con el tema predeterminado light background de #F1F5F4:
Panel de control que utiliza el tema dark con el tema predeterminado dark background de #12212C:
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>