@operato/gantt 7.0.21 → 7.0.23

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

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import * as d3 from 'd3';
 import { ScrollbarStyles } from '@operato/styles';
+import { drawTimeScaleHeader } from './draw-time-scale-header';
 let OxResourceChart = class OxResourceChart extends LitElement {
     constructor() {
         super(...arguments);
@@ -10,8 +11,9 @@ let OxResourceChart = class OxResourceChart extends LitElement {
         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';
+        this.tasks = [];
+        this.baseWidth = 30;
+        this.level = 'week-day';
     }
     static { this.styles = [
         ScrollbarStyles,
@@ -21,43 +23,51 @@ let OxResourceChart = class OxResourceChart extends LitElement {
         overflow: hidden;
         position: relative;
       }
+
       div[chart-container] {
-        display: block;
+        display: flex;
+        flex-direction: column;
+
         overflow-x: auto;
-        overflow-y: hidden;
-      }
-      svg {
-        min-width: 100%;
+        overflow-y: auto;
       }
+
       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;
+        height: 30px;
         background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
         color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));
         position: sticky;
         top: 0;
         z-index: 1;
       }
+
       svg[body] {
+        flex: 1;
         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);
@@ -76,57 +86,53 @@ let OxResourceChart = class OxResourceChart extends LitElement {
         if (changedProperties.has('fromDate') || changedProperties.has('toDate') || changedProperties.has('axisScale')) {
             this.updateTimeScale();
         }
-        if (changedProperties.has('resources')) {
+        if (changedProperties.has('resources') || changedProperties.has('tasks')) {
             this.drawBody();
         }
         this.drawAxes();
     }
     updateTimeScale() {
-        this._timeScale = d3
+        this.fromTime = new Date(this.fromDate);
+        this.toTime = new Date(this.toDate);
+        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();
+        return (totalDays * this.baseWidth) / this.getScale();
     }
     getScale() {
-        if (this._level == 'quarter-week') {
+        if (this.level == 'quarter-week') {
             return 7 / 2;
         }
-        else if (this._level == 'year-month') {
+        else if (this.level == 'year-month') {
             return 30 / 2;
         }
-        else if (this._level == 'year-quarter') {
+        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);
+        drawTimeScaleHeader(this.svgHeader, this.timeScale, this.fromTime, this.toTime, this.baseWidth, this.level, false /* 1 level only header */);
     }
     drawBody() {
-        const body = d3.select(this.renderRoot.querySelector('svg[body]'));
+        const body = d3.select(this.svgBody);
         body.selectAll('*').remove();
         body.attr('width', this.getChartWidth());
-        // Add grid lines for resource chart
         if (this.resources.length > 0) {
+            const chartHeight = this.resources.length * 30;
             const addVerticalGridLines = (ticks) => {
                 ticks.forEach(tick => {
-                    const startX = this._timeScale(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('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);
                 });
@@ -143,36 +149,141 @@ let OxResourceChart = class OxResourceChart extends LitElement {
                         .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
                         .attr('stroke-width', 1);
                 });
+                // Ensure the last horizontal line extends to the bottom of the chart
+                body
+                    .append('line')
+                    .attr('x1', 0)
+                    .attr('x2', this.getChartWidth())
+                    .attr('y1', chartHeight)
+                    .attr('y2', chartHeight)
+                    .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
+            let ticks;
+            if (this.level === 'week-day') {
+                ticks = 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
+            else if (this.level === 'quarter-week') {
+                ticks = 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
+            else if (this.level === 'year-month') {
+                ticks = 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
+            else if (this.level === 'year-quarter') {
+                ticks = d3.timeMonth
                     .every(3)
                     .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 3));
-                addVerticalGridLines(quarterTicks);
             }
+            addVerticalGridLines(ticks);
             addHorizontalGridLines();
+            // Render the resource allocations
+            this.renderResourceAllocations(body, ticks);
         }
     }
-    syncScroll(e) {
-        this.shadowRoot.querySelector('div[chart-container]').scrollLeft = e.detail.offset;
+    renderResourceAllocations(body, ticks) {
+        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')
+                        .text(allocation)
+                        .style('font-size', '12px');
+                }
+            });
+        });
+    }
+    calculateResourceAllocations(ticks) {
+        const resourceAllocations = {};
+        // Initialize the resourceAllocations object
+        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;
+            });
+        });
+        // Function to process tasks recursively
+        const processTask = (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);
+            }
+            // Recursively process child tasks
+            if (task.children) {
+                task.children.forEach(childTask => processTask(childTask));
+            }
+        };
+        // Process all tasks
+        this.tasks.forEach(task => processTask(task));
+        return resourceAllocations;
+    }
+    getTickEnd(tick) {
+        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, end) {
+        return `${start.toISOString().split('T')[0]}_${end.toISOString().split('T')[0]}`;
+    }
+    syncTimeScale(detail) {
+        this.baseWidth = detail.baseWidth;
+        this.level = detail.level;
+        this.updateTimeScale();
+        this.drawAxes();
+        this.drawBody();
+    }
+    setVerticalOffset(offset) {
+        this.container.scrollTop = offset;
+    }
+    getVerticalOffset() {
+        return this.container.scrollTop;
+    }
+    setHorizontalOffset(offset) {
+        this.container.scrollLeft = offset;
+    }
+    getHorizontalOffset() {
+        return this.container.scrollLeft;
     }
 };
 __decorate([
@@ -187,6 +298,18 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], OxResourceChart.prototype, "resources", void 0);
+__decorate([
+    property({ type: Array })
+], OxResourceChart.prototype, "tasks", void 0);
+__decorate([
+    query('[chart-container')
+], OxResourceChart.prototype, "container", void 0);
+__decorate([
+    query('svg[header]')
+], OxResourceChart.prototype, "svgHeader", void 0);
+__decorate([
+    query('svg[body]')
+], OxResourceChart.prototype, "svgBody", void 0);
 OxResourceChart = __decorate([
     customElement('ox-resource-chart')
 ], OxResourceChart);

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

@@ -1 +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"]}
+{"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, query } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { drawTimeScaleHeader } from './draw-time-scale-header'\nimport { Task, TimeScale } from './types'\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\n      div[chart-container] {\n        display: flex;\n        flex-direction: column;\n\n        overflow-x: auto;\n        overflow-y: auto;\n      }\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: 30px;\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\n      svg[body] {\n        flex: 1;\n        display: block;\n        min-width: 100%;\n      }\n\n      .top-axis text,\n      .bottom-axis text {\n        font-size: 12px;\n      }\n\n      .grid line {\n        stroke: #e0e0e0;\n      }\n\n      .grid path {\n        stroke-width: 0;\n      }\n\n      .no-select {\n        user-select: none;\n      }\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  @property({ type: Array }) tasks: Task[] = []\n\n  private timeScale: any\n  private baseWidth: number = 30\n  private level: TimeScale = 'week-day'\n  private fromTime?: Date\n  private toTime?: Date\n\n  @query('[chart-container') container!: HTMLDivElement\n  @query('svg[header]') svgHeader!: SVGSVGElement\n  @query('svg[body]') svgBody!: SVGSVGElement\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') || changedProperties.has('tasks')) {\n      this.drawBody()\n    }\n\n    this.drawAxes()\n  }\n\n  updateTimeScale() {\n    this.fromTime = new Date(this.fromDate)\n    this.toTime = new Date(this.toDate)\n\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    drawTimeScaleHeader(\n      this.svgHeader as any,\n      this.timeScale,\n      this.fromTime!,\n      this.toTime!,\n      this.baseWidth,\n      this.level,\n      false /* 1 level only header */\n    )\n  }\n\n  drawBody() {\n    const body = d3.select(this.svgBody)\n\n    body.selectAll('*').remove()\n    body.attr('width', this.getChartWidth())\n\n    if (this.resources.length > 0) {\n      const chartHeight = this.resources.length * 30\n\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', chartHeight) // Ensure vertical lines extend to the bottom\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        // Ensure the last horizontal line extends to the bottom of the chart\n        body\n          .append('line')\n          .attr('x1', 0)\n          .attr('x2', this.getChartWidth())\n          .attr('y1', chartHeight)\n          .attr('y2', chartHeight)\n          .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')\n          .attr('stroke-width', 1)\n      }\n\n      let ticks\n      if (this.level === 'week-day') {\n        ticks = d3.timeDay\n          .every(1)!\n          .range(d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1))\n      } else if (this.level === 'quarter-week') {\n        ticks = d3.timeWeek\n          .every(1)!\n          .range(d3.timeWeek.floor(new Date(this.fromDate)), d3.timeWeek.offset(new Date(this.toDate), 1))\n      } else if (this.level === 'year-month') {\n        ticks = d3.timeMonth\n          .every(1)!\n          .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 1))\n      } else if (this.level === 'year-quarter') {\n        ticks = d3.timeMonth\n          .every(3)!\n          .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 3))\n      }\n\n      addVerticalGridLines(ticks!)\n      addHorizontalGridLines()\n\n      // Render the resource allocations\n      this.renderResourceAllocations(body, ticks!)\n    }\n  }\n\n  renderResourceAllocations(body: d3.Selection<SVGSVGElement, unknown, null, undefined>, ticks: Date[]) {\n    const resourceAllocations = this.calculateResourceAllocations(ticks)\n\n    this.resources.forEach((resource, index) => {\n      const y = index * 30 + 15 // Center the text vertically in the row\n      ticks.forEach(tick => {\n        const tickEnd = this.getTickEnd(tick)\n        const dateKey = this.formatDateKey(tick, tickEnd)\n        const allocation = resourceAllocations[resource.type][dateKey]\n        if (allocation > 0) {\n          const startX = this.timeScale(tick)\n          const tickInterval = this.timeScale(tickEnd) - startX\n\n          body\n            .append('text')\n            .attr('x', startX + tickInterval / 2)\n            .attr('y', y)\n            .attr('text-anchor', 'middle')\n            .attr('alignment-baseline', 'middle')\n            .attr('dominant-baseline', 'middle')\n            .text(allocation)\n            .style('font-size', '12px')\n        }\n      })\n    })\n  }\n\n  calculateResourceAllocations(ticks: Date[]) {\n    const resourceAllocations: { [key: string]: { [key: string]: number } } = {}\n\n    // Initialize the resourceAllocations object\n    this.resources.forEach(resource => {\n      resourceAllocations[resource.type] = {}\n      ticks.forEach(tick => {\n        const tickEnd = this.getTickEnd(tick)\n        const dateKey = this.formatDateKey(tick, tickEnd)\n        resourceAllocations[resource.type][dateKey] = 0\n      })\n    })\n\n    // Function to process tasks recursively\n    const processTask = (task: Task) => {\n      const startDate = new Date(task.startDate)\n      const endDate = new Date(task.endDate)\n      let currentDate = startDate\n\n      while (currentDate <= endDate) {\n        const tick = ticks.find(t => currentDate >= t && currentDate < this.getTickEnd(t))\n        if (tick) {\n          const tickEnd = this.getTickEnd(tick)\n          const dateKey = this.formatDateKey(tick, tickEnd)\n\n          ;(task.resources || []).forEach(resource => {\n            if (resourceAllocations[resource.type][dateKey] !== undefined) {\n              resourceAllocations[resource.type][dateKey] += resource.allocated\n            }\n          })\n        }\n\n        currentDate.setDate(currentDate.getDate() + 1)\n      }\n\n      // Recursively process child tasks\n      if (task.children) {\n        task.children.forEach(childTask => processTask(childTask))\n      }\n    }\n\n    // Process all tasks\n    this.tasks.forEach(task => processTask(task))\n\n    return resourceAllocations\n  }\n\n  getTickEnd(tick: Date) {\n    if (this.level === 'week-day') {\n      return d3.timeDay.offset(tick, 1)\n    } else if (this.level === 'quarter-week') {\n      return d3.timeWeek.offset(tick, 1)\n    } else if (this.level === 'year-month') {\n      return d3.timeMonth.offset(tick, 1)\n    } else if (this.level === 'year-quarter') {\n      return d3.timeMonth.offset(tick, 3)\n    }\n    return d3.timeDay.offset(tick, 1)\n  }\n\n  formatDateKey(start: Date, end: Date) {\n    return `${start.toISOString().split('T')[0]}_${end.toISOString().split('T')[0]}`\n  }\n\n  syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {\n    this.baseWidth = detail.baseWidth\n    this.level = detail.level\n\n    this.updateTimeScale()\n    this.drawAxes()\n    this.drawBody()\n  }\n\n  setVerticalOffset(offset: number) {\n    this.container.scrollTop = offset\n  }\n\n  getVerticalOffset(): number {\n    return this.container.scrollTop\n  }\n\n  setHorizontalOffset(offset: number) {\n    this.container.scrollLeft = offset\n  }\n\n  getHorizontalOffset(): number {\n    return this.container.scrollLeft\n  }\n}\n"]}

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

@@ -53,8 +53,8 @@ const Template = ({ tasks, fromDate, toDate, extendGridLines, timeScale = 'week-
     }
 
     ox-gantt {
-      width: 90%;
-      height: 500px;
+      width: 95%;
+      height: 650px;
       box-sizing: border-box;
 
       background-color: var(--md-sys-color-primary-container);
@@ -153,8 +153,8 @@ Regular.args = {
                             progress: 60,
                             dependsOn: '',
                             length: '4d',
-                            tags: ['done'],
-                            resources: [{ type: '창호공', allocated: 6 }],
+                            tags: ['active'],
+                            resources: [{ type: '창호공', allocated: 5 }],
                             children: []
                         },
                         {
@@ -167,7 +167,7 @@ Regular.args = {
                             dependsOn: '3-1-1',
                             length: '5d',
                             tags: ['active'],
-                            resources: [{ type: '창호공', allocated: 6 }],
+                            resources: [{ type: '창호공', allocated: 3 }],
                             children: []
                         }
                     ]
@@ -198,7 +198,7 @@ Regular.args = {
             dependsOn: '1',
             length: '1d',
             tags: ['done'],
-            resources: [{ type: '방수공', allocated: 6 }],
+            resources: [{ type: '방수공', allocated: 5 }],
             children: []
         },
         {
@@ -211,7 +211,7 @@ Regular.args = {
             dependsOn: '4',
             length: '1d',
             tags: ['milestone'],
-            resources: [{ type: '목공', allocated: 6 }],
+            resources: [{ type: '목공', allocated: 3 }],
             children: []
         },
         {
@@ -224,7 +224,7 @@ Regular.args = {
             dependsOn: '5',
             length: '1d',
             tags: ['milestone'],
-            resources: [{ type: '금속공', allocated: 6 }],
+            resources: [{ type: '금속공', allocated: 1 }],
             children: []
         },
         {
@@ -250,7 +250,7 @@ Regular.args = {
             dependsOn: '7',
             length: '1d',
             tags: ['critical'],
-            resources: [{ type: '창호공', allocated: 6 }],
+            resources: [{ type: '창호공', allocated: 7 }],
             children: []
         },
         {
@@ -263,7 +263,7 @@ Regular.args = {
             dependsOn: '8',
             length: '1d',
             tags: ['active'],
-            resources: [{ type: '도배공', allocated: 6 }],
+            resources: [{ type: '도배공', allocated: 8 }],
             children: []
         },
         {
@@ -289,6 +289,7 @@ Regular.args = {
             dependsOn: '9',
             length: '1d',
             tags: ['milestone'],
+            resources: [{ type: '철근/형틀공', allocated: 6 }],
             children: []
         },
         {
@@ -300,6 +301,7 @@ Regular.args = {
             endDate: '2023-01-23',
             dependsOn: '9',
             length: '1d',
+            resources: [{ type: '방수공', allocated: 6 }],
             tags: ['milestone'],
             children: [
                 {
@@ -313,6 +315,7 @@ Regular.args = {
                     dependsOn: '',
                     length: '4d',
                     tags: ['done'],
+                    resources: [{ type: '방수공', allocated: 6 }],
                     children: []
                 },
                 {
@@ -325,6 +328,7 @@ Regular.args = {
                     dependsOn: '12-1',
                     length: '5d',
                     tags: ['active'],
+                    resources: [{ type: '조적공', allocated: 6 }],
                     children: []
                 }
             ]
@@ -351,6 +355,7 @@ Regular.args = {
             dependsOn: '13',
             length: '1d',
             tags: ['milestone'],
+            resources: [{ type: '금속공', allocated: 1 }],
             children: []
         },
         {
@@ -374,6 +379,7 @@ Regular.args = {
             endDate: '2023-02-05',
             dependsOn: '15',
             length: '1d',
+            resources: [{ type: '창호공', allocated: 1 }],
             tags: ['active'],
             children: []
         },
@@ -411,6 +417,7 @@ Regular.args = {
             dependsOn: '18',
             length: '1d',
             tags: ['milestone'],
+            resources: [{ type: '창호공', allocated: 7 }],
             children: []
         }
     ]

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      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"]}
+{"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: 95%;\n      height: 650px;\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: ['active'],\n              resources: [{ type: '창호공', allocated: 5 }],\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: 3 }],\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: 5 }],\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: 3 }],\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: 1 }],\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: 7 }],\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: 8 }],\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      resources: [{ type: '철근/형틀공', allocated: 6 }],\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      resources: [{ type: '방수공', allocated: 6 }],\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          resources: [{ type: '방수공', allocated: 6 }],\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          resources: [{ type: '조적공', allocated: 6 }],\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      resources: [{ type: '금속공', allocated: 1 }],\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      resources: [{ type: '창호공', allocated: 1 }],\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      resources: [{ type: '창호공', allocated: 7 }],\n      children: []\n    }\n  ]\n}\n"]}