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 de uma Análise do Looker ou um ID de 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 análise detalhada do Looker e facilitar a criação de suas próprias visualizações personalizadas.

Os componentes de visualização do Looker foram projetados para serem usados em um ambiente do React autenticado com a API do Looker usando o SDK do TypeScript/JavaScript. Essa etapa é processada automaticamente quando você cria com o framework de extensão 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 seus dados:

  • Query: processa 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.

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

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

Outros tipos de gráficos 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, acesse o ambiente de testes de visualização.

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 para os desenvolvedores e oferecem 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 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 front-end totalmente novas.
  • Personalização: é mais fácil personalizar visualizações incorporadas usando componentes de visualização do que usando iframes. Além disso, com os componentes de visualização, os desenvolvedores podem criar aplicativos altamente personalizados muito mais rápido, 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 do 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 vai precisar atender a algumas dependências de pares: Looker/componentes, React e Styled Components:

  • 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 estão disponíveis no documento README, disponível no GitHub e no NPM.

Próximas etapas