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

A utilização da propriedade dashboard do Querycomponente de visualização permite-lhe renderizar uma visualização incorporável que pode responder a alterações na IU do Looker. A utilização da propriedade dashboard oferece as seguintes vantagens:

  • A visualização pode ser atualizada por qualquer utilizador do Looker com acesso de edição ao painel de controlo.
  • As atualizações à visualização incorporada não requerem alterações à extensão implementada nem à aplicação React.

Para renderizar uma visualização incorporável através de componentes de visualização do Looker e um ID do painel de controlo numérico, certifique-se de que a configuração cumpre os requisitos e, em seguida, siga estes passos:

  1. Crie uma consulta e adicione-a a um painel de controlo.
  2. Incorporar a consulta numa aplicação React através do ID do painel de controlo.
  3. Modifique a visualização, se necessário.

Requisitos

Antes de começar, precisa de alguns elementos:

  • Tem de ter acesso a uma instância do Looker.
  • Quer esteja a criar no framework de extensões ou na sua própria aplicação React autónoma, é importante fazer a autenticação com a API Looker e ter acesso ao objeto do SDK Looker. Leia acerca da autenticação da API Looker ou da nossa estrutura de extensões para mais informações.
  • Certifique-se de que instalou o pacote NPM dos componentes de visualização do Looker e o @looker/components-data pacote NPM. Pode encontrar informações sobre a instalação e a utilização do pacote de componentes de visualização no documento README, disponível no GitHub e no NPM.

Passo 1: crie uma consulta e adicione-a a um painel de controlo

Use uma exploração para criar uma consulta na IU do Looker. Adicione uma visualização suportada à funcionalidade Explorar e, opcionalmente, configure as respetivas definições no menu Definições da visualização.

Crie um novo painel de controlo com esta consulta. Em alternativa, pode adicionar a consulta a um painel de controlo em branco que já criou.

O componente Query carrega sempre a visualização do primeiro mosaico que foi adicionado cronologicamente ao painel de controlo associado, independentemente de onde o mosaico aparece no esquema do painel de controlo. Por este motivo, é uma boa prática usar apenas painéis de controlo de mosaico único como referência de consulta.

O componente Query apresenta apenas a visualização em mosaico. Não apresenta o título do mosaico, o título do painel de controlo nem outros elementos do painel de controlo. Os filtros do painel de controlo aplicados ao mosaico não têm efeito na visualização incorporada.

Depois de criar o painel de controlo, veja-o.

Um ID numérico do painel de controlo aparece no URL do painel de controlo após dashboards/. Copie este ID para usar no passo seguinte.

A propriedade dashboard do componente Query só aceita IDs numéricos. Não aceita os IDs de string dos painéis de controlo do LookML.

Passo 2: incorpore a consulta numa aplicação React através do ID do painel de controlo

Agora, pode incorporar a consulta na sua aplicação React transmitindo o ID do painel de controlo 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>
  )
}

Passo 3: modifique a visualização, se necessário

Agora, todos os utilizadores do Looker com acesso de edição ao painel de controlo podem fazer alterações à visualização incorporada no painel de controlo, e as alterações aparecem na sua aplicação React sem necessidade de alterações ao código.

Para ter acesso de edição, os utilizadores têm de ter o nível de acesso Gerir acesso, editar para a pasta onde o painel de controlo se encontra, acesso ao modelo para o modelo no qual a consulta se baseia e as autorizações do Looker adequadas para editar painéis de controlo.

Existem duas formas de modificar a visualização incorporada:

  • Editar o mosaico de consulta no painel de controlo ou
  • Adicione um novo mosaico de consulta ao painel de controlo e elimine o mosaico original.

Para editar o mosaico de consulta, siga as instruções para editar mosaicos na página de documentação Editar painéis de controlo definidos pelo utilizador e guarde as alterações para sair do modo de edição no painel de controlo.

Para adicionar um novo mosaico e eliminar o original, siga as instruções para adicionar mosaicos de consulta e adicionar o novo mosaico. Em seguida, siga as instruções para eliminar mosaicos e eliminar a visualização indesejada. Para aplicar as alterações, certifique-se de que existe apenas um mosaico no painel de controlo e, em seguida, guarde as alterações para sair do modo de edição no painel de controlo.

Depois de modificar e guardar o painel de controlo, as alterações de visualização aparecem na extensão ou na aplicação React sem necessidade de alterações ao código.

Passos seguintes