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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/gantt",
   "description": "Webcomponents for gantt chart following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-alpha.6",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -42,9 +42,9 @@
     }
   },
   "dependencies": {
-    "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/styles": "^8.0.0-alpha.4",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/i18n": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "d3": "^7.8.5",
     "d3-time-format": "^4.1.0",
     "i18next": "^23.11.5",
@@ -52,18 +52,18 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
+    "@open-wc/testing": "^4.0.0",
     "@types/lodash-es": "^4.17.5",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -85,5 +85,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f0c1979adcf64df1f543f383ae7385a56df1e57a"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
-}

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook'
-import baseConfig from '../web-dev-server.config.mjs'
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
-})

package/src/draw-time-scale-header.ts

@@ -1,142 +0,0 @@
-import * as d3 from 'd3'
-import { TimeScale } from './types'
-
-export function drawTimeScaleHeader(
-  svgHeader: SVGElement,
-  timeScale: d3.ScaleTime<number, number, never>,
-  fromTime: Date,
-  toTime: Date,
-  baseWidth: number,
-  level: TimeScale,
-  isTwoLevelHeader: boolean = true
-) {
-  const header = d3.select(svgHeader)
-
-  header.selectAll('*').remove()
-  header.attr('width', getChartWidth(fromTime, toTime, baseWidth, level))
-
-  if (!isTwoLevelHeader) {
-    header.attr('height', '30px')
-  } else {
-    header.attr('height', '40px')
-  }
-
-  const addGridLines = (ticks: Date[], yStart: number, yEnd: number) => {
-    ticks.forEach(tick => {
-      const startX = 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, undefined>,
-    tickInterval: d3.CountableTimeInterval
-  ) => {
-    selection.selectAll('text').attr('transform', (d: any) => {
-      const tickIntervalWidth = timeScale(tickInterval.offset(d, 1)) - timeScale(d)
-      return `translate(${tickIntervalWidth / 2}, ${isTwoLevelHeader ? -2 : -8})`
-    })
-  }
-
-  const drawLevel = (
-    mainTicks: Date[],
-    mainFormat: (d: Date) => string,
-    mainInterval: d3.CountableTimeInterval,
-    detailTicks: Date[],
-    detailFormat: (d: Date) => string,
-    detailInterval: d3.CountableTimeInterval
-  ) => {
-    if (isTwoLevelHeader) {
-      const mainAxis = d3
-        .axisTop(timeScale)
-        .ticks(mainInterval)
-        .tickFormat(mainFormat as any)
-        .tickSize(0)
-      addGridLines(mainTicks, 0, 20)
-
-      const mainAxisG = header
-        .append('g')
-        .classed('main-axis no-select md-typescale-label-small', true)
-        .attr('transform', 'translate(0, 20)')
-        .call(mainAxis)
-
-      centerLabel(mainAxisG, mainInterval)
-    }
-
-    const detailAxis = d3
-      .axisTop(timeScale)
-      .ticks(detailInterval)
-      .tickFormat(detailFormat as any)
-      .tickSize(0)
-    addGridLines(detailTicks, isTwoLevelHeader ? 20 : 0, isTwoLevelHeader ? 40 : 30)
-
-    const detailAxisG = header
-      .append('g')
-      .classed('detail-axis no-select md-typescale-label-small', true)
-      .attr('transform', `translate(0, ${isTwoLevelHeader ? 40 : 30})`)
-      .call(detailAxis)
-
-    centerLabel(detailAxisG, detailInterval)
-  }
-
-  if (level === 'week-day') {
-    drawLevel(
-      d3.timeWeek.every(1)!.range(d3.timeWeek.floor(fromTime), d3.timeWeek.offset(toTime, 1)),
-      d3.timeFormat('%B %d'),
-      d3.timeWeek,
-      d3.timeDay.every(1)!.range(d3.timeDay.floor(fromTime), d3.timeDay.offset(toTime, 1)),
-      d3.timeFormat('%d'),
-      d3.timeDay
-    )
-  } else if (level === 'quarter-week') {
-    drawLevel(
-      d3.timeMonth.every(3)!.range(d3.timeMonth.floor(fromTime), d3.timeMonth.offset(toTime, 3)),
-      d3.timeFormat('%Y %b'),
-      d3.timeMonth.every(3)! as any,
-      d3.timeWeek.every(1)!.range(d3.timeWeek.floor(fromTime), d3.timeWeek.offset(toTime, 1)),
-      d3.timeFormat('%b %d'),
-      d3.timeWeek
-    )
-  } else if (level === 'year-month') {
-    drawLevel(
-      d3.timeYear.every(1)!.range(d3.timeYear.floor(fromTime), d3.timeYear.offset(toTime, 1)),
-      d3.timeFormat('%Y'),
-      d3.timeYear,
-      d3.timeMonth.every(1)!.range(d3.timeMonth.floor(fromTime), d3.timeMonth.offset(toTime, 1)),
-      d3.timeFormat('%b'),
-      d3.timeMonth
-    )
-  } else if (level === 'year-quarter') {
-    drawLevel(
-      d3.timeYear.every(1)!.range(d3.timeYear.floor(fromTime), d3.timeYear.offset(toTime, 1)),
-      d3.timeFormat('%Y'),
-      d3.timeYear,
-      d3.timeMonth.every(3)!.range(d3.timeMonth.floor(fromTime), d3.timeMonth.offset(toTime, 3)),
-      d3.timeFormat('%Y %b'),
-      d3.timeMonth.every(3)! as any
-    )
-  }
-}
-
-export function getChartWidth(fromTime: Date, toTime: Date, baseWidth: number, level: TimeScale): number {
-  const totalDays = d3.timeDay.count(fromTime, d3.timeDay.offset(toTime, 1))
-  return (totalDays * baseWidth) / getScale(level)
-}
-
-export function getScale(level: TimeScale): number {
-  if (level === 'quarter-week') {
-    return 7 / 2
-  } else if (level === 'year-month') {
-    return 30 / 2
-  } else if (level === 'year-quarter') {
-    return 90 / 2
-  }
-  return 1
-}

package/src/gantt-chart-controller.ts

@@ -1,336 +0,0 @@
-import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'
-import * as d3 from 'd3'
-import { TimeScale, Task, TaskTag } from './types'
-import { OxTaskTooltip } from './ox-task-tooltip'
-import { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header'
-
-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 touchStartX?: number
-  private touchStartY?: number
-  private scrollStartX?: number
-  private scrollStartY?: number
-
-  private colorProvider?: (task: Task) => string
-
-  public baseWidth: number = 30
-  public level: TimeScale
-  public selectedTaskId?: string
-
-  public tasks: Task[] = []
-  public extendGridLines: boolean = false
-
-  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()
-  }
-
-  setColorProvider(colorProvider: (task: Task) => string) {
-    this.colorProvider = colorProvider
-  }
-
-  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()])
-  }
-
-  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)
-  }
-
-  drawBody(svgBody: SVGElement, tooltip: OxTaskTooltip) {
-    const body = d3.select(svgBody)
-
-    body.selectAll('*').remove()
-    body.attr('width', this.getChartWidth())
-
-    // Define the arrow marker
-    const defs = body.append('defs')
-    defs
-      .append('marker')
-      .attr('id', 'arrow')
-      .attr('viewBox', '0 0 10 10')
-      .attr('refX', 10) // Adjusted refX to move the arrow tip closer to the line's end
-      .attr('refY', 5)
-      .attr('markerWidth', 6)
-      .attr('markerHeight', 6)
-      .attr('orient', 'auto-start-reverse')
-      .append('path')
-      .attr('d', 'M 0 0 L 10 5 L 0 10 z')
-      .attr('fill', 'var(--md-sys-color-on-primary-container, black)')
-
-    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 startDate = new Date(task.startDate)
-      const endDate = new Date(task.endDate)
-
-      const startX = this.timeScale(d3.timeDay.floor(d3.min([startDate, endDate])!))
-      const endX = this.timeScale(d3.timeDay.offset(d3.timeDay.ceil(d3.max([startDate, 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 = startDate.toISOString().split('T')[0]
-        tooltip.endDate = 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.colorProvider ? this.colorProvider(task) : 'gray')
-        .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', 'var(--md-sys-color-on-primary-container, black)')
-          .attr('fill', 'none')
-          .attr('stroke-width', 1)
-          .attr('marker-end', 'url(#arrow)') // Add arrow marker
-      }
-    })
-  }
-
-  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()
-
-    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)
-  }
-}