Usar a propriedade dashboard
do componente de visualização Query
permite renderizar uma visualização incorporável que pode responder a mudanças na IU do Looker. O uso da propriedade dashboard
(e não a propriedade query
) oferece os seguintes benefícios:
- A visualização pode ser atualizada por qualquer usuário do Looker com acesso de edição ao painel.
- As atualizações da visualização incorporada não exigem mudanças na extensão implantada ou no aplicativo do React.
Se você quiser criar uma visualização incorporável que não responda a mudanças na IU do Looker, siga as instruções na página de documentação Como usar componentes de visualização e a propriedade
query
para renderizar uma visualização simples.
Para renderizar uma visualização incorporável usando componentes de visualização do Looker e um código de painel numérico, verifique se sua configuração atende aos requisitos e siga estas etapas:
- Crie uma consulta e a adicione a um painel.
- Incorpore a consulta a um aplicativo do React usando o ID do painel.
- Modifique a visualização, se necessário.
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: criar uma consulta e adicioná-la a um painel
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.
Crie um novo painel com esta consulta. Também é possível adicionar a consulta a um painel em branco que você já criou.
O componente Query
sempre carrega a visualização do primeiro bloco que foi adicionado em ordem cronológica ao painel associado, independentemente de onde o bloco aparece no layout do painel. Por isso, recomendamos usar apenas painéis de bloco único como referência.
O componente Query
só exibe a visualização do bloco. Ele não exibirá o título do bloco, o do painel nem outros elementos do painel. Filtros de painel aplicados ao bloco não terão efeito na visualização incorporada.
Quando o painel for criado, visualize-o.
Um ID numérico do painel aparece no URL do painel depois de dashboards/
. Copie esse ID para usar na próxima etapa.
A propriedade
dashboard
do componenteQuery
aceita apenas IDs numéricos. Não aceita IDs de string de painéis LookML.
Etapa 2: incorporar a consulta a um aplicativo do React usando o ID do painel
Agora, é possível incorporar a consulta ao seu aplicativo React, transmitindo o ID do painel na propriedade dashboard
do componente Query
:
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)
export const MyReactApp = ({ sdk: core40SDK }: Props) => {
return (
<DataProvider sdk={core40SDK}>
<Query dashboard={61}>
<Visualization />
</Query>
</DataProvider>
)
}
Veja como a visualização será exibida no aplicativo de extensão ou no React:
Etapa 3: modifique a visualização, se necessário
Agora, todos os usuários do Looker com acesso de edição ao painel podem fazer alterações na visualização incorporada ao seu painel. As alterações serão exibidas no seu aplicativo React sem exigir alterações no código.
Para acesso de edição, os usuários precisam ter o nível de acesso Gerenciar acesso, edição para a pasta em que o painel está, acesso ao modelo no modelo em que a consulta é baseada e as permissões do Looker apropriadas para editar painéis.
Há duas maneiras de modificar a visualização incorporada:
- Edite o bloco de consulta no painel ou
- Adicionar um novo bloco de consulta ao painel e excluir o bloco original.
Para editar o bloco de consulta, siga as instruções para editar blocos na página de documentação Como editar painéis definidos pelo usuário e salve as mudanças para sair do modo de edição no painel.
Para adicionar um novo bloco e excluir o bloco original, siga as instruções para adicionar blocos de consulta para adicionar o novo bloco. Depois, siga as instruções para excluir blocos e excluir a visualização indesejada. Para que suas mudanças sejam aplicadas, verifique se há apenas um bloco no painel de controle e salve as alterações para sair do modo de edição no painel de controle.
Após modificar e salvar o painel, as alterações de visualização aparecerão na extensão ou no aplicativo do React sem exigir alterações no código.
Próximas etapas
- Como usar componentes de visualização e a propriedade
query
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