Cómo 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 deseas 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 Cómo usar 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 comenzar, 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. Lee 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 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 en la IU de Looker. Agrega una visualización compatible a Explorar y, de manera opcional, configura su configuración en el menú Configuración de la visualización.

Crea un panel nuevo 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 solo paneles de una sola tarjeta como referencia de la consulta.

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

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

Un 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 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 puede realizar cambios en la visualización incorporada en tu panel, y los cambios aparecerán en tu aplicación de React sin necesidad de realizar ningún cambio en 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:

  • Edita la tarjeta de consulta en el panel.
  • Agrega una tarjeta de consulta nueva al panel y borra la tarjeta 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 para agregar tarjetas de consulta. 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 de visualización aparecerán en tu extensión o aplicación de React sin necesidad de realizar ningún cambio en el código.

Próximos pasos