Puedes personalizar tus gráficas integradas añadiendo:
Prefiltros. Utiliza la opción
preFiltercon el SDK de inserción de Charts o añade varios parámetros de consulta a las URL del iframe.filtro. Utiliza la opción
filtercon el SDK de inserción de Charts o añade varios parámetros de consulta a las URL del iframe.
Puedes utilizar tanto pre-filtros como filtros en el mismo tablero, aunque su uso es opcional. Si se especifica, los pre-filtros siempre se ejecutan después de las vistas de la gráfica y antes de las queries y filtros del tablero.
Nota
Para insertar gráficas de tus paneles, debes configurar las opciones de inserción en tus fuentes de datos. Para instrucciones, vea:
Puedes filtrar gráficas incrustadas y gráficas en tableros incrustados.
Especificar campos filtrables
Una Author especifica los campos que pueden incluirse en los pre-filtros y filtros establecidos por el código de la aplicación de incrustación o añadidos por los visualizadores de gráficas. El author de una gráfica puede limitar el acceso a la data permitiendo que solo ciertos campos sean prefiltrados o filtrados. Por defecto, no se permiten campos, lo que significa que la gráfica no puede prefiltrarse ni filtrarse hasta que explícitamente permitas al menos un campo.
Para definir los campos filtrables para pre-filtros y filtros:
Navega al tablero que contiene la gráfica donde deseas definir los campos filtrables.
Para la gráfica deseada, haz clic en el botón y selecciona Embed Chart del menú desplegable.
En la sección Allowed filter fields, utilice el menú desplegable para seleccionar en qué campos pueden los espectadores de la gráfica filtrar datos en la gráfica. También puedes ingresar manualmente valores para añadir campos que no se enumeran en el desplegable.
Nota
Esta opción solo aparece si ya tienes habilitado el acceso de inserción No autenticado o Autenticado.
Para especificar en qué campos los usuarios de la gráfica pueden prefiltrar o filtrar datos, tú puedes:
Utiliza el menú desplegable para seleccionar los campos.
Escribe manualmente los valores para agregar campos que no estén en la lista desplegable.
Seleccione Allow all fields in the data source used in this chart.
Cuando hayas seleccionado todos los campos deseados, haz clic en Save debajo del menú desplegable.
Las Visores de gráficas y las aplicaciones que renderizan la gráfica ahora pueden usar pre-filtros y filtros basados en los campos especificados para mostrar subconjuntos de los datos originales de la gráfica. Si un visor intenta utilizar un filtro para un campo que no esté incluido en la lista de Campos de filtro permitidos, Atlas Charts devuelve un error.
Especificar subcampos filtrables para campos con documentos incrustados
Cuando agregue un campo a la lista Allowed filter fields cuyo valor sea un documento incrustado, también debe especificar cada subcampo individual que desea permitir.
Ejemplo
Considera el siguiente documento:
{ "name": "Alice", "favorites" : { "color": "green", "animal": "turtle", "season": "autumn" } }
Si sólo añades el campo favorites a la lista de campos permitidos, no otorga permiso a los espectadores para filtrar cualquiera de los subcampos de favorites. En su lugar, puede añadir uno o más de los subcampos a la lista de forma individual especificando favorites.color, favorites.animal, o favorites.season.
Filtrar previamente datos en Charts incrustados en un iframe
Utiliza pre-filtros para gráficas y tableros integrados que tengan una gran cantidad de colecciones. Los pre-filtros se ejecutan en una etapa anterior en la etapa de la gráfica incrustada y te permiten:
Filtra los datos lo antes posible para reducir el tiempo de ejecución de la query.
Aplica los filtros antes de ejecutar el query en las gráficas que contienen agregaciones.
Los pre-filtros se comportan exactamente igual que los filtros y utilizan la misma sintaxis. Su única diferencia es que se ejecutan después de las vistas de la gráfica y antes del inicio de las queries y filtros de las gráficas. Para leer más sobre el orden de los segmentos de canalización, consulta pipeline de agregación.
Utiliza el parámetro de query preFilter para filtrar los datos antes de que la query de la gráfica comience a ejecutarse, para la gráfica incrustada en un iframe.
Puedes especificar un documento MQL como tu parámetro de consulta preFilter siempre y cuando los campos utilizados en tu filtro estén en la lista de campos filtrables permitidos.
Ejemplo de prefiltrado
El siguiente ejemplo ilustra cómo funcionan juntos las vistas de gráfica, las queries en la barra de query, los filtros y los pre-filtros.
Considera el siguiente escenario:
Charts View contiene:
[ { $project: { accommodates: 1, "bedrooms": 1, "address.country": 1 } } ] La barra de query contiene:
[ { $match: { accommodates: { $gte: 3 } } }, { $project: { address: 0 } } ] El filtro en una gráfica incrustada contiene:
{ "bedrooms": { $lte: 3 } } El prefiltro en una gráfica embebida contiene:
{ "address.country": "Australia" }
En el ejemplo anterior, antes de que la consulta de la gráfica comience a ejecutarse, se aplica el pre-filtro para buscar solo apartamentos en Australia. Después de eso, se ejecuta la query de la gráfica para identificar todos los departamentos que pueden alojar a más de tres personas.
Filtra datos en Charts incrustados en un iframe.
Utilice el parámetro query filter para mostrar solo los datos que coincidan con un filtro MQL especificado en su gráfica incrustada en un iframe.
Puede utilizar el parámetro de filter query tanto en los gráficos Unauthenticated como en los gráficos Verified Signature. El comportamiento de filtrado difiere con cada configuración de autenticación:
Con las gráficas no autenticadas, el autor de la gráfica especifica los campos que pueden incluirse en los filtros establecidos por el código de la aplicación de incrustación o añadidos por los espectadores de la gráfica. Para aprender a especificar campos filtrables, consulta Especificar campos filtrables.
Con las gráficas que requieren una Firmada Verificada, se pueden filtrar todos los campos del documento. Sin embargo, se debe generar el filtro en el código del servidor e incluirlo como parte de la carga útil firmada.
Sintaxis de filtro
Seleccione la pestaña adecuada para ver un ejemplo de cómo filtrar datos en una gráfica de Unauthenticated y en una gráfica de Verified Signature:
Puedes especificar un documento MQL como tu parámetro de consulta filter siempre y cuando los campos utilizados en tu filtro estén en la lista de campos filtrables permitidos.
Su filtro debe coincidir con el formato utilizado en una $match consulta y ser uno de los siguientes:
Top level query
Ejemplo
{ "quantity": { $gte: 20 } }
Nota
Debes codificar en URL los caracteres especiales del parámetro de filtro.
Ejemplo
El siguiente iframe src URL renderiza un gráfica que solo visualiza documentos con un imdb.rating mayor o igual a 8:
https://charts.mongodb.com/charts-atlasproject1-piocy/embed/charts? id=93584ddb-1115-4a12-afd9-5129e47bbb0d& filter={"imdb.rating":%20{$gte:%208}}& autoRefresh=60
La URL utiliza un parámetro codificado filter de {"imdb.rating":%20{$gte:%208}}. Decodificado, este filtro es:
{"imdb.rating": {$gte: 8}}
Especifica un documento MQL como tu parámetro de query filter.
Su filtro debe coincidir con el formato utilizado en una consulta como se muestra en los siguientes $match ejemplos:
Ejemplo
{ "quantity": { $gte: 20 } }
Ejemplo
{ $or: [ { quantity: { $lt: 20 } }, { price: 10 } ] }
Al usar filtros en una firma verificada, las queries MQL contienen caracteres que deben estar codificados en la URL antes de que el código del servidor calcule la firma. Cuando Charts verifica la firma, codifica otra vez el filtro mediante la función de JavaScript encodeURIComponent. Debe utilizar el mismo algoritmo de codificación para codificar su filtro.
Importante
Debes codificar los espacios en tu filtro como %20, en lugar de + o un espacio sin cambios.
Para ver cómo codificar correctamente un filtro MQL utilizando diferentes lenguajes de programación del lado del servidor, consulta Ejemplos de integración de Atlas Charts en GitHub.
Ejemplo
El siguiente iframe src URL renderiza un gráfica que solo visualiza documentos con un imdb.rating mayor o igual a 8:
https://charts.mongodb.com/charts-atlasproject1-piocy/embed/charts? id=93584ddb-1115-4a12-afd9-5129e47bbb0d& timestamp=1564156636& expires-in=300& filter=%7B%22imdb.rating%22%3A%20%7B%24gte%3A%208%7D%7D& autoRefresh=60& signature=8e0d92b33934c928f6c6974e2f0102ace77f56d851cb0d33893e84c359ab1043
La URL utiliza un parámetro codificado filter de %7B%22imdb.rating%22%3A%20%7B%24gte%3A%208%7D%7D. Decodificado, este filtro es:
{"imdb.rating": {$gte: 8}}
Filtración previa de datos en Charts integrados con el SDK
Puedes agregar un preFiltro a una gráfica incrustada con la opción preFilter. El prefiltrado permite al autor de la gráfica ejecutar un filtro después de las vistas de la gráfica y antes de la ejecución de la query de la gráfica y los filtros de la gráfica.
En el modal Embed Chart, debes especificar los campos que quieres incluir en el pre-filtro. La modal Embed Chart contiene un menú desplegable de campos sobre los que permitir el filtrado.
Lo siguiente usa la opción preFilter para representar solamente documentos en Australia:
createChart({ baseUrl: '<your-base-url>', chartId: '<your-chart-id>', width: 500, height: 500, preFilter: { "address.country": "Australia" } })
Filtrar datos en Charts integrados con el SDK
Puedes agregar un filtro a una gráfica incrustada con la opción filter. El filtrado permite al autor de la gráfica mostrar solo los datos en la gráfica incrustada que coinciden con un filtro MQL especificado.
En la ventana emergente Embed Chart, debes especificar los campos que deseas incluir en el filtro. El Embed Chart modal contiene un menú desplegable de campos en los que permitir el filtrado.
El siguiente usa la opción filter para representar solo los documentos en los que el campo total es mayor que 100:
createChart({ baseUrl: '<your-base-url>', chartId: '<your-chart-id>', width: 500, height: 500, filter: { "total": { "$gt": 100 } } })
Inyectar filtros específicos del usuario
Cuando incrustes una gráfica que requiere acceso Authenticated, puedes usar la configuración Injected function para inyectar un documento de filtro de MongoDB específico para cada usuario que visualice la gráfica. La función tiene acceso al token de su proveedor de autenticación de Embedding a través de context.token, y puede filtrar los datos de la gráfica según el token.
Este filtro garantiza que los espectadores de una gráfica incrustada solo vean sus propios datos, lo cual es útil al incrustar gráficas con información potencialmente confidencial.
Para inyectar un filtro específico para cada usuario, en la pestaña Authenticated del diálogo Embed Chart, configura el ajuste Injected function en On. Especifique una función y haga clic en Save.
Ejemplo
La siguiente función de filtro solo muestra los datos en los que el campo ownerId de un documento coincide con el valor del campo sub del token del Proveedor de Autenticación de Embedding:
function getFilter(context) { return { ownerId: context.token.sub }; }