Usar componentes de visualización y la propiedad del panel para renderizar una visualización simple

El uso de la propiedad dashboard del componente de visualización Query te permite renderizar una visualización incorporable que puede responder a los cambios en la IU de Looker. El uso de la propiedad dashboard (en lugar de la propiedad query) ofrece los siguientes beneficios:

  • Cualquier usuario de Looker con acceso de edición al panel puede actualizar la visualización.
  • Las actualizaciones de la visualización incorporada no requieren ningún cambio en la extensión implementada ni en la aplicación de React.

Si quieres crear una visualización incorporable que no responda a los cambios dentro de la IU de Looker, sigue las instrucciones de la página de documentación Usa componentes de visualización y la propiedad query para renderizar una visualización simple.

Para renderizar una visualización incorporable con los componentes de visualización de Looker y un ID de panel numérico, asegúrate de que tu configuración cumpla con los requisitos y, luego, sigue estos pasos:

  1. Crea una consulta y agrégala a un panel.
  2. Incorpora la consulta en una aplicación de React con el ID del panel.
  3. Modifica la visualización si es necesario.

Requisitos

Antes de empezar, necesitas algunos elementos:

  • Debes tener acceso a una instancia de Looker.
  • Ya sea que compiles en el framework de extensiones o en tu propia aplicación de React independiente, es importante autenticar con la API de Looker y tener acceso al objeto del SDK de Looker. Consulta sobre la autenticación de la API de Looker o nuestro framework de extensión para obtener más información.
  • Asegúrate de haber instalado el paquete de NPM de los componentes de visualización de Looker y el paquete de NPM @looker/components-data. Puedes encontrar información sobre la instalación y el uso del paquete de componentes de visualización en el documento README, disponible en GitHub y NPM.

Paso 1: Crea una consulta y agrégala a un panel

Usar una Exploración para crear una consulta dentro de la IU de Looker Agrega una visualización compatible a Explorar y, de forma opcional, establece su configuración en el menú Configuración de la visualización.

Crea un nuevo panel con esta consulta. Como alternativa, puedes agregar la consulta a un panel en blanco que ya creaste.

El componente Query siempre cargará la visualización del primer mosaico que se haya agregado de forma cronológica al panel asociado, sin importar dónde aparezca el mosaico en el diseño del panel. Por este motivo, se recomienda usar únicamente los paneles de un solo mosaico como referencia para la consulta.

El componente Query solo mostrará la visualización de mosaicos. No mostrará el título del mosaico, el título del panel ni otros elementos del panel. Los filtros del panel que se apliquen al mosaico no tendrán ningún efecto en la visualización incorporada.

Una vez que hayas creado tu panel, ve el panel.

Un ID de panel numérico aparece en la URL del panel después de dashboards/. Copia este ID para usarlo en el siguiente paso.

La propiedad dashboard del componente Query solo acepta IDs numéricos. No acepta los IDs de cadena de los paneles de LookML.

Paso 2: Incorpora la consulta en una aplicación de React con el ID del panel

Ahora, puedes incorporar la consulta en tu aplicación de React pasando el ID del panel en la propiedad dashboard del componente Query:

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Paso 3: Modifica la visualización si es necesario

Ahora, cualquier usuario de Looker con acceso de edición al panel tiene la libertad de realizar cambios en la visualización incorporada en tu panel, y los cambios aparecerán en tu aplicación de React sin necesidad de modificar el código.

Para tener acceso de edición, los usuarios deben tener el nivel de acceso Administrar acceso, Editar para la carpeta en la que se encuentra el panel, acceso al modelo en el que se basa la consulta y los permisos de Looker adecuados para editar paneles.

Hay dos formas de modificar la visualización incorporada:

  • Editar el mosaico de la consulta en el panel
  • Agregar un nuevo mosaico de consulta al panel y borrar el original

Si deseas editar el mosaico de consulta, sigue las instrucciones para editar mosaicos en la página de documentación Edita paneles definidos por el usuario y guarda los cambios para salir del modo de edición en el panel.

Para agregar una tarjeta nueva y borrar la original, sigue las instrucciones sobre cómo agregar mosaicos de consulta para incluir tu nueva tarjeta. Luego, sigue las instrucciones para borrar tarjetas y eliminar la visualización no deseada. Para que se apliquen los cambios, asegúrate de que solo haya un mosaico en el panel y, luego, guarda los cambios para salir del modo de edición.

Una vez que modifiques y guardes tu panel, los cambios en la visualización aparecerán en tu extensión o aplicación de React sin necesidad de realizar cambios en el código.

Próximos pasos