@operato/gantt 7.0.8 → 7.0.21

package/src/ox-gantt.ts

@@ -1,13 +1,15 @@
-import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
+import { LitElement, html, css, PropertyValues, PropertyValueMap, nothing, TemplateResult } from 'lit'
 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 +25,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 +50,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));
       }
 
-      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 {
@@ -91,6 +122,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 +168,93 @@ 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('.task-table-container') taskTableContainer!: HTMLDivElement
+  @query('.task-chart-container') taskChartContainer!: HTMLDivElement
+  @query('.resource-container') resourceContainer!: HTMLDivElement
+  @query('.resource-table-container') resourceTableContainer!: HTMLDivElement
+  @query('.resource-chart-container') resourceChartContainer!: HTMLDivElement
   @query('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=${(e: CustomEvent) => {
+              this.syncScroll(e)
+              this.syncResourceChartScroll(e)
+            }}
+            .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>
         <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">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 100px">type</th>
+                  <th>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}
+            .resources=${this.resources}
+            .axisScale=${this.timeScale}
+            @scroll=${this.syncTaskChartScroll}
+          ></ox-resource-chart>
+        </div>
       </div>
     `
   }
@@ -180,8 +264,6 @@ 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)
 
@@ -190,32 +272,47 @@ export class OxGantt extends LitElement {
         <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 == 'id' ? level * 20 : 0}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 +333,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,16 +349,48 @@ 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) {
+          task.resources.forEach(resource => {
+            if (!resourceMap[resource.type]) {
+              resourceMap[resource.type] = 0
+            }
+            resourceMap[resource.type] += resource.allocated
+          })
+        }
+        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) {
+    if (target === this.taskTableContainer) {
       // Sync chart scroll with table scroll
-      const newScrollTop = this.taskContainer.scrollTop
+      const newScrollTop = this.taskTableContainer.scrollTop
       this.ganttChart.setVerticalOffset(newScrollTop)
 
       // Ensure chart scroll matches table scroll
@@ -292,29 +400,50 @@ export class OxGantt extends LitElement {
     } else if (target === this.ganttChart) {
       // Sync table scroll with chart scroll
       const newScrollTop = this.ganttChart.getVerticalOffset()
-      this.taskContainer.scrollTop = newScrollTop
+      this.taskTableContainer.scrollTop = newScrollTop
 
       // Ensure table scroll matches chart scroll
-      this.ganttChart.setVerticalOffset(this.taskContainer.scrollTop)
+      this.ganttChart.setVerticalOffset(this.taskTableContainer.scrollTop)
     }
   }
 
-  resizeStart(e: CustomEvent) {
+  syncResourceChartScroll(e: CustomEvent) {
+    this.resourceChart.renderRoot!.querySelector('div[chart-container]')!.scrollLeft = e.detail.offset
+  }
+
+  syncTaskChartScroll(e: CustomEvent) {
+    this.ganttChart.renderRoot!.querySelector('div[chart-container]')!.scrollLeft = e.detail.offset
+  }
+
+  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
   }
 }

package/src/ox-resource-chart.ts

@@ -0,0 +1,192 @@
+import { LitElement, html, css, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import * as d3 from 'd3'
+
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('ox-resource-chart')
+export class OxResourceChart extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        overflow: hidden;
+        position: relative;
+      }
+      div[chart-container] {
+        display: block;
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+      svg {
+        min-width: 100%;
+      }
+      svg[header] {
+        display: block;
+        min-width: 100%;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-on-secondary-container));
+        height: 40px;
+        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
+        color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+      svg[body] {
+        display: block;
+        min-width: 100%;
+      }
+      .top-axis text,
+      .bottom-axis text {
+        font-size: 12px;
+      }
+      .grid line {
+        stroke: #e0e0e0;
+      }
+      .grid path {
+        stroke-width: 0;
+      }
+      .no-select {
+        user-select: none;
+      }
+      .selected {
+        stroke-width: 2px;
+        stroke: var(--ox-gantt-selected-color, blue);
+      }
+    `
+  ]
+
+  @property({ type: String }) fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]
+  @property({ type: String }) toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]
+  @property({ type: String }) axisScale: string = 'week-day'
+  @property({ type: Array }) resources: any[] = []
+
+  private _timeScale: any
+  private _baseWidth: number = 30
+  private _level: string = 'week-day'
+
+  render() {
+    return html`
+      <div chart-container>
+        <svg header></svg>
+        <svg body></svg>
+      </div>
+    `
+  }
+
+  updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('fromDate') || changedProperties.has('toDate') || changedProperties.has('axisScale')) {
+      this.updateTimeScale()
+    }
+
+    if (changedProperties.has('resources')) {
+      this.drawBody()
+    }
+
+    this.drawAxes()
+  }
+
+  updateTimeScale() {
+    this._timeScale = d3
+      .scaleTime()
+      .domain([d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1)])
+      .range([0, this.getChartWidth()])
+  }
+
+  getChartWidth() {
+    const totalDays = d3.timeDay.count(new Date(this.fromDate), d3.timeDay.offset(new Date(this.toDate), 1))
+    return (totalDays * this._baseWidth) / this.getScale()
+  }
+
+  getScale() {
+    if (this._level == 'quarter-week') {
+      return 7 / 2
+    } else if (this._level == 'year-month') {
+      return 30 / 2
+    } else if (this._level == 'year-quarter') {
+      return 90 / 2
+    }
+    return 1
+  }
+
+  drawAxes() {
+    const header = d3.select(this.renderRoot.querySelector('svg[header]')!)
+
+    header.selectAll('*').remove()
+    header.attr('width', this.getChartWidth())
+
+    const axisTop = d3.axisTop(this._timeScale).tickSize(-20)
+    const axisBottom = d3.axisBottom(this._timeScale).tickSize(-20)
+
+    header.append('g').attr('class', 'top-axis').attr('transform', 'translate(0, 20)').call(axisTop)
+    header.append('g').attr('class', 'bottom-axis').attr('transform', 'translate(0, 40)').call(axisBottom)
+  }
+
+  drawBody() {
+    const body = d3.select(this.renderRoot.querySelector('svg[body]')!)
+
+    body.selectAll('*').remove()
+    body.attr('width', this.getChartWidth())
+
+    // Add grid lines for resource chart
+    if (this.resources.length > 0) {
+      const addVerticalGridLines = (ticks: Date[]) => {
+        ticks.forEach(tick => {
+          const startX = this._timeScale(tick)
+          body
+            .append('line')
+            .attr('x1', startX)
+            .attr('x2', startX)
+            .attr('y1', 0)
+            .attr('y2', this.resources.length * 30) // Adjust according to the number of resource rows
+            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
+            .attr('stroke-width', 1)
+        })
+      }
+
+      const addHorizontalGridLines = () => {
+        this.resources.forEach((_, index) => {
+          const y = (index + 1) * 30
+          body
+            .append('line')
+            .attr('x1', 0)
+            .attr('x2', this.getChartWidth())
+            .attr('y1', y)
+            .attr('y2', y)
+            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
+            .attr('stroke-width', 1)
+        })
+      }
+
+      if (this._level === 'week-day') {
+        const dayTicks = d3.timeDay
+          .every(1)!
+          .range(d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1))
+        addVerticalGridLines(dayTicks)
+      } else if (this._level === 'quarter-week') {
+        const weekTicks = d3.timeWeek
+          .every(1)!
+          .range(d3.timeWeek.floor(new Date(this.fromDate)), d3.timeWeek.offset(new Date(this.toDate), 1))
+        addVerticalGridLines(weekTicks)
+      } else if (this._level === 'year-month') {
+        const monthTicks = d3.timeMonth
+          .every(1)!
+          .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 1))
+        addVerticalGridLines(monthTicks)
+      } else if (this._level === 'year-quarter') {
+        const quarterTicks = d3.timeMonth
+          .every(3)!
+          .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 3))
+        addVerticalGridLines(quarterTicks)
+      }
+
+      addHorizontalGridLines()
+    }
+  }
+
+  syncScroll(e: CustomEvent) {
+    this.shadowRoot!.querySelector('div[chart-container]')!.scrollLeft = e.detail.offset
+  }
+}

package/src/types.ts

@@ -13,6 +13,7 @@ export interface Task {
   length: string
   tags?: TaskTag[]
   children?: Task[]
+  resources?: Resource[]
 }
 
 export interface Section {
@@ -28,3 +29,8 @@ export interface ColumnConfig {
 }
 
 export type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'
+
+export interface Resource {
+  type: string
+  allocated: number
+}