@jaeungkim/gantt-chart

import { ReactGanttChart } from "@jaeungkim/gantt-chart";
import type { Task } from "@jaeungkim/gantt-chart";

const tasks: Task[] = [
  {
    id: "1",
    name: "Project Kickoff",
    startDate: "2024-06-01T09:00:00Z",
    endDate: "2024-06-03T17:00:00Z",
    parentId: null,
    sequence: "1",
    dependencies: [],
  },
  {
    id: "2",
    name: "Requirements Gathering",
    startDate: "2024-06-04T09:00:00Z",
    endDate: "2024-06-10T17:00:00Z",
    parentId: null,
    sequence: "2",
    dependencies: [{ targetId: "1", type: "FS" }],
  },
];

export default function App() {
  return (
    <ReactGanttChart
      tasks={tasks}
      height={600}
      width="100%"
      theme="system"
      defaultScale="month"
      onTasksChange={(updatedTasks) => console.log(updatedTasks)}
    />
  );
}

interface Task {
  id: string;
  name: string;
  startDate: string; // UTC ISO string
  endDate: string; // UTC ISO string
  parentId: string | null;
  sequence: string;
  dependencies?: TaskDependency[];
}

interface TaskDependency {
  targetId: string;
  type: DependencyType;
}

type DependencyType = "FS" | "SS" | "FF" | "SF";
// FS = Finish-to-Start
// SS = Start-to-Start
// FF = Finish-to-Finish
// SF = Start-to-Finish