Componentes do filtro do Looker

Os componentes de filtro do Looker oferecem a funcionalidade de filtro avançado do Looker para aplicativos de dados personalizados desenvolvidos no Looker.

Componentes do Looker

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

Os componentes podem ser usados com o framework de extensão Looker e o SDK incorporado do Looker (links em inglês).

Componentes do filtro do Looker

Os componentes do filtro oferecem a funcionalidade de filtro avançado do Looker para aplicativos de dados personalizados e painéis incorporados do Looker personalizados. Com a API Looker (usando 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 da IU armazenada.

O pacote de componentes de filtros oferece 12 tipos de controles de filtros, semelhantes aos controles disponíveis para os próprios 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 * Dia único * 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, disponíveis em qualquer filtro do painel. O pacote @looker/filter-expressions transforma as expressões de filtro em estruturas de dados que podem ser usadas pelo @looker/filter-components.

Por que usar componentes de filtro?

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

  • Experiências de filtro de alta qualidade: os componentes de filtro oferecem a lógica de filtro avançada do Looker e uma grande variedade de controles de filtro para melhor se adequar aos tipos de filtros necessários.
  • Desenvolvimento rápido: os componentes de filtro oferecem acesso "pronto para uso" aos filtros, permitindo que os desenvolvedores se concentrem em outras tarefas e acelerando o desenvolvimento geral.
  • Personalização: os controles de filtros podem ser personalizados para parecerem o aplicativo, a extensão ou o painel incorporado. Os desenvolvedores podem usar componentes de filtros para oferecer mais personalização do que nunca.
  • Vinculado a 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 será renderizada no aplicativo, na extensão ou na incorporação do Looker que usa o componente. Qualquer usuário que tenha acesso para editar o painel do Looker conectado ao componente de filtro pode editar o filtro no painel do Looker, que atualiza o filtro no aplicativo, na extensão ou na incorporação. Isso economiza tempo do desenvolvedor porque ele não é necessário sempre que houver um motivo comercial para ajustar um filtro.
  • Conectados ao modelo do Looker: os componentes do filtro conhecem alterações no modelo do Looker em que são criados. Isso significa que os campos de filtro e outras opções são dinâmicos e serão atualizados junto 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 NPM do @looker/components.

Informações sobre a instalação e uso de pacotes de componentes de filtros podem ser encontradas no documento README para cada pacote, disponível em NPM ou GitHub.

Um aplicativo de demonstração de componentes de filtro está disponível no GitHub. As instruções para usar a demonstração aparecem no documento README.