apexgantt 0.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.
Files changed (26) hide show
  1. package/.github/workflows/publish.yml +20 -0
  2. package/README.md +166 -43
  3. package/apexgantt.es.min.js +48013 -2
  4. package/apexgantt.min.js +1453 -810
  5. package/demo/custom-colors.html +219 -0
  6. package/demo/gantt-with-annotations.html +2 -1
  7. package/demo/gantt-with-interactions.html +3 -0
  8. package/demo/milestones.html +322 -0
  9. package/demo/resource-management.html +364 -0
  10. package/html2canvas-D1hTQM0b.js +29 -0
  11. package/{html2canvas-CnlWfegT.js → html2canvas-DY15eh9-.js} +1 -1
  12. package/index-BWP5PfTm.js +37542 -0
  13. package/{index-rCBgY2lh.js → index-BvOcbiui.js} +4908 -4656
  14. package/index.d.ts +8 -1
  15. package/{index.es-BgS5HB6w.js → index.es-CkiCpPKL.js} +1 -1
  16. package/index.es-DQCDSqMd.js +9442 -0
  17. package/lib/gantt.d.ts +12 -5
  18. package/lib/models/Annotation.d.ts +4 -1
  19. package/lib/models/DataManager.d.ts +1 -1
  20. package/lib/models/Options.d.ts +61 -17
  21. package/lib/styles/Tasks.style.d.ts +1 -1
  22. package/lib/styles/Timeline.style.d.ts +1 -1
  23. package/lib/util/ganttExport.d.ts +1 -1
  24. package/package.json +2 -1
  25. package/purify.es-V92tbb_N.js +991 -0
  26. package/demo/gantt-with-property-update.html +0 -162
package/.github/workflows/publish.yml ADDED
@@ -0,0 +1,20 @@
1
+ name: Publish to npm
2
+
3
+ on:
4
+ push:
5
+ branches:
6
+ - main
7
+
8
+ jobs:
9
+ publish:
10
+ runs-on: ubuntu-latest
11
+ steps:
12
+ - uses: actions/checkout@v4
13
+ - uses: actions/setup-node@v4
14
+ with:
15
+ node-version: "20"
16
+ registry-url: "https://registry.npmjs.org" # Or your custom registry
17
+ - run: npm install
18
+ - run: npm publish
19
+ env:
20
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
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,43 +23,72 @@ To create a basic gantt with minimal configuration, write as follows:
23
23
  ```
24
24
 
25
25
  ```js
26
-
27
- const tasks = [
28
- ...(tasks with format provided below)
29
- ];
30
- const gantt = new ApexGantt(document.getElementById('gantt-container'), tasks);
31
- gantt.render(data);
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();
32
47
  ```
33
48
 
34
-
35
49
  ## ApexGantt Options
36
50
 
37
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.
38
52
 
39
- | Options | Default | Description |
40
- | ------------------ | ------------------------------| ---------------------------------------- |
41
- | width | `800` | The width of graph container |
42
- | height | `800` | The height of graph container |
43
- | canvasStyle | `None` | The css styles for canvas root container |
44
- | rowHeight | `28` | Height for timeline row |
45
- | enableToolbar | `false` | Enable/disable graph toolbar |
46
- | barBackgroundColor | `#537CFA` | Background color for timeline bar |
47
- | barBorderRadius | `5px` | Border radius for timeline bar |
48
- | barMargin | `4` | Top and bottom margin for timeline bar |
49
- | barTextColor | `#FFFFFF` | Text color for timeline bar |
50
- | enableResize | `true` | Enable/disable gantt sidebar resize |
51
- | headerBackground | `#f3f3f3` | Background color for header |
52
- | inputDateFormat | `MM-DD-YYYY` | Input date format |
53
- | tasksContainerWidth | `440` | Task sidebar container width |
54
- | viewMode | `ViewMode.Month` | View mode |
55
- | tooltipId | `apexgantt-tooltip-container` | The tooltip HTML element id |
56
- | tooltipTemplate | `tooltipTemplate` | The HTML template for tooltip |
57
- | tooltipBorderColor | `#BCBCBC` | The border color of tooltip |
58
- | tooltipBGColor | `#FFFFFF` | The background color of tooltip |
59
- | fontSize | `14px` | The size of font of nodes |
60
- | fontFamily | `None` | The font family of nodes |
61
- | fontWeight | `400` | The font weight of nodes |
62
- | fontColor | `#000000` | The font color of nodes |
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 |
63
92
 
64
93
  Default tooltip template
65
94
 
@@ -118,17 +147,111 @@ tooltipTemplate(task, dateFormat) {
118
147
  },
119
148
  ```
120
149
 
121
- ### Expected data format
150
+ ### Expected data format to set as Options.series
151
+
152
+ Each tasks should be in below format
153
+
154
+ ```js
155
+ [
156
+ {
157
+ id: 'a', // unique id of the task
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
163
+ },
164
+ ];
165
+ ```
166
+
167
+ ### Expected annotation format to set as Options.annotations
122
168
 
123
169
  Each tasks should be in below format
170
+
171
+ ```js
172
+ [
173
+ {
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,
176
+ label: {
177
+ text: 'Annotation rect', // label for the annotation
178
+ fontColor: '#333333', // optional
179
+ fontFamily: 'Arial', // optional
180
+ fontSize: '12px', // optional
181
+ fontWeight: 'bold', // optional
182
+ },
183
+ },
184
+ ];
185
+ ```
186
+
187
+ ## 📘 Public API
188
+
189
+ ### 1. `update(options)`
190
+
191
+ Updates the entire Gantt chart with new configuration and task data.
192
+
193
+ #### Parameters
194
+
195
+ | Name | Type | Description |
196
+ | --- | --- | --- |
197
+ | `options` | `Object` | Contains updated config and data. Must include a `tasks` array and other Gantt configuration options. |
198
+
199
+ #### Example
200
+
201
+ ```js
202
+ ganttInstance.update({
203
+ series: [
204
+ {
205
+ id: 'task-1',
206
+ name: 'Design Phase',
207
+ start: '2025-07-01',
208
+ end: '2025-07-10',
209
+ progress: 40,
210
+ },
211
+ // more tasks...
212
+ ],
213
+ viewMode: 'Week',
214
+ });
215
+ ```
216
+
217
+ ### 2. `updateTask(taskId, taskData)`
218
+
219
+ Updates the specific task with provided task data.
220
+
221
+ #### Parameters
222
+
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 |
227
+
228
+ #### Example
229
+
230
+ ```js
231
+ ganttInstance.updateTask('task-1', {
232
+ name: 'Design Phase',
233
+ start: '2025-07-01',
234
+ end: '2025-07-10',
235
+ progress: 40,
236
+ });
237
+ ```
238
+
239
+ ### 3. `zoomIn()`
240
+
241
+ Zooms in the gantt based on current view mode. View mode direction for zoom in year -> quarter -> month -> week -> day
242
+
243
+ #### Example
244
+
245
+ ```js
246
+ ganttInstance.zoomOut();
247
+ ```
248
+
249
+ ### 4. `zoomOut()`
250
+
251
+ Zooms out the gantt based on current view mode. View mode direction for zoom in day -> week -> month -> quarter -> year
252
+
253
+ #### Example
254
+
255
+ ```js
256
+ ganttInstance.zoomOut();
124
257
  ```
125
- {
126
- id: 'a', // unique id of the task
127
- startTime: '10-11-2024', // start time of the task
128
- endTime: '11-01-2024', // end time of the task
129
- name: 'task 1', // task name
130
- parentId: 'a', // parent task id
131
- progress: 65, // progress in percentage
132
- },
133
-
134
- ```