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

Indicadorbi

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.

Indicadorbi2

Linha

Adiciona uma nova linha ao indicador

Indicadorbi3

Linhas

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

Indicadorbi4

inbi

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

inbi2

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:

New_indic

New_indic2

Exemplo

New_indic3

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.

New_indic4

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.

New_indic5

Exemplo:

New_indic6

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