Usar componentes de visualização para renderizar visualizações personalizadas

Este exemplo renderiza uma visualização personalizada que é local para uma app em desenvolvimento e não uma visualização personalizada disponível no Looker Marketplace.

Os componentes de visualização do Looker têm um sistema de adaptador que permite aos programadores substituir os tipos de gráficos existentes ou adicionar opções de tipos de gráficos totalmente novas.

Esta opção pode ser útil nas seguintes circunstâncias:

  • Criou visualizações personalizadas do React que quer usar com os componentes do Looker.
  • Quer substituir uma visualização predefinida do Looker existente por uma visualização criada numa biblioteca diferente.

A capacidade de substituir ou adicionar gráficos pode ser especialmente relevante se estiver a criar uma aplicação que permita aos utilizadores alterar o tipo de visualização de gráficos durante uma sessão.

Contexto

Depois de renderizar uma consulta na interface de Explorar do Looker e passar o respetivo Query.client_id para os componentes de visualização do Looker, pode modificar o tipo de gráfico atualizando a propriedade config da propriedade type.

Cada valor aceite pela propriedade type é mapeado para um componente React específico. Assim, quando type está definido como line, é renderizado um componente Line; quando type está definido como area, é renderizado um componente Area; e assim sucessivamente.

A propriedade chartTypeMap do componente Visualization permite-lhe adicionar uma nova entrada ou substituir entradas existentes no mapa de tipos/componentes que associa cada valor type a um componente específico.

Requisitos

Tem de começar por importar o componente DataProvider e fornecer uma instância do SDK autenticada. O exemplo seguinte é criado na estrutura de extensão do Looker, e o SDK é proveniente de ExtensionContext.

Em DataProvider, pode renderizar os componentes Query e Visualization para pedir dados ao SDK Looker e renderizar a visualização esperada na sua aplicação.

A configuração é a seguinte (na propriedade query, substitua o valor pelo Query.client_id da sua 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>
    )
}

Adicionar um novo tipo de gráfico

Pode modificar o tipo de gráfico renderizado transmitindo uma substituição de configuração ao componente Query.

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

Neste caso, type foi definido como pie: um gráfico que os componentes do Looker oferecem por predefinição. Mas e se quiser usar um gráfico que não é oferecido por predefinição? Nessa situação, pode usar a propriedade chartTypeMap de Visualization para adicionar ou substituir os componentes do gráfico no mapa de tipo/componente no sistema do adaptador.

Por exemplo, se quiser adicionar um novo gráfico de radar ao mapa de tipos/componentes, adicione-o ao chartTypeMap da seguinte forma:

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 faz o seguinte:

  • Importa o MyCustomRadar componente React
  • Atribui a tecla radar à propriedade config.type
  • Atualiza a propriedade chartTypeMap para que o sistema de mapeamento de tipos saiba o que renderizar para um type de radar

É assim que é renderizado no playground de visualização do Looker:

É apresentado um mapa de radar no espaço de testes de visualização.

Da mesma forma, pode substituir os gráficos existentes se quiser renderizar a sua própria versão. No exemplo seguinte, o gráfico de linhas dos componentes predefinidos do Looker é substituído por um componente de gráfico de linhas 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>
    )
}

Agora, sempre que o componente Query encontrar uma consulta em que o tipo de visualização esteja definido como line, vai renderizar a implementação personalizada em vez da predefinição do Looker.

Passos seguintes