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

La propiedad dashboard del componente de visualización Query te permite renderizar una visualización insertable que puede responder a los cambios en la interfaz de usuario de Looker. Usar la propiedad dashboard ofrece las siguientes ventajas:

  • Cualquier usuario de Looker con permiso de edición en el panel de control puede actualizar la visualización.
  • Para actualizar la visualización insertada, no es necesario que hagas ningún cambio en la extensión ni en la aplicación React implementadas.

Para renderizar una visualización insertable con componentes de visualización de Looker y un ID de panel de control numérico, asegúrate de que tu configuración cumple los requisitos y, a continuación, sigue estos pasos:

  1. Crea una consulta y añádela a un panel de control.
  2. Insertar la consulta en una aplicación React mediante el ID del panel de control.
  3. Modifica la visualización si es necesario.

Requisitos

Antes de empezar, necesitas algunos elementos:

  • Debes tener acceso a una instancia de Looker.
  • Tanto si desarrollas en el framework de extensiones como si lo haces en tu propia aplicación React independiente, es importante que te autentiques con la API de Looker y que tengas acceso al objeto del SDK de Looker. Consulta más información sobre la autenticación de la API de Looker o nuestro framework de extensiones.
  • Asegúrate de haber instalado el paquete NPM de componentes de visualización de Looker y el @looker/components-data paquete NPM. Puedes consultar información sobre cómo instalar y usar el paquete de componentes de visualización en el archivo README, disponible en GitHub y NPM.

Paso 1: Crea una consulta y añádela a un panel de control

Usa una Exploración para crear una consulta en la interfaz de Looker. Añade una visualización compatible a la exploración y, si quieres, configura sus ajustes en el menú Configuración de la visualización.

Crea un panel de control con esta consulta. También puedes añadir la consulta a un panel de control en blanco que ya hayas creado.

El componente Query siempre cargará la visualización del primer gráfico que se haya añadido cronológicamente al panel de control asociado, independientemente de dónde aparezca en el diseño del panel. Por este motivo, es recomendable usar solo paneles de un solo gráfico como referencia de consulta.

El componente Query solo mostrará la visualización de los recuadros. No se mostrarán el título de la baldosa, el título del panel de control ni otros elementos del panel de control. Los filtros de panel de control que se apliquen a la baldosa no tendrán ningún efecto en la visualización insertada.

Una vez que haya creado el panel de control, podrá verlo.

Un ID de panel de control numérico aparece en la URL del panel de control 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: Insertar la consulta en una aplicación React con el ID del panel de control

Ahora puede insertar la consulta en su aplicación React pasando el ID del panel de control 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 de control puede hacer cambios en la visualización insertada en él, y los cambios aparecerán en tu aplicación React sin necesidad de modificar el código.

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

Hay dos formas de modificar la visualización insertada:

  • Edita la tarjeta de consulta en el panel de control.
  • Añade una nueva tarjeta de consulta al panel de control y elimina la tarjeta original.

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

Para añadir una tarjeta nueva y eliminar la original, sigue las instrucciones para añadir tarjetas de consulta. A continuación, sigue las instrucciones para eliminar las baldosas y borrar la visualización que no quieras. Para que los cambios se apliquen, asegúrate de que solo haya una baldosa en el panel de control y, a continuación, guarda los cambios para salir del modo de edición.

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

Pasos siguientes