Guia Indicador

Voltar
BI > BI Desenvolvedor > Dashboard > Guia Indicador

Palavras-Chave

Indicador. BI Web. Fonte Automática. ResizeObserver. Display Flex. Tamanho Automático da Fonte. Ajuste Responsivo. Controladoria. Componente Indicador.

📘 Indicador – Redimensionamento Automático da Fonte

Resumo: O Indicador agora ajusta automaticamente o tamanho da fonte conforme o espaço disponível na tela, evitando texto cortado e melhorando a visualização na versão Web.

📝 O que é essa melhoria

O Indicador foi aprimorado para que se adapte de forma inteligente ao espaço disponível no painel. Antes, quando o usuário definia um tamanho fixo de fonte, isso poderia causar:

• Texto cortado quando o espaço era pequeno;

• Àreas vazias demais quando o espaço era grande;

Com a melhoria, o Indicador analisa automaticamente o espaço disponível e aumenta ou diminui o tamanho da fonte sem que o usuário precise ajustar manualmente.;

O resultado é uma apresentação mais limpa, proporcional e responsiva.

Informação: Essa melhoria é válida apenas para a versão Web do BI CIGAM.

🔷 Exemplos Visuais

Indicador em área maior

• Tamanho Automático da Fonte ativada. Observe que o texto ocupa praticamente todo o espaço do item.

Indicador em área reduzida

• Tamanho do item foi reduzido. O texto é automaticamente redimensionado para caber no espaço disponível.

Exemplo de ajuste dinâmico

• Tamanho do item foi aumentado. Novamente, o texto é redimensionado automaticamente para ocupar o espaço disponível.

⚙ Onde ativar o Tamanho Automático da Fonte

A funcionalidade está localizada nas propriedades da linha do Indicador:

Uma nova propriedade foi adicionada ao controle: Tamanho Automático da Fonte, disponível nas configurações da linha. Lembre-se de marcar a opção “Aplicar” para que todas as alterações relacionadas à aparência tenham efeito.

Nota: Após ativar a opção, clique em Aplicar para que o ajuste tenha efeito imediato.

🧩 Explicação técnica simplificada

O comportamento automático foi implementado por meio de três ajustes principais:

1. Reorganização do HTML interno

O Indicador utilizava display: table, dificultando redimensionamento dinâmico. Agora usa display: flex, o que permite distribuir melhor os elementos e ajustar suas dimensões conforme o espaço disponível.

2. Uso do ResizeObserver

O ResizeObserver monitora alterações no tamanho do Indicador e ajusta a fonte automaticamente.

3. Novas propriedades internas

Duas propriedades foram criadas para limitar o tamanho da fonte: Tamanho mínimo: 10

Tamanho máximo: 100

Esses valores definem o intervalo seguro para o ajuste automático.

Nota técnica: Apenas o elemento principal é monitorado diretamente. Os demais textos são ajustados porque herdam a fonte da div pai. Elementos com fonte fixa não sofrem alteração.

🧱 Estrutura Visual Utilizada

🧠 Fluxo técnico simplificado

O Indicador mudou de tamanho

↓

Verifica se o texto cabe

Não cabe? ↓ Diminui a fonte

Há espaço sobrando ↓ Aumenta a fonte

↓

A fonte fica ideal

⭐ Quando você perceberá essa mudança?

O ajuste automático de fonte ocorre quando:

• O painel é redimensionado

• O Indicador é expandido ou reduzido

• A resolução do usuário muda

• A tela muda de tamanho (ex.: maximizar/minimizar)

• O dashboard é exibido em um monitor diferente

• O conteúdo não ficará mais cortado.

❗ O que foi resolvido com essa melhoria?

Importante: Esta melhoria resolve comportamentos inconsistentes que ocorriam antes na versão Web.

Sublinhado reaplicado corretamente na versão Web

• Negrito funcionando conforme o Desktop;

• Fonte proporcional e ajustada automaticamente;

• Menos risco de corte ou distorção visual;

Já está liberado esta funcionalidade?

Esta nova funcionalidade estará disponível a partir das versões do BI liberadas em dezembro de 2025.

Indicador Versão Tradicional

Apresenta configurações específicas para o Indicador.

Alinhamento Horizontal

Alinha o Indicador na horizontal

'Alinhamento Vertical

Alinha o Indicador na vertical

Fonte

Altera as configurações de fonte para os valores do Indicador

Regra Cor de Fundo

• Regra: Utilizada para colorir o fundo do texto conforme a métrica base informada.
• Métrica Base: Utilizada pela regra para definir qual será a cor de fundo.

Configurações

Apresenta configurações auxiliares para o Indicador.

Linha

Adiciona uma nova linha ao indicador

Linhas

Apresenta todas as linhas do indicador, permitindo incluir métricas, dimensões ou texto de forma individual para cada linha.

Apresenta a tela com as configurações da linha.

Exclui a linha.

A partir da versão 220404 RC patch C foram adicionadas as seguintes opções no objeto Indicador:

Configurações de aparência para cada elemento dentro da mesma linha. Para abrir a opção é preciso clicar sobre o elemento:

Exemplo

O Indicador também recebeu a opção que permite transformar as linhas em links, permitindo que o indicador abra outro dashboard, execute uma tarefa ou abra um programa CIGAM, com a possibilidade de publicar parâmetros.

Os valores possíveis para publicação são os filtros que o indicador possui e suas dimensões.

Quando a opção está habilitada, ao passar o mouse sobre os elementos o ponteiro do mouse muda da forma de seta para uma mão.

Os elementos do Indicador também receberam a opção para inclusão de um descritivo, que será mostrado ao passar o mouse sobre o elemento.

Para cadastrar o descritivo basta clicar sobre o elemento para que seja aberta a tela de configuração do mesmo.

Exemplo:

As opções acima também estão disponíveis na versão Web.