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

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

  • Solo debe compilar una consulta en Looker; no es necesario crear 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 integrable que responda a los cambios en la IU de Looker y, por lo tanto, la puedan actualizar los usuarios de Looker que no sean desarrolladores de apps, sigue las instrucciones que se indican en la página Cómo usar los componentes de visualización y un ID de panel para renderizar una visualización simple.

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

  1. Crea una consulta en Explorar y copia el valor Query.client_id.
  2. Incorporar 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 comenzar, se necesitan algunos elementos:

  • Debes tener acceso a una instancia de Looker.
  • Ya sea que estés compilando en el framework de extensión o en tu propia aplicación de React independiente, es importante autenticarse con la API de Looker y tener acceso al objeto del SDK de Looker. Obtén más información sobre la autenticación de la API de Looker o sobre 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 @looker/components-data. Puedes encontrar información sobre cómo instalar y usar el paquete de componentes de visualización en el documento README, disponible en GitHub y NPM.

Paso 1: Crea una consulta en Explorar y copia el valor Query.client_id

Usa Explorar para crear una consulta dentro de la IU de Looker. Agregue una visualización compatible a Explorar y, de manera opcional, establezca sus parámetros de 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, entonces Query.client_id es evomfl66xHx1jZk2Hzvv1R.

El Query.client_id es una string única que representa la consulta y la configuración de visualización. Si cambias algo en la consulta o en la configuración, cambiará 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 e incorporarlo a una aplicación de React.

A continuación, se muestra el código de 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 la extensión.

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 despacha nuestras solicitudes de red y da formato a la renderización de la respuesta.

Además, debes proporcionar dos elementos:

  • Un objeto SDK. El objeto del SDK se obtiene 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>
  )
}

En este paso, se muestra una visualización similar al siguiente ejemplo:

Visualización de 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 muestra el SDK. Esta propiedad puede alterar cualquier atributo compatible, desde el tipo de visualización hasta los detalles de cómo se renderiza 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 renderiza este minigráfico naranja:

Un minigráfico en la visualización

Para obtener una lista completa de las subpropiedades que están disponibles en la propiedad config, visita la documentación de referencia de las tablas de propiedades de visualización y consulta o consulta las propiedades en acción en la zona de pruebas de componentes de visualización.

Próximos pasos