iris-gantt 1.4.11 → 1.5.0
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 +184 -103
- package/dist/Gantt/Gantt.d.ts.map +1 -1
- package/dist/Gantt/Timeline.d.ts.map +1 -1
- package/dist/Gantt/types.d.ts +1 -0
- package/dist/Gantt/types.d.ts.map +1 -1
- package/dist/gantt.css +1 -1
- package/dist/iris-gantt.js +258 -256
- package/dist/iris-gantt.umd.cjs +7 -7
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,27 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
A comprehensive, production-ready Gantt chart component built with React and TypeScript. Easy to install, simple to use, fully customizable, and responsive.
|
|
4
4
|
|
|
5
|
-
## 🆕 Version 1.
|
|
5
|
+
## 🆕 Version 1.5.0 (Latest)
|
|
6
6
|
|
|
7
7
|
### Bug Fixes
|
|
8
|
+
- **On-Hold correctly renders over completed tasks** — The grey hatched on-hold overlay now correctly sits *above* the task bar in the DOM tree. Previously, the `status-completed` blue background colour overrode it.
|
|
9
|
+
- **On-Hold overlay stays visible on hover** — Raised the CSS `z-index` of `.gantt-on-hold-period` to `101 !important`. The task bar hover state elevates to `z-index: 100`, so the hold pattern will no longer disappear when you mouse over a task.
|
|
10
|
+
|
|
8
11
|
- **OnHold grey lines now render with project API data** — Fixed a bug where on-hold grey bars were not visible when tasks used API field names (`workGroupName`, `plannedStartDate`, `plannedEndDate`). The normalizer now recognises these aliases, so dates are correctly resolved and the hold period overlap is detected.
|
|
9
12
|
|
|
10
13
|
### New API Field Aliases
|
|
14
|
+
|
|
11
15
|
The `tasks` prop now accepts the following additional field names used by common project APIs:
|
|
12
16
|
|
|
13
|
-
| New alias
|
|
14
|
-
|
|
15
|
-
| `workGroupName`
|
|
17
|
+
| New alias | Maps to |
|
|
18
|
+
| ------------------ | ------------------- |
|
|
19
|
+
| `workGroupName` | Task display name |
|
|
16
20
|
| `plannedStartDate` | Task bar start date |
|
|
17
|
-
| `plannedEndDate`
|
|
21
|
+
| `plannedEndDate` | Task bar end date |
|
|
18
22
|
|
|
19
23
|
## 🔖 Version 1.4.6
|
|
20
24
|
|
|
21
25
|
### Bug Fixes
|
|
26
|
+
|
|
22
27
|
- **Baselines now show by default** — Fixed a critical bug where baselines were not rendering because the `config` spread was overriding the default `baselines: true` with `undefined`. Baselines are now always enabled unless you explicitly pass `config={{ baselines: false }}`.
|
|
23
28
|
- **`on_hold_periods` snake_case prop supported** — The Gantt component now accepts both `onHoldPeriods` (camelCase) and `on_hold_periods` (snake_case) as a top-level prop for project-level on-hold periods. Previously only the camelCase variant was recognized, causing the feature to silently fail for API-style payloads.
|
|
24
29
|
|
|
25
30
|
### Improvements
|
|
31
|
+
|
|
26
32
|
- **Project-level OnHold applied to all tasks** — The `onHoldPeriods` / `on_hold_periods` prop now propagates the grey hatched on-hold bar to **all** task rows including `project`-type tasks. Previously, only child/standalone tasks showed the hold bar; now the entire project hierarchy displays it consistently.
|
|
27
33
|
- **Same-height on-hold bars** — The grey on-hold period bar is now the same height (28px) as the task bar.
|
|
28
34
|
- **Tasks continue after hold period** — When a project resumes after an on-hold period, all affected tasks continue in sequence after the hold, and remaining days are extended automatically.
|
|
@@ -31,6 +37,7 @@ The `tasks` prop now accepts the following additional field names used by common
|
|
|
31
37
|
## 🔖 Version 1.4.2
|
|
32
38
|
|
|
33
39
|
### Included Changes
|
|
40
|
+
|
|
34
41
|
- **Per-task tooltip config** — Each task can now carry its own `tooltipConfig` to override global tooltip settings (show/hide fields, labels, accessors, formatters).
|
|
35
42
|
- **Unified `onTaskDragUpdate` callback** — Single callback for all drag operations: task bar move/resize AND row reorder (grip icon drag-and-drop).
|
|
36
43
|
- **Row reorder API integration** — `onTaskDragUpdate` now fires with `dragType: 'reorder'` and `reorderMeta` (sequence IDs, stage ID) when tasks are reordered via grip icon.
|
|
@@ -51,6 +58,7 @@ The `tasks` prop now accepts the following additional field names used by common
|
|
|
51
58
|
## ✨ Features
|
|
52
59
|
|
|
53
60
|
### Core Features
|
|
61
|
+
|
|
54
62
|
- ✅ Interactive task management
|
|
55
63
|
- ✅ Drag & drop task bars
|
|
56
64
|
- ✅ Task dependencies with 4 link types (end-to-start, start-to-start, end-to-end, start-to-end)
|
|
@@ -61,6 +69,7 @@ The `tasks` prop now accepts the following additional field names used by common
|
|
|
61
69
|
- ✅ Light & dark themes
|
|
62
70
|
|
|
63
71
|
### Advanced Features
|
|
72
|
+
|
|
64
73
|
- ✅ Auto-scheduling
|
|
65
74
|
- ✅ Critical path analysis
|
|
66
75
|
- ✅ **Baselines (always visible, automatically created)**
|
|
@@ -69,7 +78,8 @@ The `tasks` prop now accepts the following additional field names used by common
|
|
|
69
78
|
- ✅ Filtering & search
|
|
70
79
|
- ✅ Resource leveling
|
|
71
80
|
- ✅ **Fully responsive** (desktop, tablet, mobile)
|
|
72
|
-
- ✅ **Fully customizable** (all text, buttons, colors, fonts)
|
|
81
|
+
- ✅ **Fully customizable** (all text, buttons, colors, fonts, icons)
|
|
82
|
+
- ✅ **Vertical Marker Lines** (Today & Project Start)
|
|
73
83
|
|
|
74
84
|
## 📦 Installation
|
|
75
85
|
|
|
@@ -93,31 +103,31 @@ npm install @fortawesome/react-fontawesome@^3.1.0
|
|
|
93
103
|
## 🚀 Quick Start
|
|
94
104
|
|
|
95
105
|
```tsx
|
|
96
|
-
import { Gantt } from
|
|
97
|
-
import
|
|
106
|
+
import { Gantt } from "iris-gantt";
|
|
107
|
+
import "iris-gantt/gantt.css";
|
|
98
108
|
|
|
99
109
|
function MyGantt() {
|
|
100
110
|
const tasks = [
|
|
101
111
|
{
|
|
102
|
-
id:
|
|
103
|
-
text:
|
|
112
|
+
id: "1",
|
|
113
|
+
text: "Project Planning",
|
|
104
114
|
start: new Date(2024, 0, 1),
|
|
105
115
|
end: new Date(2024, 0, 15),
|
|
106
116
|
duration: 14,
|
|
107
117
|
progress: 100,
|
|
108
|
-
type:
|
|
118
|
+
type: "project",
|
|
109
119
|
},
|
|
110
120
|
{
|
|
111
|
-
id:
|
|
112
|
-
text:
|
|
121
|
+
id: "2",
|
|
122
|
+
text: "Development",
|
|
113
123
|
start: new Date(2024, 0, 15),
|
|
114
124
|
end: new Date(2024, 1, 15),
|
|
115
125
|
duration: 31,
|
|
116
126
|
progress: 60,
|
|
117
127
|
},
|
|
118
|
-
]
|
|
128
|
+
];
|
|
119
129
|
|
|
120
|
-
return <Gantt tasks={tasks}
|
|
130
|
+
return <Gantt tasks={tasks} />;
|
|
121
131
|
}
|
|
122
132
|
```
|
|
123
133
|
|
|
@@ -133,19 +143,25 @@ function MyGantt() {
|
|
|
133
143
|
|
|
134
144
|
```tsx
|
|
135
145
|
// Main component (named import - recommended)
|
|
136
|
-
import { Gantt } from
|
|
146
|
+
import { Gantt } from "iris-gantt";
|
|
137
147
|
|
|
138
148
|
// Main component (default import - also works)
|
|
139
|
-
import Gantt from
|
|
149
|
+
import Gantt from "iris-gantt";
|
|
140
150
|
|
|
141
151
|
// Types
|
|
142
152
|
import type {
|
|
143
|
-
Task,
|
|
144
|
-
|
|
145
|
-
|
|
153
|
+
Task,
|
|
154
|
+
Link,
|
|
155
|
+
GanttConfig,
|
|
156
|
+
GanttUIConfig,
|
|
157
|
+
GanttStyleConfig,
|
|
158
|
+
TaskTooltipConfig,
|
|
159
|
+
TaskDragUpdatePayload,
|
|
160
|
+
TaskReorderMeta,
|
|
161
|
+
} from "iris-gantt";
|
|
146
162
|
|
|
147
163
|
// CSS (required!)
|
|
148
|
-
import
|
|
164
|
+
import "iris-gantt/gantt.css";
|
|
149
165
|
```
|
|
150
166
|
|
|
151
167
|
## 🔧 Basic Configuration
|
|
@@ -155,12 +171,68 @@ import 'iris-gantt/gantt.css'
|
|
|
155
171
|
tasks={tasks}
|
|
156
172
|
links={links}
|
|
157
173
|
config={{
|
|
158
|
-
theme:
|
|
174
|
+
theme: "light",
|
|
159
175
|
weekends: true,
|
|
160
|
-
containerHeight:
|
|
161
|
-
containerMinHeight:
|
|
176
|
+
containerHeight: "100%",
|
|
177
|
+
containerMinHeight: "400px",
|
|
178
|
+
}}
|
|
179
|
+
onTaskUpdate={(task) => console.log("Updated:", task)}
|
|
180
|
+
/>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
## 📍 Vertical Marker Lines
|
|
184
|
+
|
|
185
|
+
The Gantt chart supports vertical indicator lines for the current date (Today) and the project start date. Both are enabled by default and come with customizable markers and labels.
|
|
186
|
+
|
|
187
|
+
```tsx
|
|
188
|
+
<Gantt
|
|
189
|
+
tasks={tasks}
|
|
190
|
+
config={{
|
|
191
|
+
// Today Line
|
|
192
|
+
showTodayLine: true,
|
|
193
|
+
todayLineColor: "#ff4d4f",
|
|
194
|
+
todayLineLabel: "Today",
|
|
195
|
+
todayLineStyle: "solid", // 'solid' | 'dashed' | 'dotted'
|
|
196
|
+
todayLineWidth: 1,
|
|
197
|
+
todayLineOpacity: 1,
|
|
198
|
+
showTodayLineMarker: true, // Triangle marker at the top
|
|
199
|
+
todayLineMarkerStyle: "triangle", // 'triangle' | 'arrow' | 'dot'
|
|
200
|
+
|
|
201
|
+
// Project Start Line
|
|
202
|
+
showProjectStartLine: true,
|
|
203
|
+
projectStartDate: new Date(2024, 0, 1), // Optional: defaults to earliest task
|
|
204
|
+
projectStartLineColor: "#40a9ff",
|
|
205
|
+
projectStartLineLabel: "Kick-off",
|
|
206
|
+
projectStartLineStyle: "dashed",
|
|
207
|
+
showProjectStartLineMarker: true,
|
|
208
|
+
}}
|
|
209
|
+
/>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
## 🎨 Custom Icons
|
|
213
|
+
|
|
214
|
+
You can replace any UI icon by passing a React component or a string (for font-icon classes) to the `iconConfig` prop. This allows you to match your project's icon library (e.g., Ant Design, Lucide, FontAwesome).
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
<Gantt
|
|
218
|
+
tasks={tasks}
|
|
219
|
+
iconConfig={{
|
|
220
|
+
// Toolbar
|
|
221
|
+
addTask: <PlusCircleOutlined />, // React node
|
|
222
|
+
zoomIn: "fas fa-search-plus", // Font-icon string
|
|
223
|
+
zoomOut: "fas fa-search-minus",
|
|
224
|
+
exportPDF: <FilePdfOutlined />,
|
|
225
|
+
|
|
226
|
+
// Grid
|
|
227
|
+
gripVertical: <HolderOutlined />,
|
|
228
|
+
chevronRight: <RightOutlined />,
|
|
229
|
+
chevronDown: <DownOutlined />,
|
|
230
|
+
|
|
231
|
+
// Context Menu
|
|
232
|
+
edit: <EditOutlined />,
|
|
233
|
+
delete: <DeleteOutlined />,
|
|
234
|
+
copy: <CopyOutlined />,
|
|
162
235
|
}}
|
|
163
|
-
onTaskUpdate={(task) => console.log('Updated:', task)}
|
|
164
236
|
/>
|
|
165
237
|
```
|
|
166
238
|
|
|
@@ -178,17 +250,18 @@ All task hover fields are configurable via props and can be mapped from API valu
|
|
|
178
250
|
showStatus: true,
|
|
179
251
|
showDependencyRule: true,
|
|
180
252
|
showProgress: true,
|
|
181
|
-
plannedLabel:
|
|
182
|
-
actualLabel:
|
|
183
|
-
statusLabel:
|
|
184
|
-
dependencyRuleLabel:
|
|
185
|
-
progressLabel:
|
|
186
|
-
ownerLabel:
|
|
187
|
-
dateFormat:
|
|
253
|
+
plannedLabel: "Planned start/end",
|
|
254
|
+
actualLabel: "Actual start/end",
|
|
255
|
+
statusLabel: "Current status",
|
|
256
|
+
dependencyRuleLabel: "Dependency rule",
|
|
257
|
+
progressLabel: "Progress",
|
|
258
|
+
ownerLabel: "Owner",
|
|
259
|
+
dateFormat: "MMM D, YYYY",
|
|
188
260
|
taskNameAccessor: (task) => task.text,
|
|
189
261
|
statusAccessor: (task) => task.status,
|
|
190
262
|
progressAccessor: (task) => task.progress,
|
|
191
|
-
dependencyRuleAccessor: (task, generatedRules) =>
|
|
263
|
+
dependencyRuleAccessor: (task, generatedRules) =>
|
|
264
|
+
task.dependencyRule || generatedRules,
|
|
192
265
|
}}
|
|
193
266
|
/>
|
|
194
267
|
```
|
|
@@ -202,9 +275,9 @@ Each task can override the global `taskTooltipConfig` with its own `tooltipConfi
|
|
|
202
275
|
tasks={[
|
|
203
276
|
{
|
|
204
277
|
id: 1,
|
|
205
|
-
text:
|
|
206
|
-
start:
|
|
207
|
-
end:
|
|
278
|
+
text: "Task with custom tooltip",
|
|
279
|
+
start: "2026-01-01",
|
|
280
|
+
end: "2026-01-10",
|
|
208
281
|
duration: 9,
|
|
209
282
|
progress: 50,
|
|
210
283
|
tooltipConfig: {
|
|
@@ -212,7 +285,8 @@ Each task can override the global `taskTooltipConfig` with its own `tooltipConfi
|
|
|
212
285
|
showDependencyRule: false,
|
|
213
286
|
showProgress: true,
|
|
214
287
|
showActualDates: true,
|
|
215
|
-
plannedStartAccessor: (task) =>
|
|
288
|
+
plannedStartAccessor: (task) =>
|
|
289
|
+
customDataMap.get(task.id)?.plannedStart,
|
|
216
290
|
plannedEndAccessor: (task) => customDataMap.get(task.id)?.plannedEnd,
|
|
217
291
|
actualStartAccessor: (task) => customDataMap.get(task.id)?.actualStart,
|
|
218
292
|
actualEndAccessor: (task) => customDataMap.get(task.id)?.actualEnd,
|
|
@@ -220,9 +294,9 @@ Each task can override the global `taskTooltipConfig` with its own `tooltipConfi
|
|
|
220
294
|
},
|
|
221
295
|
{
|
|
222
296
|
id: 2,
|
|
223
|
-
text:
|
|
224
|
-
start:
|
|
225
|
-
end:
|
|
297
|
+
text: "Task using global tooltip config",
|
|
298
|
+
start: "2026-01-05",
|
|
299
|
+
end: "2026-01-15",
|
|
226
300
|
duration: 10,
|
|
227
301
|
progress: 30,
|
|
228
302
|
// No tooltipConfig — uses global taskTooltipConfig
|
|
@@ -233,6 +307,7 @@ Each task can override the global `taskTooltipConfig` with its own `tooltipConfi
|
|
|
233
307
|
```
|
|
234
308
|
|
|
235
309
|
API-friendly task aliases accepted in `tasks`:
|
|
310
|
+
|
|
236
311
|
- Name: `text`, `name`, `title`, `taskName`, `task_name`, `workGroupName`
|
|
237
312
|
- Drag/resize handles: `ShowHandle` (boolean), `showHandle` (boolean)
|
|
238
313
|
- OnHold periods: `onHoldPeriods`, `on_hold_periods`, `onHold`, `on_hold`, `onhold`
|
|
@@ -248,11 +323,13 @@ API-friendly task aliases accepted in `tasks`:
|
|
|
248
323
|
## ⏸️ OnHold In `tasks` Props
|
|
249
324
|
|
|
250
325
|
You can pass paused periods directly inside each task using either:
|
|
326
|
+
|
|
251
327
|
- `onHoldPeriods` (camelCase)
|
|
252
328
|
- `on_hold_periods` (snake_case API style)
|
|
253
329
|
- `onHold`, `on_hold`, `onhold` (additional API aliases)
|
|
254
330
|
|
|
255
331
|
Each alias accepts either:
|
|
332
|
+
|
|
256
333
|
- An array of periods: `[{ start, end }, ...]`
|
|
257
334
|
- A single period object: `{ start, end }`
|
|
258
335
|
|
|
@@ -263,14 +340,14 @@ Date values can be `Date`, ISO date string, or timestamp number.
|
|
|
263
340
|
tasks={[
|
|
264
341
|
{
|
|
265
342
|
id: 1,
|
|
266
|
-
text:
|
|
267
|
-
start:
|
|
268
|
-
end:
|
|
343
|
+
text: "Development",
|
|
344
|
+
start: "2026-02-01",
|
|
345
|
+
end: "2026-02-20",
|
|
269
346
|
duration: 19,
|
|
270
347
|
progress: 45,
|
|
271
348
|
on_hold_periods: [
|
|
272
|
-
{ start:
|
|
273
|
-
{ start:
|
|
349
|
+
{ start: "2026-02-06", end: "2026-02-09" },
|
|
350
|
+
{ start: "2026-02-12", end: "2026-02-13" },
|
|
274
351
|
],
|
|
275
352
|
},
|
|
276
353
|
]}
|
|
@@ -286,16 +363,16 @@ Date values can be `Date`, ISO date string, or timestamp number.
|
|
|
286
363
|
tasks={tasks}
|
|
287
364
|
uiConfig={{
|
|
288
365
|
// Header
|
|
289
|
-
headerTitle:
|
|
366
|
+
headerTitle: "My Project Gantt",
|
|
290
367
|
showHeader: true,
|
|
291
|
-
|
|
368
|
+
|
|
292
369
|
// Toolbar Buttons
|
|
293
370
|
showAddTaskButton: true,
|
|
294
371
|
showZoomButtons: true,
|
|
295
372
|
showExportButtons: true,
|
|
296
373
|
showFilterSearch: true,
|
|
297
|
-
addTaskButtonText:
|
|
298
|
-
|
|
374
|
+
addTaskButtonText: "Add New Task",
|
|
375
|
+
|
|
299
376
|
// All labels, placeholders, tooltips are configurable
|
|
300
377
|
// See USAGE.md for complete list
|
|
301
378
|
}}
|
|
@@ -309,17 +386,17 @@ Date values can be `Date`, ISO date string, or timestamp number.
|
|
|
309
386
|
tasks={tasks}
|
|
310
387
|
styleConfig={{
|
|
311
388
|
// Colors - Match your brand
|
|
312
|
-
primary:
|
|
313
|
-
success:
|
|
314
|
-
warning:
|
|
315
|
-
danger:
|
|
316
|
-
background:
|
|
317
|
-
fontColor:
|
|
318
|
-
|
|
389
|
+
primary: "#37a9ef",
|
|
390
|
+
success: "#77d257",
|
|
391
|
+
warning: "#fcba2e",
|
|
392
|
+
danger: "#fe6158",
|
|
393
|
+
background: "#ffffff",
|
|
394
|
+
fontColor: "#333333",
|
|
395
|
+
|
|
319
396
|
// Fonts - Use your project fonts
|
|
320
|
-
fontFamily:
|
|
321
|
-
fontSize:
|
|
322
|
-
|
|
397
|
+
fontFamily: "Inter, sans-serif",
|
|
398
|
+
fontSize: "14px",
|
|
399
|
+
|
|
323
400
|
// See USAGE.md for complete list
|
|
324
401
|
}}
|
|
325
402
|
/>
|
|
@@ -332,11 +409,11 @@ Date values can be `Date`, ISO date string, or timestamp number.
|
|
|
332
409
|
tasks={tasks}
|
|
333
410
|
config={{
|
|
334
411
|
// Responsive container
|
|
335
|
-
containerHeight:
|
|
336
|
-
containerMinHeight:
|
|
337
|
-
|
|
412
|
+
containerHeight: "100%",
|
|
413
|
+
containerMinHeight: "400px",
|
|
414
|
+
|
|
338
415
|
// Responsive grid width
|
|
339
|
-
gridWidth:
|
|
416
|
+
gridWidth: "clamp(280px, 30vw, 720px)", // Adapts to viewport
|
|
340
417
|
}}
|
|
341
418
|
/>
|
|
342
419
|
```
|
|
@@ -350,10 +427,10 @@ Date values can be `Date`, ISO date string, or timestamp number.
|
|
|
350
427
|
--wx-gantt-primary: #your-brand-color;
|
|
351
428
|
--wx-gantt-background: var(--your-bg-color);
|
|
352
429
|
--wx-gantt-font-color: var(--your-text-color);
|
|
353
|
-
|
|
430
|
+
|
|
354
431
|
/* Use your project fonts */
|
|
355
|
-
--wx-gantt-font-family:
|
|
356
|
-
|
|
432
|
+
--wx-gantt-font-family: "Your Font", sans-serif;
|
|
433
|
+
|
|
357
434
|
/* Responsive sizing */
|
|
358
435
|
--gantt-grid-width: clamp(280px, 30vw, 720px);
|
|
359
436
|
}
|
|
@@ -362,6 +439,7 @@ Date values can be `Date`, ISO date string, or timestamp number.
|
|
|
362
439
|
## 📱 Responsive
|
|
363
440
|
|
|
364
441
|
The component is fully responsive and adapts to:
|
|
442
|
+
|
|
365
443
|
- ✅ Desktop (1024px+)
|
|
366
444
|
- ✅ Tablet (768px - 1024px)
|
|
367
445
|
- ✅ Mobile Landscape (480px - 768px)
|
|
@@ -394,12 +472,12 @@ A single callback for **all** drag operations: task bar move/resize AND row reor
|
|
|
394
472
|
// task.rawId preserves the original API ID (before string normalization)
|
|
395
473
|
const taskId = task.rawId ?? task.id;
|
|
396
474
|
|
|
397
|
-
if (dragType ===
|
|
475
|
+
if (dragType === "reorder" && reorderMeta) {
|
|
398
476
|
// Row reorder — task was dragged to a new position via grip icon
|
|
399
477
|
await api.reorderTask(taskId, {
|
|
400
478
|
current_sequence_id: reorderMeta.currentSequenceId,
|
|
401
479
|
target_sequence_id: reorderMeta.targetSequenceId,
|
|
402
|
-
target_stage_id: reorderMeta.targetStageId,
|
|
480
|
+
target_stage_id: reorderMeta.targetStageId, // parent task ID or null for root
|
|
403
481
|
});
|
|
404
482
|
} else {
|
|
405
483
|
// Task bar drag — move or resize on the timeline
|
|
@@ -419,12 +497,12 @@ A single callback for **all** drag operations: task bar move/resize AND row reor
|
|
|
419
497
|
|
|
420
498
|
**`TaskDragUpdatePayload` fields:**
|
|
421
499
|
|
|
422
|
-
| Field
|
|
423
|
-
|
|
424
|
-
| `task`
|
|
425
|
-
| `previousTask` | `Task`
|
|
426
|
-
| `dragType`
|
|
427
|
-
| `reorderMeta`
|
|
500
|
+
| Field | Type | Description |
|
|
501
|
+
| -------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
502
|
+
| `task` | `Task` | The updated task (after drag/reorder) |
|
|
503
|
+
| `previousTask` | `Task` | The task state before the operation |
|
|
504
|
+
| `dragType` | `'move' \| 'resize-left' \| 'resize-right' \| 'reorder'` | What kind of drag was performed |
|
|
505
|
+
| `reorderMeta` | `TaskReorderMeta \| undefined` | Only present for `'reorder'` — contains `currentSequenceId`, `targetSequenceId`, `targetStageId` |
|
|
428
506
|
|
|
429
507
|
### Other Event Handlers
|
|
430
508
|
|
|
@@ -456,10 +534,11 @@ A single callback for **all** drag operations: task bar move/resize AND row reor
|
|
|
456
534
|
If you get: `Module not found: Error: Package path ./dist/gantt.css is not exported`
|
|
457
535
|
|
|
458
536
|
**Solution:**
|
|
537
|
+
|
|
459
538
|
```tsx
|
|
460
|
-
import
|
|
539
|
+
import "iris-gantt/gantt.css";
|
|
461
540
|
// or
|
|
462
|
-
import
|
|
541
|
+
import "iris-gantt/dist/gantt.css";
|
|
463
542
|
```
|
|
464
543
|
|
|
465
544
|
### Default Import Error
|
|
@@ -467,9 +546,10 @@ import 'iris-gantt/dist/gantt.css'
|
|
|
467
546
|
If you get: `export 'default' was not found`
|
|
468
547
|
|
|
469
548
|
**Solution:**
|
|
549
|
+
|
|
470
550
|
```tsx
|
|
471
551
|
// Use named import instead
|
|
472
|
-
import { Gantt } from
|
|
552
|
+
import { Gantt } from "iris-gantt";
|
|
473
553
|
```
|
|
474
554
|
|
|
475
555
|
### Runtime Error: recentlyCreatedOwnerStacks
|
|
@@ -477,6 +557,7 @@ import { Gantt } from 'iris-gantt'
|
|
|
477
557
|
This is a **cached code issue** in your project, not the package.
|
|
478
558
|
|
|
479
559
|
**Solution:**
|
|
560
|
+
|
|
480
561
|
```bash
|
|
481
562
|
# In your project directory
|
|
482
563
|
rm -rf node_modules package-lock.json .next .cache dist build
|
|
@@ -488,69 +569,69 @@ npm start
|
|
|
488
569
|
## 📖 Complete Example
|
|
489
570
|
|
|
490
571
|
```tsx
|
|
491
|
-
import React, { useState } from
|
|
492
|
-
import { Gantt } from
|
|
493
|
-
import
|
|
494
|
-
import type { Task, Link } from
|
|
572
|
+
import React, { useState } from "react";
|
|
573
|
+
import { Gantt } from "iris-gantt";
|
|
574
|
+
import "iris-gantt/gantt.css";
|
|
575
|
+
import type { Task, Link } from "iris-gantt";
|
|
495
576
|
|
|
496
577
|
function ProjectGantt() {
|
|
497
578
|
const [tasks, setTasks] = useState<Task[]>([
|
|
498
579
|
{
|
|
499
|
-
id:
|
|
500
|
-
text:
|
|
580
|
+
id: "1",
|
|
581
|
+
text: "Project Planning",
|
|
501
582
|
start: new Date(2024, 0, 1),
|
|
502
583
|
end: new Date(2024, 0, 15),
|
|
503
584
|
duration: 14,
|
|
504
585
|
progress: 100,
|
|
505
|
-
type:
|
|
586
|
+
type: "project",
|
|
506
587
|
},
|
|
507
|
-
])
|
|
588
|
+
]);
|
|
508
589
|
|
|
509
590
|
const [links, setLinks] = useState<Link[]>([
|
|
510
|
-
{ id:
|
|
511
|
-
])
|
|
591
|
+
{ id: "l1", source: "1", target: "2", type: "e2s" },
|
|
592
|
+
]);
|
|
512
593
|
|
|
513
594
|
return (
|
|
514
|
-
<div style={{ width:
|
|
595
|
+
<div style={{ width: "100%", height: "100vh" }}>
|
|
515
596
|
<Gantt
|
|
516
597
|
tasks={tasks}
|
|
517
598
|
links={links}
|
|
518
599
|
config={{
|
|
519
|
-
theme:
|
|
600
|
+
theme: "light",
|
|
520
601
|
weekends: true,
|
|
521
|
-
containerHeight:
|
|
522
|
-
containerMinHeight:
|
|
523
|
-
gridWidth:
|
|
602
|
+
containerHeight: "100%",
|
|
603
|
+
containerMinHeight: "500px",
|
|
604
|
+
gridWidth: "clamp(300px, 35vw, 800px)",
|
|
524
605
|
}}
|
|
525
606
|
uiConfig={{
|
|
526
|
-
headerTitle:
|
|
527
|
-
addTaskButtonText:
|
|
607
|
+
headerTitle: "My Project Timeline",
|
|
608
|
+
addTaskButtonText: "New Task",
|
|
528
609
|
}}
|
|
529
610
|
styleConfig={{
|
|
530
|
-
primary:
|
|
531
|
-
fontFamily:
|
|
611
|
+
primary: "#6366f1",
|
|
612
|
+
fontFamily: "Inter, sans-serif",
|
|
532
613
|
}}
|
|
533
614
|
onTaskUpdate={(task) => {
|
|
534
|
-
setTasks(tasks.map(t => t.id === task.id ? task : t))
|
|
615
|
+
setTasks(tasks.map((t) => (t.id === task.id ? task : t)));
|
|
535
616
|
}}
|
|
536
617
|
onTaskCreate={(task) => {
|
|
537
|
-
setTasks([...tasks, task])
|
|
618
|
+
setTasks([...tasks, task]);
|
|
538
619
|
}}
|
|
539
620
|
onTaskDelete={(taskId) => {
|
|
540
|
-
setTasks(tasks.filter(t => t.id !== taskId))
|
|
621
|
+
setTasks(tasks.filter((t) => t.id !== taskId));
|
|
541
622
|
}}
|
|
542
623
|
onLinkCreate={(link) => {
|
|
543
|
-
setLinks([...links, link])
|
|
624
|
+
setLinks([...links, link]);
|
|
544
625
|
}}
|
|
545
626
|
onLinkDelete={(linkId) => {
|
|
546
|
-
setLinks(links.filter(l => l.id !== linkId))
|
|
627
|
+
setLinks(links.filter((l) => l.id !== linkId));
|
|
547
628
|
}}
|
|
548
629
|
/>
|
|
549
630
|
</div>
|
|
550
|
-
)
|
|
631
|
+
);
|
|
551
632
|
}
|
|
552
633
|
|
|
553
|
-
export default ProjectGantt
|
|
634
|
+
export default ProjectGantt;
|
|
554
635
|
```
|
|
555
636
|
|
|
556
637
|
## 📝 TypeScript Support
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Gantt.d.ts","sourceRoot":"","sources":["../../src/components/Gantt/Gantt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAE,WAAW,EAA4B,QAAQ,EAAiB,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQhJ,OAAO,KAAK,EAEV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,eAAe,EACf,iBAAiB,EAEjB,iBAAiB,EACjB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AACjB,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;IACjD,OAAO,CAAC,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;IAClD,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACnE,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAGxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CACnC;AA0YD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"Gantt.d.ts","sourceRoot":"","sources":["../../src/components/Gantt/Gantt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAE,WAAW,EAA4B,QAAQ,EAAiB,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQhJ,OAAO,KAAK,EAEV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,eAAe,EACf,iBAAiB,EAEjB,iBAAiB,EACjB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AACjB,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;IACjD,OAAO,CAAC,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;IAClD,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACnE,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAGxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CACnC;AA0YD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8xBtC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/components/Gantt/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAM/G,UAAU,aAAa;IACrB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE;QAAE,KAAK,EAAE,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,CAAA;KAAE,CAAC;IAClC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvF,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/components/Gantt/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAM/G,UAAU,aAAa;IACrB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE;QAAE,KAAK,EAAE,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,CAAA;KAAE,CAAC;IAClC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvF,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,sFAotBpB,CAAC"}
|