/ /

/ /

Comienza con el Embedding SDK

Puede incrustar una gráfica o tablero en una aplicación web con la Incorporación de SDK que permite ajustes más flexibles de la configuración y la representación.

Requisitos previos

Se debe ser un autor de panel para activar la integración de una gráfica.
Crea un nuevo tablero
Crear un gráfico

Procedimientos

Habilitar incrustación

Selecciona un tablero.

Desde Dashboards En la página, seleccione el panel que contiene el gráfico que desea integrar. Para obtener instrucciones sobre cómo acceder a los paneles, consulte Paneles.

Seleccione una gráfica.

Desde el panel, haga clic en la esquina superior derecha del gráfico para acceder a su información de incrustación. Seleccione Embed chart en el menú desplegable.

Nota

Si un gráfico está en un panel con la función de incrustación habilitada, la opción Embed Chart se habilita automáticamente. Por lo tanto, no se puede seleccionar la opción Embed chart para gráficos en paneles con la función de incrustación habilitada.

Active el uso compartido externo en la fuente de datos.

Si ya has habilitado el uso compartido externo en el origen de datos que utiliza esta gráfica, omite este paso. Si aún no has activado la integración en la fuente de datos, puedes hacerlo ahora. Haz clic en el enlace Configure external sharing.

Selecciona la pestaña Unauthenticated en la ventana de diálogo.

haga clic para ampliar

Se puede establecer Enable unauthenticated access en On.

(Opcional) Especifique campos filtrables para su gráfico.

Especifica los campos en los que los espectadores de la gráfica pueden filtrar los datos. Por defecto, no hay campos especificados, lo que significa que no se puede filtrar la gráfica hasta que se permita explícitamente al menos un campo.

Alternativamente, puedes especificar todos los campos en la gráfica seleccionando Allow all fields in the data source used in this chart.

Para obtener más información sobre los campos filtrables, consulte Especificar campos filtrables.

Seleccione el panel Javascript SDK.

Copia el Charts Base URL y el Chart ID.

Necesitarás los valores de Charts Base URL y Chart ID en el código de tu aplicación web.

Selecciona un tablero.

En la página Dashboards, selecciona el tablero que contiene la gráfica que deseas integrar. Para obtener instrucciones sobre cómo navegar hasta los tableros, consulta Tableros.

Seleccione una gráfica.

Desde el panel, haga clic en la esquina superior derecha del gráfico para acceder a su información de incrustación. Seleccione Embed chart en el menú desplegable.

Nota

Habilitar el uso compartido externo en la fuente de datos

Selecciona la pestaña Authenticated en la ventana de diálogo.

haga clic para ampliar

Se puede establecer Enable authenticated access en On.

(Opcional) Especifique una función de filtro para inyectar por usuario.

Puede especificar una función para inyectar un documento de filtro de MongoDB para cada usuario que visualice el gráfico. Esto resulta útil para representar gráficos específicos del usuario.

Ejemplo

La siguiente función de filtro solo renderiza datos donde la ownerId el campo 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 };
}

Tip

Para obtener más información sobre cómo inyectar filtros por usuario, consulta Inyecta Filtros Específicos para Usuarios.

(Opcional) Especifique campos filtrables para su gráfico.

Tip

Para obtener más información sobre los campos filtrables, consulte Especificar campos filtrables.

Copia el Chart Base URL y Chart ID

Usa estos valores en el código de tu aplicación junto con los atributos de tu proveedor de autenticación embebida para incrustar tu gráfica.

Configurar proveedores de autenticación para integración

Vaya Charts a.

Si Atlas Charts aún no está activado, haz clic en Visualization bajo el encabezado Services en la barra lateral de la interfaz de usuario de Atlas.

Atlas lanza una instancia de Charts vinculada a tu proyecto.

Ir a la página Embedded Visualizations.

Haga clic en Embedded Visualizations debajo del encabezado Services en la barra lateral Visualization.

La Se muestra la página de Visualizaciones insertadas.

Go a la vista Authentication Settings.

Nota

Debe ser un propietario del proyecto para acceder a la página Authentication Settings. Como usuario que no es administrador, todavía puede usar gráficas integradas, pero debe obtener una clave de un propietario del proyecto.

Haz clic en la pestaña Authentication Settings.

Se muestra la pestaña Configuración de autenticación.

Agregue el proveedor de autenticación.

Desde la sección Authentication providers, haz clic en Add.
En el campo Name, introduce un nombre descriptivo para el proveedor.
De la lista Provider, seleccione el tipo de proveedor que desea agregar.

Configurar gráficos para verificar tokens del proveedor.

Los valores que debes ingresar difieren según el proveedor que seleccionaste:

Google
En el campo Client ID, introduce el ID de cliente de la API de Google de tu aplicación, en el siguiente formato:
```
<prefix>.apps.googleusercontent.com
```

JWT personalizado

Proporciona los siguientes valores:

Campo

Valor

Algoritmo de firma

Algoritmo de cifrado con el que la La firma de JWT está codificada.

Debe ser uno de los siguientes:

Clave de firma

Secreto o clave utilizada para validar la firma de JWT. Si los tokens no están firmados, Charts los considera inválidos. Si proporcionas una clave incorrecta, Charts no puede verificar las firmas de tokens y las considera inválidas.

El valor que debes proporcionar depende de Signing Algorithm:

HS256Ingrese la clave secreta utilizada para firmar el JWT.

RS256: Seleccione JWK or JWKS URL o PEM Public Key.

Si JWK or JWKS URL selecciona, Charts recupera la clave del archivo JWK o JWKS en la URL especificada. Charts utiliza la clave para validar el token web JSON. Si el archivo contiene varias claves, Charts prueba cada una hasta encontrar una coincidencia. Introduzca la URL que contiene el archivo JWK o JWKS.

Si PEM Public Key selecciona, Charts usará la clave pública especificada para verificar el token web JSON. Introduzca la clave pública del par de claves utilizado para firmar el JWT. La clave pública debe estar en formato PEM, como se muestra en el siguiente ejemplo:

Audiencia (Opcional)

Declaración de audiencia que debe estar presente en el JWT para que Charts lo considere válido.

Haga clic en Save.

Selecciona un tablero.

Desde la página Dashboards, selecciona el tablero para incrustar. Para obtener instrucciones sobre cómo navegar a los tableros, consulta Tableros.

Seleccione Embed.

Desde el tablero, haz clic en en la parte superior derecha del tablero para acceder a su información de integración. Selecciona Embed en el menú desplegable.

Active el uso compartido externo en la fuente de datos.

Si ya ha habilitado el uso compartido externo en la fuente de datos que usa este panel, omita este paso. Si aún no ha habilitado la incrustación en la fuente de datos, puede hacerlo ahora. Haga clic en el enlace Configure.

Selecciona la pestaña Unauthenticated en la ventana de diálogo.

Se puede establecer Enable unauthenticated access en On.

(Opcional) Especifique campos filtrables para su panel decontrol.

Especifica los campos sobre los que los usuarios del tablero pueden filtrar datos. Por defecto, no se especifican campos, lo que significa que el tablero no se puede filtrar hasta que permitas explícitamente al menos un campo.

Alternativamente, puede especificar todos los campos en su panel seleccionando Allow all fields in the data source used in this dashboard.

Para obtener más información sobre los campos filtrables, consulte Especificar campos filtrables.

Seleccione el panel Javascript SDK.

Copia y guarda la URL base.

Copie y guarde el ID del tablero.

Selecciona un tablero.

Desde la página Dashboards, selecciona el tablero para incrustar. Para obtener instrucciones sobre cómo navegar a los tableros, consulta Tableros.

Seleccione Embed.

Desde el tablero, haz clic en en la parte superior derecha del tablero para acceder a su información de integración. Selecciona Embed en el menú desplegable.

Active el uso compartido externo en la fuente de datos.

Selecciona la pestaña Authenticated en la ventana de diálogo.

Se puede establecer Enable authenticated access en On.

Añadir proveedores de autenticación.

Si ya configuraste los proveedores de autenticación, omite este paso. Si aún no has configurado los proveedores de autenticación, puedes hacerlo ahora.

Para obtener más información, consulte Configurar proveedores de autenticación de inserciones.

Haga clic en Add.
Especifica un nombre para la integración de autenticación.
Seleccione un proveedor y especifique la configuración del proveedor.
Haga clic en Save.
Haga clic en Back to Embed Dashboard.

(Opcional) Especifique una función de filtro para inyectar por usuario.

Puedes especificar una función para inyectar un documento de filtro de MongoDB para cada usuario que vea el tablero. Esto es útil para mostrar tableros específicos para el usuario.

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

Tip

Para obtener más información sobre cómo inyectar filtros por usuario, consulta Inyecta Filtros Específicos para Usuarios.

(Opcional) Especifique campos filtrables para su panel decontrol.

Alternativamente, puede especificar todos los campos en su panel seleccionando Allow all fields in the data source used in this dashboard.

Para obtener más información sobre los campos filtrables, consulte Especificar campos filtrables.

Copia y guarda la URL base.

Copie y guarde el ID del tablero.

Crear una aplicación web

Proceda con los pasos restantes para crear una nueva aplicación en la que se muestre su gráfica.

Nota

MongoDB ofrece una aplicación de ejemplo preconstruida en el repositorio en GitHub que muestra cómo usar el SDK de inserción para mostrar una gráfica embebida no autenticada.

Proceda con los pasos restantes para crear una nueva aplicación en la que se muestre su gráfica.

Nota

MongoDB ofrece un ejemplo preconstruido en el repositorio de GitHub que te muestra cómo usar el Embedding SDK para autenticar una gráfica incrustada utilizando tu proveedor de autenticación.

Continúe con los pasos restantes para crear una nueva aplicación en la que mostrar su panel de control.

Nota

MongoDB ofrece un ejemplo prediseñado de un panel incrustado sin autenticar en el repositorio de GitHub. Este ejemplo muestra cómo usar el SDK de incrustación para mostrar un panel incrustado sin autenticar.

Continúe con los pasos restantes para crear una nueva aplicación en la que mostrar su tablero.

Nota

MongoDB ofrece ejemplos de paneles incrustados autenticados en el repositorio de GitHub. Estos ejemplos muestran cómo usar el SDK de incrustación para autenticar un panel incrustado mediante proveedores de autenticación de Google o JWT.

Agregar código de inserción a su aplicación

Para saber cómo instalar el SDK de incrustación en su aplicación, consulte Instalar el SDK de incrustación.

Agrega el siguiente código a tu aplicación web para ejecutar donde quieras que se renderice tu gráfica:

Nota

Reemplaza la URL base y el ID de los Charts existente con los valores de la gráfica que deseas mostrar. La URL base de tus Charts y el ID de la gráfica son visibles en la ventana modal de opciones de incrustación.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Chart dialog.
});
const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Chart ID from your Embed Chart dialog.
  height: "700px",
  // Additional options go here
});
chart.render(document.getElementById("chart"));

Agrega el siguiente código a tu aplicación web para ejecutarlo donde quieras que se renderice tu gráfica. El siguiente ejemplo se autentica con un Google token.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const id_token = googleUser.getAuthResponse().id_token;
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: replace with your Charts URL
   getUserToken: () => id_token,
});
const chart = sdk.createChart({
   chartId: "8d4dff93-e7ca-4ccd-a622-e20e8a100197", // Optional: replace with your Chart ID
});
document.body.classList.toggle("logged-in", true);
chart.render(document.getElementById("chart"));

Agrega el siguiente código a tu aplicación web para ejecutarlo donde deseas que se renderice tu tablero.

Nota

Reemplace el Dashboards Base URL y el ID de tablero existentes con los valores del tablero que desea mostrar. Tu Dashboards Base URL y el ID del tablero son visibles en la ventana modal de opciones de incrustación.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Dashboard dialog.
});
const dashboard = sdk.createDashboard({
   dashboardId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Dashboard ID from your Embed Dashboard dialog.
   height: "700px",
   widthMode: "scale",
   heightMode: "fixed"
   // Additional options go here
});
dashboard.render(document.getElementById("dashboard"));

Agrega el siguiente código a tu aplicación web para ejecutarlo donde quieras que se renderice tu tablero. El siguiente ejemplo se autentica con un Google token.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const id_token = googleUser.getAuthResponse().id_token;
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with your Base URL
   getUserToken: () => id_token,
});
// Read https://dochub.mongodb.org/core/charts-dashboards-embedded-dashboard-options for more options
const dashboard = sdk.createDashboard({
   // Optional: ~REPLACE~ with your Dashboard ID
   dashboardId: "620c9847-fc5c-4199-865d-27b2ae20db07",
   theme: "dark",
   widthMode: "scale",
});
document.body.classList.toggle("logged-in", true);
dashboard.render(document.getElementById("dashboard"));

Volver

SDK de incrustación

Configurar Proveedores de Autenticación