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

Cómo crear extensiones de mosaicos

A partir de Looker 24.0, las extensiones se pueden desarrollar para ejecutarse en una tarjeta en los paneles. Las extensiones que admiten ejecutarse como mosaico o visualización se pueden agregar mientras el panel está en modo de edición o guardarse en un panel como una visualización desde una exploración. Las extensiones también se pueden configurar como mosaicos en los paneles de Looker.

Hay ejemplos de extensiones disponibles que pueden usarse como mosaicos de panel:

En la extensión de visualización de mosaicos, se muestra cómo compilar 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 para las extensiones de tarjetas.

Usa el SDK de la extensión de Looker con extensiones de mosaicos

Las extensiones de mosaicos 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 mosaicos en un panel. Hay dos tipos de mount_points relacionados con las extensiones de mosaicos:

  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 la extensión se puede seleccionar como una visualización y guardarla como un mosaico del panel. Cuando se ejecute el panel, este ejecutará la consulta asociada con el mosaico y pondrá los datos a disposición de la extensión. Esto es similar al funcionamiento de las visualizaciones personalizadas. La diferencia principal entre una visualización personalizada y una extensión que se ejecuta en un mosaico 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 está editando un panel y selecciona la opción Extensiones después de hacer clic en el botón Agregar. Este tipo de extensión se encarga de recuperar sus propios datos, en lugar de hacer que la consulta de mosaico proporcione automáticamente los datos a la extensión.

Un punto de activación adicional, standalone, hace que la extensión aparezca en la sección Aplicaciones del menú principal de Looker. Es posible que una extensión tenga varios puntos de activación definidos. Durante el tiempo de ejecución, la extensión recibe una notificación sobre cómo se activa y puede ajustar su comportamiento en consecuencia. Por ejemplo, es posible que las extensiones standalone deban establecer su propia altura, mientras que las extensiones de mosaico 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. Estos 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 mosaico a la extensión. Los datos se actualizan automáticamente según las interacciones con el panel de hosting. Un ejemplo es el indicador isDashboardEditing.
visualizationSDK: Proporciona funciones específicas de la 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 según las interacciones con el panel de hosting. Los datos son similares a los datos que se proporcionan en las visualizaciones personalizadas.

Cómo compilar extensiones reactivas

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

Consideraciones de renderización

Es importante tener en cuenta que las extensiones de mosaico se renderizarán cuando se descargue un panel como archivo PDF o imagen. El procesador espera que la tarjeta lo notifique cuando se complete la renderización. De lo contrario, el procesador dejará de responder. A continuación, se muestra un ejemplo de cómo notificar al procesador que se renderizó la tarjeta.

  const { extensionSDK } = useContext(ExtensionContext40)

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

Las animaciones también deben estar inhabilitadas durante el procesamiento. El siguiente es un ejemplo en el que las configuraciones de animación se desactivan cuando se procesa:

  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 Tile

El SDK de tarjeta 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 tarjeta. Consulta la sección Datos del SDK de tarjetas para obtener más información.
`addError`	Cuando se llama, el panel o la pestaña Explorar muestran un mensaje de error debajo de la visualización.
`clearError`	Cuando se lo llame, el panel o la función Explorar ocultarán los mensajes de error que se muestran 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 mosaicos.
`runDashboard`	Ejecuta el panel actual. Una extensión de visualización de mosaicos que se ejecuta en una exploración ignora esta llamada.
`stopDashboard`	Detiene un panel en ejecución. Una extensión de visualización de mosaicos que se ejecuta en una exploración ignora esta llamada.
`updateFilters`	Actualiza los filtros del panel actual o de 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 Tile

En la siguiente tabla, se muestran las propiedades de datos del SDK de tarjetas disponibles:

Propiedad	Descripción
`isExploring`	Si es verdadero, indica que el mosaico se está configurando como una visualización dentro de una exploración.
`dashboardId`	El ID del panel de la tarjeta que se está renderizando. Si el mosaico se configura como una exploración, esta propiedad no se propagará.
`elementId`	Es el ID de elemento de la tarjeta que se renderiza. Si el mosaico se configura como una exploración, esta propiedad no se propagará.
`queryId`	El ID de consulta del mosaico que se renderiza si está asociado con una visualización. Si el mosaico se configura como una exploración, esta propiedad no se propagará. El `queryId` es el ID de la consulta que se crea cuando la visualización se integra en la exploración de Looker. No contiene ningún filtro ni filtro cruzado que se aplique al panel. Para reflejar los datos que se muestran en `QueryResponse`, se deberán aplicar filtros cruzados y, luego, generar una nueva consulta. Como resultado, es posible que haya propiedades más útiles que `queryId`. Consulta `filteredQuery` para ver un objeto de consulta con filtros aplicados.
`querySlug`	La consulta slug del mosaico que se renderiza si está asociada con una visualización. Si el mosaico se configura como una exploración, esta propiedad no se propagará. El `querySlug` es un slug de la consulta que se crea cuando la visualización está integrada en la exploración de Looker. No contiene ningún filtro ni filtrado cruzado aplicado al panel. Para reflejar los datos que se muestran en `QueryResponse`, se deberán aplicar filtros cruzados y, luego, generar una nueva consulta. Como resultado, es posible que haya 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 el mosaico se configura como una exploración, esta propiedad no se propagará.
`dashboardRunState`	Indica si el panel se está ejecutando. Si la tarjeta se configura como una exploración, 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 generalmente sucede si no hay otros mosaicos asociados con una consulta, incluido aquel con el que está asociada la extensión. Si la extensión necesita saber con certeza que se ejecutó un panel, la detección de diferencias en `lastRunStartTime` es la manera confiable.
`isDashboardEditing`	Si es verdadero, el panel se edita. Si el mosaico se configura como una exploración, esta propiedad no se propagará.
`isDashboardCrossFilteringEnabled`	Cuando es verdadero, el filtrado cruzado se habilita en el panel. Si el mosaico se configura como una exploración, esta propiedad no se propagará.
`filteredQuery`	Un objeto de consulta que coincide con el ID de consulta asociado con el elemento del panel subyacente que aplica los filtros del panel y los cambios de zona horaria que se realizan a nivel del panel.
`lastRunSourceElementId`	El ID del elemento de la extensión de mosaico que activó la última ejecución del panel. El ID no estará definido si la ejecución del panel se activó mediante el botón Ejecutar del panel o la actualización automática, o si la ejecución se activó con el SDK de incorporación. Si el mosaico se configura como una 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, recibirá una notificación cuando se inicie y finalice la ejecución del panel.
`lastRunStartTime`	Indica la hora de inicio de la última ejecución del panel. Si el mosaico se configura como una exploración, esta propiedad no se propagará. Ten en cuenta que las horas de inicio y finalización que se informan no se deben usar para captar métricas de rendimiento.
`lastRunEndTime`	Indica la hora de finalización de la última ejecución del panel. Si el mosaico se configura como una exploración, esta propiedad no se propagará. Si se está ejecutando el mosaico, no se propagará esta propiedad. Ten en cuenta que las horas de inicio y finalización que se informan no se deben usar para captar métricas de rendimiento.
`lastRunSuccess`	Indica si la última ejecución del panel se realizó de forma correcta o no. Si el mosaico se configura como una exploración, esta propiedad no se propagará. Si se está ejecutando el mosaico, no se propagará esta propiedad.

Funciones y propiedades del SDK de visualización

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 visualización: Mide la configuración Parámetros de configuración de dimensiones Hacer cálculos de tablas Configuraciones dinámicas Configuraciones de visualización Se usan para personalizar el aspecto 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 visualizaciones de Explorar. Solo se debe llamar una vez.
`setVisConfig`	Actualiza la configuración de visualización.
`updateRowLimit`	Actualiza el límite de filas de la consulta.

Datos del SDK de visualización

El SDK de visualización consta de lo siguiente:

Visualización de datos de configuración
Datos de respuesta de consulta

Visualización de datos de configuración

Propiedad	Descripción
`queryFieldMeasures`	Medir la información
`queryFieldDimensions`	Información de dimensiones
`queryFieldTableCalculations`	Información de cálculo basado en tablas
`queryFieldPivots`	Información de tabla dinámica
`visConfig`	Datos de configuración visual. Esto debería combinarse con la configuración predeterminada y aplicarse a la visualización renderizada por la extensión.

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

Datos de respuesta de consulta

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