@operato/gantt 8.0.0-alpha.40 → 8.0.0-alpha.47

package/src/ox-gantt-chart.ts

@@ -2,7 +2,7 @@ import './ox-task-tooltip.js'
 import './ox-resource-chart.js'
 
 import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import * as d3 from 'd3'
 import { locales } from './locales'
 
@@ -89,6 +89,8 @@ export class OxGanttChart extends gesture(LitElement) {
   @property({ type: String }) locale: string = 'en-US'
   @property({ type: Object }) colorProvider!: (task: Task) => string
 
+  @state() dateRangeSelected?: { start: Date; end: Date }
+
   @query('svg[header]') svgHeader!: SVGElement
   @query('svg[body]') svgBody!: SVGElement
   @query('[chart-container]') container!: HTMLDivElement
@@ -99,7 +101,7 @@ export class OxGanttChart extends gesture(LitElement) {
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     this.initHeaderGestureHandlers()
 
-    this.addEventListener('date-range-cleared', e => this.clearSelection())
+    // this.addEventListener('date-range-cleared', e => this.clearSelection())
   }
 
   connectedCallback(): void {
@@ -151,16 +153,13 @@ export class OxGanttChart extends gesture(LitElement) {
 
     this.ganttChartController.drawAxes(this.svgHeader)
     this.ganttChartController.drawBody(this.svgBody, this.tooltip)
+    this.drawSelectedRange()
   }
 
   render() {
     return html`
       <div chart-container @wheel=${(e: WheelEvent) => this.ganttChartController.handleWheelForBody(e, this.container)}>
-        <svg
-          header
-          @date-range-selected=${(e: CustomEvent) => this.handleDateRangeSelected(e)}
-          @wheel=${this.handleWheelForHeader.bind(this)}
-        ></svg>
+        <svg header @wheel=${this.handleWheelForHeader.bind(this)}></svg>
         <svg body></svg>
         <div class="scroll-button left" @click=${this.scrollToStart} @touchstart=${this.scrollToStart}></div>
         <div class="scroll-button right" @click=${this.scrollToEnd} @touchstart=${this.scrollToEnd}></div>
@@ -266,11 +265,6 @@ export class OxGanttChart extends gesture(LitElement) {
     this.dispatchEvent(customEvent)
   }
 
-  handleDateRangeSelected(event: CustomEvent) {
-    const detail = event.detail
-    this.dispatchEvent(new CustomEvent('date-range-selected', { detail, bubbles: true, composed: true }))
-  }
-
   updateLocale(locale: string) {
     const localeDefinition = (locales as any)[locale || 'en-US']
     if (localeDefinition) {
@@ -323,9 +317,6 @@ export class OxGanttChart extends gesture(LitElement) {
   }
 
   highlightSelection(startX: number, endX: number) {
-    const header = d3.select(this.svgHeader)
-    const body = d3.select(this.svgBody)
-
     let startDate = this.ganttChartController.timeScale.invert(startX)
     let endDate = this.ganttChartController.timeScale.invert(endX)
 
@@ -345,44 +336,10 @@ export class OxGanttChart extends gesture(LitElement) {
       end = d3.timeDay.offset(d3.timeMonth.every(3)!.ceil(d3.max([startDate, endDate])!), -1)
     }
 
-    header.selectAll('.selection-rect').remove()
-    body.selectAll('.selection-rect').remove()
-
-    header
-      .append('rect')
-      .attr('class', 'selection-rect')
-      .attr('x', this.ganttChartController.timeScale(start!))
-      .attr('y', 20)
-      .attr(
-        'width',
-        this.ganttChartController.timeScale(end!) -
-          this.ganttChartController.timeScale(start!) +
-          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
-      )
-      .attr('height', 20)
-      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-on-primary-container))')
-      .attr('opacity', '.2')
-
-    body
-      .append('rect')
-      .attr('class', 'selection-rect')
-      .attr('x', this.ganttChartController.timeScale(start!))
-      .attr('y', 0)
-      .attr(
-        'width',
-        this.ganttChartController.timeScale(end!) -
-          this.ganttChartController.timeScale(start!) +
-          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
-      )
-      .attr('height', '100%')
-      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-on-primary-container))')
-      .attr('opacity', '.2')
+    this.dateRangeSelected = { start: start!, end: end! }
   }
 
   finalizeSelection(startX: number, endX: number) {
-    const header = d3.select(this.svgHeader)
-    const body = d3.select(this.svgBody)
-
     let startDate = this.ganttChartController.timeScale.invert(startX)
     let endDate = this.ganttChartController.timeScale.invert(endX)
 
@@ -402,6 +359,29 @@ export class OxGanttChart extends gesture(LitElement) {
       end = d3.timeDay.offset(d3.timeMonth.every(3)!.ceil(d3.max([startDate, endDate])!), -1)
     }
 
+    this.dateRangeSelected = { start: start!, end: end! }
+
+    const formatDate = d3.timeFormat('%Y-%m-%d')
+
+    this.dispatchEvent(
+      new CustomEvent('date-range-selected', {
+        detail: { start: formatDate(start!), end: formatDate(end!) },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  drawSelectedRange() {
+    if (!this.dateRangeSelected) {
+      return
+    }
+
+    let { start, end } = this.dateRangeSelected
+
+    const header = d3.select(this.svgHeader)
+    const body = d3.select(this.svgBody)
+
     header.selectAll('.selection-rect').remove()
     body.selectAll('.selection-rect').remove()
 
@@ -434,21 +414,5 @@ export class OxGanttChart extends gesture(LitElement) {
       .attr('height', '100%')
       .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-on-primary-container))')
       .attr('opacity', '.2')
-
-    const formatDate = d3.timeFormat('%Y-%m-%d')
-    const customEvent = new CustomEvent('date-range-selected', {
-      detail: { start: formatDate(start!), end: formatDate(end!) }
-    })
-
-    header.node()?.dispatchEvent(customEvent)
-  }
-
-  clearSelection() {
-    const header = d3.select(this.svgHeader)
-    const body = d3.select(this.svgBody)
-
-    // 선택한 영역을 나타내는 모든 'selection-rect' 요소를 제거합니다.
-    header.selectAll('.selection-rect').remove()
-    body.selectAll('.selection-rect').remove()
   }
 }

package/src/ox-gantt.ts

@@ -155,15 +155,9 @@ export class OxGantt extends localize(i18next)(LitElement) {
   @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 = (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'
-    }
-    return 'grey'
+    const { style } = task
+
+    return style || 'gray'
   }
   @property({ type: Object }) columnConfigProvider: () => ColumnConfig[] = function () {
     return [

package/src/types.ts

@@ -11,6 +11,7 @@ export interface Task {
   dependsOn?: string
   duration: number
   tags?: TaskTag[]
+  style?: string
   children?: Task[]
   resources?: Resource[]
   collapsed?: boolean

package/stories/ox-gantt.stories.ts

@@ -141,6 +141,7 @@ Regular.args = {
       id: '2',
       title: 'Development',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-06',
       endDate: '2023-01-06',
       progress: 30,
@@ -160,6 +161,7 @@ Regular.args = {
       dependsOn: '2',
       duration: 9,
       tags: ['critical'],
+      style: 'red',
       children: [
         {
           id: '3-1',
@@ -171,6 +173,7 @@ Regular.args = {
           dependsOn: '',
           duration: 4,
           tags: ['done'],
+          style: 'green',
           children: [
             {
               id: '3-1-1',
@@ -223,6 +226,7 @@ Regular.args = {
       dependsOn: '1',
       duration: 1,
       tags: ['done'],
+      style: 'green',
       resources: [{ type: '방수공', allocated: 5 }],
       children: []
     },
@@ -230,6 +234,7 @@ Regular.args = {
       id: '5',
       title: 'Deploy',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-15',
       endDate: '2023-01-21',
       dependsOn: '4',
@@ -242,6 +247,7 @@ Regular.args = {
       id: '6',
       title: 'Publishing',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-11',
       endDate: '2023-01-15',
       dependsOn: '5',
@@ -254,6 +260,7 @@ Regular.args = {
       id: '7',
       title: 'Provisioning',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-12',
       endDate: '2023-01-15',
       dependsOn: '6',
@@ -266,6 +273,7 @@ Regular.args = {
       id: '8',
       title: 'Alpha Test',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-15',
       endDate: '2023-01-17',
       dependsOn: '7',
@@ -278,6 +286,7 @@ Regular.args = {
       id: '9',
       title: 'Beta Task',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-15',
       endDate: '2023-01-18',
       dependsOn: '8',
@@ -296,6 +305,7 @@ Regular.args = {
       dependsOn: '9',
       duration: 1,
       tags: ['critical'],
+      style: 'red',
       resources: [{ type: '조적공', allocated: 6 }],
       children: []
     },
@@ -303,6 +313,7 @@ Regular.args = {
       id: '11',
       title: 'Zeta Test',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-18',
       endDate: '2023-01-22',
       dependsOn: '9',
@@ -315,6 +326,7 @@ Regular.args = {
       id: '12',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-18',
       endDate: '2023-01-23',
       dependsOn: '9',
@@ -332,6 +344,7 @@ Regular.args = {
           dependsOn: '',
           duration: 4,
           tags: ['done'],
+          style: 'green',
           resources: [{ type: '방수공', allocated: 6 }],
           children: []
         },
@@ -358,12 +371,14 @@ Regular.args = {
       dependsOn: '12',
       duration: 1,
       tags: ['done'],
+      style: 'green',
       children: []
     },
     {
       id: '14',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-27',
       endDate: '2023-01-30',
       dependsOn: '13',
@@ -376,6 +391,7 @@ Regular.args = {
       id: '15',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-30',
       endDate: '2023-01-31',
       dependsOn: '14',
@@ -387,6 +403,7 @@ Regular.args = {
       id: '16',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-31',
       endDate: '2023-02-05',
       dependsOn: '15',
@@ -399,6 +416,7 @@ Regular.args = {
       id: '17',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-02-06',
       endDate: '2023-02-07',
       dependsOn: '16',
@@ -415,12 +433,14 @@ Regular.args = {
       dependsOn: '17',
       duration: 1,
       tags: ['critical'],
+      style: 'red',
       children: []
     },
     {
       id: '19',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-02-10',
       endDate: '2023-02-25',
       dependsOn: '18',