@operato/gantt 8.0.0-beta.0 → 8.0.0-beta.2

package/src/ox-task-tooltip.ts

@@ -1,142 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-@customElement('ox-task-tooltip')
-export class OxTaskTooltip extends LitElement {
-  static styles = css`
-    :host {
-      position: fixed;
-      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));
-      outline: none;
-    }
-    .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));
-    }
-    .close-button {
-      position: absolute;
-      top: 4px;
-      right: 8px;
-      background: none;
-      border: none;
-      font-size: 16px;
-      cursor: pointer;
-      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 = ''
-  @property({ type: Boolean, attribute: true }) visible: boolean = false
-
-  @query('.title') titleElement!: HTMLDivElement
-
-  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', '')
-
-    setTimeout(() => {
-      this.titleElement.addEventListener('blur', this.hide)
-      this.titleElement.focus({ preventScroll: true })
-    }, 500)
-  }
-
-  hide = () => {
-    this.titleElement.removeEventListener('blur', this.hide)
-    this.removeAttribute('visible')
-  }
-
-  render() {
-    return html`
-      <div class="close-button" @click=${this.hide} @touchstart=${this.hide}>✕</div>
-      <div class="title" tabindex="0">${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,33 +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[]
-  style?: string
-  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]
-}

package/stories/ox-gantt-chart.stories.ts

@@ -1,125 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { CommonHeaderStyles } from '@operato/styles'
-import '../src/ox-gantt-chart.js'
-
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-gantt-chart',
-  component: 'ox-gantt-chart',
-  argTypes: {
-    axisScale: { control: 'select', options: ['year-quarter', 'year-month', 'quarter-week', 'week-day'] },
-    fromDate: { control: 'string' },
-    toDate: { control: 'string' },
-    extendGridLines: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  axisScale: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'
-  fromDate: string
-  toDate: string
-  extendGridLines: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  axisScale = 'week-day',
-  fromDate = '',
-  toDate = '',
-  extendGridLines
-}: ArgTypes) => html`
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/md-typescale-styles.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 800px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    ox-gantt {
-      width: 90%;
-      height: 500px;
-      box-sizing: border-box;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <style>
-    ox-gantt-chart {
-      height: 500px;
-      border: 1px solid black;
-    }
-  </style>
-
-  <ox-gantt-chart
-    .axisScale=${axisScale}
-    .fromDate=${fromDate}
-    .toDate=${toDate}
-    ?extend-grid-lines=${extendGridLines}
-  ></ox-gantt-chart>
-`
-
-export const YearMonth = Template.bind({})
-YearMonth.args = {
-  axisScale: 'year-quarter',
-  fromDate: '2020-01-01',
-  toDate: '2025-12-31'
-}
-
-YearMonth.args = {
-  axisScale: 'year-month',
-  fromDate: '2022-01-01',
-  toDate: '2024-12-31'
-}
-
-export const MonthWeek = Template.bind({})
-MonthWeek.args = {
-  axisScale: 'quarter-week',
-  fromDate: '2022-01-01',
-  toDate: '2023-03-31'
-}
-
-export const WeekDay = Template.bind({})
-WeekDay.args = {
-  axisScale: 'week-day',
-  fromDate: '2022-01-01',
-  toDate: '2022-11-15'
-}