apexgantt 2.0.0 → 3.1.0

package/README.md

@@ -52,9 +52,10 @@ The layout can be configured by either setting the properties in the table below
 
 | Options                   | Default                       | Description                                         |
 | ------------------------- | ----------------------------- | --------------------------------------------------- |
-| width                     | `800`                         | The width of graph container                        |
-| height                    | `800`                         | The height of graph container                       |
+| width                     | `100%`                        | The width of graph container                        |
+| height                    | `500px`                       | The height of graph container                       |
 | series,                   | `[]`                          | Data for gantt. See format below                    |
+| theme,                    | `light`                       | Built in light and dark theme for easy styling      |
 | canvasStyle               | `None`                        | The css styles for canvas root container            |
 | viewMode                  | `ViewMode.Month`              | View mode                                           |
 | arrowColor                | `#0D6EFD`                     | Color for the dependency arrows                     |
@@ -74,7 +75,7 @@ The layout can be configured by either setting the properties in the table below
 | enableTaskResize          | `true`                        | Enable/disable gantt export options                 |
 | headerBackground          | `#f3f3f3`                     | Background color for header                         |
 | inputDateFormat           | `MM-DD-YYYY`                  | Input date format                                   |
-| tasksContainerWidth       | `440`                         | Task sidebar container width                        |
+| tasksContainerWidth       | `425`                         | Task sidebar container width                        |
 | tooltipId                 | `apexgantt-tooltip-container` | The tooltip HTML element id                         |
 | tooltipTemplate           | `tooltipTemplate`             | The HTML template for tooltip                       |
 | tooltipBorderColor        | `#BCBCBC`                     | The border color of tooltip                         |
@@ -184,6 +185,65 @@ Each tasks should be in below format
 ];
 ```
 
+## Data Parsing
+
+Map your existing data structure to ApexGantt format without manual transformation.
+
+```javascript
+const apiData = [
+  {
+    task_id: 'T1',
+    task_name: 'Design Phase',
+    start_date: '01-01-2024',
+    end_date: '01-15-2024',
+    completion: 75,
+  },
+];
+
+const gantt = new ApexGantt(document.getElementById('gantt'), {
+  series: apiData,
+  parsing: {
+    id: 'task_id',
+    name: 'task_name',
+    startTime: 'start_date',
+    endTime: 'end_date',
+    progress: 'completion',
+  },
+});
+```
+
+### Nested Objects & Transforms
+
+Use dot notation for nested properties and inline transforms for data conversion:
+
+```javascript
+const nestedData = [
+  {
+    project: {
+      task: {id: 'T1', title: 'Design'},
+      dates: {start: '01-01-2024', end: '01-15-2024'},
+      status: {completion: 0.75},
+    },
+  },
+];
+
+const gantt = new ApexGantt(document.getElementById('gantt'), {
+  series: nestedData,
+  parsing: {
+    id: 'project.task.id',
+    name: 'project.task.title',
+    startTime: 'project.dates.start',
+    endTime: 'project.dates.end',
+    progress: {
+      key: 'project.status.completion',
+      transform: (value) => value * 100, // convert to percentage
+    },
+  },
+});
+```
+
+**Supported fields:** `id`, `name`, `startTime`, `endTime`, `progress`, `type`, `parentId`, `dependency`, `barBackgroundColor`, `rowBackgroundColor`, `collapsed`
+
 ## 📘 Public API
 
 ### 1. `update(options)`
@@ -255,3 +315,67 @@ Zooms out the gantt based on current view mode. View mode direction for zoom in
 ```js
 ganttInstance.zoomOut();
 ```
+
+## Events
+
+ApexGantt emits CustomEvents on the container element when tasks are updated through the dialog form.
+
+| Event                 | When                          | Detail                                        |
+| --------------------- | ----------------------------- | --------------------------------------------- |
+| `taskUpdate`          | Task is being updated         | `{ taskId, updates, updatedTask, timestamp }` |
+| `taskUpdateSuccess`   | Update completed successfully | `{ taskId, updatedTask, timestamp }`          |
+| `taskValidationError` | Form validation failed        | `{ taskId, errors, timestamp }`               |
+| `taskUpdateError`     | Update failed                 | `{ taskId, error, timestamp }`                |
+
+### Events Usage
+
+#### Vanilla JS
+
+```javascript
+import ApexGantt, {GanttEvents} from 'apexgantt';
+
+const container = document.getElementById('gantt');
+const chart = new ApexGantt(container, {series: tasks});
+chart.render();
+
+// Hook into updates to save to your backend
+container.addEventListener(GanttEvents.TASK_UPDATE_SUCCESS, async (e) => {
+  const {updatedTask} = e.detail;
+  /* use this updatedTask for any server operations */
+});
+
+// handle any errors
+container.addEventListener(GanttEvents.TASK_UPDATE_ERROR, (e) => {
+  console.error('Update failed:', e.detail.error);
+});
+```
+
+#### React
+
+```jsx
+import {useRef, useEffect} from 'react';
+import ApexGantt, {GanttEvents} from 'apexgantt';
+
+function GanttChart({tasks}) {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const chart = new ApexGantt(containerRef.current, {series: tasks});
+    chart.render();
+
+    const handleSuccess = async (e) => {
+      const {updatedTask} = e.detail;
+      /* use this updatedTask for any server operations */
+    };
+
+    containerRef.current.addEventListener(GanttEvents.TASK_UPDATE_SUCCESS, handleSuccess);
+
+    return () => {
+      containerRef.current?.removeEventListener(GanttEvents.TASK_UPDATE_SUCCESS, handleSuccess);
+      chart.destroy();
+    };
+  }, [tasks]);
+
+  return <div ref={containerRef} />;
+}
+```