Componentes de visualização do Looker

Os componentes de visualização do Looker são um conjunto de componentes baseados em React que estão disponíveis no pacote de @looker/visualizations código aberto.

Os componentes de visualização aceitam um valor Query.client_id ou um ID de consulta de uma exploração do Looker ou um ID do painel de controlo de um painel de controlo do Looker e renderizam uma visualização do lado do cliente sem um iframe.

Estes componentes podem ser usados imediatamente, personalizados ou tratados como formatadores de dados simples para transmitir dados limpos de uma exploração do Looker, de modo a facilitar a criação das suas próprias visualizações personalizadas.

Os componentes de visualização do Looker foram concebidos para serem usados num ambiente React que foi autenticado com a API do Looker através do SDK TypeScript/JavaScript. Esse passo é processado automaticamente quando cria com a estrutura de extensões do Looker.

Criar visualizações com componentes de visualização do Looker

O conjunto de componentes de visualização do Looker oferece dois componentes de alto nível para trabalhar com os seus dados:

  • Query — Processa a obtenção de dados e carrega a resposta no contexto do React
  • Visualization: aceita os dados devolvidos por Query e usa adaptadores de configuração para renderizar o gráfico devidamente personalizado numa página

Atualmente, os dados podem ser renderizados como os seguintes tipos de gráficos:

  • Linha
  • Área
  • Dispersão
  • Sparkline
  • Valor único
  • Barra
  • Coluna
  • Tabela
  • Circular

Estão a ser desenvolvidos mais tipos de gráficos.

Para ver as tabelas de propriedades de cada tipo de gráfico, visite a página de documentação Tabelas de propriedades de visualização e de consulta.

Para ver as opções de configuração disponíveis para cada tipo de gráfico, consulte o campo de testes de visualização.

Por que motivo usar componentes de visualização?

Os componentes de visualização melhoram e simplificam o processo de renderização de uma visualização do Looker numa aplicação, libertam tempo dos programadores e dão-lhes mais opções para personalizar e expandir as respetivas visualizações do Looker.

  • Incorporação melhorada: os componentes de visualização permitem que os programadores incorporem uma visualização do Looker numa aplicação sem um iFrame. Isto pode melhorar o desempenho, a monitorização e a capacidade de personalização.
  • Integração fácil: os componentes de visualização podem ser combinados com outros componentes da @looker/components para criar composições e experiências de front-end totalmente novas.
  • Personalização: é mais fácil personalizar as visualizações incorporadas quando usa componentes de visualização do que quando usa iFrames. Além disso, com os componentes de visualização, os programadores podem criar aplicações altamente personalizadas muito mais rapidamente, sem terem de criar uma camada de visualização de raiz.
  • Simplificação: os componentes de visualização melhoram a portabilidade das visualizações do Looker e simplificam as interações com a API Looker.

Instalar componentes de visualização

Para começar, adicione o pacote NPM dos componentes de visualização do Looker:

  • NPM: npm install @looker/visualizations
  • YARN: yarn add @looker/visualizations

Também tem de satisfazer algumas dependências de pares: Looker/componentes, React e componentes com estilos:

  • NPM: npm install @looker/components react react-dom styled-components
  • YARN: yarn add @looker/components react react-dom styled-components

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.

Passos seguintes