@operato/gantt 2.0.0-beta.0 → 2.0.0-beta.4

package/src/ox-gantt-chart.ts

@@ -0,0 +1,773 @@
+import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+import * as d3 from 'd3'
+
+import { LEVEL, TaskTag } from './types'
+import { levelDown, levelUp } from './utils'
+
+import { ScrollbarStyles } from '@operato/styles'
+
+import { Task } from './types.js'
+
+type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'
+
+@customElement('ox-gantt-chart')
+export class OxGanttChart extends LitElement {
+  static styles = [
+    MDTypeScaleStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+
+        overflow: hidden;
+      }
+
+      div[chart-container] {
+        display: block;
+
+        overflow-x: auto;
+        overflow-y: clip;
+
+        position: relative;
+      }
+
+      svg {
+        min-width: 100%;
+      }
+
+      svg[header] {
+        display: block;
+        min-width: 100%;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        height: 40px;
+        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
+
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      .top-axis text,
+      .bottom-axis text {
+        font-size: 12px;
+      }
+
+      .grid line {
+        stroke: #e0e0e0;
+      }
+
+      .grid path {
+        stroke-width: 0;
+      }
+
+      .no-select {
+        user-select: none;
+      }
+    `
+  ]
+
+  @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' })
+  toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */
+
+  @property({ type: String, attribute: 'axis-scale' }) axisScale: TimeScale = 'week-day'
+  @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false
+  @property({ type: Array }) tasks: Task[] = []
+
+  @state() baseWidth: number = 30
+  @state() level: LEVEL = this.axisScale
+
+  private fromTime: Date = new Date(this.fromDate!)
+  private toTime: Date = new Date(this.toDate)
+  private totalDays: number = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
+  private _timeScale!: d3.ScaleTime<number, number, never>
+
+  @query('svg[header]') svgHeader!: SVGElement
+  @query('svg[body]') svgBody!: SVGElement
+  @query('[chart-container]') container!: HTMLDivElement
+
+  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    this.initHeaderGestureHandlers()
+  }
+
+  updated(changedProperties: PropertyValues<this>) {
+    var redrawRequired = false
+
+    if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {
+      this.fromTime = new Date(this.fromDate)
+      this.toTime = new Date(this.toDate)
+      this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
+
+      redrawRequired = true
+    }
+
+    if (changedProperties.has('axisScale')) {
+      redrawRequired = true
+    }
+
+    if (changedProperties.has('tasks')) {
+      this.svgBody.style.height = this.tasks.length * 30 + 'px'
+      redrawRequired = true
+    }
+
+    redrawRequired && this.redraw()
+  }
+
+  render() {
+    return html`
+      <div chart-container>
+        <svg
+          header
+          @date-range-selected=${(e: CustomEvent) => {
+            console.log(e.detail)
+          }}
+          @wheel=${this.handleWheelForHeader.bind(this)}
+        ></svg>
+        <svg body></svg>
+      </div>
+    `
+  }
+
+  setVerticalOffset(offset: number) {
+    console.log(offset)
+    this.container.scrollTop = offset
+  }
+
+  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
+  }
+
+  getChartWidth() {
+    return (this.totalDays * this.baseWidth) / this.getScale() // 총 차트 폭 계산
+  }
+
+  get timeScale() {
+    if (!this._timeScale) {
+      // 시간축 스케일 생성
+      this._timeScale = d3
+        .scaleTime()
+        .domain([d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1)])
+        .range([0, this.getChartWidth()])
+    }
+
+    return this._timeScale
+  }
+
+  updateTimeScale() {
+    this.timeScale.range([0, this.getChartWidth()])
+  }
+
+  redraw() {
+    this.drawAxes()
+    this.drawBody()
+  }
+
+  drawBody() {
+    const body = d3.select(this.svgBody)
+
+    body.selectAll('*').remove()
+    body.attr('width', this.getChartWidth())
+
+    if (this.extendGridLines) {
+      const addGridLines = (ticks: Date[]) => {
+        ticks.forEach(tick => {
+          const startX = this.timeScale(tick)
+          body
+            .append('line')
+            .attr('x1', startX)
+            .attr('x2', startX)
+            .attr('y1', 0)
+            .attr('y2', Number(this.svgBody.getBoundingClientRect().height) || 0)
+            .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(this.fromTime), d3.timeDay.offset(this.toTime, 1))
+        addGridLines(dayTicks)
+      } else if (this.level === 'quarter-week') {
+        const weekTicks = d3.timeWeek
+          .every(1)!
+          .range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
+        addGridLines(weekTicks)
+      } else if (this.level === 'year-month') {
+        const monthTicks = d3.timeMonth
+          .every(1)!
+          .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))
+        addGridLines(monthTicks)
+      } else if (this.level === 'year-quarter') {
+        const quarterTicks = d3.timeMonth
+          .every(3)!
+          .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
+        addGridLines(quarterTicks)
+      }
+    }
+
+    const taskPositions: { [key: string]: { x: number; y: number; width: number } } = {}
+
+    // Add task bars
+    this.tasks.forEach((task, index) => {
+      const startX = this.timeScale(d3.timeDay.floor(d3.min([task.startTime, task.endTime])!))
+      const endX = this.timeScale(d3.timeDay.offset(d3.timeDay.ceil(d3.max([task.startTime, task.endTime])!), -1))
+
+      const taskWidth = endX - startX + this.baseWidth / this.getScale()
+      const taskY = index * 30 + 7.5
+
+      // Main task bar
+      const taskBar = body
+        .append('rect')
+        .attr('x', startX)
+        .attr('y', taskY)
+        .attr('width', taskWidth)
+        .attr('height', 15)
+        .attr('fill', this.getTaskColor(task.tags || []))
+        .attr('stroke', 'black')
+        .attr('stroke-width', 1)
+
+      // Add click event listener to task bar
+      taskBar.on('click', () => {
+        const customEvent = new CustomEvent('task-clicked', {
+          detail: { task },
+          bubbles: true,
+          composed: true
+        })
+        this.dispatchEvent(customEvent)
+      })
+
+      // Progress bar
+      if (task.progress !== undefined) {
+        const progressWidth = taskWidth * (task.progress / 100)
+        body
+          .append('rect')
+          .attr('x', startX)
+          .attr('y', taskY + 7.5 - 3.75) // Adjust to center within the task bar
+          .attr('width', progressWidth)
+          .attr('height', 7.5) // Set height to 50% of the task bar height
+          .attr('fill', 'lightgreen')
+      }
+
+      // Save task position for linking lines
+      taskPositions[task.id] = { x: endX + this.baseWidth / this.getScale(), y: taskY + 7.5, width: taskWidth }
+    })
+
+    // Add linking lines
+    this.tasks.forEach(task => {
+      if (task.after && taskPositions[task.after]) {
+        const prevTask = taskPositions[task.after]
+        const currTask = taskPositions[task.id]
+
+        // Draw the linking line
+        body
+          .append('path')
+          .attr(
+            'd',
+            `
+            M${prevTask.x},${prevTask.y}
+            L${prevTask.x + 10},${prevTask.y}
+            ${
+              prevTask.x + 10 < currTask.x - 10 - currTask.width
+                ? `
+              L${(prevTask.x + currTask.x - currTask.width) / 2},${prevTask.y}
+              L${(prevTask.x + currTask.x - currTask.width) / 2},${currTask.y}
+            `
+                : `
+                L${prevTask.x + 10},${(prevTask.y + currTask.y) / 2}
+                L${currTask.x - 10 - currTask.width},${(prevTask.y + currTask.y) / 2}
+            `
+            }
+            L${currTask.x - 10 - currTask.width},${currTask.y}
+            L${currTask.x - currTask.width},${currTask.y}
+          `
+          )
+          .attr('stroke', 'black')
+          .attr('fill', 'none')
+          .attr('stroke-width', 1)
+      }
+    })
+  }
+
+  // Helper function to determine task color based on tags
+  getTaskColor(tags: TaskTag[]): string {
+    if (tags.includes('critical')) {
+      return 'red'
+    } else if (tags.includes('milestone')) {
+      return 'blue'
+    } else if (tags.includes('done')) {
+      return 'green'
+    } else {
+      return 'grey'
+    }
+  }
+
+  drawAxes() {
+    const header = d3.select(this.svgHeader)
+
+    header.selectAll('*').remove()
+    header.attr('width', this.getChartWidth())
+
+    // 차트 컨테이너의 폭 설정 및 스크롤 가능하도록 설정
+    header.attr('width', this.getChartWidth())
+
+    const addGridLines = (ticks: Date[], yStart: number, yEnd: number, extendable?: boolean) => {
+      ticks.forEach(tick => {
+        const startX = this.timeScale(tick)
+        header
+          .append('line')
+          .attr('x1', startX)
+          .attr('x2', startX)
+          .attr('y1', yStart)
+          .attr('y2', yEnd)
+          .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
+          .attr('stroke-width', 1)
+      })
+    }
+
+    const centerLabel = (
+      selection: d3.Selection<SVGGElement, unknown, null, any>,
+      tickInterval: d3.CountableTimeInterval
+    ) => {
+      selection.selectAll('text').attr('transform', (d: any) => {
+        const tickIntervalWidth = this.timeScale(tickInterval.offset(d, 1)) - this.timeScale(d)
+        return `translate(${tickIntervalWidth / 2}, -2)`
+      })
+    }
+
+    if (this.level === 'week-day') {
+      // Level 1: week-day
+      // Weekly axis
+      const weekAxis = d3
+        .axisTop(this.timeScale)
+        .ticks(d3.timeWeek.every(1))
+        .tickFormat(d3.timeFormat('%B %d') as any)
+        .tickSize(0)
+      const weekTicks = d3.timeWeek
+        .every(1)!
+        .range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
+      addGridLines(weekTicks, 0, 20)
+
+      const weekAxisG = header
+        .append('g')
+        .classed('week-axis no-select md-typescale-label-small', true)
+        .attr('transform', `translate(0, 20)`)
+        .call(weekAxis)
+
+      centerLabel(weekAxisG, d3.timeWeek)
+
+      // Daily axis
+      const dayAxis = d3
+        .axisTop(this.timeScale)
+        .ticks(d3.timeDay.every(1))
+        .tickFormat(d3.timeFormat('%d') as any)
+        .tickSize(0)
+
+      const dayTicks = d3.timeDay.every(1)!.range(d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1))
+      addGridLines(dayTicks, 20, 40)
+
+      const dayAxisG = header
+        .append('g')
+        .classed('day-axis no-select md-typescale-label-small', true)
+        .attr('transform', `translate(0, 40)`)
+        .call(dayAxis)
+
+      centerLabel(dayAxisG, d3.timeDay)
+    } else if (this.level === 'quarter-week') {
+      // Level 2: quarter-week
+      // Quarterly axis
+      const quarterAxis = d3
+        .axisTop(this.timeScale)
+        .ticks(d3.timeMonth.every(3))
+        .tickFormat(d3.timeFormat('%Y %b') as any)
+        .tickSize(0)
+
+      const quarterTicks = d3.timeMonth
+        .every(3)!
+        .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
+      addGridLines(quarterTicks, 0, 20)
+
+      const quarterAxisG = header
+        .append('g')
+        .classed('quarter-axis no-select md-typescale-label-small', true)
+        .attr('transform', `translate(0, 20)`)
+        .call(quarterAxis)
+
+      centerLabel(quarterAxisG, d3.timeMonth.every(3) as any)
+
+      // Weekly axis
+      const weekAxis = d3
+        .axisTop(this.timeScale)
+        .ticks(d3.timeWeek.every(1))
+        .tickFormat(d3.timeFormat('%b %d') as any)
+        .tickSize(0)
+      const weekTicks = d3.timeWeek
+        .every(1)!
+        .range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
+      addGridLines(weekTicks, 20, 40)
+
+      const weekAxisG = header
+        .append('g')
+        .classed('week-axis no-select md-typescale-label-small', true)
+        .attr('transform', `translate(0, 40)`)
+        .call(weekAxis)
+
+      centerLabel(weekAxisG, d3.timeWeek)
+    } else if (this.level === 'year-month') {
+      // Level 3: year-month
+      // Yearly axis
+      const yearAxis = d3
+        .axisTop(this.timeScale)
+        .ticks(d3.timeYear.every(1))
+        .tickFormat(d3.timeFormat('%Y') as any)
+        .tickSize(0)
+
+      const yearTicks = d3.timeYear
+        .every(1)!
+        .range(d3.timeYear.floor(this.fromTime), d3.timeYear.offset(this.toTime, 1))
+      addGridLines(yearTicks, 0, 20)
+
+      const yearAxisG = header
+        .append('g')
+        .classed('year-axis no-select md-typescale-label-small', true)
+        .attr('transform', `translate(0, 20)`)
+        .call(yearAxis)
+
+      centerLabel(yearAxisG, d3.timeYear.every(1)! as any)
+
+      // Monthly axis
+      const monthAxis = d3
+        .axisTop(this.timeScale)
+        .ticks(d3.timeMonth.every(1))
+        .tickFormat(d3.timeFormat('%b') as any)
+        .tickSize(0)
+
+      const monthTicks = d3.timeMonth
+        .every(1)!
+        .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))
+      addGridLines(monthTicks, 20, 40)
+
+      const monthAxisG = header
+        .append('g')
+        .classed('month-axis no-select md-typescale-label-small', true)
+        .attr('transform', `translate(0, 40)`)
+        .call(monthAxis)
+
+      centerLabel(monthAxisG, d3.timeMonth.every(1) as any)
+    } else if (this.level === 'year-quarter') {
+      // Level 4: year-quarter
+      // Yearly axis
+      const yearAxis = d3
+        .axisTop(this.timeScale)
+        .ticks(d3.timeYear.every(1))
+        .tickFormat(d3.timeFormat('%Y') as any)
+        .tickSize(0)
+
+      const yearTicks = d3.timeYear
+        .every(1)!
+        .range(d3.timeYear.floor(this.fromTime), d3.timeYear.offset(this.toTime, 1))
+      addGridLines(yearTicks, 0, 20)
+
+      const yearAxisG = header
+        .append('g')
+        .classed('year-axis no-select md-typescale-label-small', true)
+        .attr('transform', `translate(0, 20)`)
+        .call(yearAxis)
+
+      centerLabel(yearAxisG, d3.timeYear.every(1)! as any)
+
+      // Quarterly axis
+      const quarterAxis = d3
+        .axisTop(this.timeScale)
+        .ticks(d3.timeMonth.every(3))
+        .tickFormat(d3.timeFormat('%Y %b') as any)
+        .tickSize(0)
+
+      const quarterTicks = d3.timeMonth
+        .every(3)!
+        .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
+      addGridLines(quarterTicks, 20, 40)
+
+      const quarterAxisG = header
+        .append('g')
+        .classed('quarter-axis no-select md-typescale-label-small', true)
+        .attr('transform', `translate(0, 40)`)
+        .call(quarterAxis)
+
+      centerLabel(quarterAxisG, d3.timeMonth.every(3) as any)
+    }
+  }
+
+  initHeaderGestureHandlers() {
+    const header = d3.select(this.svgHeader)
+
+    let isDragging = false
+    let startX: number | null = null
+    let lastTouchDistance: number | null = null
+
+    const handleTouchStart = (event: TouchEvent) => {
+      event.preventDefault() // 기본 터치 이벤트 막기
+
+      if (event.touches.length === 2) {
+        lastTouchDistance = getTouchDistance(event.touches)
+      } else {
+        isDragging = true
+        const touch = event.touches[0]
+        const containerOffsetX = header.node()!.getBoundingClientRect().left
+        startX = touch.clientX - containerOffsetX
+      }
+    }
+
+    const handleTouchMove = (event: TouchEvent) => {
+      event.preventDefault() // 기본 터치 이벤트 막기
+
+      if (event.touches.length === 2 && lastTouchDistance !== null) {
+        const currentDistance = getTouchDistance(event.touches)
+        const zoomFactor = currentDistance / lastTouchDistance
+        this.baseWidth *= zoomFactor
+
+        if (this.baseWidth > 60) {
+          if (this.level == 'year-quarter') {
+            this.baseWidth = 60
+          } else {
+            this.level = levelUp(this.level)
+            this.baseWidth = 30
+          }
+        } else if (this.baseWidth < 30) {
+          if (this.level == 'week-day') {
+            this.baseWidth = 30
+          } else {
+            this.level = levelDown(this.level)
+            this.baseWidth = 60
+          }
+        }
+
+        lastTouchDistance = currentDistance
+        this.updateTimeScale()
+        this.redraw()
+      } else if (isDragging && startX !== null) {
+        const touch = event.touches[0]
+        const containerOffsetX = header.node()!.getBoundingClientRect().left
+        const currentX = touch.clientX - containerOffsetX
+        this.highlightSelection(startX, currentX)
+      }
+    }
+
+    const handleTouchEnd = (event: TouchEvent) => {
+      event.preventDefault() // 기본 터치 이벤트 막기
+
+      if (event.touches.length < 2) {
+        lastTouchDistance = null
+      }
+
+      if (!isDragging || startX === null) {
+        // 클릭 이벤트 처리
+        const touch = event.changedTouches[0]
+        const containerOffsetX = header.node()!.getBoundingClientRect().left
+        const clickX = touch.clientX - containerOffsetX
+        this.finalizeSelection(clickX, clickX)
+        return
+      }
+
+      const touch = event.changedTouches[0]
+      const containerOffsetX = header.node()!.getBoundingClientRect().left
+      const endX = touch.clientX - containerOffsetX
+      this.finalizeSelection(startX, endX)
+
+      isDragging = false
+      startX = null
+    }
+
+    const getTouchDistance = (touches: TouchList): number => {
+      const dx = touches[0].clientX - touches[1].clientX
+      const dy = touches[0].clientY - touches[1].clientY
+      return Math.sqrt(dx * dx + dy * dy)
+    }
+
+    const handleMouseDown = (event: MouseEvent) => {
+      isDragging = true
+      const containerOffsetX = header.node()!.getBoundingClientRect().left
+      startX = event.clientX - containerOffsetX
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!isDragging || startX === null) return
+
+      const containerOffsetX = header.node()!.getBoundingClientRect().left
+      const currentX = event.clientX - containerOffsetX
+      this.highlightSelection(startX, currentX)
+    }
+
+    const handleMouseUp = (event: MouseEvent) => {
+      if (!isDragging || startX === null) {
+        // 클릭 이벤트 처리
+        const containerOffsetX = header.node()!.getBoundingClientRect().left
+        const clickX = event.clientX - containerOffsetX
+        this.finalizeSelection(clickX, clickX)
+        return
+      }
+
+      const containerOffsetX = header.node()!.getBoundingClientRect().left
+      const endX = event.clientX - containerOffsetX
+      this.finalizeSelection(startX, endX)
+
+      isDragging = false
+      startX = null
+    }
+
+    header.on('mousedown', handleMouseDown)
+    header.on('mousemove', handleMouseMove)
+    header.on('mouseup', handleMouseUp)
+    header.on('touchstart', handleTouchStart)
+    header.on('touchmove', handleTouchMove)
+    header.on('touchend', handleTouchEnd)
+  }
+
+  highlightSelection(startX: number, endX: number) {
+    const header = d3.select(this.svgHeader)
+    const body = d3.select(this.svgBody)
+
+    let startDate = this.timeScale.invert(startX)
+    let endDate = this.timeScale.invert(endX)
+
+    let start, end
+
+    if (this.level === 'week-day') {
+      start = d3.timeDay.floor(d3.min([startDate, endDate])!)
+      end = d3.timeDay.offset(d3.timeDay.ceil(d3.max([startDate, endDate])!), -1)
+    } else if (this.level === 'quarter-week') {
+      start = d3.timeWeek.floor(d3.min([startDate, endDate])!)
+      end = d3.timeDay.offset(d3.timeWeek.ceil(d3.max([startDate, endDate])!), -1)
+    } else if (this.level === 'year-month') {
+      start = d3.timeMonth.floor(d3.min([startDate, endDate])!)
+      end = d3.timeDay.offset(d3.timeMonth.ceil(d3.max([startDate, endDate])!), -1)
+    } else if (this.level === 'year-quarter') {
+      start = d3.timeMonth.every(3)!.floor(d3.min([startDate, endDate])!)
+      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.timeScale(start!))
+      .attr('y', 20)
+      .attr('width', this.timeScale(end!) - this.timeScale(start!) + this.baseWidth / this.getScale())
+      .attr('height', 20)
+      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
+      .attr('opacity', '.2')
+
+    body
+      .append('rect')
+      .attr('class', 'selection-rect')
+      .attr('x', this.timeScale(start!))
+      .attr('y', 0)
+      .attr('width', this.timeScale(end!) - this.timeScale(start!) + this.baseWidth / this.getScale())
+      .attr('height', '100%')
+      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
+      .attr('opacity', '.2')
+  }
+
+  finalizeSelection(startX: number, endX: number) {
+    const header = d3.select(this.svgHeader)
+    const body = d3.select(this.svgBody)
+
+    let startDate = this.timeScale.invert(startX)
+    let endDate = this.timeScale.invert(endX)
+
+    let start, end
+
+    if (this.level === 'week-day') {
+      start = d3.timeDay.floor(d3.min([startDate, endDate])!)
+      end = d3.timeDay.offset(d3.timeDay.ceil(d3.max([startDate, endDate])!), -1)
+    } else if (this.level === 'quarter-week') {
+      start = d3.timeWeek.floor(d3.min([startDate, endDate])!)
+      end = d3.timeDay.offset(d3.timeWeek.ceil(d3.max([startDate, endDate])!), -1)
+    } else if (this.level === 'year-month') {
+      start = d3.timeMonth.floor(d3.min([startDate, endDate])!)
+      end = d3.timeDay.offset(d3.timeMonth.ceil(d3.max([startDate, endDate])!), -1)
+    } else if (this.level === 'year-quarter') {
+      start = d3.timeMonth.every(3)!.floor(d3.min([startDate, endDate])!)
+      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.timeScale(start!))
+      .attr('y', 20)
+      .attr('width', this.timeScale(end!) - this.timeScale(start!) + this.baseWidth / this.getScale())
+      .attr('height', 20)
+      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
+      .attr('opacity', '.2')
+
+    body
+      .append('rect')
+      .attr('class', 'selection-rect')
+      .attr('x', this.timeScale(start!))
+      .attr('y', 0)
+      .attr('width', this.timeScale(end!) - this.timeScale(start!) + this.baseWidth / this.getScale())
+      .attr('height', '100%')
+      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
+      .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)
+  }
+
+  handleWheelForHeader(event: WheelEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
+      // 좌우 스크롤
+      this.container.scrollBy({
+        left: event.shiftKey ? event.deltaX : event.deltaY,
+        behavior: 'smooth'
+      })
+    } else {
+      // Zoom in/out
+      const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9
+      this.baseWidth *= zoomFactor
+
+      if (this.baseWidth > 40) {
+        if (this.level == 'week-day') {
+          this.baseWidth = 40
+        } else {
+          this.level = levelDown(this.level)
+          this.baseWidth = 30
+        }
+      } else if (this.baseWidth < 30) {
+        if (this.level == 'year-quarter') {
+          this.baseWidth = 30
+        }
+      }
+      if (this.baseWidth < 20) {
+        this.level = levelUp(this.level)
+        this.baseWidth = 30
+      }
+
+      this.updateTimeScale()
+      this.redraw()
+    }
+  }
+}