@operato/gantt 2.0.0-beta.14 → 2.0.0-beta.15

package/src/gantt-chart-controller.ts

@@ -0,0 +1,470 @@
+import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'
+import * as d3 from 'd3'
+import { LEVEL, Task, TaskTag } from './types'
+import { OxTaskTooltip } from './ox-task-tooltip'
+
+export class GanttChartController implements ReactiveController {
+  private host: ReactiveControllerHost & LitElement
+  private fromTime: Date
+  private toTime: Date
+  private totalDays: number
+  private _timeScale?: d3.ScaleTime<number, number, never>
+
+  private touchStartY?: number
+  private scrollStartY?: number
+
+  public baseWidth: number = 30
+  public level: LEVEL
+  public selectedTaskId?: string
+
+  public tasks: Task[] = []
+  public extendGridLines: boolean = false
+
+  constructor(host: ReactiveControllerHost & LitElement, fromDate: string, toDate: string, axisScale: LEVEL) {
+    this.host = host
+    this.fromTime = new Date(fromDate)
+    this.toTime = new Date(toDate)
+    this.level = axisScale
+    this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
+    this.host.addController(this)
+  }
+
+  hostConnected() {
+    this.updateTimeScale()
+  }
+
+  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
+  }
+
+  updateRange(fromDate: string, toDate: string) {
+    this.fromTime = new Date(fromDate)
+    this.toTime = new Date(toDate)
+    this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
+    this._timeScale = undefined
+    this.host.requestUpdate()
+  }
+
+  setTasks(tasks: Task[]) {
+    this.tasks = tasks
+    this.host.requestUpdate()
+  }
+
+  updateTimeScale() {
+    this.timeScale.range([0, this.getChartWidth()])
+  }
+
+  getChartWidth() {
+    return (this.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(svgHeader: SVGElement) {
+    const header = d3.select(svgHeader)
+
+    header.selectAll('*').remove()
+    header.attr('width', this.getChartWidth())
+
+    const addGridLines = (ticks: Date[], yStart: number, yEnd: number) => {
+      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') {
+      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)
+
+      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') {
+      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)
+
+      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') {
+      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)
+
+      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') {
+      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)
+
+      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)
+    }
+  }
+
+  drawBody(svgBody: SVGElement, tooltip: OxTaskTooltip) {
+    const body = d3.select(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(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 } } = {}
+
+    this.tasks.forEach((task, index) => {
+      const startX = this.timeScale(d3.timeDay.floor(d3.min([task.startDate, task.endDate])!))
+      const endX = this.timeScale(d3.timeDay.offset(d3.timeDay.ceil(d3.max([task.startDate, task.endDate])!), -1))
+
+      const taskWidth = endX - startX + this.baseWidth / this.getScale()
+      const taskY = index * 30 + 7.5
+
+      const showTooltip = (event: MouseEvent) => {
+        tooltip.title = task.title
+        tooltip.startDate = task.startDate.toISOString().split('T')[0]
+        tooltip.endDate = task.endDate.toISOString().split('T')[0]
+        tooltip.progress = task.progress ?? 0
+        tooltip.type = task.type
+
+        tooltip.show(event.clientX, event.clientY)
+      }
+
+      const hideTooltip = () => {
+        tooltip.hide()
+      }
+
+      if (this.selectedTaskId === task.id) {
+        body
+          .append('rect')
+          .attr('x', 0)
+          .attr('y', taskY - 7.5)
+          .attr('width', this.getChartWidth())
+          .attr('height', 30)
+          .attr('fill', 'var(--ox-gantt-selected-row-background-color, var(--md-sys-color-surface-variant))')
+      }
+
+      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)
+
+      taskBar
+        .on('click', () => {
+          this.selectedTaskId = task.id
+          const customEvent = new CustomEvent('task-clicked', {
+            detail: { taskId: task.id },
+            bubbles: true,
+            composed: true
+          })
+          this.host.dispatchEvent(customEvent)
+          this.host.requestUpdate()
+        })
+        .on('mouseover', showTooltip)
+        .on('mouseout', hideTooltip)
+
+      if (task.progress !== undefined) {
+        const progressWidth = taskWidth * (task.progress / 100)
+        const progressBar = body
+          .append('rect')
+          .attr('x', startX)
+          .attr('y', taskY + 7.5 - 3.75)
+          .attr('width', progressWidth)
+          .attr('height', 7.5)
+          .attr('fill', 'lightgreen')
+
+        progressBar
+          .on('click', () => {
+            this.selectedTaskId = task.id
+            const customEvent = new CustomEvent('task-clicked', {
+              detail: { taskId: task.id },
+              bubbles: true,
+              composed: true
+            })
+            this.host.dispatchEvent(customEvent)
+            this.host.requestUpdate()
+          })
+          .on('mouseover', showTooltip)
+          .on('mouseout', hideTooltip)
+      }
+
+      taskPositions[task.id] = { x: endX + this.baseWidth / this.getScale(), y: taskY + 7.5, width: taskWidth }
+    })
+
+    this.tasks.forEach(task => {
+      if (task.dependsOn && taskPositions[task.dependsOn]) {
+        const prevTask = taskPositions[task.dependsOn]
+        const currTask = taskPositions[task.id]
+
+        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)
+      }
+    })
+  }
+
+  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'
+    }
+  }
+
+  handleWheelForBody(event: WheelEvent, container: HTMLDivElement) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
+      container.scrollLeft += event.shiftKey ? event.deltaX : event.deltaY
+    } else {
+      container.scrollTop += event.deltaY
+    }
+
+    const customEvent = new CustomEvent('scroll', {
+      detail: { offset: event.shiftKey ? container.scrollLeft : container.scrollTop },
+      bubbles: true,
+      composed: true
+    })
+
+    this.host.dispatchEvent(customEvent)
+  }
+
+  handleTouchStartForBody(event: TouchEvent, container: HTMLDivElement) {
+    event.stopPropagation()
+
+    this.touchStartY = event.touches[0].clientY
+    this.scrollStartY = container.scrollTop
+  }
+
+  handleTouchMoveForBody(event: TouchEvent, container: HTMLDivElement) {
+    const touchCurrentY = event.touches[0].clientY
+    const deltaY = this.touchStartY! - touchCurrentY
+    container.scrollTop = this.scrollStartY! + deltaY
+
+    const customEvent = new CustomEvent('scroll', {
+      detail: { offset: container.scrollTop },
+      bubbles: true,
+      composed: true
+    })
+    this.host.dispatchEvent(customEvent)
+  }
+}

package/src/locales.ts

@@ -0,0 +1,78 @@
+export const locales = {
+  'en-US': {
+    dateTime: '%x, %X',
+    date: '%-m/%-d/%Y',
+    time: '%-I:%M:%S %p',
+    periods: ['AM', 'PM'],
+    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    months: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
+    ],
+    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  },
+  'ko-KR': {
+    dateTime: '%x, %X',
+    date: '%Y-%m-%d',
+    time: '%H:%M:%S',
+    periods: ['오전', '오후'],
+    days: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
+    shortDays: ['일', '월', '화', '수', '목', '금', '토'],
+    months: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
+    shortMonths: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
+  },
+  'ja-JP': {
+    dateTime: '%x, %X',
+    date: '%Y/%m/%d',
+    time: '%H:%M:%S',
+    periods: ['午前', '午後'],
+    days: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
+    shortDays: ['日', '月', '火', '水', '木', '金', '土'],
+    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+  },
+  'zh-CN': {
+    dateTime: '%x, %X',
+    date: '%Y-%m-%d',
+    time: '%H:%M:%S',
+    periods: ['上午', '下午'],
+    days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    shortDays: ['日', '一', '二', '三', '四', '五', '六'],
+    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+  },
+  'ms-MY': {
+    dateTime: '%x, %X',
+    date: '%d/%m/%Y',
+    time: '%H:%M:%S',
+    periods: ['AM', 'PM'],
+    days: ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu'],
+    shortDays: ['Ahd', 'Isn', 'Sel', 'Rab', 'Kha', 'Jum', 'Sab'],
+    months: [
+      'Januari',
+      'Februari',
+      'Mac',
+      'April',
+      'Mei',
+      'Jun',
+      'Julai',
+      'Ogos',
+      'September',
+      'Oktober',
+      'November',
+      'Disember'
+    ],
+    shortMonths: ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ogo', 'Sep', 'Okt', 'Nov', 'Dis']
+  }
+}