Gantt-chart

app-gantt-chart viser oppgaver på en tidslinje. Den passer for prosjekt- og planleggingsflater der brukeren skal se varighet, progresjon, grupper og avhengigheter, og eventuelt dra oppgaver eller progress-håndtak.

---

Kilde og import

Del	Sti
Komponent	ui/ePortal.ui/src/app/shared/gantt-chart/gantt-chart.component.ts
Modeller	ui/ePortal.ui/src/app/shared/gantt-chart/gantt-chart.models.ts
Bar-direktiv	ui/ePortal.ui/src/app/shared/gantt-chart/gantt-chart-bar.directive.ts

Komponenten er standalone. Importer GanttChartComponent i standalone-forbrukere.

import {
  GanttGroup,
  GanttMarker,
  GanttTask,
  GanttTaskChangeEvent,
} from 'src/app/shared/gantt-chart/gantt-chart.models';

---

Feature-tabell

Feature	Støtte	Konfigurasjon
Dag, uke, måned, kvartal og år	Ja	viewMode, viewModeChange
Grupper	Ja	groups, collapsibleGroups
Oppgavebarer	Ja	tasks, color, cssClass
Progresjon	Ja	showProgress, progressChange
Dra og resize	Opt-in default på	draggable, taskChange
Avhengigheter	Ja	dependencies, showDependencies
Markører	Ja	markers
Ekstra toolbar	Ja	ng-content select="[gantt-chart-toolbar]"
Hover-tooltip	Opt-in	enableTaskHoverTooltip, hoverTooltip
Custom bar-template	Ikke aktiv i template	appGanttChartBar finnes, men dagens template bruker innebygde bars

---

Brukseksempel

TypeScript:

groups: GanttGroup[] = [
  { id: 'implementation', label: this.translate.instant('Project.Groups.Implementation') },
  { id: 'testing', label: this.translate.instant('Project.Groups.Testing') },
];

tasks: GanttTask[] = [
  {
    id: 'task-100',
    name: this.translate.instant('Project.Tasks.Setup'),
    start: new Date(2026, 5, 22),
    end: new Date(2026, 5, 26),
    progress: 40,
    groupId: 'implementation',
    color: '#0d6efd',
    meta: { taskStatus: 'Open' },
  },
  {
    id: 'task-110',
    name: this.translate.instant('Project.Tasks.AcceptanceTest'),
    start: new Date(2026, 5, 29),
    end: new Date(2026, 6, 3),
    progress: 0,
    dependencies: ['task-100'],
    groupId: 'testing',
    meta: { taskStatus: 'Planned' },
  },
];

markers: GanttMarker[] = [
  {
    id: 'release',
    date: new Date(2026, 6, 6),
    label: this.translate.instant('Project.Markers.Release'),
    color: '#dc3545',
  },
];

saveTaskChange(event: GanttTaskChangeEvent): void {
  this.projectService.updateTaskDates(event.task.id, event.start, event.end).subscribe();
}

HTML:

<app-gantt-chart
  [tasks]="tasks"
  [groups]="groups"
  [markers]="markers"
  viewMode="month"
  [draggable]="canEdit"
  [showProgress]="true"
  [showDependencies]="true"
  [highlightToday]="true"
  (taskClick)="openTask($event.task)"
  (taskChange)="saveTaskChange($event)"
  (progressChange)="saveProgress($event)">

  <div gantt-chart-toolbar class="d-flex gap-2">
    <button type="button" class="btn btn-sm btn-outline-secondary" (click)="reload()">
      {{ 'Common.Refresh' | translate }}
    </button>
  </div>
</app-gantt-chart>

---

Viktige inputs

Input	Default	Beskrivelse
tasks	[]	Oppgavene som skal vises.
groups	[]	Grupper i sidepanelet.
viewMode	month	Tidsoppløsning.
startDate	ikke satt	Startdato for tidslinjen.
rowHeight	40	Høyde per rad.
barHeight	26	Høyde på hver oppgavebar.
sidebarWidth	260	Bredde på oppgavelisten til venstre.
draggable	true	Tillater dra, resize og progress-endring.
showProgress	true	Viser progresjonsfelt.
showDependencies	true	Viser avhengighetslinjer.
showBarLabels	true	Viser oppgavenavn inne i baren når det er plass.
showLoader	false	Viser loading-overlay.
markers	[]	Dato-markører på tidslinjen.
enableTaskHoverTooltip	false	Viser tooltip basert på hoverTooltip.

---

Outputs

Output	Payload	Bruk
taskClick	GanttTaskClickEvent	Åpne oppgavedetaljer.
taskChange	GanttTaskChangeEvent	Lagre ny start/slutt etter dra eller resize.
progressChange	GanttProgressChangeEvent	Lagre ny progresjon.
periodChange	GanttPeriodChangeEvent	Hent data for ny periode.
viewModeChange	GanttViewMode	Persister valgt visning.

---

Kjente fallgruver

Fallgruve	Riktig mønster
Aktivere draggable uten lagring	Håndter taskChange og progressChange, eller sett draggable til false.
Bruke svært mange oppgaver i samme view	Avgrens på prosjekt, gruppe eller periode.
Forvente custom bar-template	Dagens template rendrer innebygde bars. Bruk color, cssClass, labels og toolbar-slot.
Hardkode oppgavenavn fra UI	Bygg navn og markøretiketter via i18n eller domenedata.

---

Relaterte sider

• Komponenter
• Schedule-grid