apexgantt 1.0.1 → 1.1.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 +86 -85
- package/apexgantt.es.min.js +48013 -3
- package/apexgantt.min.js +11 -11
- package/demo/custom-colors.html +219 -0
- package/demo/milestones.html +322 -0
- package/demo/resource-management.html +364 -0
- package/index.d.ts +4 -0
- package/lib/gantt.d.ts +4 -3
- package/lib/models/Annotation.d.ts +4 -1
- package/lib/models/Options.d.ts +60 -17
- package/lib/styles/Tasks.style.d.ts +1 -1
- package/lib/styles/Timeline.style.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ npm install apexgantt
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
15
|
```js
|
|
16
|
-
import ApexGantt from
|
|
16
|
+
import ApexGantt from 'apexgantt';
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
To create a basic gantt with minimal configuration, write as follows:
|
|
@@ -23,73 +23,72 @@ To create a basic gantt with minimal configuration, write as follows:
|
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
```js
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
gantt.render();
|
|
26
|
+
const ganttOptions = {
|
|
27
|
+
series: [
|
|
28
|
+
{
|
|
29
|
+
id: 'a',
|
|
30
|
+
startTime: '10-11-2024',
|
|
31
|
+
endTime: '11-01-2024',
|
|
32
|
+
name: 'task 1',
|
|
33
|
+
progress: 65,
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
id: '5',
|
|
37
|
+
startTime: '10-11-2024',
|
|
38
|
+
endTime: '10-26-2024',
|
|
39
|
+
name: 'subtask 1.1',
|
|
40
|
+
parentId: 'a',
|
|
41
|
+
progress: 65,
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
};
|
|
45
|
+
const gantt = new ApexGantt(document.getElementById('gantt-container'), ganttOptions);
|
|
46
|
+
gantt.render();
|
|
48
47
|
```
|
|
49
48
|
|
|
50
|
-
|
|
51
49
|
## ApexGantt Options
|
|
52
50
|
|
|
53
51
|
The layout can be configured by either setting the properties in the table below by passing a second arg to ApexGantt with these properties set. The latter takes precedence.
|
|
54
52
|
|
|
55
|
-
| Options | Default | Description
|
|
56
|
-
|
|
|
57
|
-
| width | `800` | The width of graph container
|
|
58
|
-
| height | `800` | The height of graph container
|
|
59
|
-
| series, | `[]` | Data for gantt. See format below
|
|
60
|
-
| canvasStyle | `None` | The css styles for canvas root container
|
|
61
|
-
| viewMode | `ViewMode.Month` | View mode
|
|
62
|
-
| arrowColor | `#0D6EFD` | Color for the dependency arrows
|
|
63
|
-
| rowHeight | `28` | Height for timeline row
|
|
64
|
-
| rowBackgroundColors | `['#FFFFFF']` | Alternate row colors.
|
|
65
|
-
| barBackgroundColor | `#537CFA` | Background color for timeline bar
|
|
66
|
-
| barBorderRadius | `5px` | Border radius for timeline bar
|
|
67
|
-
| barMargin | `4` | Top and bottom margin for timeline bar
|
|
68
|
-
| barTextColor | `#FFFFFF` | Text color for timeline bar
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
53
|
+
| Options | Default | Description |
|
|
54
|
+
| ------------------------- | ----------------------------- | --------------------------------------------------- |
|
|
55
|
+
| width | `800` | The width of graph container |
|
|
56
|
+
| height | `800` | The height of graph container |
|
|
57
|
+
| series, | `[]` | Data for gantt. See format below |
|
|
58
|
+
| canvasStyle | `None` | The css styles for canvas root container |
|
|
59
|
+
| viewMode | `ViewMode.Month` | View mode |
|
|
60
|
+
| arrowColor | `#0D6EFD` | Color for the dependency arrows |
|
|
61
|
+
| rowHeight | `28` | Height for timeline row |
|
|
62
|
+
| rowBackgroundColors | `['#FFFFFF']` | Alternate row colors. |
|
|
63
|
+
| barBackgroundColor | `#537CFA` | Background color for timeline bar |
|
|
64
|
+
| barBorderRadius | `5px` | Border radius for timeline bar |
|
|
65
|
+
| barMargin | `4` | Top and bottom margin for timeline bar |
|
|
66
|
+
| barTextColor | `#FFFFFF` | Text color for timeline bar |
|
|
67
|
+
| cellBorderColor | `#eff0f0` | Border color for all table cells and timeline cells |
|
|
68
|
+
| cellBorderWidth | `1px` | Border width for all table cells and timeline cells |
|
|
69
|
+
| enableToolbar | `false` | Enable/disable graph toolbar |
|
|
70
|
+
| enableResize | `true` | Enable/disable gantt sidebar resize |
|
|
71
|
+
| enableExport | `true` | Enable/disable gantt export options |
|
|
72
|
+
| enableTaskDrag | `true` | Enable/disable gantt export options |
|
|
73
|
+
| enableTaskEdit | `false` | Enable/disable gantt export options |
|
|
74
|
+
| enableTaskResize | `true` | Enable/disable gantt export options |
|
|
75
|
+
| headerBackground | `#f3f3f3` | Background color for header |
|
|
76
|
+
| inputDateFormat | `MM-DD-YYYY` | Input date format |
|
|
77
|
+
| tasksContainerWidth | `440` | Task sidebar container width |
|
|
78
|
+
| tooltipId | `apexgantt-tooltip-container` | The tooltip HTML element id |
|
|
79
|
+
| tooltipTemplate | `tooltipTemplate` | The HTML template for tooltip |
|
|
80
|
+
| tooltipBorderColor | `#BCBCBC` | The border color of tooltip |
|
|
81
|
+
| tooltipBGColor | `#FFFFFF` | The background color of tooltip |
|
|
82
|
+
| fontSize | `14px` | The size of font of nodes |
|
|
83
|
+
| fontFamily | `None` | The font family of nodes |
|
|
84
|
+
| fontWeight | `400` | The font weight of nodes |
|
|
85
|
+
| fontColor | `#000000` | The font color of nodes |
|
|
86
|
+
| annotationBgColor | `#F9D1FC` | The backgrond color of annotation |
|
|
87
|
+
| annotationBorderColor | `#E273EA` | The backgrond color of annotation |
|
|
88
|
+
| annotationBorderDashArray | `[]` | The border dash array of annotation |
|
|
89
|
+
| annotationBorderWidth | `2` | The border width of annotation |
|
|
90
|
+
| annotationOrientation | `Orientation.Horizontal` | The orientation of annotation |
|
|
91
|
+
| annotations | `[]` | See sample data below |
|
|
93
92
|
|
|
94
93
|
Default tooltip template
|
|
95
94
|
|
|
@@ -151,32 +150,38 @@ tooltipTemplate(task, dateFormat) {
|
|
|
151
150
|
### Expected data format to set as Options.series
|
|
152
151
|
|
|
153
152
|
Each tasks should be in below format
|
|
153
|
+
|
|
154
154
|
```js
|
|
155
155
|
[
|
|
156
156
|
{
|
|
157
|
-
id: 'a',
|
|
157
|
+
id: 'a', // unique id of the task
|
|
158
158
|
startTime: '10-11-2024', // start time of the task
|
|
159
|
-
endTime: '11-01-2024',
|
|
160
|
-
name: 'task 1',
|
|
161
|
-
parentId: 'a',
|
|
162
|
-
progress: 65,
|
|
159
|
+
endTime: '11-01-2024', // end time of the task
|
|
160
|
+
name: 'task 1', // task name
|
|
161
|
+
parentId: 'a', // parent task id
|
|
162
|
+
progress: 65, // progress in percentage
|
|
163
163
|
},
|
|
164
|
-
]
|
|
164
|
+
];
|
|
165
165
|
```
|
|
166
166
|
|
|
167
167
|
### Expected annotation format to set as Options.annotations
|
|
168
168
|
|
|
169
169
|
Each tasks should be in below format
|
|
170
|
+
|
|
170
171
|
```js
|
|
171
172
|
[
|
|
172
173
|
{
|
|
173
|
-
x1: '10-25-2024',
|
|
174
|
-
x2:
|
|
174
|
+
x1: '10-25-2024', // start date
|
|
175
|
+
x2: 'END_DATE', // optional. If present, draw a rect from x1 to x2. If null, only draw line on x1,
|
|
175
176
|
label: {
|
|
176
177
|
text: 'Annotation rect', // label for the annotation
|
|
178
|
+
fontColor: '#333333', // optional
|
|
179
|
+
fontFamily: 'Arial', // optional
|
|
180
|
+
fontSize: '12px', // optional
|
|
181
|
+
fontWeight: 'bold', // optional
|
|
177
182
|
},
|
|
178
183
|
},
|
|
179
|
-
]
|
|
184
|
+
];
|
|
180
185
|
```
|
|
181
186
|
|
|
182
187
|
## 📘 Public API
|
|
@@ -187,8 +192,8 @@ Updates the entire Gantt chart with new configuration and task data.
|
|
|
187
192
|
|
|
188
193
|
#### Parameters
|
|
189
194
|
|
|
190
|
-
| Name
|
|
191
|
-
|
|
195
|
+
| Name | Type | Description |
|
|
196
|
+
| --- | --- | --- |
|
|
192
197
|
| `options` | `Object` | Contains updated config and data. Must include a `tasks` array and other Gantt configuration options. |
|
|
193
198
|
|
|
194
199
|
#### Example
|
|
@@ -201,7 +206,7 @@ ganttInstance.update({
|
|
|
201
206
|
name: 'Design Phase',
|
|
202
207
|
start: '2025-07-01',
|
|
203
208
|
end: '2025-07-10',
|
|
204
|
-
progress: 40
|
|
209
|
+
progress: 40,
|
|
205
210
|
},
|
|
206
211
|
// more tasks...
|
|
207
212
|
],
|
|
@@ -215,10 +220,10 @@ Updates the specific task with provided task data.
|
|
|
215
220
|
|
|
216
221
|
#### Parameters
|
|
217
222
|
|
|
218
|
-
| Name | Type | Description
|
|
219
|
-
|
|
220
|
-
| `taskId` | `string` | ID of the task to be updated
|
|
221
|
-
| `taskData` | `Object` | Data of the task to be updated
|
|
223
|
+
| Name | Type | Description |
|
|
224
|
+
| ---------- | -------- | ------------------------------ |
|
|
225
|
+
| `taskId` | `string` | ID of the task to be updated |
|
|
226
|
+
| `taskData` | `Object` | Data of the task to be updated |
|
|
222
227
|
|
|
223
228
|
#### Example
|
|
224
229
|
|
|
@@ -227,15 +232,13 @@ ganttInstance.updateTask('task-1', {
|
|
|
227
232
|
name: 'Design Phase',
|
|
228
233
|
start: '2025-07-01',
|
|
229
234
|
end: '2025-07-10',
|
|
230
|
-
progress: 40
|
|
235
|
+
progress: 40,
|
|
231
236
|
});
|
|
232
237
|
```
|
|
233
238
|
|
|
234
239
|
### 3. `zoomIn()`
|
|
235
240
|
|
|
236
|
-
Zooms in the gantt based on current view mode.
|
|
237
|
-
View mode direction for zoom in
|
|
238
|
-
year -> quarter -> month -> week -> day
|
|
241
|
+
Zooms in the gantt based on current view mode. View mode direction for zoom in year -> quarter -> month -> week -> day
|
|
239
242
|
|
|
240
243
|
#### Example
|
|
241
244
|
|
|
@@ -245,9 +248,7 @@ ganttInstance.zoomOut();
|
|
|
245
248
|
|
|
246
249
|
### 4. `zoomOut()`
|
|
247
250
|
|
|
248
|
-
Zooms out the gantt based on current view mode.
|
|
249
|
-
View mode direction for zoom in
|
|
250
|
-
day -> week -> month -> quarter -> year
|
|
251
|
+
Zooms out the gantt based on current view mode. View mode direction for zoom in day -> week -> month -> quarter -> year
|
|
251
252
|
|
|
252
253
|
#### Example
|
|
253
254
|
|