Gantt

type ViewMode =
  | 'Hour'
  | 'QuarterDay'
  | 'Half Day'
  | 'Day'
  | 'Week'
  | 'Month'
  | 'QuarterYear'
  | 'Year';
 
type TaskType = 'task' | 'milestone' | 'project';
 
type Task<T = object> = {
  id: string;
  type: TaskType;
  name: string;
  start: Date;
  end: Date;
  progress: number; // 0-100
  dependencies?: string[]; // ids of tasks this row follows
  project?: string; // parent project id
  hideChildren?: boolean; // collapse a project's children
  displayOrder?: number; // row sort order
  isDisabled?: boolean; // lock a row from editing
  styles?: { progressClass?: string; wrapperClass?: string };
} & T;
 
type Columns<T = object> = {
  header: string | ReactNode;
  cell: (task: Task<T> & { expander: ReactNode }) => string | ReactNode;
  width?: string | number;
};
 
type CustomBarContent<T = object> = (task: BarTask<T>) => ReactNode;
 
// BarTask is a Task extended with its computed bar geometry.
type BarTask<T = object> = Task<T> & {
  index: number;
  x1: number;
  x2: number;
  y: number;
  height: number;
  progressX: number;
  progressWidth: number;
  barChildren: BarTask<T>[];
};
 
type GanttRef = {
  today: () => void; // scroll today's column to the left edge (no-op if out of range)
  goTo: (date: Date) => void; // scroll the given date's column to the left edge (no-op if out of range)
  next: () => void; // scroll forward one viewport width
  prev: () => void; // scroll back one viewport width
  scrollToTask: (taskId: string) => void; // scroll the given task's start into view (no-op if unknown)
};