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

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 painel.
  • 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 a mudanças na interface do Looker, siga as instruções na página de documentação 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 atende aos requisitos e siga estas etapas:

  1. Crie uma consulta e adicione-a a um painel.
  2. Incorpore a consulta em um aplicativo 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 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. 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 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, você pode 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, independentemente de onde o bloco aparece no layout do painel. 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 painel aplicados ao bloco não vão afetar a 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 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 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: modificar 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 dashboard, e as alterações vão aparecer no aplicativo React sem precisar mudar o código.

Para ter acesso de edição, os usuários precisam ter o nível de acesso Gerenciar acesso, Editar à pasta em que o painel está, acesso ao modelo em que a consulta é baseada e as permissões do Looker adequadas para editar painéis.

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

  • Edite 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 de como 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 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 as mudanças sejam aplicadas, verifique se há apenas um bloco no painel e salve as alterações para sair do modo de edição.

Depois que você modificar e salvar o painel, as mudanças na visualização vão aparecer na extensão ou no aplicativo React sem precisar fazer alterações no código.

Próximas etapas