@operato/gantt 8.0.0-alpha.6 → 8.0.0-beta.1

package/src/ox-resource-chart.ts

@@ -1,145 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { ResourceChartController } from './resource-chart-controller'
-import { Task, Resource, TimeScale } from './types'
-
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-resource-chart')
-export class OxResourceChart extends LitElement {
-  static styles = [
-    MDTypeScaleStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        overflow: hidden;
-        position: relative;
-      }
-
-      div[chart-container] {
-        flex-direction: column;
-        overflow-x: auto;
-        overflow-y: hidden;
-      }
-
-      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-outline));
-        height: 30px;
-        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] {
-        display: block;
-        min-width: 100%;
-      }
-
-      .grid line {
-        stroke: #e0e0e0;
-      }
-
-      .grid path {
-        stroke-width: 0;
-      }
-    `
-  ]
-
-  @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: TimeScale = 'week-day'
-  @property({ type: Array }) resources: Resource[] = []
-  @property({ type: Array }) tasks: Task[] = []
-
-  @query('[chart-container]') container!: HTMLDivElement
-  @query('svg[header]') svgHeader!: SVGSVGElement
-  @query('svg[body]') svgBody!: SVGSVGElement
-
-  private resourceChartController: ResourceChartController
-
-  constructor() {
-    super()
-    this.resourceChartController = new ResourceChartController(this, this.fromDate, this.toDate, this.axisScale)
-  }
-
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {
-      this.resourceChartController.updateRange(this.fromDate, this.toDate)
-    }
-
-    if (changedProperties.has('resources')) {
-      this.resourceChartController.setResources(this.resources)
-      this.updateChartHeight()
-    }
-
-    if (changedProperties.has('tasks')) {
-      this.resourceChartController.setTasks(this.flattenTasks(this.tasks))
-      this.updateChartHeight()
-    }
-
-    if (changedProperties.has('axisScale')) {
-      this.resourceChartController.level = this.axisScale
-      this.resourceChartController.updateTimeScale()
-    }
-
-    this.resourceChartController.drawAxes(this.svgHeader)
-    this.resourceChartController.drawBody(this.svgBody)
-  }
-
-  updateChartHeight() {
-    const resourceCount = this.resources.length
-    const rowHeight = 30 // 리소스 하나당 할당된 높이 (픽셀)
-    const minHeight = 200 // 최소 높이
-    const chartHeight = Math.max(resourceCount * rowHeight, minHeight)
-
-    this.svgBody.style.height = `${chartHeight}px`
-  }
-
-  render() {
-    return html`
-      <div
-        chart-container
-        @wheel=${(e: WheelEvent) => this.resourceChartController.handleWheelForBody(e, this.container)}
-        @touchstart=${(e: TouchEvent) => this.resourceChartController.handleTouchStartForBody(e, this.container)}
-        @touchmove=${(e: TouchEvent) => this.resourceChartController.handleTouchMoveForBody(e, this.container)}
-      >
-        <svg header></svg>
-        <svg body></svg>
-      </div>
-    `
-  }
-
-  syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {
-    this.resourceChartController.syncTimeScale(detail)
-    this.requestUpdate()
-  }
-
-  getHorizontalOffset(): number {
-    return this.container.scrollLeft
-  }
-
-  setHorizontalOffset(offset: number) {
-    this.container.scrollLeft = offset
-  }
-
-  getVerticalOffset(): number {
-    return this.container.scrollTop
-  }
-
-  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/src/ox-task-tooltip.ts

@@ -1,120 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-task-tooltip')
-export class OxTaskTooltip extends LitElement {
-  static styles = css`
-    :host {
-      position: fixed; /* position: absolute로 변경 */
-      background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface-variant, #f9f9f9));
-      border: 1px solid var(--ox-gantt-tooltip-border-color, var(--md-sys-color-outline, #ccc));
-      padding: var(--spacing-medium, 10px);
-      border-radius: var(--spacing-medium, 8px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      visibility: hidden;
-      z-index: 10;
-      max-width: 300px;
-      font-family: Roboto;
-      font-size: 14px;
-      line-height: 1.6;
-      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
-      transition:
-        visibility 0.1s,
-        opacity 0.1s;
-      opacity: 0; /* 초기에는 보이지 않음 */
-    }
-    :host([visible]) {
-      visibility: visible;
-      opacity: 1; /* 보일 때는 불투명 */
-    }
-    .title {
-      font-weight: bold;
-      font-size: 16px;
-      margin-bottom: 8px;
-      color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4)); /* 파란색 텍스트 */
-    }
-    .detail {
-      display: grid;
-      grid-template-columns: auto auto 1fr;
-      gap: 4px;
-      align-items: center;
-    }
-    .label {
-      font-weight: bold;
-      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
-      text-align: right; /* 라벨을 우측 정렬 */
-    }
-    .colon {
-      text-align: center;
-      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
-    }
-    .value {
-      text-align: left; /* 값을 좌측 정렬 */
-      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
-    }
-  `
-
-  @property({ type: String }) title = ''
-  @property({ type: String }) startDate = ''
-  @property({ type: String }) endDate = ''
-  @property({ type: Number }) progress = 0
-  @property({ type: String }) type = ''
-
-  show(x: number, y: number) {
-    const tooltipWidth = this.offsetWidth
-    const tooltipHeight = this.offsetHeight
-    const offsetX = 10
-    const offsetY = 10
-
-    // 기본 위치 계산
-    let left = x + offsetX
-    let top = y + offsetY
-
-    // 화면 경계 확인 및 조정
-    const screenWidth = window.innerWidth
-    const screenHeight = window.innerHeight
-
-    if (left + tooltipWidth > screenWidth) {
-      left = x - tooltipWidth - offsetX
-    }
-    if (top + tooltipHeight > screenHeight) {
-      top = y - tooltipHeight - offsetY
-    }
-
-    // offsetParent 요소를 기준으로 위치 설정
-    if (this.offsetParent) {
-      const parentRect = this.offsetParent!.getBoundingClientRect()
-      this.style.left = `${left - parentRect.left}px`
-      this.style.top = `${top - parentRect.top}px`
-    } else {
-      this.style.left = `${left}px`
-      this.style.top = `${top}px`
-
-      const myRect = this.getBoundingClientRect()
-
-      /* 실제 바운드와 설정한 left/top 이 일치하지 않는다면, 부모 어딘가에서 transform 되었다고 판단하고, 보정해줌 */
-      if (myRect.left !== left || myRect.top !== top) {
-        this.style.left = `${left + (left - myRect.left)}px`
-        this.style.top = `${top + (top - myRect.top)}px`
-      }
-    }
-
-    this.setAttribute('visible', '')
-  }
-
-  hide() {
-    this.removeAttribute('visible')
-  }
-
-  render() {
-    return html`
-      <div class="title">${this.title}</div>
-      <div class="detail">
-        <span class="label">Type</span><span class="colon">:</span><span class="value">${this.type}</span>
-        <span class="label">Start Date</span><span class="colon">:</span><span class="value">${this.startDate}</span>
-        <span class="label">End Date</span><span class="colon">:</span><span class="value">${this.endDate}</span>
-        <span class="label">Progress</span><span class="colon">:</span><span class="value">${this.progress}%</span>
-      </div>
-    `
-  }
-}

package/src/resource-chart-controller.ts

@@ -1,284 +0,0 @@
-import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'
-import * as d3 from 'd3'
-import { TimeScale, Task, Resource } from './types'
-import { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header'
-
-export class ResourceChartController 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 touchStartX?: number
-  private scrollStartX?: number
-  private scrollStartY?: number
-
-  public baseWidth: number = 30
-  public level: TimeScale
-  public resources: Resource[] = []
-  public tasks: Task[] = []
-
-  constructor(host: ReactiveControllerHost & LitElement, fromDate: string, toDate: string, axisScale: TimeScale) {
-    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
-  }
-
-  public syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {
-    this.baseWidth = detail.baseWidth
-    this.level = detail.level
-
-    this.updateTimeScale()
-  }
-
-  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()
-  }
-
-  setResources(resources: Resource[]) {
-    this.resources = resources
-    this.host.requestUpdate()
-  }
-
-  setTasks(tasks: Task[]) {
-    this.tasks = tasks
-    this.host.requestUpdate()
-  }
-
-  updateTimeScale() {
-    this.timeScale.range([0, this.getChartWidth()])
-  }
-
-  getScale() {
-    return getScale(this.level)
-  }
-
-  getChartWidth() {
-    return getChartWidth(this.fromTime, this.toTime, this.baseWidth, this.level)
-  }
-
-  drawAxes(svgHeader: SVGElement) {
-    drawTimeScaleHeader(svgHeader, this.timeScale, this.fromTime, this.toTime, this.baseWidth, this.level, false)
-  }
-
-  drawBody(svgBody: SVGElement) {
-    const body = d3.select(svgBody)
-
-    body.selectAll('*').remove()
-    body.attr('width', this.getChartWidth())
-
-    if (this.resources.length > 0) {
-      const chartHeight = this.resources.length * 30
-
-      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', chartHeight) // Ensure vertical lines extend to the bottom
-            .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(this.fromTime), d3.timeDay.offset(this.toTime, 1))
-      } else if (this.level === 'quarter-week') {
-        ticks = d3.timeWeek.every(1)!.range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
-      } else if (this.level === 'year-month') {
-        ticks = d3.timeMonth.every(1)!.range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))
-      } else if (this.level === 'year-quarter') {
-        ticks = d3.timeMonth.every(3)!.range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
-      }
-
-      addGridLines(ticks!)
-
-      this.renderResourceAllocations(body, ticks!, chartHeight)
-    }
-  }
-
-  renderResourceAllocations(
-    body: d3.Selection<SVGElement, unknown, null, undefined>,
-    ticks: Date[],
-    chartHeight: number
-  ) {
-    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')
-            .attr('stroke', 'var(--ox-gantt-color-text, var(--md-sys-color-on-primary-container))')
-            .text(allocation)
-            .style('font-size', '12px')
-        }
-      })
-    })
-
-    // Draw horizontal grid lines for each resource row
-    for (let i = 0; i <= this.resources.length; i++) {
-      body
-        .append('line')
-        .attr('x1', 0)
-        .attr('x2', this.getChartWidth())
-        .attr('y1', i * 30)
-        .attr('y2', i * 30)
-        .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
-        .attr('stroke-width', 1)
-    }
-  }
-
-  calculateResourceAllocations(ticks: Date[]): { [key: string]: { [key: string]: number } } {
-    const resourceAllocations: { [key: string]: { [key: string]: number } } = {}
-
-    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
-      })
-    })
-
-    this.tasks.forEach(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)
-      }
-    })
-
-    return resourceAllocations
-  }
-
-  getTickEnd(tick: Date): 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): string {
-    return `${start.toISOString().split('T')[0]}_${end.toISOString().split('T')[0]}`
-  }
-
-  handleWheelForBody(event: WheelEvent, container: HTMLDivElement) {
-    event.preventDefault()
-    event.stopPropagation()
-
-    const deltaModeFactor =
-      event.deltaMode === WheelEvent.DOM_DELTA_LINE
-        ? 16
-        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
-          ? container.clientHeight
-          : 1
-    const deltaX = event.deltaX * deltaModeFactor
-    const deltaY = event.deltaY * deltaModeFactor
-
-    container.scrollLeft += deltaX
-    container.scrollTop += deltaY
-
-    const customEvent = new CustomEvent('scroll', {
-      detail: {
-        scrollLeft: container.scrollLeft,
-        scrollTop: container.scrollTop
-      },
-      bubbles: true,
-      composed: true
-    })
-
-    this.host.dispatchEvent(customEvent)
-  }
-
-  handleTouchStartForBody(event: TouchEvent, container: HTMLDivElement) {
-    event.stopPropagation()
-
-    this.touchStartX = event.touches[0].clientX
-    this.touchStartY = event.touches[0].clientY
-
-    this.scrollStartX = container.scrollLeft
-    this.scrollStartY = container.scrollTop
-  }
-
-  handleTouchMoveForBody(event: TouchEvent, container: HTMLDivElement) {
-    const touchCurrentX = event.touches[0].clientX
-    const touchCurrentY = event.touches[0].clientY
-
-    const deltaX = this.touchStartX! - touchCurrentX
-    const deltaY = this.touchStartY! - touchCurrentY
-
-    container.scrollLeft = this.scrollStartX! + deltaX
-    container.scrollTop = this.scrollStartY! + deltaY
-
-    const customEvent = new CustomEvent('scroll', {
-      detail: {
-        scrollLeft: container.scrollLeft,
-        scrollTop: container.scrollTop
-      },
-      bubbles: true,
-      composed: true
-    })
-
-    this.host.dispatchEvent(customEvent)
-  }
-}

package/src/types.ts

@@ -1,32 +0,0 @@
-export type TaskTag = 'done' | 'active' | 'critical' | 'milestone'
-export type TaskType = 'group' | 'task' | 'milestone' | 'phase'
-
-export interface Task {
-  id: string
-  title: string
-  type: TaskType
-  startDate: Date | string
-  endDate: Date | string
-  progress?: number
-  dependsOn?: string
-  duration: number
-  tags?: TaskTag[]
-  children?: Task[]
-  resources?: Resource[]
-  collapsed?: boolean
-}
-
-export interface ColumnConfig {
-  name: string
-  label: string
-  visible: boolean
-  width: number
-  order: number
-}
-
-export type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'
-
-export interface Resource {
-  type: string
-  allocated: number
-}

package/src/utils.ts

@@ -1,13 +0,0 @@
-import { TimeScale } from './types'
-
-const levels: TimeScale[] = ['week-day', 'quarter-week', 'year-month', 'year-quarter']
-
-export function levelUp(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): TimeScale {
-  const current = Math.min(levels.length, levels.indexOf(level) + 1)
-  return levels[current]
-}
-
-export function levelDown(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): TimeScale {
-  const current = Math.max(0, levels.indexOf(level) - 1)
-  return levels[current]
-}