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 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.

Para renderizar una visualización incorporable con 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 crees tu código en el framework de extensión o en tu propia aplicación independiente de React, es importante autenticarse 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 extensión.
  • Asegúrate de haber instalado el paquete de NPM de los componentes de visualización de Looker 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 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 hayas creado.

El componente Query siempre cargará la visualización desde la primera tarjeta que se agregó cronológicamente al panel asociado, independientemente de dónde aparezca la tarjeta 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 se mostrará el título de la tarjeta, 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 crees el panel, podrás verlo.

Aparecerá un ID numérico del panel 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 cambios 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.

Existen dos maneras 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.

Para editar la tarjeta de consulta, sigue las instrucciones para editar tarjetas 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 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 haya una sola tarjeta en el panel y, luego, guárdalos para salir del modo de edición.

Una vez que modifiques y guardes el panel, los cambios de 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