@operato/gantt 7.0.20 → 7.0.22

package/dist/src/ox-gantt.js

@@ -1,15 +1,18 @@
 import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
+import * as d3 from 'd3';
 import i18next from 'i18next';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 import { ScrollbarStyles } from '@operato/styles';
 import './ox-gantt-chart.js';
+import './ox-resource-chart.js';
 import './ox-gantt-resize-splitter.js';
 let OxGantt = class OxGantt extends LitElement {
     constructor() {
         super(...arguments);
         this.tasks = [];
+        this.resources = [];
         this.fromDate = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]; /* beginning of this year */
         this.toDate = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]; /* end of this year */
         this.extendGridLines = false;
@@ -53,9 +56,17 @@ let OxGantt = class OxGantt extends LitElement {
                 visible: true,
                 width: 100,
                 order: 9
+            },
+            {
+                name: 'resources',
+                label: i18next.t('label.gantt-task-resources') || 'resources',
+                visible: true,
+                width: 100,
+                order: 10
             }
         ];
         this._startWidth = 0;
+        this._startHeight = 0;
         this._isDragging = false;
     }
     static { this.styles = [
@@ -70,13 +81,24 @@ let OxGantt = class OxGantt extends LitElement {
       }
 
       .container {
+        flex: 1;
+
         display: flex;
+        flex-direction: column;
         width: 100%;
         height: 100%;
         box-sizing: border-box;
       }
 
-      .task-container {
+      .resource-container {
+        height: 300px;
+
+        display: flex;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+
+      .resource-table-container {
         padding: 0;
         overflow: auto;
         overflow-y: overlay;
@@ -84,16 +106,34 @@ let OxGantt = class OxGantt extends LitElement {
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
       }
 
-      .chart-container {
+      .resource-chart-container {
         flex: 1;
         padding: 0;
         box-sizing: border-box;
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
       }
 
-      ox-gantt-resize-splitter {
-        width: 4px;
-        cursor: ew-resize;
+      .task-container {
+        flex: 1;
+
+        display: flex;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+
+      .task-table-container {
+        padding: 0;
+        overflow: auto;
+        overflow-y: overlay;
+        box-sizing: border-box;
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+      }
+
+      .task-chart-container {
+        flex: 1;
+        padding: 0;
+        box-sizing: border-box;
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
       }
 
       table {
@@ -124,6 +164,7 @@ let OxGantt = class OxGantt extends LitElement {
       th {
         height: 40px;
         box-sizing: border-box;
+        text-align: center;
       }
 
       td {
@@ -139,24 +180,63 @@ let OxGantt = class OxGantt extends LitElement {
     render() {
         return html `
       <div class="container md-typescale-body-medium">
-        <div class="task-container" @scroll=${this.syncScroll}>${this.renderTaskTable()}</div>
+        <div class="task-container">
+          <div class="task-table-container" @scroll=${this.syncScroll}>${this.renderTaskTable()}</div>
+          <ox-gantt-resize-splitter
+            vertical
+            @splitter-dragstart=${(e) => this.resizeHorizontalStart(e)}
+            @splitter-drag=${(e) => this.resizeHorizontalDrag(e)}
+            @splitter-dragend=${(e) => this.resizeHorizontalEnd(e)}
+          ></ox-gantt-resize-splitter>
+          <ox-gantt-chart
+            class="task-chart-container"
+            @scroll=${this.syncScroll}
+            .fromDate=${this.fromDate}
+            .toDate=${this.toDate}
+            .tasks=${this.tasks}
+            .selectedTaskId=${this.selectedTaskId}
+            .axisScale=${this.timeScale}
+            ?extend-grid-lines=${this.extendGridLines}
+            @task-clicked=${this.handleTaskClicked}
+            @timescale-changed=${(e) => this.syncTimeScale(e)}
+          ></ox-gantt-chart>
+        </div>
         <ox-gantt-resize-splitter
-          vertical
-          @splitter-dragstart=${(e) => this.resizeStart(e)}
-          @splitter-drag=${(e) => this.resizeDrag(e)}
-          @splitter-dragend=${(e) => this.resizeEnd(e)}
+          horizontal
+          @splitter-dragstart=${(e) => this.resizeVerticalStart(e)}
+          @splitter-drag=${(e) => this.resizeVerticalDrag(e)}
+          @splitter-dragend=${(e) => this.resizeVerticalEnd(e)}
         ></ox-gantt-resize-splitter>
-        <ox-gantt-chart
-          class="chart-container"
-          @scroll=${this.syncScroll}
-          .fromDate=${this.fromDate}
-          .toDate=${this.toDate}
-          .tasks=${this.tasks}
-          .selectedTaskId=${this.selectedTaskId}
-          .axisScale=${this.timeScale}
-          ?extend-grid-lines=${this.extendGridLines}
-          @task-clicked=${this.handleTaskClicked}
-        ></ox-gantt-chart>
+        <div class="resource-container">
+          <div class="resource-table-container" @scroll=${this.syncScroll}>
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 100px">${i18next.t('label.gantt-resource-type')}</th>
+                  <th>${i18next.t('label.gantt-resource-allocated')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${this.resources.map(resource => this.renderResourceRow(resource))}
+              </tbody>
+            </table>
+          </div>
+          <ox-gantt-resize-splitter
+            vertical
+            @splitter-dragstart=${(e) => this.resizeHorizontalStart(e)}
+            @splitter-drag=${(e) => this.resizeHorizontalDrag(e)}
+            @splitter-dragend=${(e) => this.resizeHorizontalEnd(e)}
+          ></ox-gantt-resize-splitter>
+          <ox-resource-chart
+            class="resource-chart-container"
+            .fromDate=${this.fromDate}
+            .toDate=${this.toDate}
+            .tasks=${this.tasks}
+            .resources=${this.resources}
+            .axisScale=${this.timeScale}
+            @scroll=${this.syncScroll}
+          ></ox-resource-chart>
+        </div>
       </div>
     `;
     }
@@ -164,35 +244,46 @@ let OxGantt = class OxGantt extends LitElement {
         if (!this.columnConfig) {
             return;
         }
-        const mergedTasks = this.mergeTasksBySection(this.tasks);
         // Sort columns by the configured order
         const sortedColumns = [...this.columnConfig].sort((a, b) => a.order - b.order);
         return html `
-      <table>
+      <table class="task-table">
         <thead>
           <tr>
-            ${sortedColumns.map(col => col.visible ? html `<th style="width: ${col.width}px">${col.label}</th>` : null)}
+            ${sortedColumns.map(col => col.visible ? html `<th style="width: ${col.width}px">${col.label}</th>` : nothing)}
           </tr>
         </thead>
         <tbody>
-          ${mergedTasks.map(({ task, showSection, rowSpan }) => html `
-              <tr class="${this.selectedTaskId === task.id ? 'selected' : ''}" @click=${() => this.selectTask(task.id)}>
-                ${sortedColumns.map(col => {
-            if (col.name === 'section') {
-                return col.visible && showSection
-                    ? html `<td rowspan=${rowSpan} style="width: ${col.width}px">${task.section?.name || ''}</td>`
-                    : null;
-            }
-            return col.visible
-                ? html `<td style="width: ${col.width}px">${this.getTaskFieldValue(task, col.name)}</td>`
-                : null;
-        })}
-              </tr>
-            `)}
+          ${this.renderTaskRows(this.tasks)}
         </tbody>
       </table>
     `;
     }
+    renderTaskRows(tasks, level = 0) {
+        return tasks.flatMap(task => [
+            this.renderTaskRow(task, level),
+            ...this.renderTaskRows(task.children || [], level + 1)
+        ]);
+    }
+    renderTaskRow(task, level) {
+        return html `
+      <tr class=${this.selectedTaskId === task.id ? 'selected' : ''} @click=${() => this.selectTask(task.id)}>
+        ${this.columnConfig.map(col => col.visible
+            ? html `<td class="task-row" style="padding-left: ${col.name == 'title' ? level * 8 + 4 : 4}px">
+                ${this.getTaskFieldValue(task, col.name)}
+              </td>`
+            : null)}
+      </tr>
+    `;
+    }
+    renderResourceRow(resource) {
+        return html `
+      <tr>
+        <td>${resource.type}</td>
+        <td>${resource.allocated}</td>
+      </tr>
+    `;
+    }
     getTaskFieldValue(task, field) {
         switch (field) {
             case 'id':
@@ -213,30 +304,12 @@ let OxGantt = class OxGantt extends LitElement {
                 return task.progress || '';
             case 'dependsOn':
                 return task.dependsOn || '';
+            case 'resources':
+                return task.resources?.map(res => `${res.type}: ${res.allocated}`).join(', ') || '';
             default:
                 return '';
         }
     }
-    mergeTasksBySection(tasks) {
-        const mergedTasks = [];
-        let currentSection = '';
-        let rowSpan = 0;
-        (tasks || []).forEach((task, index) => {
-            if (task.section?.name !== currentSection) {
-                currentSection = task.section?.name || '';
-                rowSpan = 1;
-                mergedTasks.push({ task, showSection: true, rowSpan: 1 });
-            }
-            else {
-                mergedTasks[mergedTasks.length - rowSpan].rowSpan = ++rowSpan;
-                mergedTasks.push({ task, showSection: false, rowSpan: 0 });
-            }
-            if (index === tasks.length - 1 && rowSpan > 0) {
-                mergedTasks[mergedTasks.length - rowSpan].rowSpan = rowSpan;
-            }
-        });
-        return mergedTasks;
-    }
     selectTask(taskId) {
         this.selectedTaskId = taskId;
     }
@@ -244,48 +317,111 @@ let OxGantt = class OxGantt extends LitElement {
         this.selectedTaskId = event.detail.taskId;
     }
     firstUpdated(_changedProperties) {
-        this.taskContainer.style.width = '254px';
+        this.taskTableContainer.style.width = '254px';
+        this.resourceTableContainer.style.width = '254px';
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('tasks')) {
+            this.resources = this.aggregateResources(this.tasks);
+        }
+    }
+    aggregateResources(tasks) {
+        const resourceMap = {};
+        const traverseTasks = (tasks) => {
+            tasks.forEach(task => {
+                if (task.resources) {
+                    const startDate = new Date(task.startDate);
+                    const endDate = new Date(task.endDate);
+                    const durationDays = d3.timeDay.count(startDate, d3.timeDay.offset(endDate, 1));
+                    task.resources.forEach(resource => {
+                        const totalAllocation = resource.allocated * durationDays;
+                        if (!resourceMap[resource.type]) {
+                            resourceMap[resource.type] = 0;
+                        }
+                        resourceMap[resource.type] += totalAllocation;
+                        console.log(resource.type, resource.allocated, durationDays, totalAllocation);
+                    });
+                }
+                if (task.children) {
+                    traverseTasks(task.children);
+                }
+            });
+        };
+        traverseTasks(tasks);
+        return Object.keys(resourceMap).map(type => ({
+            type,
+            allocated: resourceMap[type]
+        }));
     }
-    updated(changes) { }
     syncScroll(e) {
         const target = e.target;
-        if (target === this.taskContainer) {
-            // Sync chart scroll with table scroll
-            const newScrollTop = this.taskContainer.scrollTop;
+        if (target === this.taskTableContainer) {
+            const newScrollTop = this.taskTableContainer.scrollTop;
             this.ganttChart.setVerticalOffset(newScrollTop);
-            // Ensure chart scroll matches table scroll
             if (this.ganttChart.getVerticalOffset() !== newScrollTop) {
                 this.ganttChart.setVerticalOffset(newScrollTop);
             }
         }
         else if (target === this.ganttChart) {
-            // Sync table scroll with chart scroll
             const newScrollTop = this.ganttChart.getVerticalOffset();
-            this.taskContainer.scrollTop = newScrollTop;
-            // Ensure table scroll matches chart scroll
-            this.ganttChart.setVerticalOffset(this.taskContainer.scrollTop);
+            this.taskTableContainer.scrollTop = newScrollTop;
+            this.ganttChart.setVerticalOffset(this.taskTableContainer.scrollTop);
+            const newScrollLeft = this.ganttChart.getHorizontalOffset();
+            this.resourceChart.setHorizontalOffset(newScrollLeft);
+        }
+        else if (target === this.resourceChart) {
+            const newScrollTop = this.ganttChart.getVerticalOffset();
+            this.resourceTableContainer.scrollTop = newScrollTop;
+            this.resourceChart.setVerticalOffset(this.taskTableContainer.scrollTop);
+            const newScrollLeft = this.resourceChart.getHorizontalOffset();
+            this.ganttChart.setHorizontalOffset(newScrollLeft);
+        }
+        else if (target === this.resourceTableContainer) {
+            const newScrollTop = this.taskTableContainer.scrollTop;
+            this.resourceChart.setVerticalOffset(newScrollTop);
+            if (this.resourceChart.getVerticalOffset() !== newScrollTop) {
+                this.resourceChart.setVerticalOffset(newScrollTop);
+            }
         }
     }
-    resizeStart(e) {
+    syncTimeScale(e) {
+        const detail = e.detail;
+        this.resourceChart.syncTimeScale(detail);
+    }
+    resizeHorizontalStart(e) {
         this._startWidth = e.target?.previousElementSibling?.offsetWidth;
         this._isDragging = true;
     }
-    resizeDrag(e) {
+    resizeHorizontalDrag(e) {
         if (!this._isDragging)
             return;
         const delta = e.detail;
-        const taskContainer = this.taskContainer;
-        if (taskContainer) {
-            taskContainer.style.width = `${this._startWidth + delta.x}px`;
-        }
+        this.taskTableContainer.style.width = `${this._startWidth + delta.x}px`;
+        this.resourceTableContainer.style.width = `${this._startWidth + delta.x}px`;
+    }
+    resizeHorizontalEnd(e) {
+        this._isDragging = false;
+    }
+    resizeVerticalStart(e) {
+        this._startHeight = e.target?.nextElementSibling?.offsetHeight;
+        this._isDragging = true;
+    }
+    resizeVerticalDrag(e) {
+        if (!this._isDragging)
+            return;
+        const delta = e.detail;
+        this.resourceContainer.style.height = `${this._startHeight - delta.y}px`;
     }
-    resizeEnd(e) {
+    resizeVerticalEnd(e) {
         this._isDragging = false;
     }
 };
 __decorate([
     property({ type: Array })
 ], OxGantt.prototype, "tasks", void 0);
+__decorate([
+    property({ type: Array })
+], OxGantt.prototype, "resources", void 0);
 __decorate([
     property({ type: String, attribute: 'from-date' })
 ], OxGantt.prototype, "fromDate", void 0);
@@ -304,21 +440,27 @@ __decorate([
 __decorate([
     state()
 ], OxGantt.prototype, "selectedTaskId", void 0);
-__decorate([
-    query('.container')
-], OxGantt.prototype, "container", void 0);
 __decorate([
     query('.task-container')
 ], OxGantt.prototype, "taskContainer", void 0);
 __decorate([
-    query('.chart-container')
-], OxGantt.prototype, "chartContainer", void 0);
+    query('.task-table-container')
+], OxGantt.prototype, "taskTableContainer", void 0);
+__decorate([
+    query('.resource-container')
+], OxGantt.prototype, "resourceContainer", void 0);
 __decorate([
-    query('table')
+    query('.resource-table-container')
+], OxGantt.prototype, "resourceTableContainer", void 0);
+__decorate([
+    query('.task-table')
 ], OxGantt.prototype, "taskTable", void 0);
 __decorate([
     query('ox-gantt-chart')
 ], OxGantt.prototype, "ganttChart", void 0);
+__decorate([
+    query('ox-resource-chart')
+], OxGantt.prototype, "resourceChart", void 0);
 OxGantt = __decorate([
     customElement('ox-gantt')
 ], OxGantt);

package/dist/src/ox-gantt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-gantt.js","sourceRoot":"","sources":["../../src/ox-gantt.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'\nimport i18next from 'i18next'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport './ox-gantt-chart.js'\nimport './ox-gantt-resize-splitter.js'\nimport { OxGanttChart } from './ox-gantt-chart.js'\nimport { ColumnConfig, Task, TimeScale } from './types.js'\n\n@customElement('ox-gantt')\nexport class OxGantt extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        font-family: Arial, sans-serif;\n        text-wrap: nowrap;\n        position: relative;\n      }\n\n      .container {\n        display: flex;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n      }\n\n      .task-container {\n        padding: 0;\n        overflow: auto;\n        overflow-y: overlay;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n      }\n\n      .chart-container {\n        flex: 1;\n        padding: 0;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-gantt-resize-splitter {\n        width: 4px;\n        cursor: ew-resize;\n      }\n\n      table {\n        width: 100%;\n        border-collapse: collapse;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n        margin: -1px;\n        margin-right: 0;\n      }\n\n      thead th {\n        position: sticky;\n        top: -1px;\n        z-index: 1;\n        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n        border-color: var(--ox-gantt-header-border-color, var(--md-sys-color-on-secondary-container));\n        color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n        text-transform: capitalize;\n      }\n\n      th,\n      td {\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n        padding: 4px;\n        text-align: left;\n      }\n\n      th {\n        height: 40px;\n        box-sizing: border-box;\n      }\n\n      td {\n        height: 30px;\n        box-sizing: border-box;\n      }\n\n      tr.selected {\n        background-color: var(--ox-gantt-selected-background-color, var(--md-sys-color-surface-variant));\n      }\n    `\n  ]\n\n  @property({ type: Array }) tasks: Task[] = []\n  @property({ type: String, attribute: 'from-date' })\n  fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0] /* beginning of this year */\n  @property({ type: String, attribute: 'to-date' })\n  toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */\n  @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false\n  @property({ type: String, attribute: 'time-scale' }) timeScale: TimeScale = 'week-day'\n  @property({ type: Array }) columnConfig: ColumnConfig[] = [\n    { name: 'id', label: i18next.t('label.gantt-task-id') || 'ID', visible: true, width: 50, order: 1 },\n    {\n      name: 'section',\n      label: i18next.t('label.gantt-task-section') || 'section',\n      visible: true,\n      width: 100,\n      order: 2\n    },\n    { name: 'title', label: i18next.t('label.gantt-task-title') || 'title', visible: true, width: 150, order: 3 },\n    { name: 'type', label: i18next.t('label.gantt-task-type') || 'type', visible: true, width: 100, order: 4 },\n    {\n      name: 'startDate',\n      label: i18next.t('label.gantt-task-start-date') || 'start date',\n      visible: true,\n      width: 100,\n      order: 5\n    },\n    {\n      name: 'endDate',\n      label: i18next.t('label.gantt-task-end-date') || 'end date',\n      visible: true,\n      width: 100,\n      order: 6\n    },\n    { name: 'tags', label: i18next.t('label.gantt-task-tags') || 'tags', visible: true, width: 100, order: 7 },\n    {\n      name: 'progress',\n      label: i18next.t('label.gantt-task-progress') || 'progress',\n      visible: true,\n      width: 100,\n      order: 8\n    },\n    {\n      name: 'dependsOn',\n      label: i18next.t('label.gantt-task-previous') || 'previous',\n      visible: true,\n      width: 100,\n      order: 9\n    }\n  ]\n\n  @state() selectedTaskId?: string\n\n  @query('.container') container!: HTMLDivElement\n  @query('.task-container') taskContainer!: HTMLDivElement\n  @query('.chart-container') chartContainer!: HTMLDivElement\n  @query('table') taskTable!: HTMLTableElement\n  @query('ox-gantt-chart') ganttChart!: OxGanttChart\n\n  private _startWidth: number = 0\n  private _isDragging: boolean = false\n\n  render() {\n    return html`\n      <div class=\"container md-typescale-body-medium\">\n        <div class=\"task-container\" @scroll=${this.syncScroll}>${this.renderTaskTable()}</div>\n        <ox-gantt-resize-splitter\n          vertical\n          @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}\n          @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}\n          @splitter-dragend=${(e: CustomEvent) => this.resizeEnd(e)}\n        ></ox-gantt-resize-splitter>\n        <ox-gantt-chart\n          class=\"chart-container\"\n          @scroll=${this.syncScroll}\n          .fromDate=${this.fromDate}\n          .toDate=${this.toDate}\n          .tasks=${this.tasks}\n          .selectedTaskId=${this.selectedTaskId}\n          .axisScale=${this.timeScale}\n          ?extend-grid-lines=${this.extendGridLines}\n          @task-clicked=${this.handleTaskClicked}\n        ></ox-gantt-chart>\n      </div>\n    `\n  }\n\n  renderTaskTable() {\n    if (!this.columnConfig) {\n      return\n    }\n\n    const mergedTasks = this.mergeTasksBySection(this.tasks)\n\n    // Sort columns by the configured order\n    const sortedColumns = [...this.columnConfig].sort((a, b) => a.order - b.order)\n\n    return html`\n      <table>\n        <thead>\n          <tr>\n            ${sortedColumns.map(col =>\n              col.visible ? html`<th style=\"width: ${col.width}px\">${col.label}</th>` : null\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${mergedTasks.map(\n            ({ task, showSection, rowSpan }) => html`\n              <tr class=\"${this.selectedTaskId === task.id ? 'selected' : ''}\" @click=${() => this.selectTask(task.id)}>\n                ${sortedColumns.map(col => {\n                  if (col.name === 'section') {\n                    return col.visible && showSection\n                      ? html`<td rowspan=${rowSpan} style=\"width: ${col.width}px\">${task.section?.name || ''}</td>`\n                      : null\n                  }\n                  return col.visible\n                    ? html`<td style=\"width: ${col.width}px\">${this.getTaskFieldValue(task, col.name)}</td>`\n                    : null\n                })}\n              </tr>\n            `\n          )}\n        </tbody>\n      </table>\n    `\n  }\n\n  getTaskFieldValue(task: Task, field: string) {\n    switch (field) {\n      case 'id':\n        return task.id\n      case 'section':\n        return task.section?.name || ''\n      case 'title':\n        return task.title\n      case 'type':\n        return task.type\n      case 'startDate':\n        return new Date(task.startDate).toISOString().split('T')[0]\n      case 'endDate':\n        return new Date(task.endDate).toISOString().split('T')[0]\n      case 'tags':\n        return task.tags?.join(', ') || ''\n      case 'progress':\n        return task.progress || ''\n      case 'dependsOn':\n        return task.dependsOn || ''\n      default:\n        return ''\n    }\n  }\n\n  mergeTasksBySection(tasks: Task[]): Array<{ task: Task; showSection: boolean; rowSpan: number }> {\n    const mergedTasks = [] as Array<{ task: Task; showSection: boolean; rowSpan: number }>\n    let currentSection = ''\n    let rowSpan = 0\n\n    ;(tasks || []).forEach((task, index) => {\n      if (task.section?.name !== currentSection) {\n        currentSection = task.section?.name || ''\n        rowSpan = 1\n        mergedTasks.push({ task, showSection: true, rowSpan: 1 })\n      } else {\n        mergedTasks[mergedTasks.length - rowSpan].rowSpan = ++rowSpan\n        mergedTasks.push({ task, showSection: false, rowSpan: 0 })\n      }\n\n      if (index === tasks.length - 1 && rowSpan > 0) {\n        mergedTasks[mergedTasks.length - rowSpan].rowSpan = rowSpan\n      }\n    })\n\n    return mergedTasks\n  }\n\n  selectTask(taskId: string) {\n    this.selectedTaskId = taskId\n  }\n\n  handleTaskClicked(event: CustomEvent) {\n    this.selectedTaskId = event.detail.taskId\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    this.taskContainer.style.width = '254px'\n  }\n\n  updated(changes: PropertyValues<this>) {}\n\n  syncScroll(e: Event) {\n    const target = e.target as HTMLElement\n    if (target === this.taskContainer) {\n      // Sync chart scroll with table scroll\n      const newScrollTop = this.taskContainer.scrollTop\n      this.ganttChart.setVerticalOffset(newScrollTop)\n\n      // Ensure chart scroll matches table scroll\n      if (this.ganttChart.getVerticalOffset() !== newScrollTop) {\n        this.ganttChart.setVerticalOffset(newScrollTop)\n      }\n    } else if (target === this.ganttChart) {\n      // Sync table scroll with chart scroll\n      const newScrollTop = this.ganttChart.getVerticalOffset()\n      this.taskContainer.scrollTop = newScrollTop\n\n      // Ensure table scroll matches chart scroll\n      this.ganttChart.setVerticalOffset(this.taskContainer.scrollTop)\n    }\n  }\n\n  resizeStart(e: CustomEvent) {\n    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth\n    this._isDragging = true\n  }\n\n  resizeDrag(e: CustomEvent) {\n    if (!this._isDragging) return\n    const delta = e.detail\n    const taskContainer = this.taskContainer\n\n    if (taskContainer) {\n      taskContainer.style.width = `${this._startWidth + delta.x}px`\n    }\n  }\n\n  resizeEnd(e: CustomEvent) {\n    this._isDragging = false\n  }\n}\n"]}
+{"version":3,"file":"ox-gantt.js","sourceRoot":"","sources":["../../src/ox-gantt.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues, PropertyValueMap, nothing, TemplateResult } from 'lit'\nimport * as d3 from 'd3'\nimport i18next from 'i18next'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport './ox-gantt-chart.js'\nimport './ox-resource-chart.js'\nimport './ox-gantt-resize-splitter.js'\nimport { OxGanttChart } from './ox-gantt-chart.js'\nimport { OxResourceChart } from './ox-resource-chart.js'\nimport { ColumnConfig, Task, TimeScale, Resource } from './types.js'\n\n@customElement('ox-gantt')\nexport class OxGantt extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        font-family: Arial, sans-serif;\n        text-wrap: nowrap;\n        position: relative;\n      }\n\n      .container {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n      }\n\n      .resource-container {\n        height: 300px;\n\n        display: flex;\n        overflow: hidden;\n        box-sizing: border-box;\n      }\n\n      .resource-table-container {\n        padding: 0;\n        overflow: auto;\n        overflow-y: overlay;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n      }\n\n      .resource-chart-container {\n        flex: 1;\n        padding: 0;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n      }\n\n      .task-container {\n        flex: 1;\n\n        display: flex;\n        overflow: hidden;\n        box-sizing: border-box;\n      }\n\n      .task-table-container {\n        padding: 0;\n        overflow: auto;\n        overflow-y: overlay;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n      }\n\n      .task-chart-container {\n        flex: 1;\n        padding: 0;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n      }\n\n      table {\n        width: 100%;\n        border-collapse: collapse;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n        margin: -1px;\n        margin-right: 0;\n      }\n\n      thead th {\n        position: sticky;\n        top: -1px;\n        z-index: 1;\n        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n        border-color: var(--ox-gantt-header-border-color, var(--md-sys-color-on-secondary-container));\n        color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n        text-transform: capitalize;\n      }\n\n      th,\n      td {\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));\n        padding: 4px;\n        text-align: left;\n      }\n\n      th {\n        height: 40px;\n        box-sizing: border-box;\n        text-align: center;\n      }\n\n      td {\n        height: 30px;\n        box-sizing: border-box;\n      }\n\n      tr.selected {\n        background-color: var(--ox-gantt-selected-background-color, var(--md-sys-color-surface-variant));\n      }\n    `\n  ]\n\n  @property({ type: Array }) tasks: Task[] = []\n  @property({ type: Array }) resources: Resource[] = []\n  @property({ type: String, attribute: 'from-date' })\n  fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0] /* beginning of this year */\n  @property({ type: String, attribute: 'to-date' })\n  toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */\n  @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false\n  @property({ type: String, attribute: 'time-scale' }) timeScale: TimeScale = 'week-day'\n  @property({ type: Array }) columnConfig: ColumnConfig[] = [\n    { name: 'id', label: i18next.t('label.gantt-task-id') || 'ID', visible: true, width: 50, order: 1 },\n    {\n      name: 'section',\n      label: i18next.t('label.gantt-task-section') || 'section',\n      visible: true,\n      width: 100,\n      order: 2\n    },\n    { name: 'title', label: i18next.t('label.gantt-task-title') || 'title', visible: true, width: 150, order: 3 },\n    { name: 'type', label: i18next.t('label.gantt-task-type') || 'type', visible: true, width: 100, order: 4 },\n    {\n      name: 'startDate',\n      label: i18next.t('label.gantt-task-start-date') || 'start date',\n      visible: true,\n      width: 100,\n      order: 5\n    },\n    {\n      name: 'endDate',\n      label: i18next.t('label.gantt-task-end-date') || 'end date',\n      visible: true,\n      width: 100,\n      order: 6\n    },\n    { name: 'tags', label: i18next.t('label.gantt-task-tags') || 'tags', visible: true, width: 100, order: 7 },\n    {\n      name: 'progress',\n      label: i18next.t('label.gantt-task-progress') || 'progress',\n      visible: true,\n      width: 100,\n      order: 8\n    },\n    {\n      name: 'dependsOn',\n      label: i18next.t('label.gantt-task-previous') || 'previous',\n      visible: true,\n      width: 100,\n      order: 9\n    },\n    {\n      name: 'resources',\n      label: i18next.t('label.gantt-task-resources') || 'resources',\n      visible: true,\n      width: 100,\n      order: 10\n    }\n  ]\n\n  @state() selectedTaskId?: string\n\n  @query('.task-container') taskContainer!: HTMLDivElement\n  @query('.task-table-container') taskTableContainer!: HTMLDivElement\n  @query('.resource-container') resourceContainer!: HTMLDivElement\n  @query('.resource-table-container') resourceTableContainer!: HTMLDivElement\n  @query('.task-table') taskTable!: HTMLTableElement\n  @query('ox-gantt-chart') ganttChart!: OxGanttChart\n  @query('ox-resource-chart') resourceChart!: OxResourceChart\n\n  private _startWidth: number = 0\n  private _startHeight: number = 0\n  private _isDragging: boolean = false\n\n  render() {\n    return html`\n      <div class=\"container md-typescale-body-medium\">\n        <div class=\"task-container\">\n          <div class=\"task-table-container\" @scroll=${this.syncScroll}>${this.renderTaskTable()}</div>\n          <ox-gantt-resize-splitter\n            vertical\n            @splitter-dragstart=${(e: CustomEvent) => this.resizeHorizontalStart(e)}\n            @splitter-drag=${(e: CustomEvent) => this.resizeHorizontalDrag(e)}\n            @splitter-dragend=${(e: CustomEvent) => this.resizeHorizontalEnd(e)}\n          ></ox-gantt-resize-splitter>\n          <ox-gantt-chart\n            class=\"task-chart-container\"\n            @scroll=${this.syncScroll}\n            .fromDate=${this.fromDate}\n            .toDate=${this.toDate}\n            .tasks=${this.tasks}\n            .selectedTaskId=${this.selectedTaskId}\n            .axisScale=${this.timeScale}\n            ?extend-grid-lines=${this.extendGridLines}\n            @task-clicked=${this.handleTaskClicked}\n            @timescale-changed=${(e: CustomEvent) => this.syncTimeScale(e)}\n          ></ox-gantt-chart>\n        </div>\n        <ox-gantt-resize-splitter\n          horizontal\n          @splitter-dragstart=${(e: CustomEvent) => this.resizeVerticalStart(e)}\n          @splitter-drag=${(e: CustomEvent) => this.resizeVerticalDrag(e)}\n          @splitter-dragend=${(e: CustomEvent) => this.resizeVerticalEnd(e)}\n        ></ox-gantt-resize-splitter>\n        <div class=\"resource-container\">\n          <div class=\"resource-table-container\" @scroll=${this.syncScroll}>\n            <table>\n              <thead>\n                <tr>\n                  <th style=\"width: 100px\">${i18next.t('label.gantt-resource-type')}</th>\n                  <th>${i18next.t('label.gantt-resource-allocated')}</th>\n                </tr>\n              </thead>\n              <tbody>\n                ${this.resources.map(resource => this.renderResourceRow(resource))}\n              </tbody>\n            </table>\n          </div>\n          <ox-gantt-resize-splitter\n            vertical\n            @splitter-dragstart=${(e: CustomEvent) => this.resizeHorizontalStart(e)}\n            @splitter-drag=${(e: CustomEvent) => this.resizeHorizontalDrag(e)}\n            @splitter-dragend=${(e: CustomEvent) => this.resizeHorizontalEnd(e)}\n          ></ox-gantt-resize-splitter>\n          <ox-resource-chart\n            class=\"resource-chart-container\"\n            .fromDate=${this.fromDate}\n            .toDate=${this.toDate}\n            .tasks=${this.tasks}\n            .resources=${this.resources}\n            .axisScale=${this.timeScale}\n            @scroll=${this.syncScroll}\n          ></ox-resource-chart>\n        </div>\n      </div>\n    `\n  }\n\n  renderTaskTable() {\n    if (!this.columnConfig) {\n      return\n    }\n\n    // Sort columns by the configured order\n    const sortedColumns = [...this.columnConfig].sort((a, b) => a.order - b.order)\n\n    return html`\n      <table class=\"task-table\">\n        <thead>\n          <tr>\n            ${sortedColumns.map(col =>\n              col.visible ? html`<th style=\"width: ${col.width}px\">${col.label}</th>` : nothing\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.renderTaskRows(this.tasks)}\n        </tbody>\n      </table>\n    `\n  }\n\n  renderTaskRows(tasks: Task[], level: number = 0): TemplateResult[] {\n    return tasks.flatMap(task => [\n      this.renderTaskRow(task, level),\n      ...this.renderTaskRows(task.children || [], level + 1)\n    ])\n  }\n\n  renderTaskRow(task: Task, level: number) {\n    return html`\n      <tr class=${this.selectedTaskId === task.id ? 'selected' : ''} @click=${() => this.selectTask(task.id)}>\n        ${this.columnConfig.map(col =>\n          col.visible\n            ? html`<td class=\"task-row\" style=\"padding-left: ${col.name == 'title' ? level * 8 + 4 : 4}px\">\n                ${this.getTaskFieldValue(task, col.name)}\n              </td>`\n            : null\n        )}\n      </tr>\n    `\n  }\n\n  renderResourceRow(resource: Resource) {\n    return html`\n      <tr>\n        <td>${resource.type}</td>\n        <td>${resource.allocated}</td>\n      </tr>\n    `\n  }\n\n  getTaskFieldValue(task: Task, field: string) {\n    switch (field) {\n      case 'id':\n        return task.id\n      case 'section':\n        return task.section?.name || ''\n      case 'title':\n        return task.title\n      case 'type':\n        return task.type\n      case 'startDate':\n        return new Date(task.startDate).toISOString().split('T')[0]\n      case 'endDate':\n        return new Date(task.endDate).toISOString().split('T')[0]\n      case 'tags':\n        return task.tags?.join(', ') || ''\n      case 'progress':\n        return task.progress || ''\n      case 'dependsOn':\n        return task.dependsOn || ''\n      case 'resources':\n        return task.resources?.map(res => `${res.type}: ${res.allocated}`).join(', ') || ''\n      default:\n        return ''\n    }\n  }\n\n  selectTask(taskId: string) {\n    this.selectedTaskId = taskId\n  }\n\n  handleTaskClicked(event: CustomEvent) {\n    this.selectedTaskId = event.detail.taskId\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    this.taskTableContainer.style.width = '254px'\n    this.resourceTableContainer.style.width = '254px'\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('tasks')) {\n      this.resources = this.aggregateResources(this.tasks)\n    }\n  }\n\n  aggregateResources(tasks: Task[]): Resource[] {\n    const resourceMap: { [key: string]: number } = {}\n\n    const traverseTasks = (tasks: Task[]) => {\n      tasks.forEach(task => {\n        if (task.resources) {\n          const startDate = new Date(task.startDate)\n          const endDate = new Date(task.endDate)\n          const durationDays = d3.timeDay.count(startDate, d3.timeDay.offset(endDate, 1))\n\n          task.resources.forEach(resource => {\n            const totalAllocation = resource.allocated * durationDays\n            if (!resourceMap[resource.type]) {\n              resourceMap[resource.type] = 0\n            }\n            resourceMap[resource.type] += totalAllocation\n            console.log(resource.type, resource.allocated, durationDays, totalAllocation)\n          })\n        }\n\n        if (task.children) {\n          traverseTasks(task.children)\n        }\n      })\n    }\n\n    traverseTasks(tasks)\n\n    return Object.keys(resourceMap).map(type => ({\n      type,\n      allocated: resourceMap[type]\n    }))\n  }\n\n  syncScroll(e: Event) {\n    const target = e.target as HTMLElement\n\n    if (target === this.taskTableContainer) {\n      const newScrollTop = this.taskTableContainer.scrollTop\n      this.ganttChart.setVerticalOffset(newScrollTop)\n\n      if (this.ganttChart.getVerticalOffset() !== newScrollTop) {\n        this.ganttChart.setVerticalOffset(newScrollTop)\n      }\n    } else if (target === this.ganttChart) {\n      const newScrollTop = this.ganttChart.getVerticalOffset()\n      this.taskTableContainer.scrollTop = newScrollTop\n      this.ganttChart.setVerticalOffset(this.taskTableContainer.scrollTop)\n\n      const newScrollLeft = this.ganttChart.getHorizontalOffset()\n      this.resourceChart.setHorizontalOffset(newScrollLeft)\n    } else if (target === this.resourceChart) {\n      const newScrollTop = this.ganttChart.getVerticalOffset()\n      this.resourceTableContainer.scrollTop = newScrollTop\n      this.resourceChart.setVerticalOffset(this.taskTableContainer.scrollTop)\n\n      const newScrollLeft = this.resourceChart.getHorizontalOffset()\n      this.ganttChart.setHorizontalOffset(newScrollLeft)\n    } else if (target === this.resourceTableContainer) {\n      const newScrollTop = this.taskTableContainer.scrollTop\n      this.resourceChart.setVerticalOffset(newScrollTop)\n\n      if (this.resourceChart.getVerticalOffset() !== newScrollTop) {\n        this.resourceChart.setVerticalOffset(newScrollTop)\n      }\n    }\n  }\n\n  syncTimeScale(e: CustomEvent) {\n    const detail = e.detail\n    this.resourceChart.syncTimeScale(detail)\n  }\n\n  resizeHorizontalStart(e: CustomEvent) {\n    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth\n    this._isDragging = true\n  }\n\n  resizeHorizontalDrag(e: CustomEvent) {\n    if (!this._isDragging) return\n    const delta = e.detail\n    this.taskTableContainer.style.width = `${this._startWidth + delta.x}px`\n    this.resourceTableContainer.style.width = `${this._startWidth + delta.x}px`\n  }\n\n  resizeHorizontalEnd(e: CustomEvent) {\n    this._isDragging = false\n  }\n\n  resizeVerticalStart(e: CustomEvent) {\n    this._startHeight = ((e.target as HTMLElement)?.nextElementSibling as HTMLElement)?.offsetHeight\n    this._isDragging = true\n  }\n\n  resizeVerticalDrag(e: CustomEvent) {\n    if (!this._isDragging) return\n    const delta = e.detail\n\n    this.resourceContainer.style.height = `${this._startHeight - delta.y}px`\n  }\n\n  resizeVerticalEnd(e: CustomEvent) {\n    this._isDragging = false\n  }\n}\n"]}

package/dist/src/ox-resource-chart.d.ts

@@ -0,0 +1,42 @@
+import { LitElement, PropertyValues } from 'lit';
+import * as d3 from 'd3';
+import { Task, TimeScale } from './types';
+export declare class OxResourceChart extends LitElement {
+    static styles: import("lit").CSSResult[];
+    fromDate: string;
+    toDate: string;
+    axisScale: string;
+    resources: any[];
+    tasks: Task[];
+    private timeScale;
+    private baseWidth;
+    private level;
+    private fromTime?;
+    private toTime?;
+    container: HTMLDivElement;
+    svgHeader: SVGSVGElement;
+    svgBody: SVGSVGElement;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+    updateTimeScale(): void;
+    getChartWidth(): number;
+    getScale(): number;
+    drawAxes(): void;
+    drawBody(): void;
+    renderResourceAllocations(body: d3.Selection<SVGSVGElement, unknown, null, undefined>, ticks: Date[]): void;
+    calculateResourceAllocations(ticks: Date[]): {
+        [key: string]: {
+            [key: string]: number;
+        };
+    };
+    getTickEnd(tick: Date): Date;
+    formatDateKey(start: Date, end: Date): string;
+    syncTimeScale(detail: {
+        baseWidth: number;
+        level: TimeScale;
+    }): void;
+    setVerticalOffset(offset: number): void;
+    getVerticalOffset(): number;
+    setHorizontalOffset(offset: number): void;
+    getHorizontalOffset(): number;
+}