Ir ao conteúdo
SEED engenhariaDesign System

Componentes

58. Gantt e linha do tempo

estávelseed-componentes.md v1.43 · §58seção 64 de 9858-gantt-e-linha-do-tempo-estavel-f7-4-2026-08-16.md · MD5 0bd1b117

Tí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:

  1. 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 por action-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.
  2. O marco nasceu com entity-2 (#D49400) e media 2,61 contra a plotagem — reprova o SC 1.4.11. entity-5 resolvia o claro (6,74) e reprovava o escuro (2,37): cor fixa precisa passar nos dois temas. Ficou text-brand, que vira sozinha (4,60 · 8,31). Cor de identidade categórica não é automaticamente cor de elemento de interface.
  3. 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, sem font-size e sem âncora. Classe reaproveitada entre gabaritos é dependência, e dependência não copiada é referência órfã — a mesma família que a guarda REF-01 pega em código e o NV-01 em token. Guardas POP-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. Guardas EIX-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 trocar px por % para o gantt voltar a ser o defeito de 2,16× que o gate pegou no dataviz.

Nota sobre a suite-composicao.mjs: as guardas ST-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 do MONO-03 no §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 gabarito A5 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

TelaSEED Design System v2 · tela-gantt (gabarito A5) — preview v0.1abrir em página própria ↗
Esc