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

Usar la propiedad query del componente de visualización Query es la forma más sencilla de renderizar una visualización incorporable con los componentes de visualización de Looker. El uso de la propiedad query (en lugar de la propiedad dashboard) ofrece los siguientes beneficios:

  • Solo debes crear una consulta en Looker; no es necesario que crees un panel.
  • Los valores que acepta query (Query.client_id o el ID de consulta) son inmutables. a menos que cambie el modelo subyacente, ningún cambio en la instancia de Looker afectará la visualización incorporada.

Si deseas crear una visualización incorporable que responda a los cambios dentro de la IU de Looker y que, por lo tanto, los usuarios de Looker que no sean desarrolladores de apps puedan actualizar, sigue las instrucciones de la página de documentación Cómo usar componentes de visualización y un ID de panel para renderizar una visualización simple.

Para renderizar una visualización incorporable con los componentes de visualización de Looker y la propiedad query, asegúrate de que tu configuración cumpla con los requisitos y, luego, sigue estos pasos:

  1. Crea una consulta en una exploración y copia el valor de Query.client_id.
  2. Incorpora la consulta en una aplicación de React.
  3. Agrega el componente Visualization.
  4. Personaliza la configuración con la propiedad config.

Requisitos

Antes de empezar, 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 independiente de React, es importante realizar la autenticación 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 sobre la instalación y el uso del paquete de componentes de visualización en el documento README, disponible en GitHub y NPM.

Paso 1: Crea una consulta en una exploración y copia el valor Query.client_id

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.

Busca la propiedad de URL qid en la barra de direcciones del navegador. El valor alfanumérico asignado a esa propiedad es Query.client_id.

Por ejemplo, si la URL es https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse, el Query.client_id es evomfl66xHx1jZk2Hzvv1R.

Query.client_id es una cadena única que representa la consulta y la configuración de visualización. Si cambias algo en la consulta o la configuración, cambiará el Query.client_id.

Copia el Query.client_id para usarlo en el siguiente paso.

Paso 2: Incorpora la consulta en una aplicación de React

Ahora puedes tomar el Query.client_id y, luego, incorporarlo en una aplicación de React.

El siguiente código es para una aplicación hipotética de React. Este ejemplo se compiló en el framework de extensión de Looker y el objeto del SDK de Looker se extrajo del proveedor de contexto de extensiones.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return null
}

Para comenzar, usaremos los componentes DataProvider y Query. DataProvider almacena la referencia del SDK en contexto y Query envía nuestras solicitudes de red y formatea la renderización de la respuesta.

Además, debes proporcionar dos elementos:

  • Un objeto del SDK. El objeto del SDK se extrae del contexto de la extensión.
  • El Query.client_id. El Query.client_id se asigna a la propiedad query.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    {/* pass the sdk object to DataProvider */}
    <DataProvider sdk={core40SDK}>
      {/* the value referenced by the `query` prop is
          unique to your looker instance. */}
      <Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
    </DataProvider>
  )
}

Paso 3: Agrega el componente Visualization

A continuación, agrega el componente Visualization, que interpreta los datos y los parámetros de configuración que muestra Query para renderizar el gráfico esperado.

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)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query="evomfl66xHx1jZk2Hzvv1R">
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Este paso genera una visualización que se ve como en el siguiente ejemplo:

Visualización de un gráfico de líneas.

Paso 4: Personaliza la configuración con la propiedad config

Usa la propiedad config del componente Query para anular la configuración de visualización que se muestra desde el SDK. Esta propiedad puede alterar cualquier atributo admitido, desde el tipo de visualización hasta los detalles de cómo se representa cada serie de datos.

En el siguiente código de muestra, la propiedad config cambia el tipo de gráfico a sparkline y asigna un color nuevo a la serie de datos.

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)

  return (
    <DataProvider sdk={core40SDK}>
      <Query
        query={'evomfl66xHx1jZk2Hzvv1R'}
        config={{
          type: 'sparkline',
          series: [{ color: '#F4B400' }],
        }}
      >
        <Visualization />
      </Query>
    </DataProvider>
  )
}

En el paso anterior, se muestra este minigráfico naranja:

Una visualización de minigráfico.

Para obtener una lista completa de las subpropiedades disponibles en la propiedad config, consulta la documentación de referencia de las tablas de propiedades de visualización y consulta.

Próximos pasos