Documentação HorusBI
Buscar K

Aparência

Lista de Seleção (ListBox) ​

O Widget Lista de Seleção é um facilitador visual para a interatividade. Embora o Dashboard já possua sua área de filtros nativa, este Widget serve como um menu de acesso rápido dentro da própria tela de visualização.

🔧 Funcionalidades Principais ​

  • Multiseleção: Permite selecionar um ou múltiplos itens (controlado por configuração)
  • Busca Rápida: Campo de pesquisa integrado para encontrar itens em listas grandes
  • Visualização de Dados Inline: Pode exibir uma barra de gráfico ao fundo de cada item ("gráfico inline") representando um valor numérico (barra maior para vendedores com mais vendas)
  • Layout Flexível: Suporta layouts verticais, horizontais ou em grade (grid)

⚙️ Configuração ​

1. Aba Dados ​

  • Campo de Dimensão: A coluna de texto ou categoria que será listada (Nome do Cliente)
  • Ordenação: Alfabética (A-Z ou Z-A) ou Numérica (por valor da métrica)
  • Limite de resultados: Opcionalmente, limita a lista aos top N itens ("Top 50 Clientes")
  • Filtro: Filtros pré-aplicados nativos desta lista

NOTE

Para ordenar numericamente (Vendedores por Vendas), é necessário ativar o "Gráfico Inline" e configurar a métrica de valor

📊 Gráfico Inline ​

Transforma a lista em um gráfico de barras horizontal interativo.

  • Mostrar gráfico inline: Ativa a barra de fundo em cada item
  • Campo de valor: Definie a métrica que determina o comprimento da barra (Total Vendas)
  • Cor do preenchimento: Define a cor da barra (Fixa ou via Expressão)
  • Opacidade: Ajusta a transparência da barra para garantir a legibilidade do texto

🎨 Estilo e Cores ​

Extensas opções para personalizar a aparência dos itens:

  • Formatação de Texto: Tamanho, alinhamento (Esquerda/Centro/Direita), peso (Negrito) e estilo (Itálico)
  • Bordas e Arredondamento: Controle fino sobre o contorno de cada "botão" da lista
  • Esquema de Cores: Defina cores distintas para os estados:
    • Normal: Item não selecionado
    • Selecionado: Item ativo (indica o filtro aplicado)
    • Hover: Ao passar o mouse

TIP

Use Coloração baseada em expressão para formatar itens específicos condicionalmente (pintar de vermelho um departamento específico)

🔧 Aba Avançado ​

  • Formatação condicional: Permite injetar CSS customizado via expressão JavaScript para itens específicos
  • Botões Selecionar Todos/Limpar: Exibe atalhos úteis no topo da lista (apenas para seleção múltipla)
  • Mostrar itens sem valores: Se o gráfico inline estiver ativo, decide se mostra ou esconde itens que tenham valor zero na métrica