Gantt: uma tabela de tarefas vira cronograma.

A implantação do CRM em três meses

À esquerda ficam as fases, cada uma com as suas subtarefas. À direita, as barras com o progresso, a linha vermelha de hoje e um minimapa. O rodapé resume o projeto: 14 tarefas, progresso médio de 48%.

Os campos da tarefa e as colunas da lista

Você aponta a tabela e os campos de nome, início, fim, tarefa pai e progresso. Depois escolhe as colunas da lista lateral. O resto já vem pronto.

<mad-ganttmodel="ProjetoTarefa"name-field="nome" start-field="inicio" end-field="fim"parent-field="parent_id" progress-field="progresso"color-field="cor" owner-field="responsavel"order-by="ordem" interval="90"striped-rows show-minimap><mad-gantt-column field="name"     label="Tarefa"      width="300" tree /><mad-gantt-column field="owner"    label="Responsável" width="150" /><mad-gantt-column field="progress" label="%"           width="70" align="center" /></mad-gantt>

Cinco níveis de zoom, da hora ao ano

Você vê o projeto por hora, dia, semana, mês ou ano. Busca uma tarefa com ⌘K, volta para hoje com um botão e destaca o caminho crítico com um clique.

Quando usar o Gantt

O Gantt serve quando o trabalho tem começo, fim e ordem, e o atraso de uma tarefa empurra as outras. Ele mostra o prazo do projeto inteiro e onde ele pode escorregar.

• Implantação de sistema. Como neste exemplo, fases com subtarefas, responsável e progresso.
• Obras e reformas. Etapas que dependem umas das outras, com os dias úteis e os feriados marcados no cronograma.
• Lançamento de produto. O caminho crítico mostra quais atrasos mudam a data final.
• Produção sob encomenda. O painel de carga mostra quem está com horas demais no dia.

Se as tarefas não dependem umas das outras e só importa a etapa de cada uma, o kanban é mais simples. Para compromissos com dia e hora, use o calendário. O Gantt é montado no editor visual, com dependências, caminho crítico e linha de base.

O que você configura

Além dos campos da tarefa, o cronograma tem atributos para o planejamento e para o calendário de trabalho.

Dependências <mad-gantt-dependencies>

A tabela que liga as tarefas, com os quatro tipos de ligação (término-início, início-início, término-término e início-término) e um intervalo entre elas.

Reprogramação auto-schedule

Quando você move uma tarefa, as que dependem dela andam junto.

Caminho crítico critical-path

Destaca em vermelho as tarefas sem folga, as que atrasam o projeto se atrasarem.

Linha de base <mad-gantt-baseline>

Informa o início e o fim planejados de cada tarefa, para comparar o planejado com o realizado.

Dias úteis working-days

Os dias que contam como trabalho, de segunda a sexta por padrão. Cada feriado entra como uma data (<mad-gantt-holiday>).

Zoom e janela zoom

O zoom com que o cronograma abre, dia por padrão. O interval define quantos dias aparecem de início, 90 neste exemplo.

O que vai para o projeto Laravel

O Gantt vem em par, o cronograma e o cadastro de tarefas, cada um com a sua classe em app/Control e a sua view Blade. O cronograma fala com o seu PHP assim:

• Cada gesto chama um método seu. O cronograma avisa a tela quando alguém clica numa tarefa (on-task-click), move ou estica uma barra (on-task-update) ou cria uma dependência (on-dependency-create).
• Botões no cabeçalho. O <mad-gantt-header-action> põe um botão no topo do cronograma que chama um método PHP, como onAddTask, ou abre outra tela.
• A árvore vem de um campo. Fases e subtarefas saem do campo de tarefa pai (parent-field), e a coluna marcada com tree abre e fecha cada fase na lista lateral.

Como toda tela do MadBuilder, esses arquivos abrem no seu editor, vão para o seu Git e aceitam código à mão em blocos protegidos, que continuam lá quando a tela é gerada de novo. Veja como o código é gerado.

Perguntas sobre o Gantt

E mais

Veja também a Timeline ou os tipos de página.