# Gantt

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente de diagrama de Gantt para visualização e gerenciamento de tarefas em linha do tempo. Suporta múltiplos modos de visualização (hora, dia, semana, mês, ano), movimentação de tarefas via drag-and-drop, dependências entre tarefas e popup de detalhes ao clicar.

## Quando usar

- Planejamento e acompanhamento de cronogramas de projetos
- Visualização de tarefas com dependências e datas de início/fim
- Roadmaps de produto ou planejamento estratégico

## Quando não usar

- Listas simples de tarefas sem contexto temporal — use uma tabela ou lista
- Gerenciamento de tarefas sem dimensão de data — use um Kanban

## Instalação

```typescript
import { GanttModule } from '@seniorsistemas/angular-components/gantt';

@Component({ standalone: true, imports: [GanttModule] })
export class MeuComponent {}
```

## Uso básico

```html
<s-gantt
  [tasks]="gruposDeTarefas"
  [viewMode]="viewMode"
  (taskClicked)="onTaskClicada($event)"
/>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `tasks` | `TaskGroup[]` | — | Sim | Lista de grupos de tarefas a serem renderizados |
| `viewMode` | `ViewMode` | `ViewMode.Day` | — | Modo de visualização do gantt |
| `columnTitle` | `string` | — | — | Título da coluna lateral de identificação das tarefas |
| `showSideTable` | `boolean` | `true` | — | Exibe a tabela lateral com os nomes das tarefas |
| `multipleTaskPerLine` | `boolean` | `false` | — | Permite renderizar múltiplas tarefas na mesma linha |
| `allowMovement` | `boolean` | `true` | — | Habilita o arrastar de tarefas para alterar datas |
| `hasPopup` | `boolean` | `true` | — | Exibe popup com detalhes ao clicar em uma tarefa |
| `fullWidth` | `boolean` | `false` | — | Faz o gantt ocupar 100% da largura disponível |
| `containerWidth` | `number` | — | — | Largura do container em pixels |
| `marginBeforeStart` | `number` | — | — | Margem em dias antes do início da primeira tarefa |
| `marginAfterEnd` | `number` | — | — | Margem em dias após o fim da última tarefa |
| `showOnlyHours` | `boolean` | `false` | — | Exibe apenas horas na linha do tempo |
| `showOnlyDays` | `boolean` | `false` | — | Exibe apenas dias na linha do tempo |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `taskClicked` | `EventEmitter<Task>` | Emitido quando o usuário clica em uma tarefa |
| `taskDateChanged` | `EventEmitter<{ task: Task; start: Date; end: Date }>` | Emitido quando as datas de uma tarefa são alteradas por drag |
| `viewChanged` | `EventEmitter<ViewMode>` | Emitido quando o modo de visualização é alterado |

### Tipos

```typescript
enum ViewMode {
  QuarterHour = 'quarterHour',
  Hour = 'hour',
  QuarterDay = 'quarterDay',
  HalfDay = 'halfDay',
  Day = 'day',
  Week = 'week',
  Month = 'month',
  Year = 'year',
}

interface Task {
  id: string;
  name: string;
  start: Date;
  end: Date;             // Deve ser maior que start
  showTaskName?: boolean;
  dependencies?: string[]; // IDs de tarefas das quais esta depende
  color?: string;        // Cor customizada (ex: '#3b82f6')
  custom_class?: string; // Classe CSS customizada
}

interface TaskGroup {
  id: string;
  title: string;
  subtitle: string;
  tasks: Task[];
}
```

## Exemplos

### Visualização diária com grupos

```typescript
const tasks: TaskGroup[] = [
  {
    id: 'grupo1',
    title: 'Desenvolvimento',
    subtitle: 'Sprint 1',
    tasks: [
      {
        id: 'tarefa1',
        name: 'Planejamento',
        start: new Date('2025-06-01'),
        end: new Date('2025-06-03'),
        showTaskName: true,
      },
      {
        id: 'tarefa2',
        name: 'Implementação',
        start: new Date('2025-06-03'),
        end: new Date('2025-06-10'),
        dependencies: ['tarefa1'],
        color: '#3b82f6',
        showTaskName: true,
      },
    ],
  },
];
```

```html
<s-gantt
  [tasks]="tasks"
  viewMode="day"
  columnTitle="Equipes"
  [showSideTable]="true"
  [allowMovement]="true"
  [hasPopup]="true"
  (taskClicked)="onTaskClick($event)"
  (taskDateChanged)="onDateChange($event)"
></s-gantt>
```

### Somente visualização (sem movimentação)

```html
<s-gantt
  [tasks]="tasks"
  viewMode="month"
  [allowMovement]="false"
  [hasPopup]="true"
  columnTitle="Cronograma Aprovado"
></s-gantt>
```

### Largura total

```html
<s-gantt
  [tasks]="tasks"
  viewMode="week"
  [fullWidth]="true"
></s-gantt>
```

## Acessibilidade

- O gantt é renderizado via SVG e não possui suporte nativo a teclado para navegação entre tarefas
- Para acessibilidade plena, forneça uma representação alternativa (tabela) quando necessário
- Os popups de detalhes aparecem ao clicar/focar nas barras de tarefa

## Componentes relacionados

- [`DynamicForm`](../dynamic-form/README.md) — para edição de dados de tarefas em formulários