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

Usar 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. El uso de la propiedad dashboard (a diferencia 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 o en la aplicación de React.

Si quieres crear una visualización integrable que no responda a los cambios 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 integrable con los componentes de visualización de Looker y un ID del 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 comenzar, se necesitan 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. Para obtener más información, consulta la autenticación de la API de Looker o nuestro framework de extensiones.
  • Asegúrate de haber instalado el paquete de NPM y el paquete de NPM de @looker/components-data. Puedes encontrar información para 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 una exploración para crear una consulta dentro de la IU de Looker. Agrega una visualización compatible a Explorar y, de manera opcional, establece su 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 hayas creado.

El componente Query siempre cargará la visualización desde el primer mosaico que se agregó 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 solo paneles de un solo mosaico como referencia de las consultas.

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 se haya creado el panel, visualízalo.

El ID numérico del panel 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 ID numéricos. No acepta los IDs de string de los paneles de Looker.

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 si pasas 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 hacer cambios en la visualización incorporada en el panel, y los cambios aparecerán en tu aplicación de React sin necesidad de modificar el código.

Para obtener 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 al modelo en el que se basa la consulta y los permisos de Looker adecuados para editar paneles.

Existen dos maneras de modificar la visualización incorporada:

  • Edita el mosaico de la consulta en el panel.
  • Agrega un nuevo mosaico de consulta al panel y borra el mosaico original.

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

Para agregar un mosaico nuevo y borrar el original, sigue las instrucciones sobre cómo agregar mosaicos de consulta para agregar tu nuevo mosaico. 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 solo haya un mosaico en el panel y, luego, guárdalos para salir del modo de edición en el panel.

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