Puedes configurar las opciones del panel dentro de un iframe añadiendo etiquetas de estilo en línea y parámetros de consulta a la URL del panel. Las etiquetas de estilo en línea te permiten especificar opciones de visualización como la altura, el ancho, el color de fondo y el ancho del borde. Los parámetros de consulta te permiten especificar un tema de visualización claro u oscuro.
Configurar el comportamiento de actualización y almacenamiento en caché de datos
Uso el autoRefresh Parámetro de consulta para configurar el tablero para que se actualice automáticamente.
Utilice el parámetro de consulta maxDataAge para:
Determinar el intervalo en el que se actualiza el panel si
autoRefreshestrue.Configure la edad máxima de los datos a cargar desde la memoria caché al cargar o actualizar manualmente el panel si
autoRefreshesfalseo se omite.
Para saber cómo Atlas Charts carga datos desde la memoria caché al cargar o actualizar el panel según los valores autoRefresh y maxDataAge, consulte
Comportamiento de actualización y almacenamiento en caché de datos.
Utilice 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.
Ejemplo de actualización
El siguiente iframe incorpora un panel que se actualiza automáticamente cada 60 segundos según lo definido por los parámetros de consulta 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 la caché es de 60 segundos. Si
autoRefreshestruey especifica un valor demaxDataAgemenor que60, el panel 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
Utilice el parámetro de consulta theme para seleccionar un tema de visualización:
light: optimiza los ejes y el texto del tablero para su presentación sobre un fondo claro o blanco.dark: optimiza los ejes y el texto del tablero para su presentación sobre un fondo 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 panel. Todas las barras y marcas se muestran con la paleta predeterminada o la paleta personalizada que elija el autor del panel.
Por ejemplo, si elige que la barra del panel se represente en negro, elegir el tema dark no cambia el color de esta barra para hacerla más visible contra un fondo oscuro.
Personalizar las opciones de visualización
Atlas Charts añade propiedades de estilo en línea al fragmento de iframe que se copia desde la interfaz de usuario. Estas propiedades añaden un color de fondo y un borde con una sombra de cuadro al panel integrado según el tema seleccionado:
lighttemabackground:#F1F5F4darktemabackground:#12212Cborder:noneborder-radius:2pxbox-shadow:0 2px 10px 0 rgba(70, 76, 79, .2)width:640height:480
Cambie los valores de las propiedades de estilo en línea para cambiar cómo se muestra el panel integrado en su aplicación.
Color de fondo
Cambie el valor de la propiedad
backgrounda cualquier valor admitido por la propiedad CSSbackgroundpara mostrar el panel de control en relación con ella. Consulte fondo en los documentos web de MDN 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(predeterminado), o#12212Cpara el temadark.
Borde del tablero
Modifique o elimine 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 consulta theme en el fragmento de 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 panel con el tema dark y las propiedades de estilo en línea predeterminadas del tema dark. El código está formateado para facilitar su lectura.
<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 consulta attribution con un valor de false para mostrar su panel integrado sin el logotipo MongoDB.
El siguiente fragmento de iframe representa un panel que no muestra el logotipo 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>