Usar a propriedade query
do componente de visualização Query
é a maneira mais simples de renderizar uma visualização incorporável com os componentes de visualização do Looker. O uso da propriedade query
(e não a propriedade dashboard
) oferece os seguintes benefícios:
- Você só precisa criar uma consulta no Looker. Não é necessário criar um painel.
- Os valores aceitos pelo
query
(Query.client_id
ou ID da consulta) são imutáveis. A menos que o modelo em questão mude, nenhuma alteração na instância do Looker afetará a visualização incorporada.
Se você quiser criar uma visualização incorporável que responda às mudanças na IU do Looker e, portanto, possa ser atualizada pelos usuários do Looker, exceto os desenvolvedores de apps, siga as instruções na página de documentação Como usar componentes de visualização e um ID do painel para renderizar uma visualização simples.
Para renderizar uma visualização incorporável usando componentes de visualização do Looker e a propriedade query
, verifique se sua configuração atende aos requisitos e siga estas etapas:
- Crie uma consulta em um Explorar e copie o valor
Query.client_id
. - Incorporar a consulta a um aplicativo do React.
- Adicione o componente
Visualization
. - Personalizar configurações com a propriedade
config
.
Requisitos
Antes de começar, alguns elementos são necessários:
- Você precisa ter acesso a uma instância do Looker.
- Não importa se você está criando no framework de extensão ou no seu próprio aplicativo React autônomo, é importante autenticar com a API Looker e ter acesso ao objeto do SDK do Looker. Leia sobre a autenticação da API Looker ou nosso framework de extensão para mais informações.
- Verifique se você instalou o pacote de NPM e os pacotes do NPM
@looker/components-data
dos componentes de visualização do Looker. Informações sobre como instalar e usar o pacote de componentes de visualização podem ser encontradas no documento README, disponível no GitHub e no NPM.
Etapa 1: crie uma consulta em um Explore e copie o valor Query.client_id
Use Explorar para criar uma consulta na IU do Looker. Adicione uma visualização compatível ao "Explorar" e, como opção, defina as configurações no menu Configurações da visualização.
Observe a propriedade qid
de URL na barra de URL do navegador. O valor alfanumérico atribuído a essa propriedade é o Query.client_id
:
O Query.client_id
é uma string única que representa as configurações de consulta e visualização. Se você mudar algo na consulta ou nas configurações, o Query.client_id
mudará.
Copie o Query.client_id
para usar na etapa a seguir.
Etapa 2: incorporar a consulta em um aplicativo do React
Agora, você pode pegar o Query.client_id
e incorporá-lo a um aplicativo do React.
Veja abaixo o código de um aplicativo React hipotético. Esse exemplo foi criado no framework de extensão do Looker, e o objeto do SDK do Looker foi extraído do provedor de contexto da extensão.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return null
}
Para começar, vamos usar os componentes DataProvider
e Query
. O DataProvider
armazena a referência do SDK no contexto, e o Query
envia nossas solicitações de rede e formata a renderização da resposta.
Além disso, é necessário fornecer duas informações:
- Um objeto SDK. O objeto do SDK é extraído do contexto da extensão.
- O
Query.client_id
. OQuery.client_id
é atribuído à propriedadequery
.
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>
)
}
Etapa 3: adicionar o componente Visualization
Em seguida, adicione o componente Visualization
, que interpreta os dados e as configurações retornados por Query
para renderizar o 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>
)
}
Esta etapa gera uma visualização semelhante ao exemplo a seguir:
Etapa 4: personalizar as configurações com a propriedade config
Use a propriedade config
do componente Query
para substituir as configurações de visualização retornadas do SDK. Essa propriedade pode alterar qualquer recurso compatível, desde o tipo de visualização até os detalhes de como cada série de dados é renderizada.
No exemplo de código abaixo, a propriedade config
muda o tipo de gráfico para sparkline
e atribui uma nova cor à série de dados.
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>
)
}
A etapa anterior renderiza este minigráfico:
Para ver uma lista completa das subpropriedades disponíveis na propriedade config
, acesse a documentação de referência das tabelas de visualização e consulta de propriedade ou veja as propriedades em ação no Playground de componentes de visualização.
Próximas etapas
- Como usar componentes de visualização e a propriedade
dashboard
para renderizar uma visualização simples - Usar componentes de renderização para renderizar visualizações personalizadas
- Como usar componentes de visualização para criar uma visualização personalizada
- Tabelas de propriedade de visualização e consulta