apexgantt 1.0.1 → 2.0.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.
Files changed (21) hide show
  1. package/README.md +88 -87
  2. package/apexgantt.es.min.js +48946 -3
  3. package/apexgantt.min.js +302 -302
  4. package/demo/custom-colors.html +219 -0
  5. package/demo/milestones.html +322 -0
  6. package/demo/resource-management.html +364 -0
  7. package/index.d.ts +4 -0
  8. package/lib/gantt.d.ts +25 -4
  9. package/lib/models/Annotation.d.ts +4 -1
  10. package/lib/models/Bar.d.ts +7 -2
  11. package/lib/models/Dialog.d.ts +4 -0
  12. package/lib/models/Options.d.ts +60 -17
  13. package/lib/styles/Dropdown.style.d.ts +1 -0
  14. package/lib/styles/Tasks.style.d.ts +1 -1
  15. package/lib/styles/Timeline.style.d.ts +1 -1
  16. package/lib/styles/Toolbar.style.d.ts +1 -0
  17. package/lib/styles/Tooltip.style.d.ts +1 -0
  18. package/lib/types/events.d.ts +9 -0
  19. package/lib/util/dom-context.util.d.ts +48 -0
  20. package/lib/util/style-injection.util.d.ts +21 -0
  21. 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 "apexgantt";
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
- const ganttOptions = {
28
- series: [
29
- {
30
- id: 'a',
31
- startTime: '10-11-2024',
32
- endTime: '11-01-2024',
33
- name: 'task 1',
34
- progress: 65,
35
- },
36
- {
37
- id: '5',
38
- startTime: '10-11-2024',
39
- endTime: '10-26-2024',
40
- name: 'subtask 1.1',
41
- parentId: 'a',
42
- progress: 65,
43
- },
44
- ],
45
- };
46
- const gantt = new ApexGantt(document.getElementById('gantt-container'), ganttOptions);
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
- | 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 |
92
- | annotationTextColor | `#222` | The text color of annotation |
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
 
@@ -107,7 +106,7 @@ tooltipTemplate(task, dateFormat) {
107
106
  items.push(`
108
107
  <div>
109
108
  <strong>Start:</strong>
110
- <span>${getTaskTextByColumn(task, ColumnKey.StartTime, '')}</span>
109
+ <span>${getTaskTextByColumn(task, ColumnKey.StartTime, dateFormat)}</span>
111
110
  </div>
112
111
  <div>
113
112
  <strong>End:</strong>
@@ -126,7 +125,7 @@ tooltipTemplate(task, dateFormat) {
126
125
  items.push(`
127
126
  <div>
128
127
  <strong>Date:</strong>
129
- <span>${getTaskTextByColumn(task, ColumnKey.StartTime, '')}</span>
128
+ <span>${getTaskTextByColumn(task, ColumnKey.StartTime, dateFormat)}</span>
130
129
  </div>
131
130
  `);
132
131
  }
@@ -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', // unique id of the task
157
+ id: 'a', // unique id of the task
158
158
  startTime: '10-11-2024', // start time of the task
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
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', // start date
174
- x2: "END_DATE", // optional. If present, draw a rect from x1 to x2. If null, only draw line on x1,
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 | Type | Description |
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