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:
- Solo debe compilar una consulta en Looker; no necesita crear un panel.
- Los valores que
query
acepta (Query.client_id
o el ID de consulta) son inmutables; a menos que el modelo subyacente cambie, ningún cambio en la instancia de Looker afectará la visualización incorporada.
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:
- Compila una consulta en Explorar y copia el valor
Query.client_id
. - Incorpora la consulta en una aplicación de React.
- Agrega el componente
Visualization
. - 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 propiedadquery
.
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
- Usa componentes de visualización y la propiedad
dashboard
para renderizar una visualización simple - Usa componentes de visualización para renderizar visualizaciones personalizadas
- Cómo usar componentes de visualización para crear una visualización personalizada
- Tablas de visualización y propiedad de consultas