Crear extensiones de recuadros

A partir de Looker 24.0, las extensiones se pueden desarrollar para que se ejecuten en un recuadro de los paneles de control. Las extensiones que se pueden ejecutar como una baldosa o una visualización se pueden añadir mientras el panel de control está en modo de edición o guardar en un panel de control como visualización desde una Exploración. Las extensiones también se pueden configurar como baldosas en los paneles de control de LookML.

Hay ejemplos de extensiones que se pueden usar como mosaicos del panel de control:

Usar el SDK de extensiones de Looker con extensiones de baldosas

Para que las extensiones de baldosas se carguen como baldosas en un panel de control, es necesario definir el parámetro mount_points en el archivo de manifiesto del proyecto de LookML. Hay dos tipos de mount_points relacionados con las extensiones de baldosas:

  mount_points: {
    dashboard_vis: yes
    dashboard_tile: yes
    standalone: yes
  }
  • dashboard_vis: si está habilitada, la extensión aparecerá en las opciones de visualización de Exploración, donde se podrá seleccionar como visualización y guardar como tarjeta de un panel de control. Cuando se ejecute el panel de control, se ejecutará la consulta asociada al gráfico y se pondrán los datos a disposición de la extensión. Es similar a cómo funcionan las visualizaciones personalizadas. La principal diferencia entre una visualización personalizada y una extensión que se ejecuta en un recuadro de un panel de control que tiene dashboard_vis habilitado es que la extensión puede hacer llamadas a la API de Looker.
  • dashboard_tile: si está habilitada, la extensión aparecerá en el panel Extensiones que se muestra cuando un usuario está editando un panel de control y selecciona la opción Extensiones después de hacer clic en el botón Añadir. Este tipo de extensión se encarga de recuperar sus propios datos, en lugar de que la consulta de la baldosa proporcione automáticamente los datos a la extensión.

Un punto de montaje 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 definidos varios puntos de montaje. En el tiempo de ejecución, se notifica a la extensión cómo se ha montado y puede ajustar su comportamiento en consecuencia. Por ejemplo, las extensiones de standalone pueden necesitar definir su propia altura, mientras que las extensiones de mosaico no.

APIs adicionales de la extensión de teselas

Las extensiones de baldosas se proporcionan con APIs y datos adicionales en 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 las baldosas para permitir que la extensión interactúe con el host del panel de control 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 control de hosting. Por ejemplo, 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 control de Looker. Por ejemplo, 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 control de hosting. Los datos son similares a los que se proporcionan a las visualizaciones personalizadas.

Crear 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 principal de Looker. Esto se refleja automáticamente en la ventana de contenido del iframe. El componente iframe no tiene ningún relleno ni margen, por lo que la extensión debe proporcionar su propio relleno y margen para que tenga un aspecto coherente con la aplicación Looker. En el caso de las extensiones independientes, es la extensión la que controla su altura. En el caso de las extensiones que se ejecutan en los recuadros del panel de control o en las visualizaciones de Explorar, la ventana de contenido del iframe se ajustará automáticamente a la altura que proporcione el iframe.

Consideraciones sobre el renderizado

Es importante tener en cuenta que las extensiones de baldosas se renderizarán cuando se descargue un panel de control como PDF o imagen. El renderizador espera que la loseta le notifique cuando se haya completado el renderizado. Si no se hace, el renderizador dejará de responder. A continuación, se muestra un ejemplo de cómo notificar al renderizador que la loseta se ha renderizado.

  const { extensionSDK } = useContext(ExtensionContext40)

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

Las animaciones también deben inhabilitarse durante el renderizado. A continuación, se muestra un ejemplo en el que las configuraciones de animación se desactivan durante el renderizado:

  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 baldosas

El SDK de baldosas proporciona funciones que permiten que una extensión de baldosa interactúe con su panel de control de alojamiento.

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

Función o propiedad Descripción
tileHostData (propiedad) Datos de host específicos de la extensión de la baldosa. Consulta la sección Datos de SDK de baldosas para obtener más información.
addError Cuando se llame a la función, el panel de control o Exploración mostrará un mensaje de error debajo de la visualización.
clearError Cuando se llama, el panel de control o la exploración ocultan 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 mosaico.
runDashboard Ejecuta el panel actual. Esta llamada la ignora una extensión de visualización de baldosas que se ejecuta en un Exploración.
stopDashboard Detiene un panel de control en ejecución. Esta llamada la ignora una extensión de visualización de baldosas que se ejecuta en un Exploración.
updateFilters Actualiza los filtros del panel de control o de Explorar actual.
openScheduleDialog Abre el cuadro de diálogo de programación. Esta llamada se ignora cuando se ejecuta en Explorar.
toggleCrossFilter Activa o desactiva los multifiltros. Esta llamada se ignora cuando se ejecuta en Explorar.

Datos del SDK de baldosas

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

Propiedad Descripción
isExploring Si es true, indica que la baldosa se está configurando como una visualización en una exploración.
dashboardId ID del panel de control de la baldosa que se está renderizando. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.
elementId El ID del elemento del mosaico que se está renderizando. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.
queryId El ID de consulta de la baldosa que se está renderizando, si está asociada a una visualización. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.

El queryId es el ID de la consulta que se crea cuando se genera la visualización en Explorar de Looker. No contiene ningún filtro ni filtro cruzado que se pueda aplicar al panel de control. Para que se reflejen los datos que se muestran en QueryResponse, se deberán aplicar filtros y refinar los resultados, y se generará una nueva consulta. Por lo tanto, puede haber más propiedades útiles que queryId. Consulta filteredQuery para ver un objeto de consulta con filtros aplicados.
querySlug La consulta slug de la baldosa que se está renderizando si está asociada a una visualización. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.

El querySlug es un slug de la consulta que se crea cuando la visualización se genera en Explorar de Looker. No contiene ningún filtro ni filtro cruzado aplicado al panel de control. Para que se reflejen los datos que se muestran en QueryResponse, se deberán aplicar filtros y refinar los resultados, y se generará una nueva consulta. Por lo tanto, puede haber más propiedades útiles que querySlug. Consulta filteredQuery para ver un objeto de consulta con filtros aplicados.
dashboardFilters Los filtros que se están aplicando al panel de control. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.
dashboardRunState Indica si el panel de control se está ejecutando. Si la baldosa se está configurando como Explorar, el estado será UNKNOWN.

Por motivos de rendimiento del panel de control, es posible que el estado de ejecución nunca se muestre como en ejecución. Esto suele ocurrir si no hay otras baldosas asociadas a una consulta, incluida la baldosa con la que está asociada la extensión. Si la extensión necesita saber con certeza que se ha ejecutado un panel de control, detectar las diferencias en lastRunStartTime es la forma más fiable.
isDashboardEditing Si es true, el panel de control se está editando. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.
isDashboardCrossFilteringEnabled Si se le asigna el valor "true", se habilita la multifiltro en el panel de control. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.
filteredQuery Objeto de consulta que coincide con el ID de consulta asociado al elemento del panel de control subyacente que aplica los filtros del panel de control y los cambios de zona horaria que se realizan a nivel del panel de control.
lastRunSourceElementId El ID del elemento de extensión de la baldosa que ha activado la última ejecución del panel de control. El ID no estará definido si el panel de control se ha ejecutado al hacer clic en el botón Ejecutar o en Actualizar automáticamente, o si se ha ejecutado mediante el SDK de inserción. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.

Ten en cuenta que el lastRunSourceElementId puede ser el mismo que el ID de elemento de la instancia de extensión actual. Por ejemplo, si la extensión activa una ejecución de un panel de control, se le notificará cuando empiece y termine la ejecución.
lastRunStartTime Indica la hora de inicio de la última ejecución del panel de control. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará.

Ten en cuenta que las horas de inicio y finalización que se indican no deben usarse para registrar métricas de rendimiento.
lastRunEndTime Indica la hora de finalización de la última ejecución del panel de control. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará. Si la baldosa está en ejecución, esta propiedad no se rellenará.

Tenga en cuenta que las horas de inicio y finalización que se indican no deben usarse para registrar métricas de rendimiento.
lastRunSuccess Indica si la última ejecución del panel de control se ha completado correctamente o no. Si la baldosa se está configurando como Exploración, esta propiedad no se rellenará. Si la baldosa está en ejecución, esta propiedad no se rellenará.

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 la visualización:

  • Configuraciones de medición
  • Configuraciones de dimensiones
  • Cálculos de tabla
  • Configuraciones de dinamización
  • Configuraciones de visualización

Se usan para personalizar el aspecto de una visualización en Exploraciones.
queryResponse (propiedad) Datos de respuesta de la consulta
configureVisualization Define la configuración predeterminada de una visualización de extensión. La configuración se renderizará en el editor de visualizaciones Explorar. Solo se debe llamar una vez.
setVisConfig Actualiza la configuración de la 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:

  • Datos de configuración de la visualización
  • Consultar datos de respuesta

Datos de configuración de la visualización

Propiedad Descripción
queryFieldMeasures Información de la métrica
queryFieldDimensions Información de la dimensión
queryFieldTableCalculations Información de los cálculos de tabla
queryFieldPivots Información de la tabla dinámica
visConfig Datos de configuración visual. Esta configuración debe combinarse con la 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
}

Consultar datos de respuesta

Propiedad Descripción
data Matriz de datos de filas
fieldMeasures Información de la medición de campos.
fieldDimensions Información de la dimensión de campo.
fieldTableCalculations Información sobre los cálculos de tabla de campos.
fieldPivots Información de los campos de la tabla dinámica.
fieldMeasureLike Una matriz concatenada de información de medidas de campos y cálculos de tablas que se comportan como medidas.
fieldDimensionLike Una matriz concatenada de información de dimensiones de campo y cálculos de tablas que se comportan como dimensiones.

Usar el SDK de inserción

No se recomienda usar el SDK de inserción en una extensión de baldosa por los siguientes motivos:

  • Es posible que la extensión termine renderizando un panel de control en el que la extensión sea una baldosa. El framework de extensiones no tiene forma de detectar esto y, como resultado, el navegador puede fallar.
  • No se puede renderizar en PDF el contenido insertado en una extensión de mosaico.