Skip to main content

tasks

Description​

Defines tasks in Gantt

Usage​


tasks?: [
  {
    id: string|number,
    // start is mandatory in incoming data; end or duration is optional - but one of them must be
    start: Date,
    end?: Date,
    duration?:number,
    
    text?: string,
    progress?: number,
    parent?: string|number,
    type?: "task" | "summary" | "milestone" | any, //can be custom type
    open?:boolean,
    lazy?:boolean,
      
    // data for task baseline
    // base_start is mandatory in incoming data; end or duration is optional - but one of them must be
    base_start?: Date,
    base_end?: Date,
    base_duration?: number
  }
];

Parameters​

Each task object in the array of tasks has the following parameters:

  • id - (required) the task ID
  • start - (required) the start date of a task
  • end - (optional) the end date of a task; you should specify either the end date or duration not both
  • duration - (optional) task duration in days
  • base_start - (required) the start date of a baseline
  • base_end - (optional) the end date of a baseline; you should specify either the base_end or base_duration not both
  • base_duration - (optional) baseline duration in days
  • open - (optional) if true, in case a task has subtasks, the branch is open at initialization; if false, then it's closed.
  • lazy - (optional) if true, enables dynamic loading of child tasks (when the task branch is opened, the request for tasks data is sent to the backend), which means their content will not be loaded during the initial loading; if false, all tasks data is loaded at the initialization
  • text - (optional) a task name; in case of no text name, set to ""
  • progress - (optional) task progress which is the percentage value from 0 to 100
  • parent - (optional) the parent task ID; in case of no parent, set to 0
  • type - (required) the task type which can be one of the following: "task", "summary", "milestone" or a custom one
info

The date format should be one of the supported by date-fns

Example​

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef, useEffect } from "react";

const GanttComponent = () => {
  const { links, scales, columns } = getData();

  const tasks = [
    {
      id: 1,
      open: true,
      start: new Date(2020, 11, 6),
      duration: 8,
      text: "React Gantt Widget",
      progress: 60,
      type: "summary"
    },
    {
      id: 2,
      parent: 1,
      start: new Date(2020, 11, 6),
      duration: 4,
      text: "Lib-Gantt",
      progress: 80
    },
  ];

  return <Gantt tasks={tasks} links={links} scales={scales} columns={columns} />;
};

export default GanttComponent;