Este exemplo renderiza uma visualização personalizada que é local a um app em desenvolvimento, 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 desenvolvedores substituir os tipos de gráficos existentes ou adicionar novas opções de tipo de gráfico.
Essa opção pode ser útil nas seguintes circunstâncias:
- Você criou visualizações React personalizadas que gostaria de usar com os componentes do Looker.
- Você quer substituir uma visualização padrão do Looker por uma criada em uma biblioteca diferente.
A capacidade de substituir ou adicionar gráficos pode ser especialmente relevante se você estiver criando um aplicativo que permite que os usuários alterem o tipo de visualização de gráfico durante uma sessão.
Segundo plano
Depois de renderizar uma consulta na interface do Explorar do Looker e transmitir o Query.client_id
para os componentes de visualização do Looker, é possível modificar o tipo de gráfico atualizando a propriedade type
da propriedade config
.
Cada valor aceito pela propriedade type
é mapeado para um componente React específico. Quando a type
for definida como line
, um componente Line
será renderizado. Quando type
for definido como area
, um componente Area
será renderizado e assim por diante.
A propriedade chartTypeMap
do componente Visualization
permite adicionar uma nova entrada ou substituir entradas existentes no mapa de tipo/componente que associa cada valor de type
a um componente específico.
Requisitos
Assim como no exemplo Como usar componentes de visualização e a propriedade query
para renderizar uma visualização simples, primeiro você precisa importar o componente DataProvider
e fornecer uma instância autenticada do SDK. O exemplo a seguir é criado na estrutura de extensão
do Looker, e o SDK vem de ExtensionContext
.
Em DataProvider
, você pode renderizar os componentes Query
e Visualization
para solicitar dados do SDK do Looker e renderizar a visualização esperada no seu aplicativo.
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
Como no exemplo de visualização simples, é possível modificar o tipo de gráfico renderizado transmitindo uma substituição de configuração para o componente Query
.
<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
<Visualization />
</Query>
Nesse caso, type
foi definido como pie
: um gráfico que os componentes do Looker oferecem por padrão. Mas e se você quiser usar um gráfico que não é oferecido por padrão? Nessa situação, você pode usar a propriedade chartTypeMap
do Visualization
para adicionar ou substituir os componentes do gráfico no mapa de tipo/componente do sistema do adaptador.
Se, por exemplo, você quiser adicionar um novo gráfico de radar ao mapa de tipo/componente, adicione-o ao chartTypeMap
desta 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>
)
}
Esse código faz o seguinte:
- Importa o componente
MyCustomRadar
do React. - Atribui a chave
radar
à propriedadeconfig.type
- Atualiza a propriedade
chartTypeMap
para que o sistema de mapeamento de tipos saiba o que será renderizado para umtype
deradar
.
É assim que ele é renderizado no playground de visualização do Looker:
Da mesma forma, você pode substituir gráficos existentes se quiser renderizar sua própria versão. No exemplo a seguir, os componentes padrão do Looker' são substituídos por um componente de gráfico de linha 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
, a implementação personalizada será renderizada no lugar do padrão do Looker.
Próximas etapas
- Como usar componentes de visualização e a propriedade
dashboard
para renderizar uma visualização simples - Como usar componentes de visualização e a propriedade
query
para renderizar uma visualização simples - Como usar componentes de visualização para criar uma visualização personalizada
- Tabelas de propriedade de visualização e consulta