Join us at MongoDB.local London on 7 May to unlock new possibilities for your data. Use WEB50 to save 50%.
Register now >
Docs Menu
Docs Home
/ /

Filtrar Charts incrustados

Puede personalizar sus gráficos incrustados agregando:

  • Pre-filtros. Usa el preFilter opción con el SDK de Charts Embedding o agregar varios parámetros de query a tus URLs de iframes.

  • Filtros. Utilice la opción filter con el SDK de incrustación de gráficos o añada varios parámetros de consulta a las URL de sus iframes.

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:

  • Incruste gráficos en su aplicación web

Puede filtrar gráficos incrustados y gráficos en paneles incrustados.

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:

  1. Navega al tablero que contiene la gráfica donde deseas definir los campos filtrables.

  2. Para la gráfica deseada, haga clic en el botón y seleccione Embed Chart desde el menú desplegable.

  3. 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.

  4. Cuando haya seleccionado todos los campos deseados, haga clic en Save debajo del menú desplegable.

Los visualizadores 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/a espectador/a intenta usar un filtro para un campo no incluido en En la lista de Campos de filtro permitidos, Atlas Charts devuelve un error.

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

Considere 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.

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.

  • Aplicar filtros antes de la ejecución de la consulta para las consultas de gráficos 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.

Utilice el parámetro de consulta preFilter para filtrar datos antes de que comience a ejecutarse la consulta del gráfico, para el gráfico incrustado en un iframe.

Puede especificar un documento MQL como su preFilter parámetro de consulta siempre que los campos utilizados en su filtro estén en la lista de campos filtrables permitidos.

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.

Consideremos el siguiente escenario:

  • La vista de gráficos 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.

Utilice el parámetro de consulta filter para mostrar únicamente los datos que coincidan con un valor específico. MQL filtro en tu gráfica embebido 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.

Seleccione la pestaña adecuada para ver un ejemplo de cómo filtrar datos en un gráfico Unauthenticated y un gráfico Verified Signature:

Puede especificar un documento MQL como su filter parámetro de consulta siempre que los campos utilizados en su filtro estén en la lista de campos filtrables permitidos.

Tu filtro debe coincidir con el formato utilizado en una $match query y ser uno de los siguientes:

  • Consulta de nivel superior

    Ejemplo

    { "quantity": { $gte: 20 } }
  • O dentro de expresiones booleanas ( $and, $nor, $or)

    Ejemplo

    { $or: [ { quantity: { $lt: 20 } }, { price: 10 } ] }

Nota

Debes codificar en URL los caracteres especiales del parámetro de filtro.

La siguiente URL de iframe src representa un gráfico que solo muestra 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 filter codificado de {"imdb.rating":%20{$gte:%208}}. Descodificado, este filtro es:

{"imdb.rating": {$gte: 8}}

Especifica un documento MQL como tu parámetro de query filter.

Tu filtro debe coincidir con el formato utilizado en una consulta $match como se muestra en los siguientes ejemplos:

Ejemplo

{ "quantity": { $gte: 20 } }

Ejemplo

{ $or: [ { quantity: { $lt: 20 } }, { price: 10 } ] }

Cuando uses filtros en una firma verificada, las consultas MQL contienen caracteres que deben codificarse en URL antes de que el código del lado del servidor calcule la firma. Cuando Charts verifica la firma, vuelve a codificar el filtro en la URL utilizando el JavaScript encodeURIComponent función. Debes utilizar el mismo algoritmo de codificación para codificar tu 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, consulte Ejemplos de incrustación de gráficos Atlas en GitHub.

La siguiente URL de iframe src representa un gráfico que solo muestra 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 filter codificado de %7B%22imdb.rating%22%3A%20%7B%24gte%3A%208%7D%7D. Descodificado, este filtro es:

{"imdb.rating": {$gte: 8}}

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, debe especificar los campos que desea incluir en el prefiltro. El modal Embed Chart contiene un menú desplegable de campos para permitir el filtrado.

A continuación se utiliza la opción preFilter para representar solo documentos en Australia:

createChart({
baseUrl: '<your-base-url>',
chartId: '<your-chart-id>',
width: 500,
height: 500,
preFilter: { "address.country": "Australia" }
})

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 } }
})

Al incrustar un gráfico que requiere acceso Authenticated, puede usar la configuración Injected function para inyectar un documento de filtro de MongoDB específico para cada usuario que lo visualice. La función tiene acceso al token de su proveedor de autenticación de incrustación mediante context.token y puede filtrar los datos del gráfico según dicho token.

Este filtro garantiza que los espectadores de un gráfico incrustado vean solo sus propios datos, lo que resulta útil al incrustar gráficos 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 };
}

Volver

marco de incrustación

En esta página