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

Com a propriedade dashboard do componente de visualização Query, é possível renderizar uma visualização incorporável que responde a mudanças na interface do Looker. O uso da 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 para editar o painel.
  • As atualizações na 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 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 os componentes de visualização do Looker e um ID numérico do painel, verifique se a configuração atende aos requisitos e siga estas etapas:

  1. Crie uma consulta e adicione-a a um painel.
  2. Incorpore a consulta em 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.
  • 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 do Looker e ter acesso ao objeto do SDK do Looker. Leia sobre a autenticação da API Looker ou nosso framework de extensões para mais informações.
  • Verifique se você instalou o pacote NPM dos componentes de visualização do Looker e o pacote NPM @looker/components-data (links em inglês). As 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 (links em inglês).

Etapa 1: criar uma consulta e adicioná-la a um painel

Use uma opção Explore para criar uma consulta na interface do Looker. Adicione uma visualização compatível ao painel "Explorar" e, se quiser, defina as definições no menu Configurações da visualização.

Crie um novo painel usando esta consulta. Outra opção é 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 cronologicamente ao painel associado, independente de onde o bloco aparece no layout do painel. Por isso, é uma boa prática usar apenas painéis de bloco único como referência de consulta.

O componente Query vai mostrar apenas a visualização de blocos. Ele não vai mostrar 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 painel.

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 componente Query aceita apenas IDs numéricos. Ele não aceita os IDs de string dos painéis do LookML.

Etapa 2: incorporar a consulta em 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: modificar a visualização, se necessário

Agora, qualquer usuário do Looker com acesso para editar o painel pode fazer mudanças na visualização incorporada, e as mudanças vão aparecer no aplicativo React sem exigir nenhuma mudança no código.

Para ter acesso para editar, os usuários precisam ter o nível de acesso Gerenciar acesso ou editar para a pasta em que o painel está, acesso ao modelo ao modelo em que a consulta se baseia e as permissões do Looker apropriadas para editar painéis.

Há duas maneiras de modificar a visualização incorporada:

  • Editar o bloco de consulta no painel ou
  • Adicionar um novo bloco de consulta ao dashboard 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 suas alterações para sair do modo de edição no painel de controle.

Para adicionar um novo bloco e excluir o original, siga as instruções para adicionar blocos de consulta para incluir seu novo bloco. Depois siga as instruções para excluir blocos para excluir a visualização indesejada. Para que suas alterações sejam aplicadas, certifique-se de que haja apenas um bloco em seu painel de controle, depois salve-as para sair do modo de edição no painel de controle.

Depois de modificar e salvar o painel, as mudanças de visualização vão aparecer na extensão ou no aplicativo React sem exigir nenhuma mudança no código.

Próximas etapas