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 @looker/visualizations de 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 de painel de um painel do Looker e renderizam uma visualização do lado do cliente sem um iframe.

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

Os componentes de visualização do Looker foram projetados para serem usados em um ambiente React que foi autenticado com a API do Looker e usa o SDK de 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 no contexto do React.
  • Visualization: aceita os dados retornados por Query e usa adaptadores de configuração para renderizar o gráfico personalizado de forma adequada em uma página.

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

  • Linha
  • Área
  • Dispersão
  • Sparkline
  • Valor único
  • Barras
  • Coluna
  • Tabela
  • Pizza

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

Para ver as tabelas de propriedade 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, confira 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 da visualização do Looker em um aplicativo, liberando tempo do desenvolvedor e oferecendo aos desenvolvedores mais opções para personalizar e estender as visualizações 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 completamente 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 muito mais rapidamente, sem precisar criar uma camada de visualização do zero.
  • Simplificação: os componentes da 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 precisará atender a algumas dependências de pares, como 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 como instalar e usar o pacote de componentes de visualização podem ser encontradas no documento README, disponível no GitHub e no NPM.

Próximas etapas