apexgantt 0.0.1

package/README.md

@@ -0,0 +1,134 @@
+# ApexGantt
+
+A JavaScript library to create Gantt diagrams built on SVG
+
+## Installation
+
+To add the ApexGantt to your project and its dependencies, install the package from npm.
+
+```bash
+npm install apexgantt
+```
+
+## Usage
+
+```js
+import ApexGantt from "apexgantt";
+```
+
+To create a basic gantt with minimal configuration, write as follows:
+
+```html
+<div id="gantt-container"></div>
+```
+
+```js
+ 
+ const tasks = [
+  ...(tasks with format provided below)
+ ];
+ const gantt = new ApexGantt(document.getElementById('gantt-container'), tasks);
+ gantt.render(data);
+```
+
+
+## ApexGantt Options
+
+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.
+
+| Options             | Default                       | Description                              |
+| ------------------  | ------------------------------| ---------------------------------------- |
+| width               | `800`                         | The width of graph container             |
+| height              | `800`                         | The height of graph container            |
+| canvasStyle         | `None`                        | The css styles for canvas root container |
+| rowHeight           | `28`                          | Height for timeline row                  |
+| enableToolbar       | `false`                       | Enable/disable graph toolbar             |
+| barBackgroundColor  | `#537CFA`                     | Background color for timeline bar        |
+| barBorderRadius     | `5px`                         | Border radius for timeline bar           |
+| barMargin           | `4`                           | Top and bottom margin for timeline bar   |
+| barTextColor        | `#FFFFFF`                     | Text color for timeline bar              |
+| enableResize        | `true`                        | Enable/disable gantt sidebar resize      |
+| headerBackground    | `#f3f3f3`                     | Background color for header              |
+| inputDateFormat     | `MM-DD-YYYY`                  | Input date format                        |
+| tasksContainerWidth | `440`                         | Task sidebar container width             |
+| viewMode            | `ViewMode.Month`              | View mode                                |
+| tooltipId           | `apexgantt-tooltip-container` | The tooltip HTML element id              |
+| tooltipTemplate     | `tooltipTemplate`             | The HTML template for tooltip            |
+| tooltipBorderColor  | `#BCBCBC`                     | The border color of tooltip              |
+| tooltipBGColor      | `#FFFFFF`                     | The background color of tooltip          |
+| fontSize            | `14px`                        | The size of font of nodes                |
+| fontFamily          | `None`                        | The font family of nodes                 |
+| fontWeight          | `400`                         | The font weight of nodes                 |
+| fontColor           | `#000000`                     | The font color of nodes                  |
+
+Default tooltip template
+
+```js
+tooltipTemplate(task, dateFormat) {
+    const items = [
+      `<div>
+        <strong>Name:</strong>
+        <span>${task.name}</span>
+      </div>
+      `,
+    ];
+
+    if (task.type === TaskType.Task) {
+      items.push(`
+        <div>
+          <strong>Start:</strong>
+          <span>${getTaskTextByColumn(task, ColumnKey.StartTime, '')}</span>
+        </div>
+        <div>
+          <strong>End:</strong>
+          <span>${getTaskTextByColumn(task, ColumnKey.EndTime, dateFormat)}</span>
+        </div>
+        <div>
+          <strong>Duration:</strong>
+          <span>${getTaskTextByColumn(task, ColumnKey.Duration, dateFormat)}</span>
+        </div>
+        <div>
+          <strong>Progress:</strong>
+          <span>${task.progress}%</span>
+        </div>
+      `);
+    } else if (task.type === TaskType.Milestone) {
+      items.push(`
+        <div>
+          <strong>Date:</strong>
+          <span>${getTaskTextByColumn(task, ColumnKey.StartTime, '')}</span>
+        </div>
+      `);
+    }
+
+    if (task.dependency) {
+      items.push(`
+        <div>
+          <strong>Dependency:</strong>
+          <span>${task.dependency}</span>
+        </div>
+      `);
+    }
+
+    return `
+      <div style='display:flex;flex-direction:column;align-items:left;gap:5px;padding:5px 10px;'>
+        ${items.join('')}
+      </div>
+    `;
+  },
+```
+
+### Expected data format
+
+Each tasks should be in below format
+```
+{
+  id: 'a',                 // unique id of the task
+  startTime: '10-11-2024', // start time of the task
+  endTime: '11-01-2024',   // end time of the task
+  name: 'task 1',          // task name 
+  parentId: 'a',           // parent task id
+  progress: 65,            // progress in percentage
+},
+
+```

package/apexgantt.es.min.js

@@ -0,0 +1,4 @@
+import { A as f } from "./index-rCBgY2lh.js";
+export {
+  f as default
+};