Como usar componentes de visualização e a propriedade do dashboard 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 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:

  1. Crie uma consulta e adicione 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. 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 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: 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