Como 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 possa responder às mudanças na IU 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 na visualização incorporada não exigem alterações 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 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 os componentes de visualização do Looker e um ID numérico do painel, verifique se sua configuração atende aos requisitos e, em seguida, execute as seguintes etapas:

  1. Crie uma consulta e adicione-a a um painel.
  2. Incorporar 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 da extensão ou no seu próprio aplicativo autônomo do React, é 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 NPM dos componentes de visualização do Looker e o pacote NPM @looker/components-data. Informações sobre a instalação e o uso do 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 a opção Explorar para criar uma consulta na IU do Looker. Adicione uma visualização compatível à seção "Explorar" e, se quiser, defina as configurações no menu Configurações da visualização.

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 vai carregar a visualização do primeiro bloco que foi adicionado cronologicamente ao painel associado, independentemente de onde o bloco aparece no layout. Por esse motivo, é recomendável usar somente painéis de bloco único como referência da consulta.

O componente Query exibirá apenas a visualização do bloco. Ele não exibirá o título do bloco, o título do painel ou outros elementos do painel. Todos os filtros do painel 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 componente Query aceita apenas IDs numéricos. Ele não aceita IDs de string de painéis do LookML.

Etapa 2: incorporar a consulta em um aplicativo do React usando o ID do painel

Agora, é possível 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, todos os usuários do Looker com acesso de edição ao painel podem fazer alterações na visualização incorporada ao painel, e elas vão aparecer no aplicativo React sem exigir nenhuma mudança no código.

Para acesso de edição, os usuários precisam ter o nível de acesso Gerenciar acesso, Editar para a pasta em que o painel está, acesso ao modelo no 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
  • Adicione um novo bloco de consulta ao painel 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 as 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 para adicionar seu novo bloco. Em seguida, siga as instruções para excluir blocos e excluir a visualização indesejada. Para que as alterações sejam aplicadas, verifique se há apenas um bloco no painel e salve-as para sair do modo de edição.

Depois de modificar e salvar seu painel, as alterações de visualização serão exibidas na extensão ou no aplicativo React sem exigir nenhuma alteração no código.

Próximas etapas