Componentes
58. Gantt e linha do tempo
seed-componentes.md v1.43 · §58seção 64 de 9858-gantt-e-linha-do-tempo-estavel-f7-4-2026-08-16.md · MD5 0bd1b117Título completo no canon: Gantt e linha do tempo — estável (F7.4, 2026-08-16) · GT1–GT17 · gabarito A5 · fecha a PN-P2 (PN42–PN45)
A pendência que esta seção fecha. A PN-P2 está aberta desde a Fase 6, registrada no §48.9 como "bloco 6D": PN42–PN45 — dependências FS/SS/FF/SF com lag · caminho crítico · linha de base · marco. Os quatro números foram deixados reservados e vazios na numeração do §48, de propósito, porque cinco artefatos executáveis já citavam PN46–PN54 e renumerar invalidaria âncoras recém-calculadas. A dívida vence aqui.
Fronteira com o §48, declarada. O §48 (painel) já tem a lente temporal: PN47 (pré-requisito de lente e gaveta de não agendados), PN48 (régua de tempo em dois níveis) e PN49 (criar arrastando na faixa vazia). O §58 não reescreve nada disso — ele acrescenta a camada de relação entre itens que a lente não tem: dependência, folga, caminho crítico e linha de base. Quem já lê o §48 não precisa reaprender a régua; quem lê o §58 encontra só o que é novo.
Base. Rodada zero: o arquétipo tem leitura visual — C77–C81 (§13.8 do estudo). R1 canon: quatro tipos de dependência — término-início, início-início, término-término e início-término —, com lag (espera) ou lead (adiantamento); o caminho crítico é a cadeia mais longa de tarefas ligadas, e atraso nela atrasa o projeto inteiro; tarefas fora dele têm folga. A linha de base guarda o plano original para comparar com o realizado, e o marco é um ponto no tempo, não uma duração — representado por losango. Um alerta do canon entrou como contrato: se você adiciona lag o tempo todo para o cronograma "fechar", suas durações de base provavelmente estão erradas — lag deve refletir espera real, não folga disfarçada. R2 stack: os componentes de mercado tratam o gantt como treegrid (a tabela de nomes é uma árvore expansível) e implementam navegação por teclado sobre ela. R3 normas: a acessibilidade de gráfico complexo não se resolve com um
aria-label. O consenso pede camadas: descrição breve do que o gráfico diz · tabela de dados completa como alternativa, para o leitor explorar por conta própria ·<title>/<desc>no SVG · navegação por teclado ponto a ponto com nome e valor em cada marca (SC 4.1.2) · live region para mudanças. Um fornecedor declara em VPAT que a conformidade do gantt fica em AA parcial, e nomeia a limitação: relações de dependência complexas podem não expor relação programática completa. Isso é fato do estado da arte, e é por isso que o GT11 existe.
58.1 Os contratos#
| # | Contrato | O que ele descarta, e por quê |
|---|---|---|
| GT1 | O gantt é SPLIT de dois painéis com rolagem vertical sincronizada: tabela de nomes à esquerda, área de plotagem à direita, divisor redimensionável (C77) | Uma coisa só. Sem a tabela, não há como ler nome, responsável e data de quem está fora da janela de tempo visível |
| GT2 | O divisor tem alternativa sem arraste (CP30 · SC 2.5.7): posições declaradas em menu, além do arraste | Divisor só arrastável. Mesmo raciocínio que virou slider no §51 e menu no §57 |
| GT3 | Régua de tempo em DOIS NÍVEIS, herdando o PN48 do §48 sem alteração; granularidade escolhida em controle nomeado | Reescrever a régua. Duas réguas para a mesma coisa produzem dois números e nenhuma decisão |
| GT4 | Marcador de AGORA é linha vertical contínua na tinta de alerta, atravessando a plotagem (C78) — e leva nome acessível | Marcador só desenhado. Ele é a referência que dá sentido a "atrasado", e quem não vê a linha precisa da informação |
| GT5 | A barra é peça de dado, não peça de UI: sem par sombra+anel, sem raio de peça. Ela pertence à figura | Tratar barra como cartão. A plotagem é figura de dado, governada pelo CP32 |
| GT6 | A figura obedece ao CP32: 1 unidade de viewBox = 1px; ganhar largura significa mais tempo visível, nunca barra mais grossa nem tipografia maior |
Escalar o desenho. É o defeito de 2,16× que o gate pegou no dataviz |
| GT7 | Quatro tipos de dependência — TI, II, TT, IT — desenhados como conectora com seta, cada uma com origem e destino nomeados no texto acessível | Só término-início. Obra elétrica tem paralelismo real: comissionamento II com energização, por exemplo |
| GT8 | Lag é DECLARADO no rótulo da conectora ("TI + 5 d"), nunca implícito no espaço entre as barras | Lag invisível. O canon é explícito: lag que vira hábito esconde duração de base errada |
| GT9 | Caminho crítico é REALCE, não filtro: as barras da cadeia mais longa recebem tratamento próprio com mecanismo além de cor | Esconder o resto. Caminho crítico só significa alguma coisa contra o que não é crítico |
| GT10 | Linha de base é uma SEGUNDA BARRA, mais fina e recuada, sob a barra do realizado — e um controle liga e desliga a comparação | Trocar a cor da barra. A comparação é entre duas durações, e uma cor não mostra duas durações |
| GT11 | A alternativa textual é uma TABELA COMPLETA, não um resumo: cada item com início, término, duração, folga, predecessor e tipo de ligação | aria-label no SVG. O estado da arte reconhece que dependência complexa não expõe relação programática completa; a tabela é a relação, escrita |
| GT12 | A tabela de nomes é treegrid: hierarquia expansível, com uma linha no tab sequence (roving) |
Lista plana. Obra tem etapa e subetapa, e a árvore é o que permite fechar o que não interessa |
| GT13 | Data com cor por estado no VALOR, não em chip separado (C80) — e com mecanismo além de cor | Chip de status ao lado. Numa coluna estreita, o chip rouba a data; e o estado É da data |
| GT14 | Marco é LOSANGO, ponto no tempo sem duração, com rótulo próprio | Barra de um dia. Marco não tem duração, e desenhá-lo como barra faz o olho ler duração onde não há |
| GT15 | Gaveta de não agendados acoplada à visualização (C81), com abas de motivo e contagem — herda o PN47 do §48 | Esconder o item sem data. Toda visualização por eixo tem o problema do item sem posição, e escondê-lo é como se ele não existisse |
| GT16 | A rolagem horizontal da plotagem é exceção bidimensional DECLARADA (SC 1.4.10): região focável e nomeada, como no §57 | Rolagem no documento |
58.2 O que este arquivo NÃO decide#
- Recalcular cronograma (predecessor atrasa e sucessores deslizam) é regra de domínio, não de DS. O DS desenha o resultado; quem o calcula é o produto.
- Criar dependência arrastando de uma barra a outra é conveniência; o caminho obrigatório é o formulário de ligação, pelo SC 2.5.7.
- Nivelamento de recurso e carga de trabalho são o arquétipo A15, que não tem leitura visual e está fora deste texto.
58.3 Números MEDIDOS na produção do gabarito#
A seção nasceu só com relações; os números vieram na produção do gabarito A5,
tela-gantt.html, exatamente como o §55 fez.
| Medida | Valor |
|---|---|
| Escala declarada (CP32) | 6px por dia — não muda com a largura da tela |
| Janela do gabarito · largura da plotagem | 01/06/2026–31/12/2026 · 1.284px |
| Altura da faixa e da linha do treegrid | 34px (iguais, por construção) |
| Altura da barra do realizado · da linha de base | 20px · 5px |
| Lado do losango do marco | 14px (quadrado rotacionado 45°) |
| Espessura da conectora · da seta | 1,5px · polígono de 6×8px |
| Espessura do marcador de agora | 2px |
| Larguras declaradas do painel de nomes | 240 · 340 · 460px |
| Alvo do divisor e dos itens da gaveta | 44px no eixo curto |
Três achados reais na medição de contraste, e os três mudaram o artefato:
- A barra nasceu com
surface-brand(#11B0A0, o turquesa vivo do hero) e o rótulo branco sobre ela media 2,71 — reprova o piso 4,5 do SC 1.4.3. Trocada poraction-primary, o token que existe para carregar texto (4,60). Turquesa de MARCA e turquesa de AÇÃO não são o mesmo token, e a diferença é o texto que cada um sustenta. - O marco nasceu com
entity-2(#D49400) e media 2,61 contra a plotagem — reprova o SC 1.4.11.entity-5resolvia o claro (6,74) e reprovava o escuro (2,37): cor fixa precisa passar nos dois temas. Ficoutext-brand, que vira sozinha (4,60 · 8,31). Cor de identidade categórica não é automaticamente cor de elemento de interface. - O contorno do caminho crítico mede menos que 3,0 contra a própria barra. Ele é fronteira externa: a cor adjacente que o SC 1.4.11 alcança é a da plotagem, contra a qual ele desenha — 5,59. E o que distingue crítico de não-crítico não é o contorno sozinho: é o par contorno + pictograma, e o pictograma sobrevive à escala de cinza.
58.4 Validação#
| Camada | Placar |
|---|---|
suite-gantt.mjs — blocos ESC · SPL · DEP · CRI · BAS · ALT · TRG · EST · MRC · GAV · REG · VIV · POP · EIX |
43 · 0 (35 na produção + 8 nascidas do gate de 2026-08-16) |
suite-composicao.mjs (render, 2 temas) |
27 · 0 |
contraste-f73.py — 64 pares × 2 temas |
128 · 0 |
| Console e erros de página | limpo |
Dois defeitos do gate de 2026-08-16, ambos virados guarda antes de qualquer promoção. (a) O menu do divisor abria estourado — verbatim: "o botão está abrindo estourado". A causa: ele usa a classe
.menu-mover, que existe no gabarito A7 e nunca foi copiada para este molde; sem regra, sobravam só os estilos inline, semfont-sizee sem âncora. Classe reaproveitada entre gabaritos é dependência, e dependência não copiada é referência órfã — a mesma família que a guardaREF-01pega em código e oNV-01em token. GuardasPOP-01…03. (b) O gráfico parecia travado — verbatim: "o gantt tbm nao clica nem da pra mexer". As barras clicavam e a região rolava; o que faltava era o controle. Daí o GT17. GuardasEIX-01…05.A guarda que vale mais é o bloco
ESC. Ela mede a largura e a altura de uma barra em duas larguras de janela e exige que sejam idênticas, junto com o tamanho do texto — é o CP32 aplicado a uma figura montada em HTML. Sem ela, bastaria trocarpxpor%para o gantt voltar a ser o defeito de 2,16× que o gate pegou no dataviz.Nota sobre a
suite-composicao.mjs: as guardasST-01/02/03(chip de status pintado com o token do tema) passaram a ser condicionais à existência de chip, e isso está impresso na saída. O gantt não usa chip por decisão escrita — o GT13 manda o estado viver no valor da data. Mesma régua doMONO-03no §57: contrato que não se aplica ao arquétipo é declarado, não silenciado. Por isso o A5 fecha em 27.
58.4 Pendências#
| # | Pendência | Por que fica aberta |
|---|---|---|
| GT-P1 | FECHADA em 2026-08-16: tela-gantt.html produzido com gerador, molde e suíte própria (35 · 0) |
|
| GT-P4 | Só dois dos quatro tipos de ligação (TI e II) têm exemplar na tela | TT e IT existem como contrato e não como pixel. A asserção do gerador exige mais de um tipo — subir para os quatro exige um caso de obra que os use de verdade, e inventar um só para preencher a tela seria dado sem referente |
| GT17 (contrato NOVO, do gate de 2026-08-16) | Eixo que rola precisa de CONTROLE explícito, não só de overflow: recuar, avançar e "Hoje", com passo declarado em unidade de tempo e posição na janela exibida |
Confiar na barra de rolagem. Achado do gate, verbatim: "o gantt tbm nao clica nem da pra mexer". Rolagem horizontal com roda de mouse exige Shift — quem tem mouse comum não move o eixo e conclui que a tela está travada. Overflow é mecanismo; controle é affordance, e o C79 já observava o controle de tempo na barra do produto de referência. O passo é UM MÊS em px da escala declarada, nunca uma fração da largura visível: fração faria o passo mudar de tamanho conforme a janela |
| GT-P5 | Arraste de barra (mover data arrastando) não implementado | Os caminhos obrigatórios são o de ponteiro único e o de teclado; o arraste é conveniência, e o gabarito não é o lugar de escrever a mecânica que o produto vai reimplementar |
| GT-P3 | A15 carga de trabalho segue sem leitura visual | Exige navegação antes, como o A6 |