Componentes de visualização do Looker

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

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

Esses componentes podem ser prontos para uso, podem ser personalizados ou tratados como formatadores puros de dados para transmitir dados limpos de uma Análise do Looker e facilitar a criação das suas visualizações personalizadas.

Os componentes de visualização do Looker foram criados para uso em um ambiente React que foi autenticado com a API do Looker usando o SDK TypeScript/JavaScript. Essa etapa é processada automaticamente quando você cria com o framework de extensão do Looker.

Como criar visualizações com os componentes de visualização do Looker

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

  • Query: gerencia a busca de dados e carrega a resposta em Contexto do React.
  • Visualization: aceita os dados retornados por Query e usa adaptadores de configuração para renderizar o gráfico personalizado adequado em uma página.

Atualmente, os dados podem ser renderizados nos seguintes tipos de gráfico:

  • Linhas
  • Área
  • Dispersão
  • Minigráfico
  • Valor único
  • Barras
  • Coluna
  • Tabela
  • Pizza

Mais tipos de gráfico estão em desenvolvimento.

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

Para conferir as opções de configuração disponíveis para cada tipo de gráfico, consulte o Playground de visualização no Portal de desenvolvedores do Looker.

Por que usar componentes de visualização?

Esses componentes melhoram e simplificam o processo de renderização de uma visualização do Looker em um aplicativo, liberam o tempo do desenvolvedor e oferecem mais opções para personalizar e ampliar as visualizações no Looker.

  • Incorporação aprimorada: os componentes de visualização permitem que os desenvolvedores incorporem uma visualização do Looker em um aplicativo sem um iframe. Isso pode melhorar o desempenho, o monitoramento e a capacidade de personalização.
  • Integração fácil: os componentes de visualização podem ser combinados com outros componentes do @looker/components para criar composições e experiências de front-end totalmente novas.
  • Personalização: é mais fácil personalizar as visualizações incorporadas usando componentes de visualização do que com iframes. Além disso, com os componentes de visualização, os desenvolvedores podem criar aplicativos altamente personalizados com muito mais rapidez, sem precisar criar uma camada de visualização do zero.
  • Simplificação: os componentes de visualização melhoram a portabilidade das visualizações do Looker e simplificam as interações com a API Looker.

Como 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

Você também precisa atender a algumas dependências de pares: Looker/components, React e componentes estilizados:

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

As 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).

Próximas etapas