tg-ganttchart 0.0.16 → 0.0.17

package/dist/tgganttchart.umd.js

@@ -3531,8 +3531,8 @@ var esnext_iterator_reduce = __webpack_require__(8872);
 // EXTERNAL MODULE: ./node_modules/dayjs/dayjs.min.js
 var dayjs_min = __webpack_require__(4353);
 var dayjs_min_default = /*#__PURE__*/__webpack_require__.n(dayjs_min);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=template&id=eb2e1196&scoped=true
-var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=template&id=33d82582&scoped=true
+var GanttViewFiltervue_type_template_id_33d82582_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3544,7 +3544,7 @@ var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_render = function r
   }, _vm._l(_vm.leftSideLabels, function (label, index) {
     return _c('span', {
       key: index,
-      staticClass: "left-label-item"
+      staticClass: "p-name text-white"
     }, [_vm._v(" " + _vm._s(label) + " ")]);
   }), 0), _c('div', {
     staticClass: "legend-section"
@@ -3620,7 +3620,7 @@ var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_render = function r
     staticClass: "view-label"
   }, [_vm._v("Quarter")])])])])]);
 };
-var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_staticRenderFns = [];
+var GanttViewFiltervue_type_template_id_33d82582_scoped_true_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=script&lang=js
 
@@ -3680,7 +3680,9 @@ var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_staticRenderFns = [
         'check': '#3B82F6',
         'epic': '#8B5CF6',
         'story': '#86EFAC',
-        'subtask': '#3B82F6'
+        'subtask': '#3B82F6',
+        'phase': '#F97316',
+        'stage': '#ec4899'
       };
     },
     /**
@@ -3696,7 +3698,9 @@ var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_staticRenderFns = [
         'check': 'Check',
         'epic': 'Epic',
         'story': 'Story',
-        'subtask': 'Subtask'
+        'subtask': 'Subtask',
+        'phase': 'Phase',
+        'stage': 'Stage'
       };
     },
     /**
@@ -3718,8 +3722,8 @@ var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_staticRenderFns = [
         });
       });
 
-      // Sort items in a consistent order (epic, story, task, milestone, etc.)
-      const order = ['epic', 'story', 'task', 'subtask', 'milestone', 'project', 'sprint'];
+      // Sort items in a consistent order (phase, stage, epic, story, task, milestone, etc.)
+      const order = ['phase', 'stage', 'epic', 'story', 'task', 'subtask', 'milestone', 'project', 'sprint', 'flag', 'check'];
       items.sort((a, b) => {
         const indexA = order.indexOf(a.type);
         const indexB = order.indexOf(b.type);
@@ -3745,10 +3749,10 @@ var GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_staticRenderFns = [
 });
 ;// ./src/components/Header/GanttViewFilter.vue?vue&type=script&lang=js
  /* harmony default export */ var Header_GanttViewFiltervue_type_script_lang_js = (GanttViewFiltervue_type_script_lang_js); 
-;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-55.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-55.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-55.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=eb2e1196&prod&scoped=true&lang=css
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-55.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-55.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-55.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=33d82582&prod&scoped=true&lang=css
 // extracted by mini-css-extract-plugin
 
-;// ./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=eb2e1196&prod&scoped=true&lang=css
+;// ./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=33d82582&prod&scoped=true&lang=css
 
 ;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -3859,11 +3863,11 @@ function normalizeComponent(
 
 var component = normalizeComponent(
   Header_GanttViewFiltervue_type_script_lang_js,
-  GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_render,
-  GanttViewFiltervue_type_template_id_eb2e1196_scoped_true_staticRenderFns,
+  GanttViewFiltervue_type_template_id_33d82582_scoped_true_render,
+  GanttViewFiltervue_type_template_id_33d82582_scoped_true_staticRenderFns,
   false,
   null,
-  "eb2e1196",
+  "33d82582",
   null
   
 )
@@ -4409,8 +4413,8 @@ var TaskListItemvue_type_template_id_b99d1d94_render = function render() {
 };
 var TaskListItemvue_type_template_id_b99d1d94_staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/ItemColumn.vue?vue&type=template&id=6a863d80
-var ItemColumnvue_type_template_id_6a863d80_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/ItemColumn.vue?vue&type=template&id=a353e348
+var ItemColumnvue_type_template_id_a353e348_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -4547,7 +4551,7 @@ var ItemColumnvue_type_template_id_6a863d80_render = function render() {
     }
   })])])], 2)]);
 };
-var ItemColumnvue_type_template_id_6a863d80_staticRenderFns = [];
+var ItemColumnvue_type_template_id_a353e348_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/ItemColumn.vue?vue&type=script&lang=js
 
@@ -4776,7 +4780,15 @@ var ItemColumnvue_type_template_id_6a863d80_staticRenderFns = [];
         // Green flag
         'check': 'M3 3 L11 3 L11 11 L3 11 Z M5 7 L7 9 L9 5',
         // Blue checkmark in square
-        'epic': 'M7 2 L12 7 L7 12 L2 7 Z' // Purple diamond for epics
+        'epic': 'M7 2 L12 7 L7 12 L2 7 Z',
+        // Purple diamond for epics
+        'story': 'M3 4 L11 4 L11 10 L3 10 Z',
+        // Rectangle for stories
+        'subtask': 'M3 3 L11 3 L11 11 L3 11 Z',
+        // Square for subtasks
+        'phase': 'M 2 2 L 10 7 L 2 12 Z',
+        // Triangle/arrow for phase
+        'stage': 'M 1 3 H 13 V 11 H 1 Z M 1 7 H 9 Z' // Trapezoid/rectangle for stage
       };
 
       // Always return an icon for tasks, default to task icon if type not found
@@ -4810,7 +4822,11 @@ var ItemColumnvue_type_template_id_6a863d80_staticRenderFns = [];
         // Purple - matches chart
         'story': '#86EFAC',
         // Light green - matches chart
-        'subtask': '#3B82F6' // Blue - matches chart
+        'subtask': '#3B82F6',
+        // Blue - matches chart
+        'phase': '#F97316',
+        // Orange - matches chart
+        'stage': '#ec4899' // Pink - matches chart
       };
       return colorMap[this.task.type] || '#6B7280'; // Gray default
     },
@@ -4854,8 +4870,8 @@ var ItemColumnvue_type_template_id_6a863d80_staticRenderFns = [];
 ;
 var ItemColumn_component = normalizeComponent(
   TaskList_ItemColumnvue_type_script_lang_js,
-  ItemColumnvue_type_template_id_6a863d80_render,
-  ItemColumnvue_type_template_id_6a863d80_staticRenderFns,
+  ItemColumnvue_type_template_id_a353e348_render,
+  ItemColumnvue_type_template_id_a353e348_staticRenderFns,
   false,
   null,
   null,
@@ -5072,8 +5088,8 @@ var TaskList_component = normalizeComponent(
 )
 
 /* harmony default export */ var TaskList = (TaskList_component.exports);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Chart.vue?vue&type=template&id=0856b85c
-var Chartvue_type_template_id_0856b85c_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Chart.vue?vue&type=template&id=421ad3fc
+var Chartvue_type_template_id_421ad3fc_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -5148,7 +5164,7 @@ var Chartvue_type_template_id_0856b85c_render = function render() {
     })], 1);
   })], 2)])])])]);
 };
-var Chartvue_type_template_id_0856b85c_staticRenderFns = [];
+var Chartvue_type_template_id_421ad3fc_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Grid.vue?vue&type=template&id=244ea0ee
 var Gridvue_type_template_id_244ea0ee_render = function render() {
@@ -8869,6 +8885,530 @@ var Story_component = normalizeComponent(
 )
 
 /* harmony default export */ var Story = (Story_component.exports);
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Row/Phase.vue?vue&type=template&id=76d951de
+var Phasevue_type_template_id_76d951de_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('g', {
+    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-phase-wrapper",
+    style: {
+      ..._vm.root.style['chart-row-bar-wrapper'],
+      ..._vm.root.style['chart-row-phase-wrapper'],
+      ..._vm.task.style['chart-row-bar-wrapper']
+    }
+  }, [_vm.displayExpander ? _c('foreignObject', {
+    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--phase",
+    style: {
+      ..._vm.root.style['chart-expander'],
+      ..._vm.root.style['chart-expander--phase'],
+      ..._vm.task.style['chart-expander']
+    },
+    attrs: {
+      "x": _vm.task.x - _vm.root.state.options.chart.expander.offset - _vm.root.state.options.chart.expander.size,
+      "y": _vm.task.y + (_vm.root.state.options.row.height - _vm.root.state.options.chart.expander.size) / 2,
+      "width": _vm.root.state.options.chart.expander.size,
+      "height": _vm.root.state.options.chart.expander.size
+    }
+  }, [_c('expander', {
+    attrs: {
+      "tasks": [_vm.task],
+      "options": _vm.root.state.options.chart.expander,
+      "type": "chart"
+    }
+  })], 1) : _vm._e(), _c('svg', {
+    staticClass: "gantt-elastic__chart-row-bar gantt-elastic__chart-row-phase",
+    style: {
+      ..._vm.root.style['chart-row-bar'],
+      ..._vm.root.style['chart-row-phase'],
+      ..._vm.task.style['chart-row-bar']
+    },
+    attrs: {
+      "x": _vm.task.x - 8,
+      "y": _vm.task.y,
+      "width": _vm.task.width + 16,
+      "height": _vm.task.height,
+      "viewBox": `-8 0 ${_vm.task.width + 16} ${_vm.task.height}`,
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.emitEvent('click', $event);
+      },
+      "mouseenter": function ($event) {
+        return _vm.emitEvent('mouseenter', $event);
+      },
+      "mouseover": function ($event) {
+        return _vm.emitEvent('mouseover', $event);
+      },
+      "mouseout": function ($event) {
+        return _vm.emitEvent('mouseout', $event);
+      },
+      "mousemove": function ($event) {
+        return _vm.emitEvent('mousemove', $event);
+      },
+      "mousedown": function ($event) {
+        return _vm.emitEvent('mousedown', $event);
+      },
+      "mouseup": function ($event) {
+        return _vm.emitEvent('mouseup', $event);
+      },
+      "mousewheel": function ($event) {
+        return _vm.emitEvent('mousewheel', $event);
+      },
+      "touchstart": function ($event) {
+        return _vm.emitEvent('touchstart', $event);
+      },
+      "touchmove": function ($event) {
+        return _vm.emitEvent('touchmove', $event);
+      },
+      "touchend": function ($event) {
+        return _vm.emitEvent('touchend', $event);
+      }
+    }
+  }, [_c('defs', [_c('clipPath', {
+    attrs: {
+      "id": _vm.clipPathId
+    }
+  }, [_c('path', {
+    attrs: {
+      "d": _vm.getPoints
+    }
+  })])]), _c('path', {
+    staticClass: "gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-phase-polygon",
+    style: {
+      ..._vm.root.style['chart-row-bar-polygon'],
+      ..._vm.root.style['chart-row-phase-polygon'],
+      ..._vm.task.style['base'],
+      ..._vm.task.style['chart-row-bar-polygon'],
+      'pointer-events': 'all',
+      'z-index': '10'
+    },
+    attrs: {
+      "d": _vm.getPointsAdjusted
+    },
+    on: {
+      "mousedown": function ($event) {
+        return _vm.startDrag($event, 'move');
+      },
+      "touchstart": function ($event) {
+        return _vm.startDrag($event, 'move');
+      }
+    }
+  }), _vm.task.progress > 0 ? _c('progress-bar', {
+    attrs: {
+      "task": _vm.task,
+      "clip-path": 'url(#' + _vm.clipPathId + ')'
+    }
+  }) : _vm._e(), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": "0",
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      }
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": _vm.task.width - 12,
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      }
+    }
+  })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
+    attrs: {
+      "task": _vm.task
+    }
+  }) : _vm._e()], 1);
+};
+var Phasevue_type_template_id_76d951de_staticRenderFns = [];
+
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Row/Phase.vue?vue&type=script&lang=js
+
+
+
+
+
+/* harmony default export */ var Phasevue_type_script_lang_js = ({
+  name: 'Phase',
+  components: {
+    ChartText: Text,
+    ProgressBar: ProgressBar,
+    Expander: Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [Task_mixin, Draggable_mixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__phase-clip-path-' + this.task.id;
+    },
+    /**
+     * Get points (arrow/triangle shape for phase)
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const arrowHeight = task.height * 0.3; // Height of arrow point
+      const arrowWidth = task.height * 0.4; // Width of arrow point
+      return `M 0,${task.height / 2}
+                L ${arrowWidth},0
+                L ${task.width - arrowWidth},0
+                L ${task.width},${task.height / 2}
+                L ${task.width - arrowWidth},${task.height}
+                L ${arrowWidth},${task.height}
+                Z`;
+    },
+    /**
+     * Get points adjusted for viewBox
+     *
+     * @returns {string}
+     */
+    getPointsAdjusted() {
+      const task = this.task;
+      const arrowHeight = task.height * 0.3;
+      const arrowWidth = task.height * 0.4;
+      return `M ${8},${task.height / 2}
+                L ${8 + arrowWidth},0
+                L ${8 + task.width - arrowWidth},0
+                L ${8 + task.width},${task.height / 2}
+                L ${8 + task.width - arrowWidth},${task.height}
+                L ${8 + arrowWidth},${task.height}
+                Z`;
+    },
+    /**
+     * Should we display expander?
+     *
+     * @returns {boolean}
+     */
+    displayExpander() {
+      const expander = this.root.state.options.chart.expander;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || expander.displayIfTaskListHidden && !this.root.state.options.taskList.display) && hasChildren;
+    }
+  }
+});
+;// ./src/components/Chart/Row/Phase.vue?vue&type=script&lang=js
+ /* harmony default export */ var Row_Phasevue_type_script_lang_js = (Phasevue_type_script_lang_js); 
+;// ./src/components/Chart/Row/Phase.vue
+
+
+
+
+
+/* normalize component */
+;
+var Phase_component = normalizeComponent(
+  Row_Phasevue_type_script_lang_js,
+  Phasevue_type_template_id_76d951de_render,
+  Phasevue_type_template_id_76d951de_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Phase = (Phase_component.exports);
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Row/Stage.vue?vue&type=template&id=27688006
+var Stagevue_type_template_id_27688006_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('g', {
+    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-stage-wrapper",
+    style: {
+      ..._vm.root.style['chart-row-bar-wrapper'],
+      ..._vm.root.style['chart-row-stage-wrapper'],
+      ..._vm.task.style['chart-row-bar-wrapper']
+    }
+  }, [_vm.displayExpander ? _c('foreignObject', {
+    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--stage",
+    style: {
+      ..._vm.root.style['chart-expander'],
+      ..._vm.root.style['chart-expander--stage'],
+      ..._vm.task.style['chart-expander']
+    },
+    attrs: {
+      "x": _vm.task.x - _vm.root.state.options.chart.expander.offset - _vm.root.state.options.chart.expander.size,
+      "y": _vm.task.y + (_vm.root.state.options.row.height - _vm.root.state.options.chart.expander.size) / 2,
+      "width": _vm.root.state.options.chart.expander.size,
+      "height": _vm.root.state.options.chart.expander.size
+    }
+  }, [_c('expander', {
+    attrs: {
+      "tasks": [_vm.task],
+      "options": _vm.root.state.options.chart.expander,
+      "type": "chart"
+    }
+  })], 1) : _vm._e(), _c('svg', {
+    staticClass: "gantt-elastic__chart-row-bar gantt-elastic__chart-row-stage",
+    style: {
+      ..._vm.root.style['chart-row-bar'],
+      ..._vm.root.style['chart-row-stage'],
+      ..._vm.task.style['chart-row-bar']
+    },
+    attrs: {
+      "x": _vm.task.x - 8,
+      "y": _vm.task.y,
+      "width": _vm.task.width + 16,
+      "height": _vm.task.height,
+      "viewBox": `-8 0 ${_vm.task.width + 16} ${_vm.task.height}`,
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.emitEvent('click', $event);
+      },
+      "mouseenter": function ($event) {
+        return _vm.emitEvent('mouseenter', $event);
+      },
+      "mouseover": function ($event) {
+        return _vm.emitEvent('mouseover', $event);
+      },
+      "mouseout": function ($event) {
+        return _vm.emitEvent('mouseout', $event);
+      },
+      "mousemove": function ($event) {
+        return _vm.emitEvent('mousemove', $event);
+      },
+      "mousedown": function ($event) {
+        return _vm.emitEvent('mousedown', $event);
+      },
+      "mouseup": function ($event) {
+        return _vm.emitEvent('mouseup', $event);
+      },
+      "mousewheel": function ($event) {
+        return _vm.emitEvent('mousewheel', $event);
+      },
+      "touchstart": function ($event) {
+        return _vm.emitEvent('touchstart', $event);
+      },
+      "touchmove": function ($event) {
+        return _vm.emitEvent('touchmove', $event);
+      },
+      "touchend": function ($event) {
+        return _vm.emitEvent('touchend', $event);
+      }
+    }
+  }, [_c('defs', [_c('clipPath', {
+    attrs: {
+      "id": _vm.clipPathId
+    }
+  }, [_c('path', {
+    attrs: {
+      "d": _vm.getPoints
+    }
+  })])]), _c('path', {
+    staticClass: "gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-stage-polygon",
+    style: {
+      ..._vm.root.style['chart-row-bar-polygon'],
+      ..._vm.root.style['chart-row-stage-polygon'],
+      ..._vm.task.style['base'],
+      ..._vm.task.style['chart-row-bar-polygon']
+    },
+    attrs: {
+      "d": _vm.getPointsAdjusted
+    },
+    on: {
+      "mousedown": function ($event) {
+        return _vm.startDrag($event, 'move');
+      },
+      "touchstart": function ($event) {
+        return _vm.startDrag($event, 'move');
+      }
+    }
+  }), _c('progress-bar', {
+    attrs: {
+      "task": _vm.task,
+      "clip-path": 'url(#' + _vm.clipPathId + ')'
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": "0",
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      }
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": _vm.task.width - 12,
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      }
+    }
+  })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
+    attrs: {
+      "task": _vm.task
+    }
+  }) : _vm._e()], 1);
+};
+var Stagevue_type_template_id_27688006_staticRenderFns = [];
+
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Row/Stage.vue?vue&type=script&lang=js
+
+
+
+
+
+/* harmony default export */ var Stagevue_type_script_lang_js = ({
+  name: 'Stage',
+  components: {
+    ChartText: Text,
+    ProgressBar: ProgressBar,
+    Expander: Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [Task_mixin, Draggable_mixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__stage-clip-path-' + this.task.id;
+    },
+    /**
+     * Get points (trapezoid shape for stage)
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const indent = task.height * 0.2; // Indent for trapezoid effect
+      return `M ${indent},0
+                L ${task.width - indent},0
+                L ${task.width},${task.height}
+                L 0,${task.height}
+                Z`;
+    },
+    /**
+     * Get points adjusted for viewBox
+     *
+     * @returns {string}
+     */
+    getPointsAdjusted() {
+      const task = this.task;
+      const indent = task.height * 0.2;
+      return `M ${8 + indent},0
+                L ${8 + task.width - indent},0
+                L ${8 + task.width},${task.height}
+                L ${8},${task.height}
+                Z`;
+    },
+    /**
+     * Should we display expander?
+     *
+     * @returns {boolean}
+     */
+    displayExpander() {
+      const expander = this.root.state.options.chart.expander;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || expander.displayIfTaskListHidden && !this.root.state.options.taskList.display) && hasChildren;
+    }
+  }
+});
+;// ./src/components/Chart/Row/Stage.vue?vue&type=script&lang=js
+ /* harmony default export */ var Row_Stagevue_type_script_lang_js = (Stagevue_type_script_lang_js); 
+;// ./src/components/Chart/Row/Stage.vue
+
+
+
+
+
+/* normalize component */
+;
+var Stage_component = normalizeComponent(
+  Row_Stagevue_type_script_lang_js,
+  Stagevue_type_template_id_27688006_render,
+  Stagevue_type_template_id_27688006_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Stage = (Stage_component.exports);
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Chart.vue?vue&type=script&lang=js
 
 
@@ -8880,6 +9420,8 @@ var Story_component = normalizeComponent(
 
 
 
+
+
 /* harmony default export */ var Chartvue_type_script_lang_js = ({
   name: 'Chart',
   components: {
@@ -8892,6 +9434,8 @@ var Story_component = normalizeComponent(
     epic: Epic,
     subtask: Subtask,
     story: Story,
+    phase: Phase,
+    stage: Stage,
     DaysHighlight: DaysHighlight
   },
   inject: ['root'],
@@ -8970,8 +9514,8 @@ var Story_component = normalizeComponent(
 ;
 var Chart_component = normalizeComponent(
   Chart_Chartvue_type_script_lang_js,
-  Chartvue_type_template_id_0856b85c_render,
-  Chartvue_type_template_id_0856b85c_staticRenderFns,
+  Chartvue_type_template_id_421ad3fc_render,
+  Chartvue_type_template_id_421ad3fc_staticRenderFns,
   false,
   null,
   null,
@@ -9708,7 +10252,12 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
     },
     'chart-row-project-wrapper': {},
     'chart-row-project': {},
-    'chart-row-project-polygon': {},
+    'chart-row-project-polygon': {
+      stroke: '#8B5CF6',
+      'stroke-width': 2,
+      fill: '#8B5CF6',
+      'fill-opacity': 0.9
+    },
     'chart-row-epic-wrapper': {},
     'chart-row-epic': {},
     'chart-row-epic-polygon': {
@@ -9749,6 +10298,46 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
       fill: '#3B82F6',
       'fill-opacity': 0.9
     },
+    'chart-row-phase-wrapper': {},
+    'chart-row-phase': {},
+    'chart-row-phase-polygon': {
+      stroke: '#F97316',
+      'stroke-width': 2,
+      fill: '#F97316',
+      'fill-opacity': 0.9
+    },
+    'chart-row-stage-wrapper': {},
+    'chart-row-stage': {},
+    'chart-row-stage-polygon': {
+      stroke: '#ec4899',
+      'stroke-width': 1,
+      fill: '#ec4899',
+      'fill-opacity': 0.9
+    },
+    'chart-row-sprint-wrapper': {},
+    'chart-row-sprint': {},
+    'chart-row-sprint-polygon': {
+      stroke: '#F59E0B',
+      'stroke-width': 1,
+      fill: '#F59E0B',
+      'fill-opacity': 0.9
+    },
+    'chart-row-flag-wrapper': {},
+    'chart-row-flag': {},
+    'chart-row-flag-polygon': {
+      stroke: '#10B981',
+      'stroke-width': 1,
+      fill: '#10B981',
+      'fill-opacity': 0.9
+    },
+    'chart-row-check-wrapper': {},
+    'chart-row-check': {},
+    'chart-row-check-polygon': {
+      stroke: '#3B82F6',
+      'stroke-width': 1,
+      fill: '#3B82F6',
+      'fill-opacity': 0.9
+    },
     'chart-row-progress-bar-wrapper': {},
     'chart-row-progress-bar': {},
     'chart-row-progress-bar-line': {