2020-07-30 00:06:39 +03:00
# gantt-task-react
## Interactive Gantt Chart for React with TypeScript.
2020-07-30 00:05:59 +03:00
2020-07-22 23:33:13 +03:00
2020-08-05 08:30:38 +03:00
## [Live Demo](https://matematuk.github.io/gantt-task-react/)
2020-07-24 10:47:31 +03:00
## Install
```
npm install gantt-task-react
```
2020-07-22 23:33:13 +03:00
## How to use it
```javascript
2020-08-05 08:14:22 +03:00
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
2020-08-05 09:13:40 +03:00
import "gantt-task-react/dist/index.css";
2020-07-22 23:33:13 +03:00
let tasks: Task[] = [
{
start: new Date(2020, 1, 1),
end: new Date(2020, 1, 2),
name: 'Idea',
id: 'Task 0',
2021-03-31 18:38:40 +03:00
type:'task',
2020-07-22 23:33:13 +03:00
progress: 45,
isDisabled: true,
styles: { progressColor: '#ffbb54 ', progressSelectedColor: '#ff9e0d ' },
},
...
];
< Gantt tasks = {tasks} / >
```
You may handle actions
```javascript
< Gantt
tasks={tasks}
viewMode={view}
onDateChange={onTaskChange}
onTaskDelete={onTaskDelete}
onProgressChange={onProgressChange}
onDoubleClick={onDblClick}
/>
```
2020-07-24 10:47:31 +03:00
## How to run example
```
cd ./example
npm install
npm start
```
2020-07-22 23:33:13 +03:00
## Gantt Configuration
2020-07-24 10:34:35 +03:00
### GanttProps
2020-07-24 10:26:44 +03:00
2020-08-15 11:20:38 +03:00
| Parameter Name | Type | Description |
| :------------------------------ | :------------ | :------------------------------------------------- |
| tasks\* | [Task ](#Task ) | Tasks array. |
| [EventOption ](#EventOption ) | interface | Specifies gantt events. |
| [DisplayOption ](#DisplayOption ) | interface | Specifies view type and display timeline language. |
| [StylingOption ](#StylingOption ) | interface | Specifies chart and global tasks styles |
2020-07-24 10:26:44 +03:00
2020-07-24 10:34:35 +03:00
### EventOption
2020-07-24 10:14:18 +03:00
2021-08-11 11:28:19 +03:00
| Parameter Name | Type | Description |
| :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
| onSelect | (task: Task, isSelected: boolean) => void | Specifies the function to be executed on the taskbar select or unselect event. |
| onDoubleClick | (task: Task) => void | Specifies the function to be executed on the taskbar onDoubleClick event. |
| onDelete\* | (task: Task) => void/boolean/Promise< void > /Promise< boolean > | Specifies the function to be executed on the taskbar on Delete button press event. |
| onDateChange\* | (task: Task, children: Task[]) => void/boolean/Promise< void > /Promise< boolean > | Specifies the function to be executed when drag taskbar event on timeline has finished. |
| onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise< void > /Promise< boolean > | Specifies the function to be executed when drag taskbar progress event has finished. |
2021-08-17 20:55:10 +03:00
| onExpanderClick\* | onExpanderClick: (task: Task) => void; | Specifies the function to be executed on the table expander click |
2022-02-06 21:52:49 +01:00
| timeStep | number | A time step value for onDateChange. Specify in milliseconds. |
2020-09-09 17:43:48 +03:00
2021-08-11 11:28:19 +03:00
\* Chart undoes operation if method return false or error. Parameter children returns one level deep records.
2020-07-24 10:14:18 +03:00
2020-07-24 10:34:35 +03:00
### DisplayOption
2020-07-24 10:14:18 +03:00
2022-02-13 20:50:31 +01:00
| Parameter Name | Type | Description |
| :------------- | :------ | :---------------------------------------------------------------------------------------------------- |
| viewMode | enum | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
| viewDate | date | Specifies display date and time for display. |
| locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale. |
| rtl | boolean | Sets rtl mode. |
2020-08-13 23:27:52 +03:00
### StylingOption
2020-08-23 22:40:48 +03:00
| Parameter Name | Type | Description |
| :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |
| headerHeight | number | Specifies the header height. |
| ganttHeight | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |
| columnWidth | number | Specifies the time period width. |
| listCellWidth | string | Specifies the task list cell width. Empty string is mean "no display". |
| rowHeight | number | Specifies the task row height. |
| barCornerRadius | number | Specifies the taskbar corner rounding. |
| barFill | number | Specifies the taskbar occupation. Sets in percent from 0 to 100. |
| handleWidth | number | Specifies width the taskbar drag event control for start and end dates. |
| fontFamily | string | Specifies the application font. |
| fontSize | string | Specifies the application font size. |
| barProgressColor | string | Specifies the taskbar progress fill color globally. |
| barProgressSelectedColor | string | Specifies the taskbar progress fill color globally on select. |
| barBackgroundColor | string | Specifies the taskbar background fill color globally. |
| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select. |
| arrowColor | string | Specifies the relationship arrow fill color. |
| arrowIndent | number | Specifies the relationship arrow right indent. Sets in px |
| todayColor | string | Specifies the current period column fill color. |
| TooltipContent | | Specifies the Tooltip view for selected taskbar. |
| TaskListHeader | | Specifies the task list Header view |
| TaskListTable | | Specifies the task list Table view |
2020-08-26 12:54:44 +03:00
- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;` ](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56 )
2020-08-23 22:44:51 +03:00
- TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`
2020-09-15 23:34:30 +03:00
- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;`
2020-08-15 11:20:38 +03:00
### Task
2020-08-15 14:25:31 +03:00
| Parameter Name | Type | Description |
| :------------- | :------- | :---------------------------------------------------------------------------------------------------- |
| id\* | string | Task id. |
| name\* | string | Task display name. |
2021-03-30 14:48:56 +03:00
| type\* | string | Task display type: **task** , **milestone** , **project** |
2020-08-15 14:25:31 +03:00
| start\* | Date | Task start date. |
| end\* | Date | Task end date. |
| progress\* | number | Task progress. Sets in percent from 0 to 100. |
| dependencies | string[] | Specifies the parent dependencies ids. |
| styles | object | Specifies 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. |
| isDisabled | bool | Disables all action for current task. |
| fontSize | string | Specifies the taskbar font size locally. |
2021-03-27 21:05:38 +02:00
| project | string | Task project name |
2021-08-11 11:28:19 +03:00
| hideChildren | bool | Hide children items. Parameter works with project type only |
2020-08-15 11:20:38 +03:00
\*Required
## License
[MIT ](https://oss.ninja/mit/jaredpalmer/ )
