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 integrable con componentes de visualización Looker. El uso de la propiedad query (en lugar de la propiedad dashboard) ofrece los siguientes beneficios:

Si desea crear una visualización integrable que responda a los cambios en la IU de Looker y que, por lo tanto, pueda actualizar los usuarios de Looker que no sean desarrolladores de aplicaciones, siga las instrucciones en la página de documentación Cómo usar componentes de visualización y un ID de panel para procesar 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. Compila una consulta en Explorar y copia el valor 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 comenzar, se necesitan 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. Obtén más información sobre la autenticación de 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. La información sobre la instalación y el uso del paquete de componentes de visualización se puede encontrar en el documento README, que está disponible en GitHub y NPM.

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

Usa Explorar para compilar una consulta dentro de la IU de Looker. Agrega una visualización compatible al menú Explorar y, de manera opcional, establece su configuración en el menú Configuración de la visualización.

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

Query.client_id es una string única que representa la configuración de la consulta y la 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: Incorporar 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 para una aplicación hipotética de React. Este ejemplo se compiló en el marco de trabajo de la 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 representación de la respuesta.

Además, debes proporcionar dos elementos:

  • Un objeto de SDK. El objeto SDK se extrae del contexto de extensión.
  • La Query.client_id. 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 la 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 similar al siguiente ejemplo:

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 modificar cualquier función compatible, desde el tipo de visualización hasta los detalles de cómo se procesa 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 procesa este minigráfico de color naranja:

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