O uso da propriedade dashboard
do componente de visualização Query
permite renderizar uma visualização incorporável que pode responder a mudanças na interface do Looker. Usar a propriedade dashboard
(em vez da 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 dashboard.
- As atualizações da visualização incorporada não exigem mudanças na extensão implantada ou no aplicativo React.
Se você quiser criar uma visualização incorporável que não responda às mudanças na interface do Looker, siga as instruções da 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 ID numérico do painel, verifique se a configuração atendeu aos requisitos e siga estas etapas:
- Crie uma consulta e adicione a um painel.
- Incorpore a consulta em um aplicativo 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 independente, é importante autenticar 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 e adicioná-la a um painel
Use uma Análise para criar uma consulta na interface do Looker. Adicione uma visualização com suporte ao recurso "Explorar" e, se quiser, configure as configurações dela no menu Configurações.
Crie um novo painel usando esta consulta. Como alternativa, é 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 adicionado cronologicamente ao painel associado, seja qual for o local em que o bloco aparece no layout. Por esse motivo, é uma boa prática usar apenas painéis de bloco único como referência de consulta.
O componente Query
só vai mostrar a visualização de blocos. Ele não exibe o título do bloco, o título do painel ou outros elementos do painel. Os filtros do dashboard aplicados ao bloco não terão efeito na visualização incorporada.
Depois que o painel for criado, visualize-o.
Um ID numérico do painel aparece no URL do painel após dashboards/
. Copie esse ID para usar na próxima etapa.
A propriedade
dashboard
do componenteQuery
aceita apenas IDs numéricos. Ele não aceita os IDs de string dos painéis do LookML.
Etapa 2: incorporar a consulta a um aplicativo React usando o ID do painel
Agora você pode incorporar a consulta ao 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>
)
}
Etapa 3: modifique a visualização, se necessário
Agora, qualquer usuário do Looker com acesso de edição ao dashboard pode fazer mudanças na visualização incorporada ao seu dashboard, e as alterações vão aparecer no aplicativo React sem precisar mudar o código.
Para editar, os usuários precisam ter o nível de acesso Gerenciar acesso, Editar para a pasta em que o painel está, acesso ao modelo em que a consulta se baseia e as permissões do Looker apropriadas para editar dashboards.
Há duas maneiras de modificar a visualização incorporada:
- Editar o bloco de consulta no painel ou
- Adicione um novo bloco de consulta ao dashboard e exclua 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 suas alterações para sair do modo de edição no painel.
Para adicionar um novo bloco e excluir o original, siga as instruções para adicionar blocos de consulta. Depois, siga as instruções para excluir blocos e excluir a visualização indesejada. Para que suas alterações sejam aplicadas, certifique-se de que haja apenas um bloco em seu painel e salve suas alterações para sair do modo de edição no painel de controle.
Depois de modificar e salvar o painel, as mudanças na visualização vão aparecer na extensão ou no aplicativo React sem exigir nenhuma mudança no código.
Próximas etapas
- Como usar componentes de visualização e a propriedade
query
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