Componentes do filtro do Looker

Os componentes de filtro do Looker oferecem a funcionalidade de filtro avançada do Looker para aplicativos de dados personalizados criados com base no Looker.

Componentes do Looker

Os componentes do Looker são partes pré-criadas e baseadas em React do aplicativo do Looker. Os desenvolvedores podem usar componentes em aplicativos e extensões de dados criados com base no Looker.

Os componentes podem ser usados com o framework de extensão do Looker e o SDK Embed do Looker.

Componentes do filtro do Looker

Os componentes de filtro oferecem a funcionalidade de filtro avançada do Looker para aplicativos de dados personalizados e painéis incorporados personalizados do Looker. Ao usar a API Looker (por um SDK ou uma extensão) para buscar o JSON de um determinado painel, os desenvolvedores podem incluir o componente de filtro no aplicativo e transmitir as propriedades de cada filtro no painel. O componente renderiza cada filtro de acordo com o campo e a configuração UI armazenada.

O pacote de componentes de filtro oferece 12 tipos de controles de filtros, semelhantes aos controles disponíveis para os painéis do Looker:

  • Grupo de botões
  • Caixa de seleção
  • Lista de tags
  • Controle deslizante de intervalo
  • Botão de alternância
  • Botão de opção
  • Menu suspenso
  • Controle deslizante
  • Um dia
  • Período
  • Período
  • Avançado

Os componentes de filtro são enviados por dois pacotes que funcionam juntos: @looker/filter-components e @looker/filter-expressions. O pacote @looker/filter-components renderiza um componente de filtro usando um campo, um tipo de filtro e as expressões de filtro atuais, que estão disponíveis em qualquer filtro do painel. O pacote @looker/filter-expressions transforma expressões de filtro em estruturas de dados que podem ser usadas por @looker/filter-components.

Por que usar componentes de filtro?

Filtrar componentes libera o tempo do desenvolvedor e permitir que os analistas que trabalham no Looker criem e mantenham experiências do usuário robustas e personalizáveis. Os componentes do filtro do Looker oferecem os seguintes benefícios:

  • Experiências de filtro de alta qualidade: os componentes de filtro fornecem a lógica avançada de filtros do Looker e uma ampla variedade de controles para atender melhor aos tipos de filtro que você precisa.
  • Desenvolvimento de velocidade: os componentes de filtro fornecem acesso imediato a filtros, permitindo que os desenvolvedores se concentrem em outras tarefas e acelerando o desenvolvimento geral.
  • Personalização: os controles de filtros podem ser personalizados de acordo com a aparência do seu aplicativo, extensão ou painel incorporado. Os desenvolvedores podem usar componentes de filtro para oferecer mais personalização do que nunca.
  • Vinculado aos painéis do Looker: um componente de filtro pode ser conectado diretamente a um filtro em um painel do Looker, e uma versão desse filtro é renderizada no aplicativo, na extensão ou na incorporação do Looker que está usando o componente. Qualquer usuário com acesso para edição ao painel do Looker conectado ao componente de filtro pode fazer edições no painel do Looker, que atualiza o filtro no aplicativo, extensão ou incorporação. Isso libera tempo do desenvolvedor, porque ele não é necessário sempre que há um motivo comercial para ajustar um filtro.
  • Vinculados ao modelo do Looker: os componentes de filtro reconhecem as mudanças no modelo do Looker em que foram criados. Isso significa que os campos de filtro e outras opções são dinâmicos e serão atualizados com as atualizações do modelo subjacente.

Como instalar e usar componentes de filtro

Faça o download dos pacotes @looker/filter-components e @looker/filter-expressions no repositório @looker/components do NPM.

As informações sobre como instalar e usar os pacotes de componentes de filtro podem ser encontradas no documento README de cada pacote, disponível no NPM ou no GitHub (em inglês).

Um aplicativo de demonstração de componentes de filtros (em inglês) está disponível no GitHub. As instruções de uso da demonstração estão no documento README.