@jaeungkim/gantt-chart 0.2.3 β 0.2.4
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 +101 -118
- package/dist/index.cjs.js +14 -11
- package/dist/index.css +126 -1
- package/dist/index.es.js +2844 -1508
- package/dist/readmeImg.png +0 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# @jaeungkim/gantt-chart
|
|
2
2
|
|
|
3
|
-
<!--  -->
|
|
4
4
|
|
|
5
5
|
Lightweight, high-performance Gantt chart component for React applications, for fast rendering and state management. It is designed to be highly customizable and easy to integrate into modern React projects.
|
|
6
6
|
|
|
7
|
-
π― Motivation
|
|
7
|
+
## π― Motivation
|
|
8
8
|
|
|
9
9
|
I originally wanted to use Microsoft Project's Gantt Chart for personal project management, but it required subscription π. Thus, I decided to build my own Gantt chart, referencing various open-source projects and examples, including MS Project, DHTMLX, Frappe Gantt Chart, and etc.
|
|
10
10
|
|
|
@@ -12,161 +12,144 @@ Since there arenβt many open-source Gantt chart solutions available, I hope th
|
|
|
12
12
|
|
|
13
13
|
Currently, this project is built specifically for React due to my development background, but in the future, I may explore making it available for other frameworks as well. Since this is my first open-source project, I look forward to learning and improving it with the community!
|
|
14
14
|
|
|
15
|
-
##
|
|
16
|
-
- π **Lightweight & Fast** β Optimized with Vite for lightning-fast performance.
|
|
17
|
-
- π **Modern State Management** β Uses Zustand for efficient and minimal state handling.
|
|
18
|
-
- π **Drag & Drop Support** β Easily move and resize tasks.
|
|
19
|
-
<!-- - π¨ **Customizable Themes** β Style your Gantt chart with Tailwind CSS or custom styles. -->
|
|
20
|
-
- π **Dependencies Between Tasks** β Visualize relationships between tasks.
|
|
21
|
-
- π **Zoom & Pan** β Navigate large project timelines with ease.
|
|
22
|
-
<!-- - π§ **API & Data Fetching** β Optional integration with React Query for backend connectivity. -->
|
|
23
|
-
<!-- - π **Internationalization (i18n)** β Multi-language support for global usage. -->
|
|
15
|
+
## β¨ Features
|
|
24
16
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
- π Supports multiple timeline scales: Day, Week, Month, Year
|
|
18
|
+
- π Drag-and-drop resizing (snap to configured intervals)
|
|
19
|
+
- 𧲠Smart dependency lines (Finish-Start, Start-Start, Start-Finish, Finish-Finish)
|
|
20
|
+
- π¦ Lightweight and framework-agnostic component design
|
|
28
21
|
|
|
29
|
-
|
|
22
|
+
## πΊ [Demo is worth a thousand words](https://jaeungkim.com/gantt-chart)
|
|
30
23
|
|
|
31
|
-
|
|
32
|
-
npm install @jaeungkim/gantt-chart
|
|
33
|
-
```
|
|
24
|
+
## π Getting Started
|
|
34
25
|
|
|
35
|
-
|
|
26
|
+
### Installation
|
|
36
27
|
|
|
37
|
-
```
|
|
28
|
+
```bash
|
|
29
|
+
npm install @jaeungkim/gantt-chart
|
|
30
|
+
# or
|
|
38
31
|
yarn add @jaeungkim/gantt-chart
|
|
39
32
|
```
|
|
40
33
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
34
|
+
```ts
|
|
35
|
+
import { Gantt } from '@jaeungkim/gantt-chart';
|
|
36
|
+
import type { Task } from '@jaeungkim/gantt-chart';
|
|
37
|
+
|
|
38
|
+
export type DependencyType = 'FS' | 'SS' | 'FF' | 'SF';
|
|
39
|
+
|
|
40
|
+
const ReactGanttChart: Task[] = [
|
|
41
|
+
{
|
|
42
|
+
id: '1',
|
|
43
|
+
name: 'Project Kickoff',
|
|
44
|
+
startDate: '2024-06-01T09:00:00Z',
|
|
45
|
+
endDate: '2024-06-01T11:00:00Z',
|
|
46
|
+
parentId: null,
|
|
47
|
+
sequence: '1',
|
|
48
|
+
dependencies: [{ targetId: '1', type: 'FS' }],
|
|
49
|
+
},
|
|
50
|
+
...
|
|
54
51
|
];
|
|
55
52
|
|
|
56
|
-
export default function
|
|
53
|
+
export default function Example() {
|
|
57
54
|
return (
|
|
58
|
-
<div style={{ width:
|
|
59
|
-
<
|
|
55
|
+
<div style={{ width: 'auto', height: '100dvh' }}>
|
|
56
|
+
<ReactGanttChart
|
|
57
|
+
tasks={tasks}
|
|
58
|
+
ganttHeight="100%"
|
|
59
|
+
columnWidth="100%"
|
|
60
|
+
onTasksChange={(updated) => console.log(updated)}
|
|
61
|
+
/>
|
|
60
62
|
</div>
|
|
61
63
|
);
|
|
62
64
|
}
|
|
63
65
|
```
|
|
64
66
|
|
|
65
|
-
|
|
67
|
+
### Props
|
|
66
68
|
|
|
67
|
-
|
|
69
|
+
| Prop | Type | Description |
|
|
70
|
+
| --------------- | -------------------------------- | ---------------------------------------------- |
|
|
71
|
+
| `tasks` | `Task[]` | Array of task objects to render |
|
|
72
|
+
| `onTasksChange` | `(updatedTasks: Task[]) => void` | Callback fired when a task is moved or resized |
|
|
73
|
+
| `ganttHeight` | `number \| string` | Height of the chart (`number` or `string`) |
|
|
74
|
+
| `columnWidth` | `number \| string` | Width of the chart (`number` or `string`) |
|
|
68
75
|
|
|
69
|
-
###
|
|
76
|
+
### Task Format
|
|
70
77
|
|
|
71
|
-
|
|
78
|
+
All dates must be in **UTC ISO string format**, like: `"2024-06-01T09:00:00Z"`.
|
|
79
|
+
Internally, dates are parsed and converted to local time using `dayjs`.
|
|
72
80
|
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
|
|
81
|
+
```ts
|
|
82
|
+
interface Task {
|
|
83
|
+
id: string;
|
|
84
|
+
name: string;
|
|
85
|
+
startDate: string; // UTC ISO string
|
|
86
|
+
endDate: string; // UTC ISO string
|
|
87
|
+
parentId: string | null;
|
|
88
|
+
sequence: string;
|
|
89
|
+
dependencies?: TaskDependency[];
|
|
76
90
|
}
|
|
77
|
-
```
|
|
78
91
|
|
|
79
|
-
|
|
92
|
+
export type DependencyType = 'FS' | 'SS' | 'FF' | 'SF';
|
|
80
93
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
tasks={tasks}
|
|
86
|
-
taskRenderer={(task) => (
|
|
87
|
-
<div style={{ background: task.progress > 50 ? "#4caf50" : "#ff9800" }}>
|
|
88
|
-
{task.name}
|
|
89
|
-
</div>
|
|
90
|
-
)}
|
|
91
|
-
/>
|
|
94
|
+
interface TaskDependency {
|
|
95
|
+
targetId: string;
|
|
96
|
+
type: DependencyType;
|
|
97
|
+
}
|
|
92
98
|
```
|
|
93
99
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
## π‘ API & Props
|
|
97
|
-
|
|
98
|
-
| Prop | Type | Description |
|
|
99
|
-
|-------------|-----------|--------------------------------------|
|
|
100
|
-
| `tasks` | `Task[]` | Array of tasks for the Gantt chart |
|
|
101
|
-
| `onTaskClick` | `function` | Callback when a task is clicked |
|
|
102
|
-
| `zoomLevel` | `number` | Adjust the zoom level (1-5) |
|
|
103
|
-
| `taskRenderer` | `function` | Custom render function for tasks |
|
|
104
|
-
|
|
105
|
-
### **Task Object Structure**
|
|
100
|
+
## Timeline Scales
|
|
106
101
|
|
|
107
|
-
|
|
108
|
-
interface Task {
|
|
109
|
-
id: number;
|
|
110
|
-
name: string;
|
|
111
|
-
start: string;
|
|
112
|
-
end: string;
|
|
113
|
-
progress: number;
|
|
114
|
-
dependencies?: number[];
|
|
115
|
-
}
|
|
116
|
-
```
|
|
102
|
+
The chart supports four built-in scales:
|
|
117
103
|
|
|
118
|
-
|
|
104
|
+
- **`day`**
|
|
105
|
+
- Label: Day
|
|
106
|
+
- Tick Unit: Hour
|
|
107
|
+
- Drag Step: 15 minutes
|
|
119
108
|
|
|
120
|
-
|
|
121
|
-
-
|
|
122
|
-
-
|
|
123
|
-
-
|
|
109
|
+
- **`week`**
|
|
110
|
+
- Label: Week
|
|
111
|
+
- Tick Unit: Day
|
|
112
|
+
- Drag Step: 6 hours
|
|
124
113
|
|
|
125
|
-
|
|
114
|
+
- **`month`**
|
|
115
|
+
- Label: Month
|
|
116
|
+
- Tick Unit: Day
|
|
117
|
+
- Drag Step: 1 day
|
|
126
118
|
|
|
127
|
-
|
|
128
|
-
|
|
119
|
+
- **`year`**
|
|
120
|
+
- Label: Year
|
|
121
|
+
- Tick Unit: 7 days
|
|
122
|
+
- Drag Step: 1 day
|
|
129
123
|
|
|
130
|
-
|
|
131
|
-
```sh
|
|
132
|
-
git clone https://github.com/your-username/@jaeungkim/gantt-chart.git
|
|
133
|
-
```
|
|
134
|
-
2. **Install dependencies:**
|
|
135
|
-
```sh
|
|
136
|
-
npm install
|
|
137
|
-
```
|
|
138
|
-
3. **Run the dev server:**
|
|
139
|
-
```sh
|
|
140
|
-
npm run dev
|
|
141
|
-
```
|
|
142
|
-
4. **Submit a pull request!** π
|
|
124
|
+
You can switch between them using the dropdown at the top-right of the chart.
|
|
143
125
|
|
|
144
|
-
|
|
126
|
+
## Customization
|
|
145
127
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
Use the `react-window` library for virtualization.
|
|
128
|
+
Currently at this stage it's not quite customizable other than importing your own tasks.
|
|
129
|
+
But in near future, I will definitely make it customizable with adding features like
|
|
149
130
|
|
|
150
|
-
|
|
151
|
-
|
|
131
|
+
- Timeline structure (`setupTimelineStructure`)
|
|
132
|
+
- Header display (`GanttChartHeader`)
|
|
133
|
+
- Bar visuals (`GanttBar`)
|
|
134
|
+
- Tick intervals, formats, and drag steps (`GANTT_SCALE_CONFIG`)
|
|
152
135
|
|
|
153
|
-
|
|
154
|
-
Yes, you can customize it with CSS or Tailwind.
|
|
136
|
+
Stay Tuned~
|
|
155
137
|
|
|
156
|
-
|
|
138
|
+
## Roadmap
|
|
157
139
|
|
|
158
|
-
|
|
159
|
-
|
|
140
|
+
- [ ] Left sidebar for displaying tasks' names
|
|
141
|
+
- [ ] Right sidebar for selected tasks' to view their information
|
|
142
|
+
- [ ] Collapsible parent-child rows
|
|
143
|
+
- [ ] Virtualized rows for large datasets
|
|
144
|
+
- [ ] Inline editing for task names
|
|
145
|
+
- [ ] Export to PNG or SVG
|
|
160
146
|
|
|
161
|
-
|
|
147
|
+
## π€ Contributing
|
|
162
148
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
- **Discussions** β Join the community and share ideas.
|
|
149
|
+
Pull requests are welcome!
|
|
150
|
+
If you find bugs or have suggestions, feel free to open an issue or contribute directly.
|
|
166
151
|
|
|
167
|
-
If you find this project useful, please β star the repo and contribute!
|
|
168
152
|
|
|
169
|
-
|
|
153
|
+
## π License
|
|
170
154
|
|
|
171
|
-
|
|
172
|
-
-->
|
|
155
|
+
MIT Β© [jaeungkim](https://github.com/jaeungkim)
|