BaseExecutionBar

Compara o executado com o previsto de uma obra numa régua só: a barra mostra o executado e o marcador do previsto (azul-marinho no tema claro, claro no tema escuro) com o traço rosa do logo mostra onde o cronograma esperava estar. É a assinatura do sistema.

Fórum de Linhares

executado 38%previsto 36%

Fórum de Alegre

executado 71%previsto 84%

Reforma do Fórum de Serra

executado 28%previsto 61%

Uso

• Use onde o percentual sozinho engana: 71% executado parece bom até ver que o previsto era 84%. Para um percentual sem comparação, use BaseProgress.
• Os dois números ficam sempre escritos na legenda. Esconda a legenda (hide-legend) só quando os mesmos números estiverem escritos logo ao lado, como "71% de 84% previsto" numa lista de resumo. Sem a legenda, o ícone da situação passa para o lado da régua.
• Em tabela, a coluna já nomeia a régua: use hide-label e mantenha um label que diga de qual obra é, para o leitor de tela.
• A situação late vem dos números. stopped e done são fatos do contrato (paralisação registrada pelo fiscal, termo de recebimento emitido) e vêm do sistema por status.
• Junto com a régua, numa tabela, mostre a situação também em texto com um BaseBadge.

Situações

Em dia

executado 38%previsto 36%

Em atraso

executado 71%previsto 84%

Paralisada

executado 28%previsto 61%

Concluída

executado 100%previsto 100%

Situação	Barra	Quando
on-track	Azul de ação	Executado igual ou acima do previsto, ou abaixo dentro da tolerância (threshold)
late	Âmbar, com ícone de atenção	Executado abaixo do previsto além da tolerância
stopped	Vermelho, com ícone de pausa	Obra parada, registrada pelo fiscal no contrato
done	Cinza, com ícone de concluído	Termo de recebimento emitido

A cor nunca vem sozinha: a legenda escreve os dois percentuais, cada situação fora de on-track tem ícone (ao lado da régua quando a legenda está escondida), e o leitor de tela ouve a situação por extenso.

A situação é calculada com os mesmos percentuais escritos na legenda, já arredondados para baixo. Executado 84,4% e previsto 84,6% aparecem como 84% e 84% e ficam em dia.

Tolerância

Por padrão, qualquer atraso visível conta. Com threshold, a régua só fica em atraso quando o executado fica mais de tantos pontos percentuais abaixo do previsto, contados nos percentuais escritos. Uma tolerância negativa ou inválida vale 0.

4 pontos abaixo, tolerância de 5

executado 80%previsto 84%

6 pontos abaixo, tolerância de 5

executado 78%previsto 84%

Valores em dinheiro

Com total, executed e planned passam a ser centavos do valor do contrato. A régua calcula os percentuais e o leitor de tela ouve também os valores. Se o total for zero, negativo ou inválido, a régua fica em 0% e o resumo não cita valores.

Execução financeira

executado 38%previsto 36%

Tamanhos

Médio · trilho de 8 px

executado 71%previsto 84%

Pequeno · trilho de 6 px

executado 71%previsto 84%

Sem legenda

Os números ficam escritos ao lado da régua, fora do label, para o leitor de tela não ouvi-los duas vezes.

Execução física

71% de 84% previsto

Estilo

Propriedade	Token
Trilho	--tj-layer-accent-01, raio --tj-radius-pill, contorno de 1 px em --tj-border-strong-01, que o executado cobre na parte preenchida. O fundo do trilho sozinho tem 1,14:1 no claro e 1,6:1 no escuro contra --tj-layer-01; o contorno tem 3,28:1 no claro e 4,4:1 no escuro e marca onde fica o 100%
Executado	--tj-border-interactive; em atraso --tj-support-warning-text; paralisada --tj-support-error-text; concluída --tj-border-strong-02. Contraste contra o trilho, calculado a partir dos tokens (WCAG 1.4.11): 4,27:1 no claro e 3,16:1 no escuro para o azul; 4,89:1 ou mais para âmbar e vermelho; 5,09:1 no claro e 3,92:1 no escuro para o cinza
Previsto	Marcador de 6 × 18 px em --tj-background-inverse (16,48:1 no claro e 8,49:1 no escuro contra o trilho), com traço --tj-brand-accent-pink e anel de 2 px na cor da superfície (--tj-layer-01). No tema escuro o marcador é claro e o traço rosa fica com 1,48:1 sobre ele: é decorativo, quem marca o previsto é o corpo do marcador. Nas pontas (0% e 100%) o marcador fica 3 px para dentro do trilho, para não ser cortado
Rótulo	--tj-text-primary, --tj-text-sm
Legenda	--tj-text-helper, --tj-text-xs, números tabulares; executado em --tj-text-primary e --tj-weight-semibold
Altura	Trilho de 8 px (md) ou 6 px (sm); marcador de 18 px ou 14 px
Largura mínima	--tj-exec-min-width: 180 px no md e 0 no sm, para caber em coluna estreita de tabela
Espaço interno	--tj-space-2 (8 px) no md, --tj-space-1 no sm. O protótipo usava 6 px; o valor foi ajustado ao token de espaço
Movimento	--tj-duration-moderate-02 e --tj-easing-standard quando os valores mudam; nenhum com movimento reduzido
Alto contraste	Trilho com borda CanvasText, executado em Highlight e marcador em CanvasText

O anel do marcador usa --tj-exec-surface, que vale --tj-layer-01. Sobre outra superfície, redefina a variável no contêiner para o anel continuar parecendo um vão.

Código

<BaseExecutionBar label="Execução física" :executed="71" :planned="84" />
<BaseExecutionBar label="Fórum de Serra" :executed="28" :planned="61" status="stopped" hide-label size="sm" />
<BaseExecutionBar label="Execução financeira" :executed="1219800000" :planned="1155600000" :total="3210000000" />

Propriedade	Tipo	Padrão	Descrição
label	string	—	Nome da régua; obrigatório. Abre o resumo lido pelo leitor de tela. Não repita nele os números, que o resumo já diz
executed	number	0	Executado: percentual de 0 a 100, ou centavos quando há total
planned	number	0	Previsto até agora, na mesma unidade de executed
total	number	—	Valor do contrato em centavos. Liga o modo dinheiro
threshold	number	0	Pontos percentuais de atraso tolerados antes de a régua ficar em atraso. Negativo ou inválido vale 0
status	'on-track' | 'late' | 'stopped' | 'done'	calculado	Situação dada pelo sistema; sem ela, vem dos números
size	'sm' | 'md'	'md'	Altura do trilho e do marcador
hideLabel	boolean	false	Esconde o rótulo na tela e mantém no resumo
hideLegend	boolean	false	Esconde os percentuais escritos; só quando eles aparecem ao lado. O ícone da situação passa para o lado da régua

Percentuais seguem a regra de números do sistema: sem casa decimal a partir de 10% e com uma casa abaixo ("8,8%"). Arredondam para baixo, para 100% só aparecer quando a obra estiver concluída. Valores fora de 0 a 100 são ajustados.

Sem eventos.

Acessibilidade

• Os papéis progressbar e meter do WAI-ARIA (padrão Meter do APG) expõem um valor só e não diriam o previsto; por isso é role="img" com aria-label, como no protótipo, sem foco e sem interação de teclado.
• O nome da imagem é um resumo completo: "Fórum de Alegre: executado 71%, previsto 84%. Em atraso, 13 pontos percentuais abaixo do previsto." No modo dinheiro, entram os valores: "executado 38% (R$ 12.198.000,00), previsto 36% (R$ 11.556.000,00) de R$ 32.100.000,00".
• O rótulo e a legenda visíveis ficam dentro da imagem, então o leitor de tela ouve o resumo uma vez só, sem repetir os números.
• A cor nunca é o único sinal: os percentuais estão escritos, cada situação fora de on-track tem ícone com forma própria (também com hide-legend, ao lado da régua), e o resumo diz a situação por extenso. A cor da situação é calculada com os mesmos percentuais que a legenda escreve, então nunca contradiz os números.
• A régua não recebe foco, porque não é interativa.
• Com movimento reduzido no sistema, a barra e o marcador mudam de posição sem transição.
• No alto contraste do Windows, o trilho ganha borda, o executado usa a cor de destaque e o marcador usa a cor do texto.
• Testado com axe em todas as situações, com tolerância (inclusive negativa e inválida), no modo dinheiro (inclusive com total zero), com atraso forçado por status, nos dois tamanhos, sem rótulo, sem legenda e com valores fora do intervalo. O contraste foi calculado a partir dos tokens nos dois temas (veja Estilo), porque o jsdom não calcula cores.
• As regras de movimento reduzido e de alto contraste estão no CSS, mas o jsdom não aplica media queries, então essas regras não têm teste automatizado.