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 integrable que puede responder a los cambios en la IU de Looker. Usar la propiedad dashboard (en lugar de la propiedad query) ofrece los siguientes beneficios:

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

Si quieres crear una visualización integrable que no responda a los cambios en la IU de Looker, sigue las instrucciones que se indican en la página Cómo usar componentes de visualización y la propiedad query para renderizar una visualización simple.

Para renderizar una visualización integrable con componentes de visualización de Looker y un ID numérico del panel, asegúrate de que la 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. Si es necesario, modifica la visualización.

Requisitos

Antes de comenzar, se necesitan algunos elementos:

  • Debes tener acceso a una instancia de Looker.
  • Ya sea que estés compilando en el framework de extensión o en tu propia aplicación de React independiente, es importante autenticarse con la API de Looker y tener acceso al objeto del SDK de Looker. Obtén más información sobre la autenticación de la API de Looker o sobre nuestro framework de extensió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 cómo instalar y usar el 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

Usa Explorar para crear una consulta dentro de la IU de Looker. Agregue una visualización compatible a Explorar y, de manera opcional, establezca sus parámetros de configuración en el menú Configuración de la visualización.

Crea un panel nuevo con esta consulta. También 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 agregó de forma cronológica al panel asociado, independientemente de dónde aparezca el mosaico en el diseño del panel. Por este motivo, se recomienda usar solo paneles de un solo mosaico como referencia de consulta.

El componente Query solo mostrará la visualización de tarjetas. No mostrará el título de la tarjeta, el título del panel ni otros elementos del panel. Cualquier filtro del panel aplicado a la tarjeta no tendrá efecto en la visualización incorporada.

Una vez que haya creado su panel, podrá visualizarlo.

Aparecerá un ID numérico en el panel después de dashboards/. Copia este ID para usarlo en el siguiente paso.

La propiedad dashboard del componente Query solo acepta ID numéricos. No acepta los ID de string 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 a 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 puede modificar la visualización incorporada en tu panel, y estos aparecerán en tu aplicación de React sin necesidad de modificar el código.

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

Existen dos maneras de modificar la visualización incorporada:

  • Edita el mosaico de consulta en el panel.
  • Agrega una nueva tarjeta de consulta al panel y borra la tarjeta original.

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

Si quieres agregar una tarjeta nueva y borrar la original, sigue las instrucciones para agregar mosaicos de consultas. Luego, sigue las instrucciones para borrar tarjetas a fin de borrar la visualización no deseada. Para que se apliquen los cambios, asegúrate de que haya solo un mosaico en el panel y, luego, guarda los cambios para salir del modo de edición del panel.

Una vez que modifique y guarde el panel, los cambios de visualización aparecerán en su extensión o aplicación de React sin necesidad de modificar el código.

Próximos pasos