@operato/gantt 7.0.20 → 7.0.22

package/src/ox-resource-chart.ts

@@ -0,0 +1,328 @@
+import { LitElement, html, css, PropertyValues } from 'lit'
+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 = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        overflow: hidden;
+        position: relative;
+      }
+
+      div[chart-container] {
+        display: flex;
+        flex-direction: column;
+
+        overflow-x: auto;
+        overflow-y: auto;
+      }
+
+      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] {
+        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);
+      }
+    `
+  ]
+
+  @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[] = []
+  @property({ type: Array }) tasks: Task[] = []
+
+  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`
+      <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') || changedProperties.has('tasks')) {
+      this.drawBody()
+    }
+
+    this.drawAxes()
+  }
+
+  updateTimeScale() {
+    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()])
+  }
+
+  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() {
+    drawTimeScaleHeader(this.svgHeader as any, this.timeScale, this.fromTime!, this.toTime!, this.baseWidth, this.level)
+  }
+
+  drawBody() {
+    const body = d3.select(this.svgBody)
+
+    body.selectAll('*').remove()
+    body.attr('width', this.getChartWidth())
+
+    if (this.resources.length > 0) {
+      const chartHeight = this.resources.length * 30
+
+      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', chartHeight) // Ensure vertical lines extend to the bottom
+            .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)
+        })
+
+        // 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)
+      }
+
+      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))
+      } 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))
+      } 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))
+      } 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(ticks!)
+      addHorizontalGridLines()
+
+      // Render the resource allocations
+      this.renderResourceAllocations(body, ticks!)
+    }
+  }
+
+  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/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
+}

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);
@@ -131,6 +131,7 @@ Regular.args = {
       dependsOn: '',
       length: '5d',
       tags: ['active'],
+      resources: [{ type: '철근/형틀공', allocated: 6 }],
       children: []
     },
     {
@@ -144,6 +145,7 @@ Regular.args = {
       dependsOn: '1',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '철근/형틀공', allocated: 6 }],
       children: []
     },
     {
@@ -169,7 +171,35 @@ Regular.args = {
           dependsOn: '',
           length: '4d',
           tags: ['done'],
-          children: []
+          children: [
+            {
+              id: '3-1-1',
+              title: 'Coding-A',
+              type: 'task',
+              // section: developmentSection,
+              startDate: '2023-01-07',
+              endDate: '2023-01-10',
+              progress: 60,
+              dependsOn: '',
+              length: '4d',
+              tags: ['active'],
+              resources: [{ type: '창호공', allocated: 5 }],
+              children: []
+            },
+            {
+              id: '3-1-2',
+              title: 'Coding-B',
+              type: 'task',
+              // section: developmentSection,
+              startDate: '2023-01-11',
+              endDate: '2023-01-15',
+              dependsOn: '3-1-1',
+              length: '5d',
+              tags: ['active'],
+              resources: [{ type: '창호공', allocated: 3 }],
+              children: []
+            }
+          ]
         },
         {
           id: '3-2',
@@ -181,6 +211,7 @@ Regular.args = {
           dependsOn: '3-1',
           length: '5d',
           tags: ['active'],
+          resources: [{ type: '창호공', allocated: 6 }],
           children: []
         }
       ]
@@ -196,6 +227,7 @@ Regular.args = {
       dependsOn: '1',
       length: '1d',
       tags: ['done'],
+      resources: [{ type: '방수공', allocated: 5 }],
       children: []
     },
     {
@@ -208,6 +240,7 @@ Regular.args = {
       dependsOn: '4',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '목공', allocated: 3 }],
       children: []
     },
     {
@@ -220,6 +253,7 @@ Regular.args = {
       dependsOn: '5',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '금속공', allocated: 1 }],
       children: []
     },
     {
@@ -232,6 +266,7 @@ Regular.args = {
       dependsOn: '6',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '타일공', allocated: 6 }],
       children: []
     },
     {
@@ -244,6 +279,7 @@ Regular.args = {
       dependsOn: '7',
       length: '1d',
       tags: ['critical'],
+      resources: [{ type: '창호공', allocated: 7 }],
       children: []
     },
     {
@@ -256,6 +292,7 @@ Regular.args = {
       dependsOn: '8',
       length: '1d',
       tags: ['active'],
+      resources: [{ type: '도배공', allocated: 8 }],
       children: []
     },
     {
@@ -268,6 +305,7 @@ Regular.args = {
       dependsOn: '9',
       length: '1d',
       tags: ['critical'],
+      resources: [{ type: '조적공', allocated: 6 }],
       children: []
     },
     {
@@ -280,6 +318,7 @@ Regular.args = {
       dependsOn: '9',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '철근/형틀공', allocated: 6 }],
       children: []
     },
     {
@@ -291,8 +330,37 @@ Regular.args = {
       endDate: '2023-01-23',
       dependsOn: '9',
       length: '1d',
+      resources: [{ type: '방수공', allocated: 6 }],
       tags: ['milestone'],
-      children: []
+      children: [
+        {
+          id: '12-1',
+          title: 'Coding-A',
+          type: 'task',
+          // section: developmentSection,
+          startDate: '2023-01-07',
+          endDate: '2023-01-10',
+          progress: 60,
+          dependsOn: '',
+          length: '4d',
+          tags: ['done'],
+          resources: [{ type: '방수공', allocated: 6 }],
+          children: []
+        },
+        {
+          id: '12-2',
+          title: 'Coding-B',
+          type: 'task',
+          // section: developmentSection,
+          startDate: '2023-01-11',
+          endDate: '2023-01-15',
+          dependsOn: '12-1',
+          length: '5d',
+          tags: ['active'],
+          resources: [{ type: '조적공', allocated: 6 }],
+          children: []
+        }
+      ]
     },
     {
       id: '13',
@@ -316,6 +384,7 @@ Regular.args = {
       dependsOn: '13',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '금속공', allocated: 1 }],
       children: []
     },
     {
@@ -339,6 +408,7 @@ Regular.args = {
       endDate: '2023-02-05',
       dependsOn: '15',
       length: '1d',
+      resources: [{ type: '창호공', allocated: 1 }],
       tags: ['active'],
       children: []
     },
@@ -376,6 +446,7 @@ Regular.args = {
       dependsOn: '18',
       length: '1d',
       tags: ['milestone'],
+      resources: [{ type: '창호공', allocated: 7 }],
       children: []
     }
   ]

package/translations/en.json

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

package/translations/ja.json

@@ -7,5 +7,7 @@
   "label.gantt-task-end-date": "終了日",
   "label.gantt-task-tags": "タグ",
   "label.gantt-task-progress": "進捗",
-  "label.gantt-task-previous": "前"
+  "label.gantt-task-previous": "前",
+  "label.gantt-resource-type": "タイプ",
+  "label.gantt-resource-allocated": "割り当て"
 }

package/translations/ko.json

@@ -7,5 +7,8 @@
   "label.gantt-task-end-date": "종료 날짜",
   "label.gantt-task-tags": "태그",
   "label.gantt-task-progress": "진행 상황",
-  "label.gantt-task-previous": "이전"
+  "label.gantt-task-previous": "이전",
+  "label.gantt-task-resources": "자원",
+  "label.gantt-resource-type": "유형",
+  "label.gantt-resource-allocated": "할당"
 }

package/translations/ms.json

@@ -7,5 +7,7 @@
   "label.gantt-task-end-date": "tarikh tamat",
   "label.gantt-task-tags": "tag",
   "label.gantt-task-progress": "kemajuan",
-  "label.gantt-task-previous": "sebelumnya"
+  "label.gantt-task-previous": "sebelumnya",
+  "label.gantt-resource-type": "jenis",
+  "label.gantt-resource-allocated": "diperuntukkan"
 }

package/translations/zh.json

@@ -7,5 +7,7 @@
   "label.gantt-task-end-date": "结束日期",
   "label.gantt-task-tags": "标签",
   "label.gantt-task-progress": "进度",
-  "label.gantt-task-previous": "以前"
+  "label.gantt-task-previous": "以前",
+  "label.gantt-resource-type": "类型",
+  "label.gantt-resource-allocated": "分配"
 }