En este ejemplo, se renderiza una visualización personalizada de una app que se está desarrollando, no una visualización personalizada disponible en el Marketplace de Looker.
Los componentes de visualización de Looker tienen un sistema de adaptadores que les permite a los desarrolladores anular los tipos de gráficos existentes o agregar opciones de tipos de gráficos completamente nuevas.
Esta opción puede ser útil en las siguientes circunstancias:
- Compilaste visualizaciones de React personalizadas que deseas usar con los componentes de Looker.
- Quieres reemplazar una visualización predeterminada de Looker con una visualización creada en una biblioteca diferente.
La capacidad de anular o agregar gráficos puede ser especialmente relevante si compilas una aplicación que permite a los usuarios cambiar el tipo de visualización de un gráfico durante una sesión.
Segundo plano
Después de renderizar una consulta en la interfaz Explorar de Looker y pasar su Query.client_id
a los componentes de visualización de Looker, puedes modificar el tipo de gráfico si actualizas la propiedad type
de la propiedad config
.
Cada valor que acepta la propiedad type
se asigna a un componente de React específico. Por lo tanto, cuando type
se establece en line
, se renderiza un componente Line
; cuando type
se establece en area
, se renderiza un componente Area
, etcétera.
La propiedad chartTypeMap
del componente Visualization
te permite agregar una entrada nueva o reemplazar entradas existentes en el mapa de tipo o componente que asocia cada valor type
con un componente en particular.
Requisitos
Al igual que con los componentes Cómo usar componentes de visualización y query
para renderizar una visualización simple, debes comenzar por importar el componente DataProvider
y proporcionar una instancia autenticada del SDK. El siguiente ejemplo se compila dentro del framework de extensión de Looker, y el SDK proviene de ExtensionContext
.
En DataProvider
, puedes renderizar los componentes Query
y Visualization
para solicitar datos del SDK de Looker y renderizar la visualización esperada dentro de tu aplicación.
La configuración es la siguiente (en la propiedad query
, reemplaza el valor por Query.client_id
de tu consulta):
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
const App = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query query="z8klgi4PJKAl7TXgTw1opS">
<Visualization />
</Query>
</DataProvider>
)
}
Cómo agregar un nuevo tipo de gráfico
Al igual que con el ejemplo de visualización simple, puedes modificar el tipo de gráfico renderizado pasando una anulación de configuración al componente Query
.
<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
<Visualization />
</Query>
En este caso, type
se configuró como pie
: un gráfico que ofrecen los componentes de Looker de forma predeterminada. Pero ¿qué sucede si desea usar un gráfico que no se ofrece de forma predeterminada? En esa situación, puedes usar la propiedad chartTypeMap
de Visualization
para agregar o reemplazar los componentes del gráfico en el mapa de tipo/componente del sistema del adaptador.
Por ejemplo, si deseas agregar un nuevo gráfico radial al mapa de tipo o componente, agrégalo a chartTypeMap
de la siguiente manera:
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'
const App = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'radar'}}>
<Visualization chartTypeMap={{ radar: MyCustomRadar }} />
</Query>
</DataProvider>
)
}
Este código hace lo siguiente:
- Importa el componente de React
MyCustomRadar
. - Asigna la clave
radar
a la propiedadconfig.type
. - Actualiza la propiedad
chartTypeMap
a fin de que el sistema de asignación de tipos sepa qué renderizar para untype
deradar
.
Así se renderiza en la zona de pruebas de visualización de Looker:
Del mismo modo, puedes reemplazar los gráficos existentes si deseas renderizar tu propia versión. En el siguiente ejemplo, el gráfico de líneas predeterminado de los componentes de Looker se anula con un componente de gráfico de líneas personalizado:
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomLine } from '../MyCustomLine'
const App = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query query="z8klgi4PJKAl7TXgTw1opS">
<Visualization chartTypeMap={{ line: MyCustomLine }} />
</Query>
</DataProvider>
)
}
Ahora, cada vez que el componente Query
encuentre una consulta en la que el tipo de visualización esté configurado como line
, renderizará la implementación personalizada en lugar del valor predeterminado de Looker.
Próximos pasos
- Usa componentes de visualización y la propiedad
dashboard
para renderizar una visualización simple - Usa componentes de visualización y la propiedad
query
para renderizar una visualización simple - Cómo usar componentes de visualización para crear una visualización personalizada
- Tablas de visualización y propiedad de consulta