Guia Indicador: mudanças entre as edições
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 49: | Linha 49: | ||
[[Arquivo:New_indic6.png|center|semmoldura|750px|New_indic6]] | [[Arquivo:New_indic6.png|center|semmoldura|750px|New_indic6]] | ||
<br>As opções acima também estão disponíveis na versão Web. | <br>As opções acima também estão disponíveis na versão Web. | ||
<p align="justify"> | |||
=Redimensionamento Dinâmico do Indicador no CIGAM BI= | |||
<p align="justify"> | |||
==<span style="color:#000000;">Palavras-Chave</span>== | |||
Indicador. BI Web. Fonte Automática. ResizeObserver. Display Flex. Tamanho Automático da Fonte. Ajuste Responsivo. Controladoria. Componente Indicador.</p> | |||
<p align="justify"> | |||
== 📘 Indicador – Redimensionamento Automático da Fonte == | |||
<div style="border: 1px solid #ccc; background: #f8f8f8; padding: 12px; margin-bottom: 20px;"> <b>Resumo:</b> 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. </div> <p align="justify"> | |||
== 📝 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:</p> | |||
<p align="justify"> | |||
*Texto cortado quando o espaço era pequeno; | |||
<p align="justify"> | |||
*Àreas vazias demais quando o espaço era grande; | |||
<p align="justify"> | |||
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.; | |||
<p align="justify"> | |||
O resultado é uma apresentação mais limpa, proporcional e responsiva. | |||
<p align="justify"> | |||
</p> <br> <div style="border: 1px solid #eef7ff; background: #f8fbff; padding: 10px; margin: 12px 0;"> <b>Informação:</b> Essa melhoria é válida apenas para a <b>versão Web</b> do BI CIGAM. </div> <br> <p align="justify"> | |||
== 🔷 Exemplos Visuais == | |||
=== Indicador em área maior === | |||
*Tamanho Automático da Fonte ativada. Observe que o texto ocupa praticamente todo o espaço do item. | |||
<p align="justify"> | |||
[[File:Indicador_Redimensionamento_Exemplo.png|750px|center]] | |||
=== Indicador em área reduzida === | |||
*Tamanho do item foi reduzido. O texto é automaticamente redimensionado para caber no espaço disponível. | |||
<p align="justify"> | |||
[[File:Indicador_Tamanho_Grande.png|750px|center]] | |||
=== Exemplo de ajuste dinâmico === | |||
*Tamanho do item foi aumentado. Novamente, o texto é redimensionado automaticamente para ocupar o espaço disponível. | |||
<p align="justify"> | |||
[[File:Indicador_Tamanho_Grande2.png|600px|center]] | |||
</p> <br> <p align="justify"> | |||
== ⚙ Onde ativar o Tamanho Automático da Fonte == | |||
A funcionalidade está localizada nas propriedades da linha do Indicador: | |||
[[File:Indicador_Config_Tamanho_Automatico.png|650px|center]] | |||
</p> <br> <p align="justify"> | |||
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. | |||
</p> <br> <div style="border: 1px solid #d0e7ff; background: #eef7ff; padding: 10px; margin: 12px 0;"> <b>Nota:</b> Após ativar a opção, clique em <b>Aplicar</b> para que o ajuste tenha efeito imediato. </div> <br> <p align="justify"> | |||
== 🧩 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 <code>display: table</code>, 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 | |||
<p align="justify"> | |||
Tamanho máximo: 100 | |||
<p align="justify"> | |||
Esses valores definem o intervalo seguro para o ajuste automático. | |||
<p align="justify"> | |||
</p> <br> <div style="border: 1px solid #cccccc; background: #fdfdfd; padding: 10px; margin: 12px 0;"> <b>Nota técnica:</b> Apenas o elemento principal é monitorado diretamente. Os demais textos são ajustados porque herdam a fonte da <i>div</i> pai. Elementos com fonte fixa não sofrem alteração. </div> <br> <p align="justify"> | |||
= 🧱 Estrutura Visual Utilizada = | |||
[[File:indicadorbi251125.gif|300px|center]] | |||
<p align="justify"> | |||
== 🧠 Fluxo técnico simplificado == | |||
<div style="text-align:center; margin:auto; width:80%; font-family:Arial;"> | |||
<div style="border:1px solid #c8c8c8; padding:12px; margin-bottom:8px; background:#f7f7f7; border-radius:6px;"> | |||
<b>O Indicador mudou de tamanho?</b> | |||
</div> | |||
<div style="font-size:22px; margin:10px 0; color:#666;"> | |||
↓ | |||
</div> | |||
<div style="border:1px solid #c8c8c8; padding:12px; margin-bottom:8px; background:#f7f7f7; border-radius:6px;"> | |||
<b>Verifica se o texto cabe</b> | |||
</div> | |||
<table style="margin:auto; width:100%; border-collapse:separate; border-spacing:40px;"> | |||
<tr> | |||
<td style="text-align:center; width:50%;"> | |||
<div style="border:1px solid #c8c8c8; padding:12px; background:#fafafa; border-radius:6px;"> | |||
<b>Não cabe</b> | |||
</div> | |||
<div style="font-size:22px; margin:10px 0; color:#666;"> | |||
↓ | |||
</div> | |||
<div style="border:1px solid #c8c8c8; padding:12px; background:#fafafa; border-radius:6px;"> | |||
<b>Diminui a fonte</b> | |||
</div> | |||
</td> | |||
<td style="text-align:center; width:50%;"> | |||
<div style="border:1px solid #c8c8c8; padding:12px; background:#fafafa; border-radius:6px;"> | |||
<b>Cabe com sobra</b> | |||
</div> | |||
<div style="font-size:22px; margin:10px 0; color:#666;"> | |||
↓ | |||
</div> | |||
<div style="border:1px solid #c8c8c8; padding:12px; background:#fafafa; border-radius:6px;"> | |||
<b>Aumenta a fonte</b> | |||
</div> | |||
</td> | |||
</tr> | |||
</table> | |||
<div style="font-size:22px; margin:10px 0; color:#666;"> | |||
↓ | |||
</div> | |||
<div style="border:1px solid #c8c8c8; padding:12px; background:#f7f7f7; border-radius:6px;"> | |||
<b>A fonte fica ideal</b> | |||
</div> | |||
</div> | |||
= ⭐ Quando você perceberá essa mudança? = | |||
O ajuste automático de fonte ocorre quando: | |||
<p align="justify"> | |||
*O painel é redimensionado | |||
<p align="justify"> | |||
*O Indicador é expandido ou reduzido | |||
<p align="justify"> | |||
*A resolução do usuário muda | |||
<p align="justify"> | |||
*A tela muda de tamanho (ex.: maximizar/minimizar) | |||
<p align="justify"> | |||
*O dashboard é exibido em um monitor diferente | |||
<p align="justify"> | |||
*O conteúdo não ficará mais cortado. | |||
<p align="justify"> | |||
</p> <br> <p align="justify"> | |||
== ❗ O que foi resolvido com essa melhoria? == | |||
<div style="border: 1px solid #ffe7a3; background: #fff8d9; padding: 10px; margin-bottom: 12px;"> <b>Importante:</b> Esta melhoria resolve comportamentos inconsistentes que ocorriam antes na versão Web. </div> | |||
Sublinhado reaplicado corretamente na versão Web | |||
*Negrito funcionando conforme o Desktop; | |||
<p align="justify"> | |||
*Fonte proporcional e ajustada automaticamente; | |||
<p align="justify"> | |||
*Menos risco de corte ou distorção visual; | |||
<p align="justify"> | |||
</p> <br> <p align="justify"> | |||
Edição das 12h21min de 27 de novembro de 2025
Voltar
BI > BI Desenvolvedor > Dashboard > Guia Indicador

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.
Redimensionamento Dinâmico do Indicador no CIGAM BI
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
📝 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.
🔷 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.
🧩 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.
🧱 Estrutura Visual Utilizada

🧠 Fluxo técnico simplificado
O Indicador mudou de tamanho?
↓
Verifica se o texto cabe
|
Não cabe ↓ Diminui a fonte |
Cabe com sobra ↓ 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?
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;
