1.1.12 • Published 2 years ago

proxima-gantt v1.1.12

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

gantt-task-react

Interactive Gantt Chart for React with TypeScript.

example

Live Demo

Install

npm install gantt-task-react

How to use it

import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
import "gantt-task-react/dist/index.css";

let tasks: Task[] = [
    {
      start: new Date(2020, 1, 1),
      end: new Date(2020, 1, 2),
      name: 'Idea',
      id: 'Task 0',
      type:'task',
      progress: 45,
      isDisabled: true,
      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
    },
    ...
];
<Gantt tasks={tasks} />

You may handle actions

<Gantt
  tasks={tasks}
  viewMode={view}
  onDateChange={onTaskChange}
  onTaskDelete={onTaskDelete}
  onProgressChange={onProgressChange}
  onDoubleClick={onDblClick}
/>

How to run example

cd ./example
npm install
npm start

Gantt Configuration

GanttProps

Parameter NameTypeDescription
tasks*TaskTasks array.
EventOptioninterfaceSpecifies gantt events.
DisplayOptioninterfaceSpecifies view type and display timeline language.
StylingOptioninterfaceSpecifies chart and global tasks styles

EventOption

Parameter NameTypeDescription
onSelect(task: Task, isSelected: boolean) => voidSpecifies the function to be executed on the taskbar select or unselect event.
onDoubleClick(task: Task) => voidSpecifies the function to be executed on the taskbar onDoubleClick event.
onDelete*(task: Task) => void/boolean/Promise/PromiseSpecifies the function to be executed on the taskbar on Delete button press event.
onDateChange*(task: Task) => void/boolean/Promise/PromiseSpecifies the function to be executed when drag taskbar event on timeline has finished.
onProgressChange*(task: Task) => void/boolean/Promise/PromiseSpecifies the function to be executed when drag taskbar progress event has finished.
timeStep(task: Task) => numberA time step value for onDateChange. Specify in milliseconds.

* Chart undoes operation if method return false or error.

DisplayOption

Parameter NameTypeDescription
viewModeenumSpecifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month.
localestringSpecifies the month name language. Able formats: ISO 639-2, Java Locale.

StylingOption

Parameter NameTypeDescription
headerHeightnumberSpecifies the header height.
ganttHeightnumberSpecifies the gantt chart height without header. Default is 0. It`s mean no height limitation.
columnWidthnumberSpecifies the time period width.
listCellWidthstringSpecifies the task list cell width. Empty string is mean "no display".
rowHeightnumberSpecifies the task row height.
barCornerRadiusnumberSpecifies the taskbar corner rounding.
barFillnumberSpecifies the taskbar occupation. Sets in percent from 0 to 100.
handleWidthnumberSpecifies width the taskbar drag event control for start and end dates.
fontFamilystringSpecifies the application font.
fontSizestringSpecifies the application font size.
barProgressColorstringSpecifies the taskbar progress fill color globally.
barProgressSelectedColorstringSpecifies the taskbar progress fill color globally on select.
barBackgroundColorstringSpecifies the taskbar background fill color globally.
barBackgroundSelectedColorstringSpecifies the taskbar background fill color globally on select.
arrowColorstringSpecifies the relationship arrow fill color.
arrowIndentnumberSpecifies the relationship arrow right indent. Sets in px
todayColorstringSpecifies the current period column fill color.
TooltipContentSpecifies the Tooltip view for selected taskbar.
TaskListHeaderSpecifies the task list Header view
TaskListTableSpecifies the task list Table view
  • TooltipContent: React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;
  • TaskListHeader: React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;
  • TaskListTable: React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;

Task

Parameter NameTypeDescription
id*stringTask id.
name*stringTask display name.
type*stringTask display type: task, milestone, project
start*DateTask start date.
end*DateTask end date.
progress*numberTask progress. Sets in percent from 0 to 100.
dependenciesstring[]Specifies the parent dependencies ids.
stylesobjectSpecifies the taskbar styling settings locally. Object is passed with the following attributes:
- backgroundColor: String. Specifies the taskbar background fill color locally.
- backgroundSelectedColor: String. Specifies the taskbar background fill color locally on select.
- progressColor: String. Specifies the taskbar progress fill color locally.
- progressSelectedColor: String. Specifies the taskbar progress fill color globally on select.
isDisabledboolDisables all action for current task.
fontSizestringSpecifies the taskbar font size locally.
projectstringTask project name

*Required

License

MIT

1.1.12

2 years ago

1.1.11

2 years ago

1.1.10

2 years ago

0.1.18

3 years ago

0.1.17

3 years ago

0.1.16

3 years ago

0.1.15

3 years ago

0.1.14

3 years ago

0.1.13

3 years ago

0.1.12

3 years ago

0.1.11

3 years ago