Usar componentes de visualización para renderizar visualizaciones personalizadas

En este ejemplo, se renderiza una visualización personalizada que es local de una app en desarrollo, no una visualización personalizada disponible en Looker Marketplace.

Los componentes de visualización de Looker tienen un sistema de adaptación que 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:

  • Creaste visualizaciones personalizadas de React que deseas usar con los componentes de Looker.
  • Quieres reemplazar una visualización predeterminada existente de Looker por una visualización creada en una biblioteca diferente.

La capacidad de anular o agregar gráficos puede ser especialmente relevante si estás compilando una aplicación que permite a los usuarios cambiar el tipo de visualización de gráfico durante una sesión.

Antecedentes

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 actualizando la propiedad type de la propiedad config.

Cada valor que acepta la propiedad type se asigna a un componente específico de React. 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 nueva entrada o reemplazar las entradas existentes en el mapa de tipo o componente que asocia cada valor type con un componente en particular.

Requisitos

Al igual que en el ejemplo Cómo usar componentes de visualización y la propiedad query para renderizar una visualización simple, debes comenzar por importar el componente DataProvider y proporcionar una instancia de SDK autenticada. El siguiente ejemplo se compila en el framework de extensiones 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 en tu aplicación.

La configuración es la siguiente (en la propiedad query, reemplaza el valor por el Query.client_id de tu búsqueda):

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 en el ejemplo de visualización simple, puedes modificar el tipo de gráfico renderizado pasando una config override al componente Query.

<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
    <Visualization />
</Query>

En este caso, type se estableció en pie, un gráfico que ofrecen los componentes de Looker de forma predeterminada. Pero ¿qué pasa si quieres usar un gráfico que no se ofrece de forma predeterminada? En ese caso, puedes usar la propiedad chartTypeMap de Visualization para agregar o reemplazar los componentes del gráfico en el mapa de tipos o componentes en el sistema adaptador.

Si, por ejemplo, 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 MyCustomRadar de React
  • Asigna la clave radar a la propiedad config.type.
  • Actualiza la propiedad chartTypeMap a fin de que el sistema de asignación de tipos sepa qué renderizar para un type de radar.

Así es como se renderiza en la zona de pruebas de visualización de Looker:

Se muestra un mapa de radar en la zona de pruebas de visualización.

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 de los componentes predeterminados 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