@operato/gantt 7.0.21 → 7.0.22

package/src/ox-gantt-chart.ts

@@ -154,6 +154,14 @@ export class OxGanttChart extends LitElement {
     return this.container.scrollTop
   }
 
+  setHorizontalOffset(offset: number) {
+    this.container.scrollLeft = offset
+  }
+
+  getHorizontalOffset(): number {
+    return this.container.scrollLeft
+  }
+
   handleWheelForHeader(event: WheelEvent) {
     event.preventDefault()
     event.stopPropagation()
@@ -185,6 +193,17 @@ export class OxGanttChart extends LitElement {
 
       this.ganttChartController.updateTimeScale()
       this.requestUpdate()
+
+      // Dispatch custom event to sync with ox-resource-chart
+      const customEvent = new CustomEvent('timescale-changed', {
+        detail: {
+          baseWidth: this.ganttChartController.baseWidth,
+          level: this.ganttChartController.level
+        },
+        bubbles: true,
+        composed: true
+      })
+      this.dispatchEvent(customEvent)
     }
   }
 
@@ -248,6 +267,17 @@ export class OxGanttChart extends LitElement {
         lastTouchDistance = currentDistance
         this.ganttChartController.updateTimeScale()
         this.requestUpdate()
+
+        // Dispatch custom event to sync with ox-resource-chart
+        const customEvent = new CustomEvent('timescale-changed', {
+          detail: {
+            baseWidth: this.ganttChartController.baseWidth,
+            level: this.ganttChartController.level
+          },
+          bubbles: true,
+          composed: true
+        })
+        this.dispatchEvent(customEvent)
       } else if (isDragging && startX !== null) {
         const touch = event.touches[0]
         const containerOffsetX = header.node()!.getBoundingClientRect().left

package/src/ox-gantt.ts

@@ -1,4 +1,5 @@
 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'
@@ -108,6 +109,7 @@ export class OxGantt extends LitElement {
       th {
         height: 40px;
         box-sizing: border-box;
+        text-align: center;
       }
 
       td {
@@ -182,11 +184,9 @@ export class OxGantt extends LitElement {
 
   @query('.task-container') taskContainer!: 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('.task-table') taskTable!: HTMLTableElement
   @query('ox-gantt-chart') ganttChart!: OxGanttChart
   @query('ox-resource-chart') resourceChart!: OxResourceChart
 
@@ -207,10 +207,7 @@ export class OxGantt extends LitElement {
           ></ox-gantt-resize-splitter>
           <ox-gantt-chart
             class="task-chart-container"
-            @scroll=${(e: CustomEvent) => {
-              this.syncScroll(e)
-              this.syncResourceChartScroll(e)
-            }}
+            @scroll=${this.syncScroll}
             .fromDate=${this.fromDate}
             .toDate=${this.toDate}
             .tasks=${this.tasks}
@@ -218,6 +215,7 @@ export class OxGantt extends LitElement {
             .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
@@ -227,12 +225,12 @@ export class OxGantt extends LitElement {
           @splitter-dragend=${(e: CustomEvent) => this.resizeVerticalEnd(e)}
         ></ox-gantt-resize-splitter>
         <div class="resource-container">
-          <div class="resource-table-container">
+          <div class="resource-table-container" @scroll=${this.syncScroll}>
             <table>
               <thead>
                 <tr>
-                  <th style="width: 100px">type</th>
-                  <th>allocated</th>
+                  <th style="width: 100px">${i18next.t('label.gantt-resource-type')}</th>
+                  <th>${i18next.t('label.gantt-resource-allocated')}</th>
                 </tr>
               </thead>
               <tbody>
@@ -250,9 +248,10 @@ export class OxGantt extends LitElement {
             class="resource-chart-container"
             .fromDate=${this.fromDate}
             .toDate=${this.toDate}
+            .tasks=${this.tasks}
             .resources=${this.resources}
             .axisScale=${this.timeScale}
-            @scroll=${this.syncTaskChartScroll}
+            @scroll=${this.syncScroll}
           ></ox-resource-chart>
         </div>
       </div>
@@ -268,7 +267,7 @@ export class OxGantt extends LitElement {
     const sortedColumns = [...this.columnConfig].sort((a, b) => a.order - b.order)
 
     return html`
-      <table>
+      <table class="task-table">
         <thead>
           <tr>
             ${sortedColumns.map(col =>
@@ -295,7 +294,7 @@ export class OxGantt extends LitElement {
       <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">
+            ? html`<td class="task-row" style="padding-left: ${col.name == 'title' ? level * 8 + 4 : 4}px">
                 ${this.getTaskFieldValue(task, col.name)}
               </td>`
             : null
@@ -365,13 +364,20 @@ export class OxGantt extends LitElement {
     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] += resource.allocated
+            resourceMap[resource.type] += totalAllocation
+            console.log(resource.type, resource.allocated, durationDays, totalAllocation)
           })
         }
+
         if (task.children) {
           traverseTasks(task.children)
         }
@@ -388,31 +394,41 @@ export class OxGantt extends LitElement {
 
   syncScroll(e: Event) {
     const target = e.target as HTMLElement
+
     if (target === this.taskTableContainer) {
-      // Sync chart scroll with table scroll
       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.taskTableContainer.scrollTop = newScrollTop
-
-      // Ensure table scroll matches chart scroll
       this.ganttChart.setVerticalOffset(this.taskTableContainer.scrollTop)
-    }
-  }
 
-  syncResourceChartScroll(e: CustomEvent) {
-    this.resourceChart.renderRoot!.querySelector('div[chart-container]')!.scrollLeft = e.detail.offset
+      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)
+      }
+    }
   }
 
-  syncTaskChartScroll(e: CustomEvent) {
-    this.ganttChart.renderRoot!.querySelector('div[chart-container]')!.scrollLeft = e.detail.offset
+  syncTimeScale(e: CustomEvent) {
+    const detail = e.detail
+    this.resourceChart.syncTimeScale(detail)
   }
 
   resizeHorizontalStart(e: CustomEvent) {

package/src/ox-resource-chart.ts

@@ -1,9 +1,12 @@
 import { LitElement, html, css, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 import * as d3 from 'd3'
 
 import { ScrollbarStyles } from '@operato/styles'
 
+import { drawTimeScaleHeader } from './draw-time-scale-header'
+import { Task, TimeScale } from './types'
+
 @customElement('ox-resource-chart')
 export class OxResourceChart extends LitElement {
   static styles = [
@@ -14,14 +17,15 @@ export class OxResourceChart extends LitElement {
         overflow: hidden;
         position: relative;
       }
+
       div[chart-container] {
-        display: block;
+        display: flex;
+        flex-direction: column;
+
         overflow-x: auto;
-        overflow-y: hidden;
-      }
-      svg {
-        min-width: 100%;
+        overflow-y: auto;
       }
+
       svg[header] {
         display: block;
         min-width: 100%;
@@ -34,23 +38,30 @@ export class OxResourceChart extends LitElement {
         top: 0;
         z-index: 1;
       }
+
       svg[body] {
+        flex: 1;
         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);
@@ -62,10 +73,17 @@ export class OxResourceChart extends LitElement {
   @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[] = []
+  @property({ type: Array }) tasks: Task[] = []
 
-  private _timeScale: any
-  private _baseWidth: number = 30
-  private _level: string = 'week-day'
+  private timeScale: any
+  private baseWidth: number = 30
+  private level: TimeScale = 'week-day'
+  private fromTime?: Date
+  private toTime?: Date
+
+  @query('[chart-container') container!: HTMLDivElement
+  @query('svg[header]') svgHeader!: SVGSVGElement
+  @query('svg[body]') svgBody!: SVGSVGElement
 
   render() {
     return html`
@@ -81,7 +99,7 @@ export class OxResourceChart extends LitElement {
       this.updateTimeScale()
     }
 
-    if (changedProperties.has('resources')) {
+    if (changedProperties.has('resources') || changedProperties.has('tasks')) {
       this.drawBody()
     }
 
@@ -89,7 +107,10 @@ export class OxResourceChart extends LitElement {
   }
 
   updateTimeScale() {
-    this._timeScale = d3
+    this.fromTime = new Date(this.fromDate)
+    this.toTime = new Date(this.toDate)
+
+    this.timeScale = d3
       .scaleTime()
       .domain([d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1)])
       .range([0, this.getChartWidth()])
@@ -97,50 +118,42 @@ export class OxResourceChart extends LitElement {
 
   getChartWidth() {
     const totalDays = d3.timeDay.count(new Date(this.fromDate), d3.timeDay.offset(new Date(this.toDate), 1))
-    return (totalDays * this._baseWidth) / this.getScale()
+    return (totalDays * this.baseWidth) / this.getScale()
   }
 
   getScale() {
-    if (this._level == 'quarter-week') {
+    if (this.level == 'quarter-week') {
       return 7 / 2
-    } else if (this._level == 'year-month') {
+    } else if (this.level == 'year-month') {
       return 30 / 2
-    } else if (this._level == 'year-quarter') {
+    } 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)
+    drawTimeScaleHeader(this.svgHeader as any, this.timeScale, this.fromTime!, this.toTime!, this.baseWidth, this.level)
   }
 
   drawBody() {
-    const body = d3.select(this.renderRoot.querySelector('svg[body]')!)
+    const body = d3.select(this.svgBody)
 
     body.selectAll('*').remove()
     body.attr('width', this.getChartWidth())
 
-    // Add grid lines for resource chart
     if (this.resources.length > 0) {
+      const chartHeight = this.resources.length * 30
+
       const addVerticalGridLines = (ticks: Date[]) => {
         ticks.forEach(tick => {
-          const startX = this._timeScale(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('y2', chartHeight) // Ensure vertical lines extend to the bottom
             .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
             .attr('stroke-width', 1)
         })
@@ -158,35 +171,158 @@ export class OxResourceChart extends LitElement {
             .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
             .attr('stroke-width', 1)
         })
+
+        // Ensure the last horizontal line extends to the bottom of the chart
+        body
+          .append('line')
+          .attr('x1', 0)
+          .attr('x2', this.getChartWidth())
+          .attr('y1', chartHeight)
+          .attr('y2', chartHeight)
+          .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
+      let ticks
+      if (this.level === 'week-day') {
+        ticks = 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
+      } else if (this.level === 'quarter-week') {
+        ticks = 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
+      } else if (this.level === 'year-month') {
+        ticks = 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
+      } else if (this.level === 'year-quarter') {
+        ticks = d3.timeMonth
           .every(3)!
           .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 3))
-        addVerticalGridLines(quarterTicks)
       }
 
+      addVerticalGridLines(ticks!)
       addHorizontalGridLines()
+
+      // Render the resource allocations
+      this.renderResourceAllocations(body, ticks!)
     }
   }
 
-  syncScroll(e: CustomEvent) {
-    this.shadowRoot!.querySelector('div[chart-container]')!.scrollLeft = e.detail.offset
+  renderResourceAllocations(body: d3.Selection<SVGSVGElement, unknown, null, undefined>, ticks: Date[]) {
+    const resourceAllocations = this.calculateResourceAllocations(ticks)
+
+    this.resources.forEach((resource, index) => {
+      const y = index * 30 + 15 // Center the text vertically in the row
+      ticks.forEach(tick => {
+        const tickEnd = this.getTickEnd(tick)
+        const dateKey = this.formatDateKey(tick, tickEnd)
+        const allocation = resourceAllocations[resource.type][dateKey]
+        if (allocation > 0) {
+          const startX = this.timeScale(tick)
+          const tickInterval = this.timeScale(tickEnd) - startX
+
+          body
+            .append('text')
+            .attr('x', startX + tickInterval / 2)
+            .attr('y', y)
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .text(allocation)
+            .style('font-size', '12px')
+        }
+      })
+    })
+  }
+
+  calculateResourceAllocations(ticks: Date[]) {
+    const resourceAllocations: { [key: string]: { [key: string]: number } } = {}
+
+    // Initialize the resourceAllocations object
+    this.resources.forEach(resource => {
+      resourceAllocations[resource.type] = {}
+      ticks.forEach(tick => {
+        const tickEnd = this.getTickEnd(tick)
+        const dateKey = this.formatDateKey(tick, tickEnd)
+        resourceAllocations[resource.type][dateKey] = 0
+      })
+    })
+
+    // Function to process tasks recursively
+    const processTask = (task: Task) => {
+      const startDate = new Date(task.startDate)
+      const endDate = new Date(task.endDate)
+      let currentDate = startDate
+
+      while (currentDate <= endDate) {
+        const tick = ticks.find(t => currentDate >= t && currentDate < this.getTickEnd(t))
+        if (tick) {
+          const tickEnd = this.getTickEnd(tick)
+          const dateKey = this.formatDateKey(tick, tickEnd)
+
+          ;(task.resources || []).forEach(resource => {
+            if (resourceAllocations[resource.type][dateKey] !== undefined) {
+              resourceAllocations[resource.type][dateKey] += resource.allocated
+            }
+          })
+        }
+
+        currentDate.setDate(currentDate.getDate() + 1)
+      }
+
+      // Recursively process child tasks
+      if (task.children) {
+        task.children.forEach(childTask => processTask(childTask))
+      }
+    }
+
+    // Process all tasks
+    this.tasks.forEach(task => processTask(task))
+
+    return resourceAllocations
+  }
+
+  getTickEnd(tick: Date) {
+    if (this.level === 'week-day') {
+      return d3.timeDay.offset(tick, 1)
+    } else if (this.level === 'quarter-week') {
+      return d3.timeWeek.offset(tick, 1)
+    } else if (this.level === 'year-month') {
+      return d3.timeMonth.offset(tick, 1)
+    } else if (this.level === 'year-quarter') {
+      return d3.timeMonth.offset(tick, 3)
+    }
+    return d3.timeDay.offset(tick, 1)
+  }
+
+  formatDateKey(start: Date, end: Date) {
+    return `${start.toISOString().split('T')[0]}_${end.toISOString().split('T')[0]}`
+  }
+
+  syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {
+    this.baseWidth = detail.baseWidth
+    this.level = detail.level
+
+    this.updateTimeScale()
+    this.drawAxes()
+    this.drawBody()
+  }
+
+  setVerticalOffset(offset: number) {
+    this.container.scrollTop = offset
+  }
+
+  getVerticalOffset(): number {
+    return this.container.scrollTop
+  }
+
+  setHorizontalOffset(offset: number) {
+    this.container.scrollLeft = offset
+  }
+
+  getHorizontalOffset(): number {
+    return this.container.scrollLeft
   }
 }

package/stories/ox-gantt.stories.ts

@@ -78,8 +78,8 @@ const Template: Story<ArgTypes> = ({
     }
 
     ox-gantt {
-      width: 90%;
-      height: 500px;
+      width: 100%;
+      height: 800px;
       box-sizing: border-box;
 
       background-color: var(--md-sys-color-primary-container);
@@ -182,8 +182,8 @@ Regular.args = {
               progress: 60,
               dependsOn: '',
               length: '4d',
-              tags: ['done'],
-              resources: [{ type: '창호공', allocated: 6 }],
+              tags: ['active'],
+              resources: [{ type: '창호공', allocated: 5 }],
               children: []
             },
             {
@@ -196,7 +196,7 @@ Regular.args = {
               dependsOn: '3-1-1',
               length: '5d',
               tags: ['active'],
-              resources: [{ type: '창호공', allocated: 6 }],
+              resources: [{ type: '창호공', allocated: 3 }],
               children: []
             }
           ]
@@ -227,7 +227,7 @@ Regular.args = {
       dependsOn: '1',
       length: '1d',
       tags: ['done'],
-      resources: [{ type: '방수공', allocated: 6 }],
+      resources: [{ type: '방수공', allocated: 5 }],
       children: []
     },
     {
@@ -240,7 +240,7 @@ Regular.args = {
       dependsOn: '4',
       length: '1d',
       tags: ['milestone'],
-      resources: [{ type: '목공', allocated: 6 }],
+      resources: [{ type: '목공', allocated: 3 }],
       children: []
     },
     {
@@ -253,7 +253,7 @@ Regular.args = {
       dependsOn: '5',
       length: '1d',
       tags: ['milestone'],
-      resources: [{ type: '금속공', allocated: 6 }],
+      resources: [{ type: '금속공', allocated: 1 }],
       children: []
     },
     {
@@ -279,7 +279,7 @@ Regular.args = {
       dependsOn: '7',
       length: '1d',
       tags: ['critical'],
-      resources: [{ type: '창호공', allocated: 6 }],
+      resources: [{ type: '창호공', allocated: 7 }],
       children: []
     },
     {
@@ -292,7 +292,7 @@ Regular.args = {
       dependsOn: '8',
       length: '1d',
       tags: ['active'],
-      resources: [{ type: '도배공', allocated: 6 }],
+      resources: [{ type: '도배공', allocated: 8 }],
       children: []
     },
     {
@@ -318,6 +318,7 @@ Regular.args = {
       dependsOn: '9',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '철근/형틀공', allocated: 6 }],
       children: []
     },
     {
@@ -329,6 +330,7 @@ Regular.args = {
       endDate: '2023-01-23',
       dependsOn: '9',
       length: '1d',
+      resources: [{ type: '방수공', allocated: 6 }],
       tags: ['milestone'],
       children: [
         {
@@ -342,6 +344,7 @@ Regular.args = {
           dependsOn: '',
           length: '4d',
           tags: ['done'],
+          resources: [{ type: '방수공', allocated: 6 }],
           children: []
         },
         {
@@ -354,6 +357,7 @@ Regular.args = {
           dependsOn: '12-1',
           length: '5d',
           tags: ['active'],
+          resources: [{ type: '조적공', allocated: 6 }],
           children: []
         }
       ]
@@ -380,6 +384,7 @@ Regular.args = {
       dependsOn: '13',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '금속공', allocated: 1 }],
       children: []
     },
     {
@@ -403,6 +408,7 @@ Regular.args = {
       endDate: '2023-02-05',
       dependsOn: '15',
       length: '1d',
+      resources: [{ type: '창호공', allocated: 1 }],
       tags: ['active'],
       children: []
     },
@@ -440,6 +446,7 @@ Regular.args = {
       dependsOn: '18',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '창호공', allocated: 7 }],
       children: []
     }
   ]

package/translations/en.json

@@ -8,5 +8,7 @@
   "label.gantt-task-tags": "tags",
   "label.gantt-task-progress": "progress",
   "label.gantt-task-previous": "previous",
-  "label.gantt-task-resources": "resources"
+  "label.gantt-task-resources": "resources",
+  "label.gantt-resource-type": "type",
+  "label.gantt-resource-allocated": "allocated"
 }