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 de Looker. El uso de la propiedad query (a diferencia 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 quieres crear una visualización integrable que responda a los cambios en la IU de Looker y que, por lo tanto, los usuarios de Looker que no sean desarrolladores de apps la puedan actualizar, sigue las instrucciones de la página de documentación Usa 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 tu configuración cumpla con los requisitos y, luego, sigue estos pasos:

  1. Crea una consulta en una exploración 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 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. Para obtener más información, consulta la autenticación de la API de Looker o nuestro framework de extensiones.
  • Asegúrate de haber instalado el paquete de NPM 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 en una exploración y copia el valor Query.client_id

Usa una exploración para crear una consulta dentro de la IU de Looker. Agrega una visualización compatible a Explorar y, de manera opcional, establece 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, entonces 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 algún elemento en la consulta o la configuración, también se modificará 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 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 extensiones 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 despacha nuestras solicitudes de red y formatea la renderización de la respuesta.

Además, debes proporcionar dos cosas:

  • Un objeto de SDK. El objeto del SDK se extrae del contexto de la extensión.
  • El 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 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 genera una visualización similar al 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 muestra el SDK. Esta propiedad puede modificar cualquier atributo admitido, 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 nuevo color 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:

Una visualización en miniatura.

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

Próximos pasos