gantt-task-react-powern 0.6.32 → 0.6.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -63
- package/dist/components/calendar/calendar.d.ts +1 -0
- package/dist/components/task-list/task-list-columns.d.ts +15 -0
- package/dist/components/task-list/task-list-header.d.ts +2 -0
- package/dist/components/task-list/task-list-table.d.ts +1 -0
- package/dist/components/task-list/task-list.d.ts +5 -0
- package/dist/index.css +22 -0
- package/dist/index.js +375 -244
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +375 -244
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
# gantt-task-react
|
|
1
|
+
# gantt-task-react-powern
|
|
2
2
|
|
|
3
3
|
## Interactive Gantt Chart for React with TypeScript.
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
PowerN fork of [gantt-task-react](https://github.com/MaTeMaTuK/gantt-task-react) with critical-path support and additional features used by `cpms-web`. See [DEVELOPMENT.md](DEVELOPMENT.md) for contributor and publishing docs.
|
|
8
8
|
|
|
9
9
|
## Install
|
|
10
10
|
|
|
11
11
|
```
|
|
12
|
-
npm install gantt-task-react
|
|
12
|
+
npm install gantt-task-react-powern
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
+
For local development against this repo, running the bundled example, or installing into `cpms-web` via `npm pack` (tarball), see [DEVELOPMENT.md](DEVELOPMENT.md) — the end-to-end tarball workflow is Section 3B.
|
|
16
|
+
|
|
15
17
|
## How to use it
|
|
16
18
|
|
|
17
19
|
```javascript
|
|
18
|
-
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
|
|
19
|
-
import "gantt-task-react/dist/index.css";
|
|
20
|
+
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react-powern';
|
|
21
|
+
import "gantt-task-react-powern/dist/index.css";
|
|
20
22
|
|
|
21
23
|
let tasks: Task[] = [
|
|
22
24
|
{
|
|
@@ -31,7 +33,7 @@ let tasks: Task[] = [
|
|
|
31
33
|
},
|
|
32
34
|
...
|
|
33
35
|
];
|
|
34
|
-
<Gantt tasks={tasks} />
|
|
36
|
+
<Gantt tasks={tasks} scheduleType="forward" />
|
|
35
37
|
```
|
|
36
38
|
|
|
37
39
|
You may handle actions
|
|
@@ -40,8 +42,9 @@ You may handle actions
|
|
|
40
42
|
<Gantt
|
|
41
43
|
tasks={tasks}
|
|
42
44
|
viewMode={view}
|
|
45
|
+
scheduleType="forward"
|
|
43
46
|
onDateChange={onTaskChange}
|
|
44
|
-
|
|
47
|
+
onDelete={onTaskDelete}
|
|
45
48
|
onProgressChange={onProgressChange}
|
|
46
49
|
onDoubleClick={onDblClick}
|
|
47
50
|
onClick={onClick}
|
|
@@ -60,12 +63,18 @@ npm start
|
|
|
60
63
|
|
|
61
64
|
### GanttProps
|
|
62
65
|
|
|
63
|
-
| Parameter Name | Type
|
|
64
|
-
| :------------------------------ |
|
|
65
|
-
| tasks\* | [Task](#Task)
|
|
66
|
-
|
|
|
67
|
-
| [
|
|
68
|
-
|
|
|
66
|
+
| Parameter Name | Type | Description |
|
|
67
|
+
| :------------------------------ | :-------------------- | :-------------------------------------------------------------------------------- |
|
|
68
|
+
| tasks\* | [Task](#Task) | Tasks array. |
|
|
69
|
+
| scheduleType\* | string | Scheduling mode used for critical-path and date calculations. |
|
|
70
|
+
| leafTasks | Task[] | Optional pre-flattened leaf tasks (skips internal flattening when provided). |
|
|
71
|
+
| startDate | Date | Project-level start date used for calendar/critical-path bounds. |
|
|
72
|
+
| endDate | Date | Project-level end date used for calendar/critical-path bounds. |
|
|
73
|
+
| projectCalendar | CalendarDefinition | Working calendar (shifts, off days, holidays) applied to scheduling. |
|
|
74
|
+
| sliderTime | number | Vertical slider time marker (ms) drawn on the chart. |
|
|
75
|
+
| [EventOption](#EventOption) | interface | Specifies gantt events. |
|
|
76
|
+
| [DisplayOption](#DisplayOption) | interface | Specifies view type and display timeline language. |
|
|
77
|
+
| [StylingOption](#StylingOption) | interface | Specifies chart and global tasks styles |
|
|
69
78
|
|
|
70
79
|
### EventOption
|
|
71
80
|
|
|
@@ -78,72 +87,109 @@ npm start
|
|
|
78
87
|
| 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. |
|
|
79
88
|
| onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished. |
|
|
80
89
|
| onExpanderClick\* | onExpanderClick: (task: Task) => void; | Specifies the function to be executed on the table expander click |
|
|
90
|
+
| onMultiSelect | (tasks: Task[]) => void | Invoked when tasks are multi-selected via checkboxes. |
|
|
91
|
+
| onCalendarError | (task: Task, reason: string) => void | Invoked when a task cannot be scheduled against the project calendar. |
|
|
81
92
|
| timeStep | number | A time step value for onDateChange. Specify in milliseconds. |
|
|
82
93
|
|
|
83
94
|
\* Chart undoes operation if method return false or error. Parameter children returns one level deep records.
|
|
84
95
|
|
|
85
96
|
### DisplayOption
|
|
86
97
|
|
|
87
|
-
| Parameter Name | Type | Description
|
|
88
|
-
| :------------- | :------ |
|
|
89
|
-
| viewMode | enum | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, Year. |
|
|
90
|
-
| viewDate | date | Specifies display date and time for display.
|
|
91
|
-
| preStepsCount | number | Specifies empty space before the fist task
|
|
92
|
-
| locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale.
|
|
93
|
-
| rtl | boolean | Sets rtl mode.
|
|
98
|
+
| Parameter Name | Type | Description |
|
|
99
|
+
| :------------- | :------ | :------------------------------------------------------------------------------------------------------------------- |
|
|
100
|
+
| viewMode | enum | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, Quarter, Year. |
|
|
101
|
+
| viewDate | date | Specifies display date and time for display. |
|
|
102
|
+
| preStepsCount | number | Specifies empty space before the fist task |
|
|
103
|
+
| locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale. |
|
|
104
|
+
| rtl | boolean | Sets rtl mode. |
|
|
94
105
|
|
|
95
106
|
### StylingOption
|
|
96
107
|
|
|
97
|
-
| Parameter Name
|
|
98
|
-
|
|
|
99
|
-
| headerHeight
|
|
100
|
-
| ganttHeight
|
|
101
|
-
| columnWidth
|
|
102
|
-
| listCellWidth
|
|
103
|
-
| rowHeight
|
|
104
|
-
| barCornerRadius
|
|
105
|
-
| barFill
|
|
106
|
-
| handleWidth
|
|
107
|
-
| fontFamily
|
|
108
|
-
| fontSize
|
|
109
|
-
| barProgressColor
|
|
110
|
-
| barProgressSelectedColor
|
|
111
|
-
| barBackgroundColor
|
|
112
|
-
| barBackgroundSelectedColor
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
120
|
-
|
|
108
|
+
| Parameter Name | Type | Description |
|
|
109
|
+
| :------------------------------- | :------- | :--------------------------------------------------------------------------------------------- |
|
|
110
|
+
| headerHeight | number | Specifies the header height. |
|
|
111
|
+
| ganttHeight | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |
|
|
112
|
+
| columnWidth | number | Specifies the time period width. |
|
|
113
|
+
| listCellWidth | string | Specifies the task list cell width. Empty string is mean "no display". |
|
|
114
|
+
| rowHeight | number | Specifies the task row height. |
|
|
115
|
+
| barCornerRadius | number | Specifies the taskbar corner rounding. |
|
|
116
|
+
| barFill | number | Specifies the taskbar occupation. Sets in percent from 0 to 100. |
|
|
117
|
+
| handleWidth | number | Specifies width the taskbar drag event control for start and end dates. |
|
|
118
|
+
| fontFamily | string | Specifies the application font. |
|
|
119
|
+
| fontSize | string | Specifies the application font size. |
|
|
120
|
+
| barProgressColor | string | Specifies the taskbar progress fill color globally. |
|
|
121
|
+
| barProgressSelectedColor | string | Specifies the taskbar progress fill color globally on select. |
|
|
122
|
+
| barBackgroundColor | string | Specifies the taskbar background fill color globally. |
|
|
123
|
+
| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select. |
|
|
124
|
+
| projectProgressColor | string | Specifies the project bar progress fill color globally. |
|
|
125
|
+
| projectProgressSelectedColor | string | Specifies the project bar progress fill color globally on select. |
|
|
126
|
+
| projectBackgroundColor | string | Specifies the project bar background fill color globally. |
|
|
127
|
+
| projectBackgroundSelectedColor | string | Specifies the project bar background fill color globally on select. |
|
|
128
|
+
| milestoneBackgroundColor | string | Specifies the milestone background fill color globally. |
|
|
129
|
+
| milestoneBackgroundSelectedColor | string | Specifies the milestone background fill color globally on select. |
|
|
130
|
+
| arrowColor | string | Specifies the relationship arrow fill color. |
|
|
131
|
+
| arrowIndent | number | Specifies the relationship arrow right indent. Sets in px |
|
|
132
|
+
| todayColor | string | Specifies the current period column fill color. |
|
|
133
|
+
| weekendColor | string | Specifies the weekend column fill color. |
|
|
134
|
+
| taskProgressColor | string | Default progress color applied to task bars when not overridden per-task. |
|
|
135
|
+
| taskLabelRenderer | function | `(task: Task) => React.ReactNode`. Custom renderer for the label drawn next to each bar. |
|
|
136
|
+
| delayToRender | number | Debounce (ms) before rendering after task updates. |
|
|
137
|
+
| shouldNotShowLoadingOverlay | boolean | Disables the built-in loading overlay. |
|
|
138
|
+
| TooltipContent | | Specifies the Tooltip view for selected taskbar. |
|
|
139
|
+
| TaskListHeader | | Specifies the task list Header view |
|
|
140
|
+
| TaskListTable | | Specifies the task list Table view |
|
|
141
|
+
|
|
142
|
+
- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](src/components/other/tooltip.tsx)
|
|
121
143
|
- TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`
|
|
122
|
-
- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;`
|
|
144
|
+
- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; onExpanderClick: (task: Task) => void; }>;`
|
|
123
145
|
|
|
124
146
|
### Task
|
|
125
147
|
|
|
126
|
-
| Parameter Name
|
|
127
|
-
|
|
|
128
|
-
| id\*
|
|
129
|
-
| name\*
|
|
130
|
-
| type\*
|
|
131
|
-
| start\*
|
|
132
|
-
| end\*
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
|
|
|
136
|
-
|
|
|
137
|
-
|
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
148
|
+
| Parameter Name | Type | Description |
|
|
149
|
+
| :------------------ | :--------------- | :---------------------------------------------------------------------------------------------------- |
|
|
150
|
+
| id\* | string | Task id. |
|
|
151
|
+
| name\* | string | Task display name. |
|
|
152
|
+
| type\* | string | Task display type: **task**, **milestone**, **project** |
|
|
153
|
+
| start\* | Date | Task start date. |
|
|
154
|
+
| end\* | Date | Task end date. |
|
|
155
|
+
| actualStart\* | Date | Actual start date used for variance and critical-path calculations. |
|
|
156
|
+
| actualEnd\* | Date | Actual end date used for variance and critical-path calculations. |
|
|
157
|
+
| progress\* | number | Task progress. Sets in percent from 0 to 100. |
|
|
158
|
+
| depth\* | number | Hierarchy depth of the task in the task tree (0 = root). |
|
|
159
|
+
| optionalId | string | Optional secondary id (e.g. external system id). |
|
|
160
|
+
| dependencies | DependencyType[] | Parent dependencies. Each entry is `{ id: string; type: "SS" \| "SF" \| "FS" \| "FF" }`. |
|
|
161
|
+
| criticalPathArrows | object[] | Arrows on the critical path: `{ taskId: string; arrowColor: string; criticalPathType: string }`. |
|
|
162
|
+
| styles | object | Specifies the taskbar styling settings locally. Object is passed with the following attributes: |
|
|
163
|
+
| | | - **backgroundColor**: String. Specifies the taskbar background fill color locally. |
|
|
164
|
+
| | | - **backgroundSelectedColor**: String. Specifies the taskbar background fill color locally on select. |
|
|
165
|
+
| | | - **progressColor**: String. Specifies the taskbar progress fill color locally. |
|
|
166
|
+
| | | - **progressSelectedColor**: String. Specifies the taskbar progress fill color globally on select. |
|
|
167
|
+
| | | - **taskProgressColor**: String. Overrides the task progress color locally. |
|
|
168
|
+
| | | - **criticalPathColor**: String. Color used when the task is on the critical path. |
|
|
169
|
+
| percentComplete | number | Percent complete (0–100), distinct from drag-driven `progress`. |
|
|
170
|
+
| plannedDuration | number | Planned duration. |
|
|
171
|
+
| remainingDuration | number | Remaining duration. |
|
|
172
|
+
| actualDuration | number | Actual duration. |
|
|
173
|
+
| durationType | string | Duration unit identifier. |
|
|
174
|
+
| isDisabled | bool | Disables all action for current task. |
|
|
175
|
+
| project | string | Task project name |
|
|
176
|
+
| hideChildren | bool | Hide children items. Parameter works with project type only |
|
|
177
|
+
| displayOrder | number | Explicit display order in the task list. |
|
|
178
|
+
| childrenCount | number | Number of children under this task (used by the expander). |
|
|
179
|
+
| calendar | CalendarDefinition | Per-task working calendar override. |
|
|
144
180
|
|
|
145
181
|
\*Required
|
|
146
182
|
|
|
183
|
+
## Critical path
|
|
184
|
+
|
|
185
|
+
`getCriticalPaths` is exported for consumers that need to compute critical paths outside the chart:
|
|
186
|
+
|
|
187
|
+
```javascript
|
|
188
|
+
import { getCriticalPaths } from 'gantt-task-react-powern';
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
Critical-path arrows and colors are driven by `Task.criticalPathArrows` and `Task.styles.criticalPathColor`.
|
|
192
|
+
|
|
147
193
|
## License
|
|
148
194
|
|
|
149
195
|
[MIT](https://oss.ninja/mit/jaredpalmer/)
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Single source of truth for the left task-list columns: their stable ids and
|
|
3
|
+
* default width factors (multiplied by `parseInt(rowWidth)`). Both the header
|
|
4
|
+
* and the table read these ids when looking up per-column widths so resizing a
|
|
5
|
+
* column keeps the two in sync.
|
|
6
|
+
*/
|
|
7
|
+
export declare type TaskListColumn = {
|
|
8
|
+
id: string;
|
|
9
|
+
factor: number;
|
|
10
|
+
};
|
|
11
|
+
export declare function getTaskListColumns(scheduleType: string, hasCheckbox: boolean): TaskListColumn[];
|
|
12
|
+
/** Minimum width (px) a column can be dragged down to. */
|
|
13
|
+
export declare const MIN_COLUMN_WIDTH = 40;
|
|
14
|
+
/** Build the default width map (px) for the current column set. */
|
|
15
|
+
export declare function buildDefaultColumnWidths(scheduleType: string, hasCheckbox: boolean, rowWidth: string): Record<string, number>;
|
|
@@ -29,6 +29,8 @@ export declare type TaskListProps = {
|
|
|
29
29
|
scheduleType: string;
|
|
30
30
|
allSelected?: boolean;
|
|
31
31
|
onSelectAll?: (selected: boolean) => void;
|
|
32
|
+
columnWidths?: Record<string, number>;
|
|
33
|
+
onColumnResize?: (colId: string, width: number) => void;
|
|
32
34
|
}>;
|
|
33
35
|
TaskListTable: React.FC<{
|
|
34
36
|
rowHeight: number;
|
|
@@ -46,8 +48,11 @@ export declare type TaskListProps = {
|
|
|
46
48
|
onTaskSelect?: (taskId: string, selected: boolean) => void;
|
|
47
49
|
taskLabelRenderer?: (Task: Task) => React.ReactNode;
|
|
48
50
|
virtualItems?: VirtualItem[];
|
|
51
|
+
columnWidths?: Record<string, number>;
|
|
49
52
|
}>;
|
|
50
53
|
containerWidth?: number;
|
|
54
|
+
containerMaxWidth?: number;
|
|
55
|
+
onContentWidthChange?: (width: number) => void;
|
|
51
56
|
innerScrollRef?: React.RefObject<HTMLDivElement>;
|
|
52
57
|
horizontalContainerRef?: React.RefObject<HTMLDivElement>;
|
|
53
58
|
} & EventOption;
|
package/dist/index.css
CHANGED
|
@@ -16,6 +16,23 @@
|
|
|
16
16
|
margin-left: -2px;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
._ddPJg {
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 0;
|
|
22
|
+
right: 0;
|
|
23
|
+
width: 6px;
|
|
24
|
+
cursor: col-resize;
|
|
25
|
+
-webkit-user-select: none;
|
|
26
|
+
-moz-user-select: none;
|
|
27
|
+
-ms-user-select: none;
|
|
28
|
+
user-select: none;
|
|
29
|
+
border-right: 1px solid rgb(196, 196, 196);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
._ddPJg:hover {
|
|
33
|
+
border-right: 2px solid rgb(120, 120, 120);
|
|
34
|
+
}
|
|
35
|
+
|
|
19
36
|
._WuQ0f {
|
|
20
37
|
display: table-cell;
|
|
21
38
|
vertical-align: -webkit-baseline-middle;
|
|
@@ -194,6 +211,11 @@
|
|
|
194
211
|
stroke: #e6e4e4;
|
|
195
212
|
}
|
|
196
213
|
|
|
214
|
+
._1q0EV {
|
|
215
|
+
stroke: #999;
|
|
216
|
+
stroke-width: 1;
|
|
217
|
+
}
|
|
218
|
+
|
|
197
219
|
._Zh9jh {
|
|
198
220
|
stroke: #d0d0d0;
|
|
199
221
|
stroke-dasharray: 4 4;
|