@operato/gantt 7.0.8 → 7.0.21

package/dist/src/ox-resource-chart.js

@@ -0,0 +1,194 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+import { ScrollbarStyles } from '@operato/styles';
+let OxResourceChart = class OxResourceChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fromDate = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0];
+        this.toDate = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0];
+        this.axisScale = 'week-day';
+        this.resources = [];
+        this._baseWidth = 30;
+        this._level = 'week-day';
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        overflow: hidden;
+        position: relative;
+      }
+      div[chart-container] {
+        display: block;
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+      svg {
+        min-width: 100%;
+      }
+      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-on-secondary-container));
+        height: 40px;
+        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%;
+      }
+      .top-axis text,
+      .bottom-axis text {
+        font-size: 12px;
+      }
+      .grid line {
+        stroke: #e0e0e0;
+      }
+      .grid path {
+        stroke-width: 0;
+      }
+      .no-select {
+        user-select: none;
+      }
+      .selected {
+        stroke-width: 2px;
+        stroke: var(--ox-gantt-selected-color, blue);
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <div chart-container>
+        <svg header></svg>
+        <svg body></svg>
+      </div>
+    `;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('fromDate') || changedProperties.has('toDate') || changedProperties.has('axisScale')) {
+            this.updateTimeScale();
+        }
+        if (changedProperties.has('resources')) {
+            this.drawBody();
+        }
+        this.drawAxes();
+    }
+    updateTimeScale() {
+        this._timeScale = d3
+            .scaleTime()
+            .domain([d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1)])
+            .range([0, this.getChartWidth()]);
+    }
+    getChartWidth() {
+        const totalDays = d3.timeDay.count(new Date(this.fromDate), d3.timeDay.offset(new Date(this.toDate), 1));
+        return (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() {
+        const header = d3.select(this.renderRoot.querySelector('svg[header]'));
+        header.selectAll('*').remove();
+        header.attr('width', this.getChartWidth());
+        const axisTop = d3.axisTop(this._timeScale).tickSize(-20);
+        const axisBottom = d3.axisBottom(this._timeScale).tickSize(-20);
+        header.append('g').attr('class', 'top-axis').attr('transform', 'translate(0, 20)').call(axisTop);
+        header.append('g').attr('class', 'bottom-axis').attr('transform', 'translate(0, 40)').call(axisBottom);
+    }
+    drawBody() {
+        const body = d3.select(this.renderRoot.querySelector('svg[body]'));
+        body.selectAll('*').remove();
+        body.attr('width', this.getChartWidth());
+        // Add grid lines for resource chart
+        if (this.resources.length > 0) {
+            const addVerticalGridLines = (ticks) => {
+                ticks.forEach(tick => {
+                    const startX = this._timeScale(tick);
+                    body
+                        .append('line')
+                        .attr('x1', startX)
+                        .attr('x2', startX)
+                        .attr('y1', 0)
+                        .attr('y2', this.resources.length * 30) // Adjust according to the number of resource rows
+                        .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
+                        .attr('stroke-width', 1);
+                });
+            };
+            const addHorizontalGridLines = () => {
+                this.resources.forEach((_, index) => {
+                    const y = (index + 1) * 30;
+                    body
+                        .append('line')
+                        .attr('x1', 0)
+                        .attr('x2', this.getChartWidth())
+                        .attr('y1', y)
+                        .attr('y2', y)
+                        .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(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1));
+                addVerticalGridLines(dayTicks);
+            }
+            else if (this._level === 'quarter-week') {
+                const weekTicks = d3.timeWeek
+                    .every(1)
+                    .range(d3.timeWeek.floor(new Date(this.fromDate)), d3.timeWeek.offset(new Date(this.toDate), 1));
+                addVerticalGridLines(weekTicks);
+            }
+            else if (this._level === 'year-month') {
+                const monthTicks = d3.timeMonth
+                    .every(1)
+                    .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 1));
+                addVerticalGridLines(monthTicks);
+            }
+            else if (this._level === 'year-quarter') {
+                const quarterTicks = d3.timeMonth
+                    .every(3)
+                    .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 3));
+                addVerticalGridLines(quarterTicks);
+            }
+            addHorizontalGridLines();
+        }
+    }
+    syncScroll(e) {
+        this.shadowRoot.querySelector('div[chart-container]').scrollLeft = e.detail.offset;
+    }
+};
+__decorate([
+    property({ type: String })
+], OxResourceChart.prototype, "fromDate", void 0);
+__decorate([
+    property({ type: String })
+], OxResourceChart.prototype, "toDate", void 0);
+__decorate([
+    property({ type: String })
+], OxResourceChart.prototype, "axisScale", void 0);
+__decorate([
+    property({ type: Array })
+], OxResourceChart.prototype, "resources", void 0);
+OxResourceChart = __decorate([
+    customElement('ox-resource-chart')
+], OxResourceChart);
+export { OxResourceChart };
+//# sourceMappingURL=ox-resource-chart.js.map

package/dist/src/ox-resource-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-resource-chart.js","sourceRoot":"","sources":["../../src/ox-resource-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-resource-chart')\nexport class OxResourceChart extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        overflow: hidden;\n        position: relative;\n      }\n      div[chart-container] {\n        display: block;\n        overflow-x: auto;\n        overflow-y: hidden;\n      }\n      svg {\n        min-width: 100%;\n      }\n      svg[header] {\n        display: block;\n        min-width: 100%;\n        box-sizing: border-box;\n        border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-on-secondary-container));\n        height: 40px;\n        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n        color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n        position: sticky;\n        top: 0;\n        z-index: 1;\n      }\n      svg[body] {\n        display: block;\n        min-width: 100%;\n      }\n      .top-axis text,\n      .bottom-axis text {\n        font-size: 12px;\n      }\n      .grid line {\n        stroke: #e0e0e0;\n      }\n      .grid path {\n        stroke-width: 0;\n      }\n      .no-select {\n        user-select: none;\n      }\n      .selected {\n        stroke-width: 2px;\n        stroke: var(--ox-gantt-selected-color, blue);\n      }\n    `\n  ]\n\n  @property({ type: String }) fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]\n  @property({ type: String }) toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]\n  @property({ type: String }) axisScale: string = 'week-day'\n  @property({ type: Array }) resources: any[] = []\n\n  private _timeScale: any\n  private _baseWidth: number = 30\n  private _level: string = 'week-day'\n\n  render() {\n    return html`\n      <div chart-container>\n        <svg header></svg>\n        <svg body></svg>\n      </div>\n    `\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('fromDate') || changedProperties.has('toDate') || changedProperties.has('axisScale')) {\n      this.updateTimeScale()\n    }\n\n    if (changedProperties.has('resources')) {\n      this.drawBody()\n    }\n\n    this.drawAxes()\n  }\n\n  updateTimeScale() {\n    this._timeScale = d3\n      .scaleTime()\n      .domain([d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1)])\n      .range([0, this.getChartWidth()])\n  }\n\n  getChartWidth() {\n    const totalDays = d3.timeDay.count(new Date(this.fromDate), d3.timeDay.offset(new Date(this.toDate), 1))\n    return (totalDays * this._baseWidth) / this.getScale()\n  }\n\n  getScale() {\n    if (this._level == 'quarter-week') {\n      return 7 / 2\n    } else if (this._level == 'year-month') {\n      return 30 / 2\n    } else if (this._level == 'year-quarter') {\n      return 90 / 2\n    }\n    return 1\n  }\n\n  drawAxes() {\n    const header = d3.select(this.renderRoot.querySelector('svg[header]')!)\n\n    header.selectAll('*').remove()\n    header.attr('width', this.getChartWidth())\n\n    const axisTop = d3.axisTop(this._timeScale).tickSize(-20)\n    const axisBottom = d3.axisBottom(this._timeScale).tickSize(-20)\n\n    header.append('g').attr('class', 'top-axis').attr('transform', 'translate(0, 20)').call(axisTop)\n    header.append('g').attr('class', 'bottom-axis').attr('transform', 'translate(0, 40)').call(axisBottom)\n  }\n\n  drawBody() {\n    const body = d3.select(this.renderRoot.querySelector('svg[body]')!)\n\n    body.selectAll('*').remove()\n    body.attr('width', this.getChartWidth())\n\n    // Add grid lines for resource chart\n    if (this.resources.length > 0) {\n      const addVerticalGridLines = (ticks: Date[]) => {\n        ticks.forEach(tick => {\n          const startX = this._timeScale(tick)\n          body\n            .append('line')\n            .attr('x1', startX)\n            .attr('x2', startX)\n            .attr('y1', 0)\n            .attr('y2', this.resources.length * 30) // Adjust according to the number of resource rows\n            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')\n            .attr('stroke-width', 1)\n        })\n      }\n\n      const addHorizontalGridLines = () => {\n        this.resources.forEach((_, index) => {\n          const y = (index + 1) * 30\n          body\n            .append('line')\n            .attr('x1', 0)\n            .attr('x2', this.getChartWidth())\n            .attr('y1', y)\n            .attr('y2', y)\n            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')\n            .attr('stroke-width', 1)\n        })\n      }\n\n      if (this._level === 'week-day') {\n        const dayTicks = d3.timeDay\n          .every(1)!\n          .range(d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1))\n        addVerticalGridLines(dayTicks)\n      } else if (this._level === 'quarter-week') {\n        const weekTicks = d3.timeWeek\n          .every(1)!\n          .range(d3.timeWeek.floor(new Date(this.fromDate)), d3.timeWeek.offset(new Date(this.toDate), 1))\n        addVerticalGridLines(weekTicks)\n      } else if (this._level === 'year-month') {\n        const monthTicks = d3.timeMonth\n          .every(1)!\n          .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 1))\n        addVerticalGridLines(monthTicks)\n      } else if (this._level === 'year-quarter') {\n        const quarterTicks = d3.timeMonth\n          .every(3)!\n          .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 3))\n        addVerticalGridLines(quarterTicks)\n      }\n\n      addHorizontalGridLines()\n    }\n  }\n\n  syncScroll(e: CustomEvent) {\n    this.shadowRoot!.querySelector('div[chart-container]')!.scrollLeft = e.detail.offset\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -12,6 +12,7 @@ export interface Task {
     length: string;
     tags?: TaskTag[];
     children?: Task[];
+    resources?: Resource[];
 }
 export interface Section {
     name: string;
@@ -24,3 +25,7 @@ export interface ColumnConfig {
     order: number;
 }
 export type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day';
+export interface Resource {
+    type: string;
+    allocated: number;
+}

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TaskTag = 'done' | 'active' | 'critical' | 'milestone'\nexport type TaskType = 'task' | 'milestone' | 'phase'\n\nexport interface Task {\n  id: string\n  title: string\n  type: TaskType\n  section?: Section\n  startDate: Date | string\n  endDate: Date | string\n  progress?: number\n  dependsOn?: string\n  length: string\n  tags?: TaskTag[]\n  children?: Task[]\n}\n\nexport interface Section {\n  name: string\n}\n\nexport interface ColumnConfig {\n  name: string\n  label: string\n  visible: boolean\n  width: number\n  order: number\n}\n\nexport type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TaskTag = 'done' | 'active' | 'critical' | 'milestone'\nexport type TaskType = 'task' | 'milestone' | 'phase'\n\nexport interface Task {\n  id: string\n  title: string\n  type: TaskType\n  section?: Section\n  startDate: Date | string\n  endDate: Date | string\n  progress?: number\n  dependsOn?: string\n  length: string\n  tags?: TaskTag[]\n  children?: Task[]\n  resources?: Resource[]\n}\n\nexport interface Section {\n  name: string\n}\n\nexport interface ColumnConfig {\n  name: string\n  label: string\n  visible: boolean\n  width: number\n  order: number\n}\n\nexport type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'\n\nexport interface Resource {\n  type: string\n  allocated: number\n}\n"]}

package/dist/stories/ox-gantt.stories.js

@@ -102,6 +102,7 @@ Regular.args = {
             dependsOn: '',
             length: '5d',
             tags: ['active'],
+            resources: [{ type: '철근/형틀공', allocated: 6 }],
             children: []
         },
         {
@@ -115,6 +116,7 @@ Regular.args = {
             dependsOn: '1',
             length: '1d',
             tags: ['milestone'],
+            resources: [{ type: '철근/형틀공', allocated: 6 }],
             children: []
         },
         {
@@ -140,7 +142,35 @@ Regular.args = {
                     dependsOn: '',
                     length: '4d',
                     tags: ['done'],
-                    children: []
+                    children: [
+                        {
+                            id: '3-1-1',
+                            title: 'Coding-A',
+                            type: 'task',
+                            // section: developmentSection,
+                            startDate: '2023-01-07',
+                            endDate: '2023-01-10',
+                            progress: 60,
+                            dependsOn: '',
+                            length: '4d',
+                            tags: ['done'],
+                            resources: [{ type: '창호공', allocated: 6 }],
+                            children: []
+                        },
+                        {
+                            id: '3-1-2',
+                            title: 'Coding-B',
+                            type: 'task',
+                            // section: developmentSection,
+                            startDate: '2023-01-11',
+                            endDate: '2023-01-15',
+                            dependsOn: '3-1-1',
+                            length: '5d',
+                            tags: ['active'],
+                            resources: [{ type: '창호공', allocated: 6 }],
+                            children: []
+                        }
+                    ]
                 },
                 {
                     id: '3-2',
@@ -152,6 +182,7 @@ Regular.args = {
                     dependsOn: '3-1',
                     length: '5d',
                     tags: ['active'],
+                    resources: [{ type: '창호공', allocated: 6 }],
                     children: []
                 }
             ]
@@ -167,6 +198,7 @@ Regular.args = {
             dependsOn: '1',
             length: '1d',
             tags: ['done'],
+            resources: [{ type: '방수공', allocated: 6 }],
             children: []
         },
         {
@@ -179,6 +211,7 @@ Regular.args = {
             dependsOn: '4',
             length: '1d',
             tags: ['milestone'],
+            resources: [{ type: '목공', allocated: 6 }],
             children: []
         },
         {
@@ -191,6 +224,7 @@ Regular.args = {
             dependsOn: '5',
             length: '1d',
             tags: ['milestone'],
+            resources: [{ type: '금속공', allocated: 6 }],
             children: []
         },
         {
@@ -203,6 +237,7 @@ Regular.args = {
             dependsOn: '6',
             length: '1d',
             tags: ['milestone'],
+            resources: [{ type: '타일공', allocated: 6 }],
             children: []
         },
         {
@@ -215,6 +250,7 @@ Regular.args = {
             dependsOn: '7',
             length: '1d',
             tags: ['critical'],
+            resources: [{ type: '창호공', allocated: 6 }],
             children: []
         },
         {
@@ -227,6 +263,7 @@ Regular.args = {
             dependsOn: '8',
             length: '1d',
             tags: ['active'],
+            resources: [{ type: '도배공', allocated: 6 }],
             children: []
         },
         {
@@ -239,6 +276,7 @@ Regular.args = {
             dependsOn: '9',
             length: '1d',
             tags: ['critical'],
+            resources: [{ type: '조적공', allocated: 6 }],
             children: []
         },
         {
@@ -263,7 +301,33 @@ Regular.args = {
             dependsOn: '9',
             length: '1d',
             tags: ['milestone'],
-            children: []
+            children: [
+                {
+                    id: '12-1',
+                    title: 'Coding-A',
+                    type: 'task',
+                    // section: developmentSection,
+                    startDate: '2023-01-07',
+                    endDate: '2023-01-10',
+                    progress: 60,
+                    dependsOn: '',
+                    length: '4d',
+                    tags: ['done'],
+                    children: []
+                },
+                {
+                    id: '12-2',
+                    title: 'Coding-B',
+                    type: 'task',
+                    // section: developmentSection,
+                    startDate: '2023-01-11',
+                    endDate: '2023-01-15',
+                    dependsOn: '12-1',
+                    length: '5d',
+                    tags: ['active'],
+                    children: []
+                }
+            ]
         },
         {
             id: '13',

package/dist/stories/ox-gantt.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-gantt.stories.js","sourceRoot":"","sources":["../../stories/ox-gantt.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/ox-gantt.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { Task, Section, TimeScale } from '../src/types.js'\n\nexport default {\n  title: 'ox-gantt',\n  component: 'ox-gantt',\n  argTypes: {\n    fromDate: { control: 'date' },\n    toDate: { control: 'date' },\n    timeScale: { control: 'select', options: ['year-quarter', 'year-month', 'quarter-week', 'week-day'] },\n    extendGridLines: { control: 'boolean' },\n    tasks: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  tasks: Task[]\n  fromDate: number | string\n  toDate: number | string\n  extendGridLines: boolean\n  timeScale: TimeScale\n}\n\nconst Template: Story<ArgTypes> = ({\n  tasks,\n  fromDate,\n  toDate,\n  extendGridLines,\n  timeScale = 'week-day'\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 800px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    ox-gantt {\n      width: 90%;\n      height: 500px;\n      box-sizing: border-box;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <ox-gantt\n    from-date=${new Date(fromDate).toISOString().split('T')[0]}\n    to-date=${new Date(toDate).toISOString().split('T')[0]}\n    .timeScale=${timeScale}\n    .tasks=${tasks}\n    @date-range-selected=${(e: CustomEvent) => {\n      console.log('date-range-selected', e.detail)\n    }}\n    @task-clicked=${(e: CustomEvent) => {\n      console.log('task-clicked', e.detail)\n    }}\n    ?extend-grid-lines=${extendGridLines}\n  >\n  </ox-gantt>\n`\n\nconst developmentSection: Section = {\n  name: 'Development'\n}\n\nconst testSection: Section = {\n  name: 'Test'\n}\n\nconst releaseSection: Section = {\n  name: 'Release'\n}\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  fromDate: '2022-12-27',\n  toDate: '2024-12-31',\n  tasks: [\n    {\n      id: '1',\n      title: 'Design',\n      type: 'task',\n      // section: developmentSection,\n      startDate: '2023-01-01',\n      endDate: '2023-01-05',\n      progress: 60,\n      dependsOn: '',\n      length: '5d',\n      tags: ['active'],\n      children: []\n    },\n    {\n      id: '2',\n      title: 'Development',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-06',\n      endDate: '2023-01-06',\n      progress: 30,\n      dependsOn: '1',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '3',\n      title: 'Coding',\n      type: 'phase',\n      // section: developmentSection,\n      startDate: '2023-01-07',\n      endDate: '2023-01-15',\n      progress: 10,\n      dependsOn: '2',\n      length: '9d',\n      tags: ['critical'],\n      children: [\n        {\n          id: '3-1',\n          title: 'Coding-A',\n          type: 'task',\n          // section: developmentSection,\n          startDate: '2023-01-07',\n          endDate: '2023-01-10',\n          progress: 60,\n          dependsOn: '',\n          length: '4d',\n          tags: ['done'],\n          children: []\n        },\n        {\n          id: '3-2',\n          title: 'Coding-B',\n          type: 'task',\n          // section: developmentSection,\n          startDate: '2023-01-11',\n          endDate: '2023-01-15',\n          dependsOn: '3-1',\n          length: '5d',\n          tags: ['active'],\n          children: []\n        }\n      ]\n    },\n    {\n      id: '4',\n      title: 'Test',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-07',\n      endDate: '2023-01-10',\n      progress: 100,\n      dependsOn: '1',\n      length: '1d',\n      tags: ['done'],\n      children: []\n    },\n    {\n      id: '5',\n      title: 'Deploy',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-15',\n      endDate: '2023-01-21',\n      dependsOn: '4',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '6',\n      title: 'Publishing',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-11',\n      endDate: '2023-01-15',\n      dependsOn: '5',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '7',\n      title: 'Provisioning',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-12',\n      endDate: '2023-01-15',\n      dependsOn: '6',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '8',\n      title: 'Alpha Test',\n      type: 'milestone',\n      // section: testSection,\n      startDate: '2023-01-15',\n      endDate: '2023-01-17',\n      dependsOn: '7',\n      length: '1d',\n      tags: ['critical'],\n      children: []\n    },\n    {\n      id: '9',\n      title: 'Beta Task',\n      type: 'milestone',\n      // section: testSection,\n      startDate: '2023-01-15',\n      endDate: '2023-01-18',\n      dependsOn: '8',\n      length: '1d',\n      tags: ['active'],\n      children: []\n    },\n    {\n      id: '10',\n      title: 'Gamma Test',\n      type: 'milestone',\n      // section: testSection,\n      startDate: '2023-01-18',\n      endDate: '2023-01-19',\n      dependsOn: '9',\n      length: '1d',\n      tags: ['critical'],\n      children: []\n    },\n    {\n      id: '11',\n      title: 'Zeta Test',\n      type: 'milestone',\n      // section: testSection,\n      startDate: '2023-01-18',\n      endDate: '2023-01-22',\n      dependsOn: '9',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '12',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-18',\n      endDate: '2023-01-23',\n      dependsOn: '9',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '13',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-22',\n      endDate: '2023-01-27',\n      dependsOn: '12',\n      length: '1d',\n      tags: ['done'],\n      children: []\n    },\n    {\n      id: '14',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-27',\n      endDate: '2023-01-30',\n      dependsOn: '13',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '15',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-30',\n      endDate: '2023-01-31',\n      dependsOn: '14',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '16',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-31',\n      endDate: '2023-02-05',\n      dependsOn: '15',\n      length: '1d',\n      tags: ['active'],\n      children: []\n    },\n    {\n      id: '17',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-02-06',\n      endDate: '2023-02-07',\n      dependsOn: '16',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '18',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-02-08',\n      endDate: '2023-02-09',\n      dependsOn: '17',\n      length: '1d',\n      tags: ['critical'],\n      children: []\n    },\n    {\n      id: '19',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-02-10',\n      endDate: '2023-02-25',\n      dependsOn: '18',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    }\n  ]\n}\n"]}
+{"version":3,"file":"ox-gantt.stories.js","sourceRoot":"","sources":["../../stories/ox-gantt.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/ox-gantt.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { Task, Section, TimeScale } from '../src/types.js'\n\nexport default {\n  title: 'ox-gantt',\n  component: 'ox-gantt',\n  argTypes: {\n    fromDate: { control: 'date' },\n    toDate: { control: 'date' },\n    timeScale: { control: 'select', options: ['year-quarter', 'year-month', 'quarter-week', 'week-day'] },\n    extendGridLines: { control: 'boolean' },\n    tasks: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  tasks: Task[]\n  fromDate: number | string\n  toDate: number | string\n  extendGridLines: boolean\n  timeScale: TimeScale\n}\n\nconst Template: Story<ArgTypes> = ({\n  tasks,\n  fromDate,\n  toDate,\n  extendGridLines,\n  timeScale = 'week-day'\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/md-typescale-styles.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 800px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    ox-gantt {\n      width: 90%;\n      height: 500px;\n      box-sizing: border-box;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <ox-gantt\n    from-date=${new Date(fromDate).toISOString().split('T')[0]}\n    to-date=${new Date(toDate).toISOString().split('T')[0]}\n    .timeScale=${timeScale}\n    .tasks=${tasks}\n    @date-range-selected=${(e: CustomEvent) => {\n      console.log('date-range-selected', e.detail)\n    }}\n    @task-clicked=${(e: CustomEvent) => {\n      console.log('task-clicked', e.detail)\n    }}\n    ?extend-grid-lines=${extendGridLines}\n  >\n  </ox-gantt>\n`\n\nconst developmentSection: Section = {\n  name: 'Development'\n}\n\nconst testSection: Section = {\n  name: 'Test'\n}\n\nconst releaseSection: Section = {\n  name: 'Release'\n}\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  fromDate: '2022-12-27',\n  toDate: '2024-12-31',\n  tasks: [\n    {\n      id: '1',\n      title: 'Design',\n      type: 'task',\n      // section: developmentSection,\n      startDate: '2023-01-01',\n      endDate: '2023-01-05',\n      progress: 60,\n      dependsOn: '',\n      length: '5d',\n      tags: ['active'],\n      resources: [{ type: '철근/형틀공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '2',\n      title: 'Development',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-06',\n      endDate: '2023-01-06',\n      progress: 30,\n      dependsOn: '1',\n      length: '1d',\n      tags: ['milestone'],\n      resources: [{ type: '철근/형틀공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '3',\n      title: 'Coding',\n      type: 'phase',\n      // section: developmentSection,\n      startDate: '2023-01-07',\n      endDate: '2023-01-15',\n      progress: 10,\n      dependsOn: '2',\n      length: '9d',\n      tags: ['critical'],\n      children: [\n        {\n          id: '3-1',\n          title: 'Coding-A',\n          type: 'task',\n          // section: developmentSection,\n          startDate: '2023-01-07',\n          endDate: '2023-01-10',\n          progress: 60,\n          dependsOn: '',\n          length: '4d',\n          tags: ['done'],\n          children: [\n            {\n              id: '3-1-1',\n              title: 'Coding-A',\n              type: 'task',\n              // section: developmentSection,\n              startDate: '2023-01-07',\n              endDate: '2023-01-10',\n              progress: 60,\n              dependsOn: '',\n              length: '4d',\n              tags: ['done'],\n              resources: [{ type: '창호공', allocated: 6 }],\n              children: []\n            },\n            {\n              id: '3-1-2',\n              title: 'Coding-B',\n              type: 'task',\n              // section: developmentSection,\n              startDate: '2023-01-11',\n              endDate: '2023-01-15',\n              dependsOn: '3-1-1',\n              length: '5d',\n              tags: ['active'],\n              resources: [{ type: '창호공', allocated: 6 }],\n              children: []\n            }\n          ]\n        },\n        {\n          id: '3-2',\n          title: 'Coding-B',\n          type: 'task',\n          // section: developmentSection,\n          startDate: '2023-01-11',\n          endDate: '2023-01-15',\n          dependsOn: '3-1',\n          length: '5d',\n          tags: ['active'],\n          resources: [{ type: '창호공', allocated: 6 }],\n          children: []\n        }\n      ]\n    },\n    {\n      id: '4',\n      title: 'Test',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-07',\n      endDate: '2023-01-10',\n      progress: 100,\n      dependsOn: '1',\n      length: '1d',\n      tags: ['done'],\n      resources: [{ type: '방수공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '5',\n      title: 'Deploy',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-15',\n      endDate: '2023-01-21',\n      dependsOn: '4',\n      length: '1d',\n      tags: ['milestone'],\n      resources: [{ type: '목공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '6',\n      title: 'Publishing',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-11',\n      endDate: '2023-01-15',\n      dependsOn: '5',\n      length: '1d',\n      tags: ['milestone'],\n      resources: [{ type: '금속공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '7',\n      title: 'Provisioning',\n      type: 'milestone',\n      // section: developmentSection,\n      startDate: '2023-01-12',\n      endDate: '2023-01-15',\n      dependsOn: '6',\n      length: '1d',\n      tags: ['milestone'],\n      resources: [{ type: '타일공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '8',\n      title: 'Alpha Test',\n      type: 'milestone',\n      // section: testSection,\n      startDate: '2023-01-15',\n      endDate: '2023-01-17',\n      dependsOn: '7',\n      length: '1d',\n      tags: ['critical'],\n      resources: [{ type: '창호공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '9',\n      title: 'Beta Task',\n      type: 'milestone',\n      // section: testSection,\n      startDate: '2023-01-15',\n      endDate: '2023-01-18',\n      dependsOn: '8',\n      length: '1d',\n      tags: ['active'],\n      resources: [{ type: '도배공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '10',\n      title: 'Gamma Test',\n      type: 'milestone',\n      // section: testSection,\n      startDate: '2023-01-18',\n      endDate: '2023-01-19',\n      dependsOn: '9',\n      length: '1d',\n      tags: ['critical'],\n      resources: [{ type: '조적공', allocated: 6 }],\n      children: []\n    },\n    {\n      id: '11',\n      title: 'Zeta Test',\n      type: 'milestone',\n      // section: testSection,\n      startDate: '2023-01-18',\n      endDate: '2023-01-22',\n      dependsOn: '9',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '12',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-18',\n      endDate: '2023-01-23',\n      dependsOn: '9',\n      length: '1d',\n      tags: ['milestone'],\n      children: [\n        {\n          id: '12-1',\n          title: 'Coding-A',\n          type: 'task',\n          // section: developmentSection,\n          startDate: '2023-01-07',\n          endDate: '2023-01-10',\n          progress: 60,\n          dependsOn: '',\n          length: '4d',\n          tags: ['done'],\n          children: []\n        },\n        {\n          id: '12-2',\n          title: 'Coding-B',\n          type: 'task',\n          // section: developmentSection,\n          startDate: '2023-01-11',\n          endDate: '2023-01-15',\n          dependsOn: '12-1',\n          length: '5d',\n          tags: ['active'],\n          children: []\n        }\n      ]\n    },\n    {\n      id: '13',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-22',\n      endDate: '2023-01-27',\n      dependsOn: '12',\n      length: '1d',\n      tags: ['done'],\n      children: []\n    },\n    {\n      id: '14',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-27',\n      endDate: '2023-01-30',\n      dependsOn: '13',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '15',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-30',\n      endDate: '2023-01-31',\n      dependsOn: '14',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '16',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-01-31',\n      endDate: '2023-02-05',\n      dependsOn: '15',\n      length: '1d',\n      tags: ['active'],\n      children: []\n    },\n    {\n      id: '17',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-02-06',\n      endDate: '2023-02-07',\n      dependsOn: '16',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    },\n    {\n      id: '18',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-02-08',\n      endDate: '2023-02-09',\n      dependsOn: '17',\n      length: '1d',\n      tags: ['critical'],\n      children: []\n    },\n    {\n      id: '19',\n      title: 'Release',\n      type: 'milestone',\n      // section: releaseSection,\n      startDate: '2023-02-10',\n      endDate: '2023-02-25',\n      dependsOn: '18',\n      length: '1d',\n      tags: ['milestone'],\n      children: []\n    }\n  ]\n}\n"]}