@operato/gantt 2.0.0-alpha.154 → 2.0.0-beta.1

package/src/ox-gantt-resize-splitter.ts

@@ -0,0 +1,137 @@
+import { LitElement, css, html } from 'lit'
+
+import { customElement } from 'lit/decorators.js'
+
+@customElement('ox-gantt-resize-splitter')
+export class OxGanttResizeSplitter extends LitElement {
+  static styles = css`
+    :host {
+      position: relative;
+      opacity: 0.7;
+      background-color: var(--splitter-background-color);
+    }
+
+    :host(:hover) {
+      background-color: var(--splitter-hover-background-color);
+    }
+
+    div {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  `
+
+  private dragstart?: { x: number; y: number }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    if (this.hasAttribute('vertical')) {
+      this.style.width = '3px'
+      this.style.height = '100%'
+      this.style.cursor = 'col-resize'
+    } else {
+      this.style.width = '100%'
+      this.style.height = '3px'
+      this.style.cursor = 'row-resize'
+    }
+  }
+
+  render() {
+    return html` <div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div> `
+  }
+
+  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함
+  _throttled(delay: number, fn: (...args: any) => void) {
+    let lastCall = 0
+    return function (...args: any) {
+      const now = new Date().getTime()
+      if (now - lastCall < delay) {
+        return
+      }
+      lastCall = now
+      return fn(...args)
+    }
+  }
+
+  private onMouseDown(e: MouseEvent) {
+    this.dragstart = {
+      x: e.clientX,
+      y: e.clientY
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('splitter-dragstart', {
+        bubbles: true,
+        composed: true
+      })
+    )
+
+    window.addEventListener('mousemove', this.onMouseMoveHandler)
+    window.addEventListener('mouseup', this.onMouseUpHandler)
+
+    e.stopPropagation()
+  }
+
+  onMouseMoveHandler = this._throttled(100, this.onMouseMove.bind(this)) // this.onMouseMove.bind(this)
+  onMouseUpHandler = this.onMouseUp.bind(this)
+
+  private onMouseMove(e: MouseEvent) {
+    if (!this.dragstart) {
+      return
+    }
+
+    e.preventDefault()
+
+    this.dispatchEvent(
+      new CustomEvent('splitter-drag', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          x: e.clientX - this.dragstart!.x,
+          y: e.clientY - this.dragstart!.y
+        }
+      })
+    )
+    requestAnimationFrame(() => {
+      dispatchEvent(new Event('resize'))
+    })
+
+    if (this.hasAttribute('vertical')) {
+      document.body.style.cursor = 'col-resize'
+    } else {
+      document.body.style.cursor = 'row-resize'
+    }
+
+    document.body.style.userSelect = 'none'
+
+    e.stopPropagation()
+  }
+
+  private onMouseUp(e: MouseEvent) {
+    window.removeEventListener('mousemove', this.onMouseMoveHandler)
+    window.removeEventListener('mouseup', this.onMouseUpHandler)
+
+    this.dispatchEvent(
+      new CustomEvent('splitter-dragend', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          x: e.clientX - this.dragstart!.x,
+          y: e.clientY - this.dragstart!.y
+        }
+      })
+    )
+
+    requestAnimationFrame(() => {
+      dispatchEvent(new Event('resize'))
+      delete this.dragstart
+    })
+
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+
+    e.stopPropagation()
+  }
+}

package/src/ox-gantt.ts

@@ -0,0 +1,177 @@
+import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+import { ScrollbarStyles } from '@operato/styles'
+
+import './ox-gantt-chart.js'
+import './ox-gantt-resize-splitter.js'
+import { OxGanttChart } from './ox-gantt-chart.js'
+import { Task } from './types.js'
+
+@customElement('ox-gantt')
+export class OxGantt extends LitElement {
+  static styles = [
+    MDTypeScaleStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: block;
+        font-family: Arial, sans-serif;
+        text-wrap: nowrap;
+      }
+
+      .container {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      .task-container {
+        padding: 0;
+        overflow: auto;
+        overflow-y: overlay;
+        box-sizing: border-box;
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+      }
+
+      .chart-container {
+        flex: 1;
+        padding: 0;
+        box-sizing: border-box;
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+      }
+
+      ox-gantt-resize-splitter {
+        width: 4px;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        margin: -1px;
+        margin-right: 0;
+      }
+
+      thead th {
+        position: sticky;
+        top: -1px;
+        z-index: 1;
+        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
+      }
+
+      th,
+      td {
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        padding: 4px;
+        text-align: left;
+      }
+
+      th {
+        height: 40px;
+        box-sizing: border-box;
+      }
+
+      td {
+        height: 30px;
+        box-sizing: border-box;
+      }
+    `
+  ]
+
+  @property({ type: Array }) tasks: Task[] = []
+  @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 */
+
+  @query('.container') container!: HTMLDivElement
+  @query('.task-container') taskContainer!: HTMLDivElement
+  @query('.chart-container') chartContainer!: HTMLDivElement
+  @query('table') taskTable!: HTMLTableElement
+  @query('ox-gantt-chart') ganttChart!: OxGanttChart
+
+  private _startWidth: number = 0
+
+  render() {
+    return html`
+      <div class="container md-typescale-body-medium">
+        <div class="task-container" @scroll=${this.syncScroll}>${this.renderTaskTable()}</div>
+        <ox-gantt-resize-splitter
+          vertical
+          @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
+          @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
+        ></ox-gantt-resize-splitter>
+        <ox-gantt-chart
+          class="chart-container"
+          @scroll=${this.syncScroll}
+          .fromDate=${this.fromDate}
+          .toDate=${this.toDate}
+          .tasks=${this.tasks}
+          axis-scale="week-day"
+          extend-grid-lines
+        ></ox-gantt-chart>
+      </div>
+    `
+  }
+
+  renderTaskTable() {
+    return html`
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Section</th>
+            <th>Title</th>
+            <th>Type</th>
+            <th>Start Time</th>
+            <th>End Time</th>
+            <th>Tags</th>
+            <th>Progress</th>
+            <th>Prev. Task</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${this.tasks.map(
+            task => html`
+              <tr>
+                <td>${task.id}</td>
+                <td>${task.section?.name || ''}</td>
+                <td>${task.title}</td>
+                <td>${task.type}</td>
+                <td>${task.startTime.toISOString().split('T')[0]}</td>
+                <td>${task.endTime.toISOString().split('T')[0]}</td>
+                <td>${task.tags?.join(', ') || ''}</td>
+                <td>${task.progress || ''}</td>
+                <td>${task.after || ''}</td>
+              </tr>
+            `
+          )}
+        </tbody>
+      </table>
+    `
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    this.taskContainer.style.width = '254px'
+  }
+
+  updated(changes: PropertyValues<this>) {}
+
+  syncScroll() {
+    this.ganttChart.setVerticalOffset(this.taskContainer.scrollTop)
+  }
+
+  resizeStart(e: CustomEvent) {
+    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth
+  }
+
+  resizeDrag(e: CustomEvent) {
+    var delta = e.detail
+    var x = (e.target as HTMLElement)?.previousElementSibling as HTMLElement
+    if (x) {
+      x.style.width = `${this._startWidth + delta.x}px`
+    }
+  }
+}

package/src/types.ts

@@ -1,16 +1,22 @@
-export type TaskTag = 'done' | 'active' | 'crit' | 'milestone'
+export type TaskTag = 'done' | 'active' | 'critical' | 'milestone'
+export type TaskType = 'task' | 'milestone' | 'phase'
 
 export interface Task {
   id: string
-  type: string
-  section: any
+  title: string
+  type: TaskType
+  section?: Section
   startTime: Date
   endTime: Date
-  after: string
-  length: string
-  tags: TaskTag[]
+  progress?: number
+  after?: string // 이전 태스크의 ID
+  length: string // 예: '3d' (3 days)
+  tags?: TaskTag[]
+  children?: Task[]
 }
 
 export interface Section {
   name: string
 }
+
+export type LEVEL = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'

package/src/utils.ts

@@ -0,0 +1,13 @@
+import { LEVEL } from './types'
+
+const levels: LEVEL[] = ['week-day', 'quarter-week', 'year-month', 'year-quarter']
+
+export function levelUp(level: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'): LEVEL {
+  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'): LEVEL {
+  const current = Math.max(0, levels.indexOf(level) - 1)
+  return levels[current]
+}

package/stories/{ox-lite-gantt.stories.ts → ox-gantt-chart.stories.ts}

@@ -1,15 +1,17 @@
+import { html, TemplateResult } from 'lit'
 import { CommonHeaderStyles } from '@operato/styles'
-import '../src/lite-gantt.js'
+import '../src/ox-gantt-chart.js'
 
-import { html, TemplateResult } from 'lit'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
-import { Task, Section } from '../src/types.js'
-
 export default {
-  title: 'ox-lite-gantt',
-  component: 'ox-lite-gantt',
+  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' },
     theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
@@ -21,15 +23,26 @@ interface Story<T> {
 }
 
 interface ArgTypes {
+  axisScale: 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'
+  fromDate: string
+  toDate: string
+  extendGridLines: boolean
   theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({
+  axisScale = 'week-day',
+  fromDate = '',
+  toDate = '',
+  extendGridLines,
+  theme = 'light'
+}: 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"
@@ -55,15 +68,18 @@ const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
   <style>
     body {
       width: 100%;
-      height: 500px;
+      height: 800px;
       text-align: center;
 
       background-color: var(--md-sys-color-background);
       color: var(--md-sys-color-on-background);
     }
 
-    .header {
-      padding: var(--spacing-medium);
+    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);
     }
@@ -73,17 +89,44 @@ const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
     document.body.classList.add('${theme}')
   </script>
 
-  <div class="header">
-    <div class="filters">
-      <ox-lite-gantt
-        @change=${(e: CustomEvent) => {
-          console.log('search form changed', e.detail)
-        }}
-      >
-      </ox-lite-gantt>
-    </div>
-  </div>
+  <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 Regular = Template.bind({})
-Regular.args = {}
+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'
+}