Como usar componentes de visualização e a propriedade do painel para renderizar uma visualização simples

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:

  1. Crie uma consulta e a adicione a um painel.
  2. Incorpore a consulta a um aplicativo do React usando o ID do painel.
  3. 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 componente Query 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