@operato/gantt 7.0.74 → 7.0.76

package/src/gantt-chart-controller.ts

@@ -16,6 +16,8 @@ export class GanttChartController implements ReactiveController {
   private scrollStartX?: number
   private scrollStartY?: number
 
+  private colorProvider?: (task: Task) => string
+
   public baseWidth: number = 30
   public level: TimeScale
   public selectedTaskId?: string
@@ -36,6 +38,10 @@ export class GanttChartController implements ReactiveController {
     this.updateTimeScale()
   }
 
+  setColorProvider(colorProvider: (task: Task) => string) {
+    this.colorProvider = colorProvider
+  }
+
   get timeScale() {
     if (!this._timeScale) {
       this._timeScale = d3
@@ -174,7 +180,7 @@ export class GanttChartController implements ReactiveController {
         .attr('y', taskY)
         .attr('width', taskWidth)
         .attr('height', 15)
-        .attr('fill', this.getTaskColor(task.tags || []))
+        .attr('fill', this.colorProvider ? this.colorProvider(task) : 'gray')
         .attr('stroke', 'black')
         .attr('stroke-width', 1)
 

package/src/ox-gantt-chart.ts

@@ -79,6 +79,7 @@ export class OxGanttChart extends LitElement {
   @property({ type: Array }) tasks: Task[] = []
   @property({ type: String, attribute: 'selected-task-id' }) selectedTaskId?: string
   @property({ type: String }) locale: string = 'en-US'
+  @property({ type: Object }) colorProvider!: (task: Task) => string
 
   @query('svg[header]') svgHeader!: SVGElement
   @query('svg[body]') svgBody!: SVGElement
@@ -119,6 +120,10 @@ export class OxGanttChart extends LitElement {
       this.ganttChartController.updateTimeScale()
     }
 
+    if (changedProperties.has('colorProvider')) {
+      this.ganttChartController.setColorProvider(this.colorProvider)
+    }
+
     this.ganttChartController.drawAxes(this.svgHeader)
     this.ganttChartController.drawBody(this.svgBody, this.tooltip)
   }

package/src/ox-gantt.ts

@@ -145,6 +145,18 @@ export class OxGantt extends localize(i18next)(LitElement) {
   toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */
   @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false
   @property({ type: String, attribute: 'time-scale' }) timeScale: TimeScale = 'week-day'
+  @property({ type: Object }) colorProvider: (task: Task) => string = function (task: Task) {
+    const { tags = [] } = task
+    if (tags.includes('critical')) {
+      return 'red'
+    } else if (tags.includes('milestone')) {
+      return 'blue'
+    } else if (tags.includes('done')) {
+      return 'green'
+    } else {
+      return 'grey'
+    }
+  }
   @property({ type: Object }) columnConfigProvider: () => ColumnConfig[] = function () {
     return [
       { name: 'id', label: i18next.t('label.gantt-task-id') || 'ID', visible: true, width: 50, order: 1 },
@@ -229,6 +241,7 @@ export class OxGantt extends localize(i18next)(LitElement) {
             .tasks=${this.tasks}
             .selectedTaskId=${this.selectedTaskId}
             .axisScale=${this.timeScale}
+            .colorProvider=${this.colorProvider}
             ?extend-grid-lines=${this.extendGridLines}
             @task-clicked=${this.handleTaskClicked}
             @timescale-changed=${(e: CustomEvent) => this.syncTimeScale(e)}

package/src/ox-resource-chart.ts

@@ -76,12 +76,12 @@ export class OxResourceChart extends LitElement {
 
     if (changedProperties.has('resources')) {
       this.resourceChartController.setResources(this.resources)
-      this.updateChartHeight() // 리소스의 수에 따라 차트의 높이를 업데이트합니다.
+      this.updateChartHeight()
     }
 
     if (changedProperties.has('tasks')) {
-      this.resourceChartController.setTasks(this.tasks)
-      this.updateChartHeight() // 리소스의 수에 따라 차트의 높이를 업데이트합니다.
+      this.resourceChartController.setTasks(this.flattenTasks(this.tasks))
+      this.updateChartHeight()
     }
 
     if (changedProperties.has('axisScale')) {
@@ -89,7 +89,6 @@ export class OxResourceChart extends LitElement {
       this.resourceChartController.updateTimeScale()
     }
 
-    // 차트 렌더링
     this.resourceChartController.drawAxes(this.svgHeader)
     this.resourceChartController.drawBody(this.svgBody)
   }
@@ -137,4 +136,10 @@ export class OxResourceChart extends LitElement {
   setVerticalOffset(offset: number) {
     this.container.scrollTop = offset
   }
+
+  flattenTasks(tasks: Task[], level: number = 0): Task[] {
+    return tasks.flatMap(task =>
+      task.collapsed ? [{ ...task, level }] : [{ ...task, level }, ...this.flattenTasks(task.children || [], level + 1)]
+    )
+  }
 }

package/stories/ox-gantt.stories.ts

@@ -124,7 +124,6 @@ Regular.args = {
       id: '1',
       title: 'Design',
       type: 'task',
-      // section: developmentSection,
       startDate: '2023-01-01',
       endDate: '2023-01-05',
       progress: 60,
@@ -138,7 +137,6 @@ Regular.args = {
       id: '2',
       title: 'Development',
       type: 'milestone',
-      // section: developmentSection,
       startDate: '2023-01-06',
       endDate: '2023-01-06',
       progress: 30,
@@ -152,7 +150,6 @@ Regular.args = {
       id: '3',
       title: 'Coding',
       type: 'phase',
-      // section: developmentSection,
       startDate: '2023-01-07',
       endDate: '2023-01-15',
       progress: 10,
@@ -164,7 +161,6 @@ Regular.args = {
           id: '3-1',
           title: 'Coding-A',
           type: 'task',
-          // section: developmentSection,
           startDate: '2023-01-07',
           endDate: '2023-01-10',
           progress: 60,
@@ -176,7 +172,6 @@ Regular.args = {
               id: '3-1-1',
               title: 'Coding-A',
               type: 'task',
-              // section: developmentSection,
               startDate: '2023-01-07',
               endDate: '2023-01-10',
               progress: 60,
@@ -190,7 +185,6 @@ Regular.args = {
               id: '3-1-2',
               title: 'Coding-B',
               type: 'task',
-              // section: developmentSection,
               startDate: '2023-01-11',
               endDate: '2023-01-15',
               dependsOn: '3-1-1',
@@ -205,7 +199,6 @@ Regular.args = {
           id: '3-2',
           title: 'Coding-B',
           type: 'task',
-          // section: developmentSection,
           startDate: '2023-01-11',
           endDate: '2023-01-15',
           dependsOn: '3-1',
@@ -220,7 +213,6 @@ Regular.args = {
       id: '4',
       title: 'Test',
       type: 'milestone',
-      // section: developmentSection,
       startDate: '2023-01-07',
       endDate: '2023-01-10',
       progress: 100,
@@ -234,7 +226,6 @@ Regular.args = {
       id: '5',
       title: 'Deploy',
       type: 'milestone',
-      // section: developmentSection,
       startDate: '2023-01-15',
       endDate: '2023-01-21',
       dependsOn: '4',
@@ -247,7 +238,6 @@ Regular.args = {
       id: '6',
       title: 'Publishing',
       type: 'milestone',
-      // section: developmentSection,
       startDate: '2023-01-11',
       endDate: '2023-01-15',
       dependsOn: '5',
@@ -260,7 +250,6 @@ Regular.args = {
       id: '7',
       title: 'Provisioning',
       type: 'milestone',
-      // section: developmentSection,
       startDate: '2023-01-12',
       endDate: '2023-01-15',
       dependsOn: '6',
@@ -273,7 +262,6 @@ Regular.args = {
       id: '8',
       title: 'Alpha Test',
       type: 'milestone',
-      // section: testSection,
       startDate: '2023-01-15',
       endDate: '2023-01-17',
       dependsOn: '7',
@@ -286,7 +274,6 @@ Regular.args = {
       id: '9',
       title: 'Beta Task',
       type: 'milestone',
-      // section: testSection,
       startDate: '2023-01-15',
       endDate: '2023-01-18',
       dependsOn: '8',
@@ -312,7 +299,6 @@ Regular.args = {
       id: '11',
       title: 'Zeta Test',
       type: 'milestone',
-      // section: testSection,
       startDate: '2023-01-18',
       endDate: '2023-01-22',
       dependsOn: '9',
@@ -325,7 +311,6 @@ Regular.args = {
       id: '12',
       title: 'Release',
       type: 'milestone',
-      // section: releaseSection,
       startDate: '2023-01-18',
       endDate: '2023-01-23',
       dependsOn: '9',
@@ -337,7 +322,6 @@ Regular.args = {
           id: '12-1',
           title: 'Coding-A',
           type: 'task',
-          // section: developmentSection,
           startDate: '2023-01-07',
           endDate: '2023-01-10',
           progress: 60,
@@ -351,7 +335,6 @@ Regular.args = {
           id: '12-2',
           title: 'Coding-B',
           type: 'task',
-          // section: developmentSection,
           startDate: '2023-01-11',
           endDate: '2023-01-15',
           dependsOn: '12-1',
@@ -366,7 +349,6 @@ Regular.args = {
       id: '13',
       title: 'Release',
       type: 'milestone',
-      // section: releaseSection,
       startDate: '2023-01-22',
       endDate: '2023-01-27',
       dependsOn: '12',
@@ -378,7 +360,6 @@ Regular.args = {
       id: '14',
       title: 'Release',
       type: 'milestone',
-      // section: releaseSection,
       startDate: '2023-01-27',
       endDate: '2023-01-30',
       dependsOn: '13',
@@ -391,7 +372,6 @@ Regular.args = {
       id: '15',
       title: 'Release',
       type: 'milestone',
-      // section: releaseSection,
       startDate: '2023-01-30',
       endDate: '2023-01-31',
       dependsOn: '14',
@@ -403,7 +383,6 @@ Regular.args = {
       id: '16',
       title: 'Release',
       type: 'milestone',
-      // section: releaseSection,
       startDate: '2023-01-31',
       endDate: '2023-02-05',
       dependsOn: '15',
@@ -416,7 +395,6 @@ Regular.args = {
       id: '17',
       title: 'Release',
       type: 'milestone',
-      // section: releaseSection,
       startDate: '2023-02-06',
       endDate: '2023-02-07',
       dependsOn: '16',
@@ -428,7 +406,6 @@ Regular.args = {
       id: '18',
       title: 'Release',
       type: 'milestone',
-      // section: releaseSection,
       startDate: '2023-02-08',
       endDate: '2023-02-09',
       dependsOn: '17',
@@ -440,7 +417,6 @@ Regular.args = {
       id: '19',
       title: 'Release',
       type: 'milestone',
-      // section: releaseSection,
       startDate: '2023-02-10',
       endDate: '2023-02-25',
       dependsOn: '18',