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
(em vez da propriedade dashboard
) oferece os seguintes benefícios:
- Você só precisa criar uma consulta no Looker. você não precisa criar um painel.
- Os valores aceitos por
query
(Query.client_id
ou o ID da consulta) são imutáveis. A menos que o modelo subjacente mude, nenhuma mudança na instância do Looker vai afetar a visualização incorporada.
Se você quiser criar uma visualização incorporável que responda a mudanças na interface do Looker e possa ser atualizada por usuários do Looker que não sejam desenvolvedores de apps, siga as instruções da 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 a configuração atende aos requisitos e siga estas etapas:
- Crie uma consulta em uma Análise e copie o valor
Query.client_id
. - Incorpore a consulta em um aplicativo React.
- Adicione o componente
Visualization
. - Personalize as 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 independente, é importante fazer a autenticação com a API Looker e ter acesso ao objeto do SDK do Looker. Leia sobre a autenticação da API Looker ou nossa estrutura de extensão para mais informações.
- Verifique se você instalou o pacote NPM e o
@looker/components-data
pacote NPM de componentes de visualização do Looker. As informações sobre como instalar e usar o pacote de componentes de visualização estão disponíveis no documento README, disponível no GitHub e no NPM.
Etapa 1: criar uma consulta em uma Análise e copiar o valor Query.client_id
Use uma Análise para criar uma consulta na interface do Looker. Adicione uma visualização compatível à guia "Explorar" e defina as configurações dela no menu Configurações.
Encontre a propriedade de URL qid
na barra de endereço do navegador. O valor alfanumérico atribuído a essa propriedade é Query.client_id
.
Por exemplo, se o URL for https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse
, o Query.client_id
será evomfl66xHx1jZk2Hzvv1R
.
O Query.client_id
é uma string exclusiva que representa as configurações de consulta e visualização. Se você mudar qualquer coisa na consulta ou nas configurações, o Query.client_id
vai mudar.
Copie o Query.client_id
para usar na etapa a seguir.
Etapa 2: incorporar a consulta em um aplicativo React
Agora, você pode incorporar o Query.client_id
a um aplicativo React.
O código a seguir é para 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, usaremos 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, você deve fornecer duas coisas:
- Um objeto do 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 retornadas 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>
)
}
Essa 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 pelo 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 a seguir, 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 ícone laranja:
Para conferir uma lista completa das subpropriedades disponíveis na propriedade config
, acesse a documentação de referência das tabelas de propriedades de visualização e consulta.
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 para renderizar visualizações personalizadas
- Como usar componentes de visualização para criar uma visualização personalizada
- Tabelas de propriedades de visualização e consulta