iris-gantt 1.4.10 → 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 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.4.10 (Latest)
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 | Maps to |
14
- |---|---|
15
- | `workGroupName` | Task display name |
17
+ | New alias | Maps to |
18
+ | ------------------ | ------------------- |
19
+ | `workGroupName` | Task display name |
16
20
  | `plannedStartDate` | Task bar start date |
17
- | `plannedEndDate` | Task bar end date |
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 'iris-gantt'
97
- import 'iris-gantt/gantt.css'
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: '1',
103
- text: 'Project Planning',
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: 'project',
118
+ type: "project",
109
119
  },
110
120
  {
111
- id: '2',
112
- text: 'Development',
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 'iris-gantt'
146
+ import { Gantt } from "iris-gantt";
137
147
 
138
148
  // Main component (default import - also works)
139
- import Gantt from 'iris-gantt'
149
+ import Gantt from "iris-gantt";
140
150
 
141
151
  // Types
142
152
  import type {
143
- Task, Link, GanttConfig, GanttUIConfig, GanttStyleConfig,
144
- TaskTooltipConfig, TaskDragUpdatePayload, TaskReorderMeta,
145
- } from 'iris-gantt'
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 'iris-gantt/gantt.css'
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: 'light',
174
+ theme: "light",
159
175
  weekends: true,
160
- containerHeight: '100%',
161
- containerMinHeight: '400px',
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: 'Planned start/end',
182
- actualLabel: 'Actual start/end',
183
- statusLabel: 'Current status',
184
- dependencyRuleLabel: 'Dependency rule',
185
- progressLabel: 'Progress',
186
- ownerLabel: 'Owner',
187
- dateFormat: 'MMM D, YYYY',
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) => task.dependencyRule || 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: 'Task with custom tooltip',
206
- start: '2026-01-01',
207
- end: '2026-01-10',
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) => customDataMap.get(task.id)?.plannedStart,
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: 'Task using global tooltip config',
224
- start: '2026-01-05',
225
- end: '2026-01-15',
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: 'Development',
267
- start: '2026-02-01',
268
- end: '2026-02-20',
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: '2026-02-06', end: '2026-02-09' },
273
- { start: '2026-02-12', end: '2026-02-13' },
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: 'My Project Gantt',
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: 'Add New Task',
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: '#37a9ef',
313
- success: '#77d257',
314
- warning: '#fcba2e',
315
- danger: '#fe6158',
316
- background: '#ffffff',
317
- fontColor: '#333333',
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: 'Inter, sans-serif',
321
- fontSize: '14px',
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: '100%',
336
- containerMinHeight: '400px',
337
-
412
+ containerHeight: "100%",
413
+ containerMinHeight: "400px",
414
+
338
415
  // Responsive grid width
339
- gridWidth: 'clamp(280px, 30vw, 720px)', // Adapts to viewport
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: 'Your Font', sans-serif;
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 === 'reorder' && reorderMeta) {
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, // parent task ID or null for root
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 | Type | Description |
423
- |-------|------|-------------|
424
- | `task` | `Task` | The updated task (after drag/reorder) |
425
- | `previousTask` | `Task` | The task state before the operation |
426
- | `dragType` | `'move' \| 'resize-left' \| 'resize-right' \| 'reorder'` | What kind of drag was performed |
427
- | `reorderMeta` | `TaskReorderMeta \| undefined` | Only present for `'reorder'` — contains `currentSequenceId`, `targetSequenceId`, `targetStageId` |
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 'iris-gantt/gantt.css'
539
+ import "iris-gantt/gantt.css";
461
540
  // or
462
- import 'iris-gantt/dist/gantt.css'
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 'iris-gantt'
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 'react'
492
- import { Gantt } from 'iris-gantt'
493
- import 'iris-gantt/gantt.css'
494
- import type { Task, Link } from 'iris-gantt'
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: '1',
500
- text: 'Project Planning',
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: 'project',
586
+ type: "project",
506
587
  },
507
- ])
588
+ ]);
508
589
 
509
590
  const [links, setLinks] = useState<Link[]>([
510
- { id: 'l1', source: '1', target: '2', type: 'e2s' },
511
- ])
591
+ { id: "l1", source: "1", target: "2", type: "e2s" },
592
+ ]);
512
593
 
513
594
  return (
514
- <div style={{ width: '100%', height: '100vh' }}>
595
+ <div style={{ width: "100%", height: "100vh" }}>
515
596
  <Gantt
516
597
  tasks={tasks}
517
598
  links={links}
518
599
  config={{
519
- theme: 'light',
600
+ theme: "light",
520
601
  weekends: true,
521
- containerHeight: '100%',
522
- containerMinHeight: '500px',
523
- gridWidth: 'clamp(300px, 35vw, 800px)',
602
+ containerHeight: "100%",
603
+ containerMinHeight: "500px",
604
+ gridWidth: "clamp(300px, 35vw, 800px)",
524
605
  }}
525
606
  uiConfig={{
526
- headerTitle: 'My Project Timeline',
527
- addTaskButtonText: 'New Task',
607
+ headerTitle: "My Project Timeline",
608
+ addTaskButtonText: "New Task",
528
609
  }}
529
610
  styleConfig={{
530
- primary: '#6366f1',
531
- fontFamily: 'Inter, sans-serif',
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,CA0xBtC,CAAC"}
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":"TaskBar.d.ts","sourceRoot":"","sources":["../../src/components/Gantt/TaskBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAe,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI9E,UAAU,YAAY;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,KAAK,IAAI,CAAC;IACvG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,GAAG,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0BAA0B,CAAC,EAAE,MAAM,EAAE,CAAC;IACtC,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0U1C,CAAC"}
1
+ {"version":3,"file":"TaskBar.d.ts","sourceRoot":"","sources":["../../src/components/Gantt/TaskBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAe,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI9E,UAAU,YAAY;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,KAAK,IAAI,CAAC;IACvG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,GAAG,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0BAA0B,CAAC,EAAE,MAAM,EAAE,CAAC;IACtC,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4U1C,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,sFAktBpB,CAAC"}
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"}
@@ -39,6 +39,7 @@ export interface Task {
39
39
  sequence_id?: number;
40
40
  stage_id?: string | null;
41
41
  tooltipConfig?: Partial<TaskTooltipConfig>;
42
+ hideBar?: boolean;
42
43
  }
43
44
  export interface TaskSegment {
44
45
  start: Date;