Componentes de visualização do Looker

Os componentes de visualização do Looker são um conjunto de componentes baseados no 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 do Looker Explore ou um ID do painel do Looker e renderizam uma visualização do cliente sem um iframe.

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

Os componentes de visualização do Looker são projetados 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 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 React context
  • Visualization: aceita os dados retornados por Query e usa adaptadores de configuração para renderizar o gráfico personalizado em uma página.

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

  • Linha
  • Área
  • Dispersão
  • Minigráfico
  • Valor único
  • Barra
  • Coluna
  • Tabela
  • Pizza

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

Para ver 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 ver as opções de configuração disponíveis para cada tipo de gráfico, veja o playground de visualização no Looker Developer Portal.

Por que usar componentes de visualização?

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

  • Incorporação aprimorada: os componentes de visualização permitem que os desenvolvedores incorporem uma visualização do Looker a 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 visualizações incorporadas ao usar componentes de visualização do que usar 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 satisfazer algumas dependências de mesmo nível: Looker/componentes, React e componentes estilizados:

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

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.

Próximas etapas