@operato/gantt 7.0.20 → 7.0.22

package/src/ox-gantt.ts

@@ -1,13 +1,16 @@
-import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
+import { LitElement, html, css, PropertyValues, PropertyValueMap, nothing, TemplateResult } 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'
 import { OxGanttChart } from './ox-gantt-chart.js'
-import { ColumnConfig, Task, TimeScale } from './types.js'
+import { OxResourceChart } from './ox-resource-chart.js'
+import { ColumnConfig, Task, TimeScale, Resource } from './types.js'
 
 @customElement('ox-gantt')
 export class OxGantt extends LitElement {
@@ -23,13 +26,24 @@ export 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;
@@ -37,16 +51,34 @@ export 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));
+      }
+
+      .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));
       }
 
-      ox-gantt-resize-splitter {
-        width: 4px;
-        cursor: ew-resize;
+      .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 {
@@ -77,6 +109,7 @@ export class OxGantt extends LitElement {
       th {
         height: 40px;
         box-sizing: border-box;
+        text-align: center;
       }
 
       td {
@@ -91,6 +124,7 @@ export class OxGantt extends LitElement {
   ]
 
   @property({ type: Array }) tasks: Task[] = []
+  @property({ type: Array }) resources: Resource[] = []
   @property({ type: String, attribute: 'from-date' })
   fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0] /* beginning of this year */
   @property({ type: String, attribute: 'to-date' })
@@ -136,41 +170,90 @@ export 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
     }
   ]
 
   @state() selectedTaskId?: string
 
-  @query('.container') container!: HTMLDivElement
   @query('.task-container') taskContainer!: HTMLDivElement
-  @query('.chart-container') chartContainer!: HTMLDivElement
-  @query('table') taskTable!: HTMLTableElement
+  @query('.task-table-container') taskTableContainer!: HTMLDivElement
+  @query('.resource-container') resourceContainer!: HTMLDivElement
+  @query('.resource-table-container') resourceTableContainer!: HTMLDivElement
+  @query('.task-table') taskTable!: HTMLTableElement
   @query('ox-gantt-chart') ganttChart!: OxGanttChart
+  @query('ox-resource-chart') resourceChart!: OxResourceChart
 
   private _startWidth: number = 0
+  private _startHeight: number = 0
   private _isDragging: boolean = false
 
   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: CustomEvent) => this.resizeHorizontalStart(e)}
+            @splitter-drag=${(e: CustomEvent) => this.resizeHorizontalDrag(e)}
+            @splitter-dragend=${(e: CustomEvent) => 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: CustomEvent) => this.syncTimeScale(e)}
+          ></ox-gantt-chart>
+        </div>
         <ox-gantt-resize-splitter
-          vertical
-          @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-          @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-          @splitter-dragend=${(e: CustomEvent) => this.resizeEnd(e)}
+          horizontal
+          @splitter-dragstart=${(e: CustomEvent) => this.resizeVerticalStart(e)}
+          @splitter-drag=${(e: CustomEvent) => this.resizeVerticalDrag(e)}
+          @splitter-dragend=${(e: CustomEvent) => 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: CustomEvent) => this.resizeHorizontalStart(e)}
+            @splitter-drag=${(e: CustomEvent) => this.resizeHorizontalDrag(e)}
+            @splitter-dragend=${(e: CustomEvent) => 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>
     `
   }
@@ -180,42 +263,55 @@ export class OxGantt extends LitElement {
       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
+              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: Task[], level: number = 0): TemplateResult[] {
+    return tasks.flatMap(task => [
+      this.renderTaskRow(task, level),
+      ...this.renderTaskRows(task.children || [], level + 1)
+    ])
+  }
+
+  renderTaskRow(task: Task, level: number) {
+    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: Resource) {
+    return html`
+      <tr>
+        <td>${resource.type}</td>
+        <td>${resource.allocated}</td>
+      </tr>
+    `
+  }
+
   getTaskFieldValue(task: Task, field: string) {
     switch (field) {
       case 'id':
@@ -236,34 +332,13 @@ export 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: Task[]): Array<{ task: Task; showSection: boolean; rowSpan: number }> {
-    const mergedTasks = [] as Array<{ task: Task; showSection: boolean; rowSpan: number }>
-    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: string) {
     this.selectedTaskId = taskId
   }
@@ -273,48 +348,118 @@ export class OxGantt extends LitElement {
   }
 
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-    this.taskContainer.style.width = '254px'
+    this.taskTableContainer.style.width = '254px'
+    this.resourceTableContainer.style.width = '254px'
+  }
+
+  updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('tasks')) {
+      this.resources = this.aggregateResources(this.tasks)
+    }
   }
 
-  updated(changes: PropertyValues<this>) {}
+  aggregateResources(tasks: Task[]): Resource[] {
+    const resourceMap: { [key: string]: number } = {}
+
+    const traverseTasks = (tasks: Task[]) => {
+      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]
+    }))
+  }
 
   syncScroll(e: Event) {
     const target = e.target as HTMLElement
-    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
+      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)
 
-      // Ensure table scroll matches chart scroll
-      this.ganttChart.setVerticalOffset(this.taskContainer.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: CustomEvent) {
+  syncTimeScale(e: CustomEvent) {
+    const detail = e.detail
+    this.resourceChart.syncTimeScale(detail)
+  }
+
+  resizeHorizontalStart(e: CustomEvent) {
     this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth
     this._isDragging = true
   }
 
-  resizeDrag(e: CustomEvent) {
+  resizeHorizontalDrag(e: CustomEvent) {
     if (!this._isDragging) return
     const delta = e.detail
-    const taskContainer = this.taskContainer
+    this.taskTableContainer.style.width = `${this._startWidth + delta.x}px`
+    this.resourceTableContainer.style.width = `${this._startWidth + delta.x}px`
+  }
 
-    if (taskContainer) {
-      taskContainer.style.width = `${this._startWidth + delta.x}px`
-    }
+  resizeHorizontalEnd(e: CustomEvent) {
+    this._isDragging = false
+  }
+
+  resizeVerticalStart(e: CustomEvent) {
+    this._startHeight = ((e.target as HTMLElement)?.nextElementSibling as HTMLElement)?.offsetHeight
+    this._isDragging = true
+  }
+
+  resizeVerticalDrag(e: CustomEvent) {
+    if (!this._isDragging) return
+    const delta = e.detail
+
+    this.resourceContainer.style.height = `${this._startHeight - delta.y}px`
   }
 
-  resizeEnd(e: CustomEvent) {
+  resizeVerticalEnd(e: CustomEvent) {
     this._isDragging = false
   }
 }