Tema
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-labele mantenha umlabelque diga de qual obra é, para o leitor de tela. - A situação
latevem dos números.stoppededonesão fatos do contrato (paralisação registrada pelo fiscal, termo de recebimento emitido) e vêm do sistema porstatus. Quando o sistema calcula o atraso com regra própria,status="late"estatus="on-track"também vencem os números (veja Situação dada pelo sistema). - Junto com a régua, numa tabela, mostre a situação também em texto com um BaseBadge.
Anatomia
- Rótulo: o nome da régua, que vem de
label;hide-labeltira da tela e deixa para o leitor de tela. - Trilho: a régua inteira, de 0% a 100%.
- Executado: a parte preenchida, na cor da situação.
- Marcador do previsto: a barrinha vertical com o traço rosa, na posição de
planned. - Legenda: "executado" e "previsto" escritos, com o ícone da situação;
hide-legendesconde e o ícone passa para o lado do trilho.
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%
Situação dada pelo sistema
Com status, a régua mostra a situação que o sistema mandou, mesmo quando os números diriam outra. Vale quando o atraso é calculado por etapa do cronograma, e não pelo percentual geral. A legenda não explica a diferença: diga o motivo ao lado da régua.
Fórum de Cariacica · fundação fora do prazo
executado 62%previsto 60%
Fórum de Colatina · aditivo de prazo aprovado
executado 54%previsto 63%
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% previstoSem rótulo
Numa lista de obras, o nome já aparece na linha: hide-label tira o rótulo da tela, e o label continua no resumo lido pelo leitor de tela.
Fórum de LinharesFórum de Alegre
executado 38%previsto 36%
executado 71%previsto 84%
Faça e não faça
| Faça | Não faça |
|---|---|
Mostrar a execução física de cada obra numa lista de contratos, com o nome da obra no label. | Usar a régua para um percentual sem previsto, como o envio de um arquivo; use o BaseProgress. |
Mandar status="stopped" quando o fiscal registrou a paralisação. | Deduzir a paralisação só porque o executado não mudou. |
| Esconder a legenda só quando "71% de 84% previsto" já está escrito ao lado. | Esconder a legenda e deixar a cor como único sinal do atraso. |
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
vue
<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" />Propriedades
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
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 |
label | string | obrigatória | Nome da régua. Abre o resumo lido pelo leitor de tela. Não repita nele os números, que o resumo já diz |
threshold | number | 0 | Pontos percentuais de atraso tolerados antes de a régua ficar em atraso. Negativo ou inválido vale 0 |
status | 'done' | 'on-track' | 'late' | 'stopped' | — | Situação dada pelo sistema. Padrão: calculada pelos 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
- Não há padrão do WAI-ARIA APG para uma régua com dois valores. O mais próximo é o medidor (meter), que mostra um valor só.
- Os papéis
progressbaremeterdo WAI-ARIA (padrão Meter do APG) expõem um valor só e não diriam o previsto; por isso érole="img"comaria-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-tracktem ícone com forma própria (também comhide-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. - Não recebe foco: a régua 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
totalzero), com atraso forçado porstatus, 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.