Task and task types

The fields of a task, its dependency entries and the four link letters

Task is the shape of one entry in the tasks prop. TaskTransformed is the measured copy the chart passes to the click and select callbacks, onDetailChange, renderDetail and GanttRow.tasks. Both, with TaskDependency and DependencyType, are type-only exports of the package root.

import type {
  DependencyType,
  Task,
  TaskDependency,
  TaskTransformed,
} from '@jaeungkim/gantt-chart';

The guides cover the behaviour. Task data has the dates and sequence. Editing tasks has the interaction flags.

DependencyType

export type DependencyType = 'FS' | 'SS' | 'FF' | 'SF';

F is finish and S is start. The first letter is the predecessor end the link leaves. The second is the successor end it arrives at. Each end is one edge of that task's bar.

ValueLeaves the predecessor'sArrives at the successor's
'FS'finish (right edge)start (left edge)
'SS'start (left edge)start (left edge)
'FF'finish (right edge)finish (right edge)
'SF'start (left edge)finish (right edge)

TaskDependency

export interface TaskDependency {
  /** The predecessor's id - a task's `dependencies` list the tasks it waits on */
  targetId: string;
  type: DependencyType;
}
FieldTypeRequiredMeaningRead when
targetIdstringyesId of the predecessor. An id that is not in tasks is skipped without an arrow or a warning. Nothing checks for a self link, so a task carrying its own id draws an arrow back onto its row.always
typeDependencyTypeyesWhich bar edge of each task the link anchors to. A value outside the four draws no arrow. In a DEV build the chart also logs a console.warn once per distinct value.always

See Dependencies for how arrows are drawn, selected and deleted.

Task

export interface Task {
  id: string;
  name: string;
  startDate: string;
  endDate: string;
  parentId: string | null;
  sequence: string;
  /** Progress 0-100 (%) - omitted means no progress display */
  progress?: number;
  /** Bar color (any CSS color) - progress fill and hover shade derive from it; omitted, the `--gantt-*` tokens decide */
  color?: string;
  /** Extra class name put on this task's bar and its task-list row */
  className?: string;
  /** Lane this task shares a row with - lane-mates draw side by side, overlaps stack onto extra rows */
  lane?: string;
  dependencies?: TaskDependency[];
  /** Blocks every gesture on this task - overrides the chart's `readOnly` prop */
  readOnly?: boolean;
  /** Allows/blocks moving this task - overrides both `readOnly` settings */
  allowMove?: boolean;
  /** Allows/blocks resizing this task - overrides both `readOnly` settings */
  allowResize?: boolean;
  /** Allows/blocks dragging this task's progress handle - overrides both `readOnly` settings */
  allowProgressChange?: boolean;
  /** Allows/blocks starting a dependency drag from this task - overrides both `readOnly` settings */
  allowLinkCreate?: boolean;
  /** Allows/blocks deleting a dependency this task owns - overrides both `readOnly` settings */
  allowLinkDelete?: boolean;
  /** Allows/blocks dragging this row to a new position or parent - opt-in, off unless this or the chart's `allowReorder` turns it on */
  allowReorder?: boolean;
  /** Earliest date this task may be dragged to (ISO string) - overrides the chart's `minDate` */
  minDate?: string;
  /** Latest date this task may be dragged to (ISO string) - overrides the chart's `maxDate` */
  maxDate?: string;
}

Six fields are required: id, name, startDate, endDate, parentId and sequence. Task data covers the per-field rules for date parsing, sequence ordering, progress clamping, lane packing and the minDate/maxDate fallback.

A task's own flag overrides the task's readOnly, which overrides the chart-level flag of the same name, which overrides the chart's readOnly. See GanttInteractionConfig for the full resolution order, including the shorter one allowReorder uses.

TaskTransformed

The chart computes every added field, and each one is read-only. TaskTransformed is output only. tasks is always Task[], and a mutated TaskTransformed is never read back.

export interface TaskTransformed extends Task {
  barLeft: number;
  barWidth: number;
  depth: number;
  order: number;
  originalOrder: number;
  /** Row with children - its dates roll up, so resize and progress editing are off and dragging moves the subtree. */
  isSummary?: boolean;
  dependencies?: TaskDependency[];
}
FieldTypeComputed valuePresent when
every Task fieldas declared on Taskcopied through unchangedalways
barLeftnumberpx from the timeline origin. 0 when the timeline has no cellsalways
barWidthnumberpx, clamped to a minimum of 1. 0 only when the timeline has no cellsalways
depthnumberparentId chain depth with hierarchy on, dot count in sequence otherwisealways
ordernumber1-based row number after lane packingalways
originalOrdernumberthe 1-based index in the sequence-sorted array, before the order rewritealways
isSummarybooleantrue when the task has children. Always false with hierarchy off. Typed optional, written on every task.always

Notes

normalizeProgress is not exported from the package root. It exists in the source and src/shared/task.ts re-exports it, but src/index.ts does not list it, so import { normalizeProgress } from '@jaeungkim/gantt-chart' fails. Write Math.min(100, Math.max(0, progress)) in the host app instead. RenderedDependency is not exported either.

The chart runs no validation on Task. Required fields, date parsing, id uniqueness and the input progress range all go unchecked. In a DEV build the chart warns once for an unrecognized DependencyType. That warning is the only runtime check in the model.

Layout calls sequence.split('.'), so a task built by hand without sequence throws. No other missing field throws.

Dates go in as anything dayjs.utc() parses. They come back as Dayjs.toISOString(), in the form YYYY-MM-DDTHH:mm:ss.sssZ. The chart has no local time zone mode.

Related pages: GanttProps, GanttInteractionConfig, Task data.

On this page

DependencyTypeTaskDependencyTaskTaskTransformedNotes