Ten en cuenta que estás viendo la documentación de Looker. Para obtener documentación de Looker Studio, visita https://support.google.com/looker-studio.

Se usó la API de Cloud Translation para traducir esta página.

Cómo compilar extensiones de mosaicos

A partir de Looker 24.0, se pueden desarrollar extensiones para que se ejecuten en una tarjeta de los paneles. Las extensiones que admiten ejecutarse como tarjetas o visualizaciones se pueden agregar mientras el panel está en modo de edición o guardar en un panel como una visualización desde Explorar. Las extensiones también se pueden configurar como tarjetas en los paneles de LookML.

Hay ejemplos de extensiones que se pueden usar como tarjetas de panel:

En la extensión de visualización de tarjetas, se muestra cómo crear una visualización personalizada con el framework de extensiones.
La extensión del SDK de tarjetas muestra los métodos de API disponibles que son específicos de las extensiones de tarjetas.

Cómo usar el SDK de extensiones de Looker con extensiones de tarjetas

Las extensiones de tarjetas requieren que se defina el parámetro mount_points en el archivo de manifiesto del proyecto de LookML para que las extensiones se carguen como tarjetas en un panel. Existen dos tipos de mount_points relacionados con las extensiones de tarjetas:

  mount_points: {
    dashboard_vis: yes
    dashboard_tile: yes
    standalone: yes
  }

dashboard_vis: Cuando se habilita, la extensión aparecerá en las opciones de visualización de una exploración, donde se puede seleccionar como una visualización y guardar como tarjeta de panel. Cuando se ejecute el panel, este ejecutará la consulta asociada con la tarjeta y pondrá los datos a disposición de la extensión. Esto es similar a la forma en que funcionan las visualizaciones personalizadas. La principal diferencia entre una visualización personalizada y una extensión que se ejecuta en una tarjeta de panel que tiene habilitado dashboard_vis es que la extensión puede realizar llamadas a la API de Looker.
dashboard_tile: Cuando se habilita, la extensión aparecerá en el panel Extensiones que se muestra cuando un usuario edita un panel y selecciona la opción Extensiones después de hacer clic en el botón Agregar. Este tipo de extensión es responsable de recuperar sus propios datos, en lugar de que la consulta de tarjetas le proporcione datos automáticamente.

Un punto de activación adicional, standalone, hace que la extensión aparezca en la sección Applications del menú principal de Looker. Es posible que una extensión tenga varios puntos de activación definidos. Durante el tiempo de ejecución, se le notifica a la extensión cómo se montó y puede ajustar su comportamiento según corresponda. Por ejemplo, es posible que las extensiones de standalone deban establecer su propia altura, mientras que las extensiones de tarjetas no.

APIs adicionales de la extensión de tarjetas

Las extensiones de tarjetas se proporcionan con APIs y datos adicionales durante el tiempo de ejecución. Se obtienen del contexto de la extensión:

const {
  tileSDK,
  tileHostData,
  visualizationData,
  visualizationSDK,
} = useContext(ExtensionContext40)

tileSDK: Proporciona funciones específicas de tarjetas para permitir que la extensión interactúe con el host del panel de Looker. Por ejemplo, para permitir que la extensión muestre y borre mensajes de error.
tileHostData: Proporciona datos de tarjetas a la extensión. Los datos se actualizan automáticamente en función de las interacciones con el panel de hosting. Un ejemplo es el indicador isDashboardEditing.
visualizationSDK: Proporciona funciones específicas de visualización para permitir que la extensión interactúe con el host del panel de Looker. Un ejemplo es la función updateRowLimit.
visualizationData: Proporciona datos de visualización a la extensión. Los datos se actualizan automáticamente en función de las interacciones con el panel de hosting. Los datos son similares a los que se proporcionan a las visualizaciones personalizadas.

Cómo compilar extensiones reactivas

Los iframes en los que se ejecutan las extensiones cambian de tamaño automáticamente a medida que cambia el tamaño de la ventana del host principal de Looker. Esto se refleja automáticamente en la ventana de contenido del iframe. El componente iframe no tiene padding ni margen, por lo que depende de la extensión proporcionar su propio padding y margen para que se vea coherente con la aplicación de Looker. En el caso de las extensiones independientes, depende de la extensión controlar la altura. En el caso de las extensiones que se ejecutan en tarjetas de panel o visualizaciones de Explorar, la ventana de contenido del iframe se establecerá automáticamente en la altura que el iframe pone a disposición.

Consideraciones de renderización

Es importante tener en cuenta que las extensiones de tarjetas se renderizarán cuando se descargue un panel como un PDF o una imagen. El renderizador espera que la tarjeta le notifique cuando se complete la renderización. Si no se hace esto, el renderizador dejará de responder. El siguiente es un ejemplo de cómo notificar al renderizador que se renderizó la tarjeta.

  const { extensionSDK } = useContext(ExtensionContext40)

  useEffect(() => {
    extensionSDK.rendered()
  }, [])

Las animaciones también deben inhabilitarse durante la renderización. El siguiente es un ejemplo en el que se desactivan las configuraciones de animación durante la renderización:

  const { lookerHostData} = useContext(ExtensionContext40)
  const isRendering = lookerHostData?.isRendering

  const config = isRendering
    ? {
        ...visConfig,
        valueCountUp: false,
        waveAnimateTime: 0,
        waveRiseTime: 0,
        waveAnimate: false,
        waveRise: false,
      }
    : visConfig

  if (mountPoint === MountPoint.dashboardVisualization) {
    return <VisualizationTile config={config} />
  }

Funciones y propiedades del SDK de tarjetas

El SDK de tarjetas proporciona funciones que permiten que una extensión de tarjeta interactúe con su panel de hosting.

Las funciones y propiedades disponibles se muestran en la siguiente tabla:

Función o propiedad	Descripción
`tileHostData` (propiedad)	Aloja datos específicos de la extensión de mosaico. Consulta la sección Datos del SDK de tarjetas para obtener más detalles.
`addError`	Cuando se realice la llamada, el panel o Explorar mostrarán un mensaje de error debajo de la visualización.
`clearError`	Cuando se realice la llamada, el panel o Exploración ocultarán cualquier mensaje de error que se muestre debajo de la visualización.
`openDrillMenu`	En el caso de las extensiones de visualización, esta llamada abre un menú de desglose. Esta llamada se ignora si la extensión no es una visualización de extensión de tarjeta.
`runDashboard`	Ejecuta el panel actual. Una extensión de visualización de tarjetas que se ejecuta en una exploración ignora esta llamada.
`stopDashboard`	Detiene un panel en ejecución. Una extensión de visualización de tarjetas que se ejecuta en una exploración ignora esta llamada.
`updateFilters`	Actualiza los filtros en el panel actual o en Explorar.
`openScheduleDialog`	Abre el diálogo de programación. Esta llamada se ignora cuando se ejecuta en una exploración.
`toggleCrossFilter`	Activa o desactiva los filtros cruzados. Esta llamada se ignora cuando se ejecuta en una exploración.

Datos del SDK de tarjetas

Las propiedades de datos del SDK de tarjetas disponibles se muestran en la siguiente tabla:

Propiedad	Descripción
`isExploring`	Cuando es verdadero, indica que la tarjeta se está configurando como una visualización dentro de una tarjeta Explorar.
`dashboardId`	Es el ID del panel de la tarjeta que se renderiza. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará.
`elementId`	Es el ID del elemento de la tarjeta que se renderiza. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará.
`queryId`	Es el ID de consulta de la tarjeta que se renderiza si está asociada con una visualización. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará. `queryId` es el ID de la consulta que se crea cuando la visualización está integrada en Explorar de Looker. No contiene ningún filtro ni filtrado cruzado que se pueda aplicar al panel. Para reflejar los datos que se muestran en `QueryResponse`, se deben aplicar filtros y filtros cruzados, y se debe generar una consulta nueva. Como resultado, puede haber propiedades más útiles que `queryId`. Consulta `filteredQuery` para ver un objeto de consulta con filtros aplicados.
`querySlug`	Es el slug de la consulta de la tarjeta que se renderiza si está asociada con una visualización. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará. `querySlug` es un fragmento de la consulta que se crea cuando la visualización está integrada en Explorar de Looker. No contiene ningún filtro ni filtrado cruzado que se aplique al panel. Para reflejar los datos que se muestran en `QueryResponse`, se deben aplicar filtros y filtros cruzados, y se debe generar una consulta nueva. Como resultado, puede haber propiedades más útiles que `querySlug`. Consulta `filteredQuery` para ver un objeto de consulta con filtros aplicados.
`dashboardFilters`	Los filtros que se aplican al panel Si la tarjeta se configura como una de exploración, esta propiedad no se propagará.
`dashboardRunState`	Indica si el panel está en ejecución. Si la tarjeta se configura como Explorar, el estado será `UNKNOWN`. Por motivos de rendimiento del panel, es posible que el estado de ejecución nunca se muestre como en ejecución. Esto suele ocurrir si no hay otras tarjetas asociadas con una consulta, incluida la que está asociada con la extensión. Si la extensión necesita saber con certeza que se ejecutó un panel, la forma confiable es detectar diferencias en `lastRunStartTime`.
`isDashboardEditing`	Si es verdadero, se está editando el panel. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará.
`isDashboardCrossFilteringEnabled`	Si es verdadero, se habilita el filtrado cruzado en el panel. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará.
`filteredQuery`	Un objeto de consulta que coincide con el ID de consulta asociado con el elemento de panel subyacente que aplica los filtros del panel y los cambios de zona horaria que se realizan a nivel del panel.
`lastRunSourceElementId`	Es el ID del elemento de extensión de tarjeta que activó la última ejecución del panel. El ID no se definirá si la ejecución del panel se activó con el botón Run o la autorefresh del panel, o si la ejecución se activó con el SDK incorporado. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará. Ten en cuenta que `lastRunSourceElementId` puede ser el mismo que el ID del elemento de la instancia de extensión actual. Por ejemplo, si la extensión activa una ejecución de panel, se le notificará cuando esta comience y finalice.
`lastRunStartTime`	Indica la hora de inicio de la última ejecución del panel. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará. Ten en cuenta que las horas de inicio y finalización informadas no se deben usar para capturar métricas de rendimiento.
`lastRunEndTime`	Indica la hora de finalización de la última ejecución del panel. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará. Si la tarjeta está en ejecución, esta propiedad no se propagará. Ten en cuenta que no se deben usar las horas de inicio y finalización registradas para capturar métricas de rendimiento.
`lastRunSuccess`	Indica si la última ejecución del panel se realizó correctamente o no. Si la tarjeta se configura como una de exploración, esta propiedad no se propagará. Si la tarjeta está en ejecución, esta propiedad no se propagará.

Funciones y propiedades del SDK de Visualization

Las funciones y propiedades del SDK de visualización disponibles se muestran en la siguiente tabla:

Función o propiedad	Descripción
`visualizationData` (propiedad)	Visualización (combinación de datos de `visConfig` y `queryResponse`)
`visConfig` (propiedad)	Datos de configuración de la visualización: Configuración de medición Configuraciones de las dimensiones Hacer cálculos de tablas Configuraciones de reorientación Configuraciones de visualización Se usan para personalizar el estilo y la apariencia de una visualización en una exploración.
`queryResponse` (propiedad)	Datos de respuesta de la consulta
`configureVisualization`	Establece la configuración predeterminada para una visualización de extensión. La configuración se renderizará dentro del editor de visualización de Explorar. Solo se debe llamar una vez.
`setVisConfig`	Actualiza la configuración de visualización.
`updateRowLimit`	Actualiza el límite de filas de consulta.

Datos del SDK de Visualization

El SDK de visualización consta de lo siguiente:

Datos de configuración de la visualización
Cómo consultar datos de respuesta

Datos de configuración de la visualización

Propiedad	Descripción
`queryFieldMeasures`	Información de medición
`queryFieldDimensions`	Información de las dimensiones
`queryFieldTableCalculations`	Información del cálculo basado en tablas
`queryFieldPivots`	Información del gráfico dinámico
`visConfig`	Datos de configuración visual. Se debe combinar con la configuración predeterminada y aplicarse a la visualización que renderiza la extensión.

export interface VisualizationConfig {
  queryFieldMeasures: Measure[]
  queryFieldDimensions: Dimension[]
  queryFieldTableCalculations: TableCalculation[]
  queryFieldPivots: PivotConfig[]
  visConfig: RawVisConfig
}

Cómo consultar datos de respuesta

Propiedad	Descripción
`data`	Array de datos de fila
`fieldMeasures`	Información de la medición de campo
`fieldDimensions`	Información de la dimensión del campo
`fieldTableCalculations`	Información de los cálculos de la tabla de campos
`fieldPivots`	Información del eje de campo
`fieldMeasureLike`	Es un array concatenado de información de medición de campo y cálculos de tablas que se comportan como medidas.
`fieldDimensionLike`	Es un array concatenado de información de dimensiones de campo y cálculos de tablas que se comportan como dimensiones.