tg-ganttchart 0.0.9 → 0.0.11

package/dist/tgganttchart.umd.js

@@ -18,6 +18,20 @@ return /******/ (function() { // webpackBootstrap
 
 /***/ }),
 
+/***/ 1816:
+/***/ (function(module) {
+
+!function(t,n){ true?module.exports=n():0}(this,(function(){"use strict";var t="month",n="quarter";return function(e,i){var r=i.prototype;r.quarter=function(t){return this.$utils().u(t)?Math.ceil((this.month()+1)/3):this.month(this.month()%3+3*(t-1))};var s=r.add;r.add=function(e,i){return e=Number(e),this.$utils().p(i)===n?this.add(3*e,t):s.bind(this)(e,i)};var u=r.startOf;r.startOf=function(e,i){var r=this.$utils(),s=!!r.u(i)||i;if(r.p(e)===n){var o=this.quarter()-1;return s?this.month(3*o).startOf(t).startOf("day"):this.month(3*o+2).endOf(t).endOf("day")}return u.bind(this)(e,i)}}}));
+
+/***/ }),
+
+/***/ 8134:
+/***/ (function(module) {
+
+!function(e,t){ true?module.exports=t():0}(this,(function(){"use strict";var e="week",t="year";return function(i,n,r){var f=n.prototype;f.week=function(i){if(void 0===i&&(i=null),null!==i)return this.add(7*(i-this.week()),"day");var n=this.$locale().yearStart||1;if(11===this.month()&&this.date()>25){var f=r(this).startOf(t).add(1,t).date(n),s=r(this).endOf(e);if(f.isBefore(s))return 1}var a=r(this).startOf(t).date(n).startOf(e).subtract(1,"millisecond"),o=this.diff(a,e,!0);return o<0?r(this).startOf("week").week():Math.ceil(o)},f.weeks=function(e){return void 0===e&&(e=null),this.week(e)}}}));
+
+/***/ }),
+
 /***/ 378:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -56,6 +70,22 @@ module.exports = function (argument) {
 };
 
 
+/***/ }),
+
+/***/ 7080:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var has = (__webpack_require__(4402).has);
+
+// Perform ? RequireInternalSlot(M, [[SetData]])
+module.exports = function (it) {
+  has(it);
+  return it;
+};
+
+
 /***/ }),
 
 /***/ 679:
@@ -723,6 +753,24 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ 6706:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var uncurryThis = __webpack_require__(9504);
+var aCallable = __webpack_require__(9306);
+
+module.exports = function (object, key, method) {
+  try {
+    // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+    return uncurryThis(aCallable(Object.getOwnPropertyDescriptor(object, key)[method]));
+  } catch (error) { /* empty */ }
+};
+
+
 /***/ }),
 
 /***/ 7476:
@@ -860,6 +908,54 @@ module.exports = function (V, P) {
 };
 
 
+/***/ }),
+
+/***/ 3789:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var aCallable = __webpack_require__(9306);
+var anObject = __webpack_require__(8551);
+var call = __webpack_require__(9565);
+var toIntegerOrInfinity = __webpack_require__(1291);
+var getIteratorDirect = __webpack_require__(1767);
+
+var INVALID_SIZE = 'Invalid size';
+var $RangeError = RangeError;
+var $TypeError = TypeError;
+var max = Math.max;
+
+var SetRecord = function (set, intSize) {
+  this.set = set;
+  this.size = max(intSize, 0);
+  this.has = aCallable(set.has);
+  this.keys = aCallable(set.keys);
+};
+
+SetRecord.prototype = {
+  getIterator: function () {
+    return getIteratorDirect(anObject(call(this.keys, this.set)));
+  },
+  includes: function (it) {
+    return call(this.has, this.set, it);
+  }
+};
+
+// `GetSetRecord` abstract operation
+// https://tc39.es/proposal-set-methods/#sec-getsetrecord
+module.exports = function (obj) {
+  anObject(obj);
+  var numSize = +obj.size;
+  // NOTE: If size is undefined, then numSize will be NaN
+  // eslint-disable-next-line no-self-compare -- NaN check
+  if (numSize !== numSize) throw new $TypeError(INVALID_SIZE);
+  var intSize = toIntegerOrInfinity(numSize);
+  if (intSize < 0) throw new $RangeError(INVALID_SIZE);
+  return new SetRecord(obj, intSize);
+};
+
+
 /***/ }),
 
 /***/ 4576:
@@ -1219,6 +1315,26 @@ module.exports = USE_SYMBOL_AS_UID ? function (it) {
 };
 
 
+/***/ }),
+
+/***/ 507:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var call = __webpack_require__(9565);
+
+module.exports = function (record, fn, ITERATOR_INSTEAD_OF_RECORD) {
+  var iterator = ITERATOR_INSTEAD_OF_RECORD ? record : record.iterator;
+  var next = record.next;
+  var step, result;
+  while (!(step = call(next, iterator)).done) {
+    result = fn(step.value);
+    if (result !== undefined) return result;
+  }
+};
+
+
 /***/ }),
 
 /***/ 2652:
@@ -2022,6 +2138,341 @@ module.exports = function (it) {
 };
 
 
+/***/ }),
+
+/***/ 9286:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var SetHelpers = __webpack_require__(4402);
+var iterate = __webpack_require__(8469);
+
+var Set = SetHelpers.Set;
+var add = SetHelpers.add;
+
+module.exports = function (set) {
+  var result = new Set();
+  iterate(set, function (it) {
+    add(result, it);
+  });
+  return result;
+};
+
+
+/***/ }),
+
+/***/ 3440:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var aSet = __webpack_require__(7080);
+var SetHelpers = __webpack_require__(4402);
+var clone = __webpack_require__(9286);
+var size = __webpack_require__(5170);
+var getSetRecord = __webpack_require__(3789);
+var iterateSet = __webpack_require__(8469);
+var iterateSimple = __webpack_require__(507);
+
+var has = SetHelpers.has;
+var remove = SetHelpers.remove;
+
+// `Set.prototype.difference` method
+// https://github.com/tc39/proposal-set-methods
+module.exports = function difference(other) {
+  var O = aSet(this);
+  var otherRec = getSetRecord(other);
+  var result = clone(O);
+  if (size(O) <= otherRec.size) iterateSet(O, function (e) {
+    if (otherRec.includes(e)) remove(result, e);
+  });
+  else iterateSimple(otherRec.getIterator(), function (e) {
+    if (has(O, e)) remove(result, e);
+  });
+  return result;
+};
+
+
+/***/ }),
+
+/***/ 4402:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var uncurryThis = __webpack_require__(9504);
+
+// eslint-disable-next-line es/no-set -- safe
+var SetPrototype = Set.prototype;
+
+module.exports = {
+  // eslint-disable-next-line es/no-set -- safe
+  Set: Set,
+  add: uncurryThis(SetPrototype.add),
+  has: uncurryThis(SetPrototype.has),
+  remove: uncurryThis(SetPrototype['delete']),
+  proto: SetPrototype
+};
+
+
+/***/ }),
+
+/***/ 8750:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var aSet = __webpack_require__(7080);
+var SetHelpers = __webpack_require__(4402);
+var size = __webpack_require__(5170);
+var getSetRecord = __webpack_require__(3789);
+var iterateSet = __webpack_require__(8469);
+var iterateSimple = __webpack_require__(507);
+
+var Set = SetHelpers.Set;
+var add = SetHelpers.add;
+var has = SetHelpers.has;
+
+// `Set.prototype.intersection` method
+// https://github.com/tc39/proposal-set-methods
+module.exports = function intersection(other) {
+  var O = aSet(this);
+  var otherRec = getSetRecord(other);
+  var result = new Set();
+
+  if (size(O) > otherRec.size) {
+    iterateSimple(otherRec.getIterator(), function (e) {
+      if (has(O, e)) add(result, e);
+    });
+  } else {
+    iterateSet(O, function (e) {
+      if (otherRec.includes(e)) add(result, e);
+    });
+  }
+
+  return result;
+};
+
+
+/***/ }),
+
+/***/ 4449:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var aSet = __webpack_require__(7080);
+var has = (__webpack_require__(4402).has);
+var size = __webpack_require__(5170);
+var getSetRecord = __webpack_require__(3789);
+var iterateSet = __webpack_require__(8469);
+var iterateSimple = __webpack_require__(507);
+var iteratorClose = __webpack_require__(9539);
+
+// `Set.prototype.isDisjointFrom` method
+// https://tc39.github.io/proposal-set-methods/#Set.prototype.isDisjointFrom
+module.exports = function isDisjointFrom(other) {
+  var O = aSet(this);
+  var otherRec = getSetRecord(other);
+  if (size(O) <= otherRec.size) return iterateSet(O, function (e) {
+    if (otherRec.includes(e)) return false;
+  }, true) !== false;
+  var iterator = otherRec.getIterator();
+  return iterateSimple(iterator, function (e) {
+    if (has(O, e)) return iteratorClose(iterator, 'normal', false);
+  }) !== false;
+};
+
+
+/***/ }),
+
+/***/ 3838:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var aSet = __webpack_require__(7080);
+var size = __webpack_require__(5170);
+var iterate = __webpack_require__(8469);
+var getSetRecord = __webpack_require__(3789);
+
+// `Set.prototype.isSubsetOf` method
+// https://tc39.github.io/proposal-set-methods/#Set.prototype.isSubsetOf
+module.exports = function isSubsetOf(other) {
+  var O = aSet(this);
+  var otherRec = getSetRecord(other);
+  if (size(O) > otherRec.size) return false;
+  return iterate(O, function (e) {
+    if (!otherRec.includes(e)) return false;
+  }, true) !== false;
+};
+
+
+/***/ }),
+
+/***/ 8527:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var aSet = __webpack_require__(7080);
+var has = (__webpack_require__(4402).has);
+var size = __webpack_require__(5170);
+var getSetRecord = __webpack_require__(3789);
+var iterateSimple = __webpack_require__(507);
+var iteratorClose = __webpack_require__(9539);
+
+// `Set.prototype.isSupersetOf` method
+// https://tc39.github.io/proposal-set-methods/#Set.prototype.isSupersetOf
+module.exports = function isSupersetOf(other) {
+  var O = aSet(this);
+  var otherRec = getSetRecord(other);
+  if (size(O) < otherRec.size) return false;
+  var iterator = otherRec.getIterator();
+  return iterateSimple(iterator, function (e) {
+    if (!has(O, e)) return iteratorClose(iterator, 'normal', false);
+  }) !== false;
+};
+
+
+/***/ }),
+
+/***/ 8469:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var uncurryThis = __webpack_require__(9504);
+var iterateSimple = __webpack_require__(507);
+var SetHelpers = __webpack_require__(4402);
+
+var Set = SetHelpers.Set;
+var SetPrototype = SetHelpers.proto;
+var forEach = uncurryThis(SetPrototype.forEach);
+var keys = uncurryThis(SetPrototype.keys);
+var next = keys(new Set()).next;
+
+module.exports = function (set, fn, interruptible) {
+  return interruptible ? iterateSimple({ iterator: keys(set), next: next }, fn) : forEach(set, fn);
+};
+
+
+/***/ }),
+
+/***/ 4916:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var getBuiltIn = __webpack_require__(7751);
+
+var createSetLike = function (size) {
+  return {
+    size: size,
+    has: function () {
+      return false;
+    },
+    keys: function () {
+      return {
+        next: function () {
+          return { done: true };
+        }
+      };
+    }
+  };
+};
+
+module.exports = function (name) {
+  var Set = getBuiltIn('Set');
+  try {
+    new Set()[name](createSetLike(0));
+    try {
+      // late spec change, early WebKit ~ Safari 17.0 beta implementation does not pass it
+      // https://github.com/tc39/proposal-set-methods/pull/88
+      new Set()[name](createSetLike(-1));
+      return false;
+    } catch (error2) {
+      return true;
+    }
+  } catch (error) {
+    return false;
+  }
+};
+
+
+/***/ }),
+
+/***/ 5170:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var uncurryThisAccessor = __webpack_require__(6706);
+var SetHelpers = __webpack_require__(4402);
+
+module.exports = uncurryThisAccessor(SetHelpers.proto, 'size', 'get') || function (set) {
+  return set.size;
+};
+
+
+/***/ }),
+
+/***/ 3650:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var aSet = __webpack_require__(7080);
+var SetHelpers = __webpack_require__(4402);
+var clone = __webpack_require__(9286);
+var getSetRecord = __webpack_require__(3789);
+var iterateSimple = __webpack_require__(507);
+
+var add = SetHelpers.add;
+var has = SetHelpers.has;
+var remove = SetHelpers.remove;
+
+// `Set.prototype.symmetricDifference` method
+// https://github.com/tc39/proposal-set-methods
+module.exports = function symmetricDifference(other) {
+  var O = aSet(this);
+  var keysIter = getSetRecord(other).getIterator();
+  var result = clone(O);
+  iterateSimple(keysIter, function (e) {
+    if (has(O, e)) remove(result, e);
+    else add(result, e);
+  });
+  return result;
+};
+
+
+/***/ }),
+
+/***/ 4204:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var aSet = __webpack_require__(7080);
+var add = (__webpack_require__(4402).add);
+var clone = __webpack_require__(9286);
+var getSetRecord = __webpack_require__(3789);
+var iterateSimple = __webpack_require__(507);
+
+// `Set.prototype.union` method
+// https://github.com/tc39/proposal-set-methods
+module.exports = function union(other) {
+  var O = aSet(this);
+  var keysIter = getSetRecord(other).getIterator();
+  var result = clone(O);
+  iterateSimple(keysIter, function (it) {
+    add(result, it);
+  });
+  return result;
+};
+
+
 /***/ }),
 
 /***/ 6119:
@@ -2632,46 +3083,178 @@ $({ target: 'Iterator', proto: true, real: true }, {
 
 /***/ }),
 
-/***/ 8992:
+/***/ 7642:
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 
-// TODO: Remove from `core-js@4`
-__webpack_require__(8111);
+var $ = __webpack_require__(6518);
+var difference = __webpack_require__(3440);
+var setMethodAcceptSetLike = __webpack_require__(4916);
+
+// `Set.prototype.difference` method
+// https://tc39.es/ecma262/#sec-set.prototype.difference
+$({ target: 'Set', proto: true, real: true, forced: !setMethodAcceptSetLike('difference') }, {
+  difference: difference
+});
 
 
 /***/ }),
 
-/***/ 4520:
+/***/ 8004:
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 
-// TODO: Remove from `core-js@4`
-__webpack_require__(2489);
+var $ = __webpack_require__(6518);
+var fails = __webpack_require__(9039);
+var intersection = __webpack_require__(8750);
+var setMethodAcceptSetLike = __webpack_require__(4916);
+
+var INCORRECT = !setMethodAcceptSetLike('intersection') || fails(function () {
+  // eslint-disable-next-line es/no-array-from, es/no-set -- testing
+  return String(Array.from(new Set([1, 2, 3]).intersection(new Set([3, 2])))) !== '3,2';
+});
+
+// `Set.prototype.intersection` method
+// https://tc39.es/ecma262/#sec-set.prototype.intersection
+$({ target: 'Set', proto: true, real: true, forced: INCORRECT }, {
+  intersection: intersection
+});
 
 
 /***/ }),
 
-/***/ 3949:
+/***/ 3853:
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 
-// TODO: Remove from `core-js@4`
-__webpack_require__(7588);
+var $ = __webpack_require__(6518);
+var isDisjointFrom = __webpack_require__(4449);
+var setMethodAcceptSetLike = __webpack_require__(4916);
+
+// `Set.prototype.isDisjointFrom` method
+// https://tc39.es/ecma262/#sec-set.prototype.isdisjointfrom
+$({ target: 'Set', proto: true, real: true, forced: !setMethodAcceptSetLike('isDisjointFrom') }, {
+  isDisjointFrom: isDisjointFrom
+});
 
 
 /***/ }),
 
-/***/ 1454:
+/***/ 5876:
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 
-// TODO: Remove from `core-js@4`
-__webpack_require__(1701);
+var $ = __webpack_require__(6518);
+var isSubsetOf = __webpack_require__(3838);
+var setMethodAcceptSetLike = __webpack_require__(4916);
+
+// `Set.prototype.isSubsetOf` method
+// https://tc39.es/ecma262/#sec-set.prototype.issubsetof
+$({ target: 'Set', proto: true, real: true, forced: !setMethodAcceptSetLike('isSubsetOf') }, {
+  isSubsetOf: isSubsetOf
+});
+
+
+/***/ }),
+
+/***/ 2475:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__(6518);
+var isSupersetOf = __webpack_require__(8527);
+var setMethodAcceptSetLike = __webpack_require__(4916);
+
+// `Set.prototype.isSupersetOf` method
+// https://tc39.es/ecma262/#sec-set.prototype.issupersetof
+$({ target: 'Set', proto: true, real: true, forced: !setMethodAcceptSetLike('isSupersetOf') }, {
+  isSupersetOf: isSupersetOf
+});
+
+
+/***/ }),
+
+/***/ 5024:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__(6518);
+var symmetricDifference = __webpack_require__(3650);
+var setMethodAcceptSetLike = __webpack_require__(4916);
+
+// `Set.prototype.symmetricDifference` method
+// https://tc39.es/ecma262/#sec-set.prototype.symmetricdifference
+$({ target: 'Set', proto: true, real: true, forced: !setMethodAcceptSetLike('symmetricDifference') }, {
+  symmetricDifference: symmetricDifference
+});
+
+
+/***/ }),
+
+/***/ 1698:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__(6518);
+var union = __webpack_require__(4204);
+var setMethodAcceptSetLike = __webpack_require__(4916);
+
+// `Set.prototype.union` method
+// https://tc39.es/ecma262/#sec-set.prototype.union
+$({ target: 'Set', proto: true, real: true, forced: !setMethodAcceptSetLike('union') }, {
+  union: union
+});
+
+
+/***/ }),
+
+/***/ 8992:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+// TODO: Remove from `core-js@4`
+__webpack_require__(8111);
+
+
+/***/ }),
+
+/***/ 4520:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+// TODO: Remove from `core-js@4`
+__webpack_require__(2489);
+
+
+/***/ }),
+
+/***/ 3949:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+// TODO: Remove from `core-js@4`
+__webpack_require__(7588);
+
+
+/***/ }),
+
+/***/ 1454:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+// TODO: Remove from `core-js@4`
+__webpack_require__(1701);
 
 
 /***/ }),
@@ -2782,7 +3365,7 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
   "default": function() { return /* binding */ entry_lib; },
-  ganttChart: function() { return /* reexport */ components_GanttElastic; }
+  ganttChart: function() { return /* reexport */ GanttElastic_standalone; }
 });
 
 ;// ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
@@ -2802,8 +3385,34 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./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/GanttElastic.vue?vue&type=template&id=bf79b1fe
+;// ./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/GanttElastic.standalone.vue?vue&type=template&id=c24bafbc
 var render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('gantt-elastic', {
+    attrs: {
+      "tasks": _vm.tasks,
+      "options": _vm.options,
+      "dynamicStyle": _vm.dynamicStyle
+    }
+  }, [_vm.components.header ? _c(_vm.components.header, {
+    tag: "component",
+    attrs: {
+      "slot": "header"
+    },
+    slot: "header"
+  }) : _vm._e(), _vm.components.footer ? _c(_vm.components.footer, {
+    tag: "component",
+    attrs: {
+      "slot": "footer"
+    },
+    slot: "footer"
+  }) : _vm._e()], 1);
+};
+var 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/GanttElastic.vue?vue&type=template&id=2767341e
+var GanttElasticvue_type_template_id_2767341e_render = function render() {
   var _vm = this,
     _c = _vm._self._c,
     _setup = _vm._self._setupProxy;
@@ -2817,14 +3426,36 @@ var render = function render() {
       "slot": "header"
     },
     slot: "header"
-  }) : _vm._e(), _vm._t("header"), _c('main-view', {
+  }) : _vm._e(), _c('gantt-view-filter', {
+    attrs: {
+      "slot": "header"
+    },
+    on: {
+      "view-mode-changed": _vm.onViewModeChanged
+    },
+    slot: "header"
+  }), _vm._t("header"), _c('main-view', {
     ref: "mainView"
   }), _vm._t("footer")], 2);
 };
-var staticRenderFns = [];
+var GanttElasticvue_type_template_id_2767341e_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.set.difference.v2.js
+var es_set_difference_v2 = __webpack_require__(7642);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.set.intersection.v2.js
+var es_set_intersection_v2 = __webpack_require__(8004);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.set.is-disjoint-from.v2.js
+var es_set_is_disjoint_from_v2 = __webpack_require__(3853);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.set.is-subset-of.v2.js
+var es_set_is_subset_of_v2 = __webpack_require__(5876);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.set.is-superset-of.v2.js
+var es_set_is_superset_of_v2 = __webpack_require__(2475);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.set.symmetric-difference.v2.js
+var es_set_symmetric_difference_v2 = __webpack_require__(5024);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.set.union.v2.js
+var es_set_union_v2 = __webpack_require__(1698);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/esnext.iterator.constructor.js
 var esnext_iterator_constructor = __webpack_require__(8992);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/esnext.iterator.filter.js
@@ -2838,8 +3469,220 @@ 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/components/MainView.vue?vue&type=template&id=5e6f381a
-var MainViewvue_type_template_id_5e6f381a_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=f4bb58fc&scoped=true
+var GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "gantt-view-filter"
+  }, [_c('div', {
+    staticClass: "view-toggle-group"
+  }, [_c('button', {
+    staticClass: "view-toggle-btn",
+    class: {
+      active: _vm.viewMode === 'day'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.changeViewMode('day');
+      }
+    }
+  }, [_c('span', {
+    staticClass: "view-icon"
+  }, [_vm._v("📅")]), _c('span', {
+    staticClass: "view-label"
+  }, [_vm._v("Day")])]), _c('button', {
+    staticClass: "view-toggle-btn",
+    class: {
+      active: _vm.viewMode === 'week'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.changeViewMode('week');
+      }
+    }
+  }, [_c('span', {
+    staticClass: "view-icon"
+  }, [_vm._v("📊")]), _c('span', {
+    staticClass: "view-label"
+  }, [_vm._v("Week")])]), _c('button', {
+    staticClass: "view-toggle-btn",
+    class: {
+      active: _vm.viewMode === 'month'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.changeViewMode('month');
+      }
+    }
+  }, [_c('span', {
+    staticClass: "view-icon"
+  }, [_vm._v("🗓️")]), _c('span', {
+    staticClass: "view-label"
+  }, [_vm._v("Month")])]), _c('button', {
+    staticClass: "view-toggle-btn",
+    class: {
+      active: _vm.viewMode === 'quarter'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.changeViewMode('quarter');
+      }
+    }
+  }, [_c('span', {
+    staticClass: "view-icon"
+  }, [_vm._v("📈")]), _c('span', {
+    staticClass: "view-label"
+  }, [_vm._v("Quarter")])])])]);
+};
+var GanttViewFiltervue_type_template_id_f4bb58fc_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
+/* harmony default export */ var GanttViewFiltervue_type_script_lang_js = ({
+  name: 'GanttViewFilter',
+  data() {
+    return {
+      viewMode: 'day' // default view mode
+    };
+  },
+  methods: {
+    changeViewMode(mode) {
+      // eslint-disable-next-line no-debugger
+      debugger;
+      this.viewMode = mode;
+      // Emit an event to the parent component (App.vue) so it can update the Gantt chart
+      this.$emit('view-mode-changed', mode);
+    }
+  }
+});
+;// ./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=f4bb58fc&prod&scoped=true&lang=css
+// extracted by mini-css-extract-plugin
+
+;// ./src/components/Header/GanttViewFilter.vue?vue&type=style&index=0&id=f4bb58fc&prod&scoped=true&lang=css
+
+;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+function normalizeComponent(
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */,
+  shadowMode /* vue-cli only */
+) {
+  // Vue.extend constructor export interop
+  var options =
+    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
+
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = 'data-v-' + scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) {
+    // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+          injectStyles.call(
+            this,
+            (options.functional ? this.parent : this).$root.$options.shadowRoot
+          )
+        }
+      : injectStyles
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functional component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
+    }
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}
+
+;// ./src/components/Header/GanttViewFilter.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var component = normalizeComponent(
+  Header_GanttViewFiltervue_type_script_lang_js,
+  GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_render,
+  GanttViewFiltervue_type_template_id_f4bb58fc_scoped_true_staticRenderFns,
+  false,
+  null,
+  "f4bb58fc",
+  null
+  
+)
+
+/* harmony default export */ var GanttViewFilter = (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/MainView.vue?vue&type=template&id=1a4b756c
+var MainViewvue_type_template_id_1a4b756c_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -2944,10 +3787,10 @@ var MainViewvue_type_template_id_5e6f381a_render = function render() {
     }
   })])]);
 };
-var MainViewvue_type_template_id_5e6f381a_staticRenderFns = [];
+var MainViewvue_type_template_id_1a4b756c_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/components/TaskList/TaskList.vue?vue&type=template&id=088baa0d
-var TaskListvue_type_template_id_088baa0d_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/TaskList.vue?vue&type=template&id=74ce1216
+var TaskListvue_type_template_id_74ce1216_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -2986,10 +3829,10 @@ var TaskListvue_type_template_id_088baa0d_render = function render() {
     });
   }), 1)], 1)]);
 };
-var TaskListvue_type_template_id_088baa0d_staticRenderFns = [];
+var TaskListvue_type_template_id_74ce1216_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/components/TaskList/TaskListHeader.vue?vue&type=template&id=8ade0cf0
-var TaskListHeadervue_type_template_id_8ade0cf0_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/TaskListHeader.vue?vue&type=template&id=2ecc0032
+var TaskListHeadervue_type_template_id_2ecc0032_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3037,10 +3880,10 @@ var TaskListHeadervue_type_template_id_8ade0cf0_render = function render() {
     }), 0)])], 1);
   }), 0);
 };
-var TaskListHeadervue_type_template_id_8ade0cf0_staticRenderFns = [];
+var TaskListHeadervue_type_template_id_2ecc0032_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/components/Expander.vue?vue&type=template&id=41972c7c
-var Expandervue_type_template_id_41972c7c_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/Expander.vue?vue&type=template&id=ac398cf4
+var Expandervue_type_template_id_ac398cf4_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3056,52 +3899,30 @@ var Expandervue_type_template_id_41972c7c_render = function render() {
     },
     attrs: {
       "width": _vm.options.size,
-      "height": _vm.options.size
+      "height": _vm.options.size,
+      "viewBox": "0 0 16 16"
     },
     on: {
       "click": _vm.toggle
     }
-  }, [_c('rect', {
-    class: _vm.getClassPrefix() + '-border',
-    style: {
-      ..._vm.root.style[_vm.getClassPrefix(false) + '-border'],
-      ..._vm.borderStyle
-    },
-    attrs: {
-      "x": _vm.border,
-      "y": _vm.border,
-      "width": _vm.options.size - _vm.border * 2,
-      "height": _vm.options.size - _vm.border * 2,
-      "rx": "2",
-      "ry": "2"
-    }
-  }), _vm.allChildren.length ? _c('line', {
-    class: _vm.getClassPrefix() + '-line',
+  }, [_c('path', {
+    class: _vm.getClassPrefix() + '-arrow',
     style: {
-      ..._vm.root.style[_vm.getClassPrefix(false) + '-line']
+      ..._vm.root.style[_vm.getClassPrefix(false) + '-arrow']
     },
     attrs: {
-      "x1": _vm.lineOffset,
-      "y1": _vm.options.size / 2,
-      "x2": _vm.options.size - _vm.lineOffset,
-      "y2": _vm.options.size / 2
+      "d": _vm.collapsed ? 'M6 4 L10 8 L6 12' : 'M4 6 L8 10 L12 6',
+      "fill": "none",
+      "stroke": "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
     }
-  }) : _vm._e(), _vm.collapsed ? _c('line', {
-    class: _vm.getClassPrefix() + '-line',
-    style: {
-      ..._vm.root.style[_vm.getClassPrefix(false) + '-line']
-    },
-    attrs: {
-      "x1": _vm.options.size / 2,
-      "y1": _vm.lineOffset,
-      "x2": _vm.options.size / 2,
-      "y2": _vm.options.size - _vm.lineOffset
-    }
-  }) : _vm._e()]) : _vm._e()]);
+  })]) : _vm._e()]);
 };
-var Expandervue_type_template_id_41972c7c_staticRenderFns = [];
+var Expandervue_type_template_id_ac398cf4_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/components/Expander.vue?vue&type=script&lang=js
+;// ./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/Expander.vue?vue&type=script&lang=js
 
 
 
@@ -3183,110 +4004,16 @@ var Expandervue_type_template_id_41972c7c_staticRenderFns = [];
       this.tasks.forEach(task => {
         task.collapsed = collapsed;
       });
+
+      // Force reactivity update
+      this.$forceUpdate();
+      this.root.$forceUpdate();
     }
   }
 });
-;// ./src/components/components/Expander.vue?vue&type=script&lang=js
+;// ./src/components/Expander.vue?vue&type=script&lang=js
  /* harmony default export */ var components_Expandervue_type_script_lang_js = (Expandervue_type_script_lang_js); 
-;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
-/* globals __VUE_SSR_CONTEXT__ */
-
-// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
-// This module is a runtime utility for cleaner component module output and will
-// be included in the final webpack user bundle.
-
-function normalizeComponent(
-  scriptExports,
-  render,
-  staticRenderFns,
-  functionalTemplate,
-  injectStyles,
-  scopeId,
-  moduleIdentifier /* server only */,
-  shadowMode /* vue-cli only */
-) {
-  // Vue.extend constructor export interop
-  var options =
-    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
-
-  // render functions
-  if (render) {
-    options.render = render
-    options.staticRenderFns = staticRenderFns
-    options._compiled = true
-  }
-
-  // functional template
-  if (functionalTemplate) {
-    options.functional = true
-  }
-
-  // scopedId
-  if (scopeId) {
-    options._scopeId = 'data-v-' + scopeId
-  }
-
-  var hook
-  if (moduleIdentifier) {
-    // server build
-    hook = function (context) {
-      // 2.3 injection
-      context =
-        context || // cached call
-        (this.$vnode && this.$vnode.ssrContext) || // stateful
-        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
-      // 2.2 with runInNewContext: true
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__
-      }
-      // inject component styles
-      if (injectStyles) {
-        injectStyles.call(this, context)
-      }
-      // register component module identifier for async chunk inferrence
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier)
-      }
-    }
-    // used by ssr in case component is cached and beforeCreate
-    // never gets called
-    options._ssrRegister = hook
-  } else if (injectStyles) {
-    hook = shadowMode
-      ? function () {
-          injectStyles.call(
-            this,
-            (options.functional ? this.parent : this).$root.$options.shadowRoot
-          )
-        }
-      : injectStyles
-  }
-
-  if (hook) {
-    if (options.functional) {
-      // for template-only hot-reload because in that case the render fn doesn't
-      // go through the normalizer
-      options._injectStyles = hook
-      // register for functional component in vue file
-      var originalRender = options.render
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context)
-        return originalRender(h, context)
-      }
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
-    }
-  }
-
-  return {
-    exports: scriptExports,
-    options: options
-  }
-}
-
-;// ./src/components/components/Expander.vue
+;// ./src/components/Expander.vue
 
 
 
@@ -3294,10 +4021,10 @@ function normalizeComponent(
 
 /* normalize component */
 ;
-var component = normalizeComponent(
+var Expander_component = normalizeComponent(
   components_Expandervue_type_script_lang_js,
-  Expandervue_type_template_id_41972c7c_render,
-  Expandervue_type_template_id_41972c7c_staticRenderFns,
+  Expandervue_type_template_id_ac398cf4_render,
+  Expandervue_type_template_id_ac398cf4_staticRenderFns,
   false,
   null,
   null,
@@ -3305,8 +4032,8 @@ var component = normalizeComponent(
   
 )
 
-/* harmony default export */ var Expander = (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/components/TaskList/TaskListHeader.vue?vue&type=script&lang=js
+/* harmony default export */ var Expander = (Expander_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/TaskList/TaskListHeader.vue?vue&type=script&lang=js
 
 
 
@@ -3406,9 +4133,9 @@ var component = normalizeComponent(
   //   document.removeEventListener('mousemove', this.resizerMouseMove);
   // }
 });
-;// ./src/components/components/TaskList/TaskListHeader.vue?vue&type=script&lang=js
+;// ./src/components/TaskList/TaskListHeader.vue?vue&type=script&lang=js
  /* harmony default export */ var TaskList_TaskListHeadervue_type_script_lang_js = (TaskListHeadervue_type_script_lang_js); 
-;// ./src/components/components/TaskList/TaskListHeader.vue
+;// ./src/components/TaskList/TaskListHeader.vue
 
 
 
@@ -3418,8 +4145,8 @@ var component = normalizeComponent(
 ;
 var TaskListHeader_component = normalizeComponent(
   TaskList_TaskListHeadervue_type_script_lang_js,
-  TaskListHeadervue_type_template_id_8ade0cf0_render,
-  TaskListHeadervue_type_template_id_8ade0cf0_staticRenderFns,
+  TaskListHeadervue_type_template_id_2ecc0032_render,
+  TaskListHeadervue_type_template_id_2ecc0032_staticRenderFns,
   false,
   null,
   null,
@@ -3428,8 +4155,8 @@ var TaskListHeader_component = normalizeComponent(
 )
 
 /* harmony default export */ var TaskListHeader = (TaskListHeader_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/components/TaskList/TaskListItem.vue?vue&type=template&id=602cdfed
-var TaskListItemvue_type_template_id_602cdfed_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/TaskListItem.vue?vue&type=template&id=b99d1d94
+var TaskListItemvue_type_template_id_b99d1d94_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3453,10 +4180,10 @@ var TaskListItemvue_type_template_id_602cdfed_render = function render() {
     }) : _vm._e()], 1);
   }), 1);
 };
-var TaskListItemvue_type_template_id_602cdfed_staticRenderFns = [];
+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/components/TaskList/ItemColumn.vue?vue&type=template&id=0b2903fd
-var ItemColumnvue_type_template_id_0b2903fd_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=f410efbc
+var ItemColumnvue_type_template_id_f410efbc_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3506,12 +4233,28 @@ var ItemColumnvue_type_template_id_0b2903fd_render = function render() {
         return _vm.emitEvent('touchend', $event);
       }
     }
-  }, [_vm._v(" " + _vm._s(_vm.value) + " ")]) : _c('div', {
+  }, [_vm.column.expander && _vm.taskIcon ? _c('div', {
+    staticClass: "gantt-elastic__task-list-item-icon",
+    style: _vm.iconStyle
+  }, [_c('svg', {
+    attrs: {
+      "width": "14",
+      "height": "14",
+      "viewBox": "0 0 14 14",
+      "fill": "none"
+    }
+  }, [_c('path', {
+    attrs: {
+      "d": _vm.taskIcon,
+      "fill": _vm.iconColor,
+      "stroke": _vm.iconStroke,
+      "stroke-width": "0.8"
+    }
+  })])]) : _vm._e(), _c('span', {
+    staticClass: "gantt-elastic__task-list-item-text"
+  }, [_vm._v(_vm._s(_vm.value))])]) : _c('div', {
     staticClass: "gantt-elastic__task-list-item-value",
     style: _vm.valueStyle,
-    domProps: {
-      "innerHTML": _vm._s(_vm.value)
-    },
     on: {
       "click": function ($event) {
         return _vm.emitEvent('click', $event);
@@ -3547,11 +4290,33 @@ var ItemColumnvue_type_template_id_0b2903fd_render = function render() {
         return _vm.emitEvent('touchend', $event);
       }
     }
-  })])], 2)]);
+  }, [_vm.column.expander && _vm.taskIcon ? _c('div', {
+    staticClass: "gantt-elastic__task-list-item-icon",
+    style: _vm.iconStyle
+  }, [_c('svg', {
+    attrs: {
+      "width": "14",
+      "height": "14",
+      "viewBox": "0 0 14 14",
+      "fill": "none"
+    }
+  }, [_c('path', {
+    attrs: {
+      "d": _vm.taskIcon,
+      "fill": _vm.iconColor,
+      "stroke": _vm.iconStroke,
+      "stroke-width": "0.8"
+    }
+  })])]) : _vm._e(), _c('span', {
+    staticClass: "gantt-elastic__task-list-item-text",
+    domProps: {
+      "innerHTML": _vm._s(_vm.value)
+    }
+  })])])], 2)]);
 };
-var ItemColumnvue_type_template_id_0b2903fd_staticRenderFns = [];
+var ItemColumnvue_type_template_id_f410efbc_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/components/TaskList/ItemColumn.vue?vue&type=script&lang=js
+;// ./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
 /* harmony default export */ var ItemColumnvue_type_script_lang_js = ({
   name: 'ItemColumn',
   inject: ['root'],
@@ -3629,12 +4394,101 @@ var ItemColumnvue_type_template_id_0b2903fd_staticRenderFns = [];
         ...this.root.style['task-list-item-value'],
         ...this.column.style['task-list-item-value']
       };
+    },
+    /**
+     * Get task icon based on task type or custom icon property
+     *
+     * @returns {string|null}
+     */
+    taskIcon() {
+      // Check if task has a custom icon property
+      if (this.task.icon) {
+        return this.task.icon;
+      }
+
+      // Default icons based on task type - matching the interface
+      const iconMap = {
+        'milestone': 'M7 2 L12 7 L7 12 L2 7 Z',
+        // Purple diamond for milestones
+        'task': 'M3 3 L11 3 L11 11 L3 11 Z',
+        // Blue square for tasks
+        'project': 'M7 2 L12 7 L7 12 L2 7 Z',
+        // Purple diamond for projects
+        'sprint': 'M3 4 L11 4 L11 10 L3 10 Z',
+        // Rectangle for sprints
+        'flag': 'M3 3 L9 3 L9 7 L7 9 L5 7 L5 3 Z M3 3 L3 11 M5 3 L5 11',
+        // 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
+      };
+
+      // Always return an icon for tasks, default to task icon if type not found
+      return iconMap[this.task.type] || iconMap['task'];
+    },
+    /**
+     * Get icon color based on task properties
+     *
+     * @returns {string}
+     */
+    iconColor() {
+      if (this.task.iconColor) {
+        return this.task.iconColor;
+      }
+
+      // Default colors based on task type - matching chart grid bar colors
+      const colorMap = {
+        'milestone': '#CD5C5C',
+        // Light maroon - matches chart
+        'task': '#3B82F6',
+        // Blue - matches chart
+        'project': '#8B5CF6',
+        // Purple - matches chart
+        'sprint': '#F59E0B',
+        // Orange rectangle
+        'flag': '#10B981',
+        // Green flag
+        'check': '#3B82F6',
+        // Blue checkmark
+        'epic': '#8B5CF6',
+        // Purple - matches chart
+        'story': '#86EFAC',
+        // Light green - matches chart
+        'subtask': '#3B82F6' // Blue - matches chart
+      };
+      return colorMap[this.task.type] || '#6B7280'; // Gray default
+    },
+    /**
+     * Get icon stroke color
+     *
+     * @returns {string}
+     */
+    iconStroke() {
+      if (this.task.iconStroke) {
+        return this.task.iconStroke;
+      }
+      return this.iconColor; // Same as fill color
+    },
+    /**
+     * Get icon style
+     *
+     * @returns {object}
+     */
+    iconStyle() {
+      return {
+        display: 'flex',
+        alignItems: 'center',
+        marginRight: '6px',
+        flexShrink: 0,
+        width: '14px',
+        height: '14px'
+      };
     }
   }
 });
-;// ./src/components/components/TaskList/ItemColumn.vue?vue&type=script&lang=js
+;// ./src/components/TaskList/ItemColumn.vue?vue&type=script&lang=js
  /* harmony default export */ var TaskList_ItemColumnvue_type_script_lang_js = (ItemColumnvue_type_script_lang_js); 
-;// ./src/components/components/TaskList/ItemColumn.vue
+;// ./src/components/TaskList/ItemColumn.vue
 
 
 
@@ -3644,8 +4498,8 @@ var ItemColumnvue_type_template_id_0b2903fd_staticRenderFns = [];
 ;
 var ItemColumn_component = normalizeComponent(
   TaskList_ItemColumnvue_type_script_lang_js,
-  ItemColumnvue_type_template_id_0b2903fd_render,
-  ItemColumnvue_type_template_id_0b2903fd_staticRenderFns,
+  ItemColumnvue_type_template_id_f410efbc_render,
+  ItemColumnvue_type_template_id_f410efbc_staticRenderFns,
   false,
   null,
   null,
@@ -3654,7 +4508,7 @@ var ItemColumn_component = normalizeComponent(
 )
 
 /* harmony default export */ var ItemColumn = (ItemColumn_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/components/TaskList/TaskListItem.vue?vue&type=script&lang=js
+;// ./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/TaskListItem.vue?vue&type=script&lang=js
 
 
 /* harmony default export */ var TaskListItemvue_type_script_lang_js = ({
@@ -3674,9 +4528,9 @@ var ItemColumn_component = normalizeComponent(
     }
   }
 });
-;// ./src/components/components/TaskList/TaskListItem.vue?vue&type=script&lang=js
+;// ./src/components/TaskList/TaskListItem.vue?vue&type=script&lang=js
  /* harmony default export */ var TaskList_TaskListItemvue_type_script_lang_js = (TaskListItemvue_type_script_lang_js); 
-;// ./src/components/components/TaskList/TaskListItem.vue
+;// ./src/components/TaskList/TaskListItem.vue
 
 
 
@@ -3686,8 +4540,8 @@ var ItemColumn_component = normalizeComponent(
 ;
 var TaskListItem_component = normalizeComponent(
   TaskList_TaskListItemvue_type_script_lang_js,
-  TaskListItemvue_type_template_id_602cdfed_render,
-  TaskListItemvue_type_template_id_602cdfed_staticRenderFns,
+  TaskListItemvue_type_template_id_b99d1d94_render,
+  TaskListItemvue_type_template_id_b99d1d94_staticRenderFns,
   false,
   null,
   null,
@@ -3696,7 +4550,7 @@ var TaskListItem_component = normalizeComponent(
 )
 
 /* harmony default export */ var TaskListItem = (TaskListItem_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/components/TaskList/TaskList.vue?vue&type=script&lang=js
+;// ./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/TaskList.vue?vue&type=script&lang=js
 
 
 /* harmony default export */ var TaskListvue_type_script_lang_js = ({
@@ -3718,9 +4572,9 @@ var TaskListItem_component = normalizeComponent(
     this.root.state.refs.taskListItems = this.$refs.taskListItems;
   }
 });
-;// ./src/components/components/TaskList/TaskList.vue?vue&type=script&lang=js
+;// ./src/components/TaskList/TaskList.vue?vue&type=script&lang=js
  /* harmony default export */ var TaskList_TaskListvue_type_script_lang_js = (TaskListvue_type_script_lang_js); 
-;// ./src/components/components/TaskList/TaskList.vue
+;// ./src/components/TaskList/TaskList.vue
 
 
 
@@ -3730,8 +4584,8 @@ var TaskListItem_component = normalizeComponent(
 ;
 var TaskList_component = normalizeComponent(
   TaskList_TaskListvue_type_script_lang_js,
-  TaskListvue_type_template_id_088baa0d_render,
-  TaskListvue_type_template_id_088baa0d_staticRenderFns,
+  TaskListvue_type_template_id_74ce1216_render,
+  TaskListvue_type_template_id_74ce1216_staticRenderFns,
   false,
   null,
   null,
@@ -3740,8 +4594,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/components/Chart/Chart.vue?vue&type=template&id=4ae99150
-var Chartvue_type_template_id_4ae99150_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=1d5eb6d6
+var Chartvue_type_template_id_1d5eb6d6_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3813,10 +4667,10 @@ var Chartvue_type_template_id_4ae99150_render = function render() {
     })], 1);
   })], 2)])])])]);
 };
-var Chartvue_type_template_id_4ae99150_staticRenderFns = [];
+var Chartvue_type_template_id_1d5eb6d6_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/components/Chart/Grid.vue?vue&type=template&id=1f8d69e4
-var Gridvue_type_template_id_1f8d69e4_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/Grid.vue?vue&type=template&id=b2e4dec2
+var Gridvue_type_template_id_b2e4dec2_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('svg', {
@@ -3878,9 +4732,9 @@ var Gridvue_type_template_id_1f8d69e4_render = function render() {
     }
   })], 2)]);
 };
-var Gridvue_type_template_id_1f8d69e4_staticRenderFns = [];
+var Gridvue_type_template_id_b2e4dec2_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/components/Chart/Grid.vue?vue&type=script&lang=js
+;// ./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/Grid.vue?vue&type=script&lang=js
 
 
 
@@ -3924,17 +4778,57 @@ var Gridvue_type_template_id_1f8d69e4_staticRenderFns = [];
     verticalLines() {
       let lines = [];
       const state = this.root.state;
-      state.options.times.steps.forEach(step => {
-        if (this.root.isInsideViewPort(step.offset.px, 1)) {
-          lines.push({
+
+      // Add grid lines for all steps (remove viewport check to ensure all borders are drawn)
+      state.options.times.steps.forEach((step, index) => {
+        // Only generate grid lines for steps with valid coordinates
+        if (step.offset && typeof step.offset.px === 'number' && !isNaN(step.offset.px)) {
+          const line = {
             key: step.time,
-            x1: step.offset.px,
+            x1: Math.round(step.offset.px),
+            // Round to ensure exact pixel alignment
             y1: 0,
-            x2: step.offset.px,
+            x2: Math.round(step.offset.px),
+            // Round to ensure exact pixel alignment
             y2: state.tasks.length * (state.options.row.height + state.options.chart.grid.horizontal.gap * 2) + this.root.style['grid-line-vertical']['stroke-width']
-          });
+          };
+          lines.push(line);
+
+          // Debug: Log grid lines for quarter view
+          if (state.options.times.stepDuration === 'quarter') {
+            console.log(`Grid Line ${index}:`, {
+              x: line.x1,
+              time: new Date(step.time).toISOString().split('T')[0],
+              quarter: new Date(step.time).getMonth() < 3 ? 1 : new Date(step.time).getMonth() < 6 ? 2 : new Date(step.time).getMonth() < 9 ? 3 : 4,
+              stepWidth: step.width && step.width.px || 0,
+              stepOffset: step.offset && step.offset.px || 0,
+              hasValidX: line.x1 >= 0 && !isNaN(line.x1)
+            });
+          }
+        } else {
+          // Debug: Log steps that are being skipped
+          if (state.options.times.stepDuration === 'quarter') {
+            console.log(`Skipped Grid Line ${index}:`, {
+              time: new Date(step.time).toISOString().split('T')[0],
+              offset: step.offset,
+              hasValidOffset: !!(step.offset && typeof step.offset.px === 'number' && !isNaN(step.offset.px))
+            });
+          }
         }
       });
+
+      // Add final grid line at the end of the chart area to eliminate empty space
+      const lastStep = state.options.times.steps[state.options.times.steps.length - 1];
+      if (lastStep) {
+        const finalX = Math.round(lastStep.offset.px + lastStep.width.px);
+        lines.push({
+          key: 'final-line',
+          x1: finalX,
+          y1: 0,
+          x2: finalX,
+          y2: state.tasks.length * (state.options.row.height + state.options.chart.grid.horizontal.gap * 2) + this.root.style['grid-line-vertical']['stroke-width']
+        });
+      }
       return lines;
     },
     /**
@@ -3991,9 +4885,9 @@ var Gridvue_type_template_id_1f8d69e4_staticRenderFns = [];
     }
   }
 });
-;// ./src/components/components/Chart/Grid.vue?vue&type=script&lang=js
+;// ./src/components/Chart/Grid.vue?vue&type=script&lang=js
  /* harmony default export */ var Chart_Gridvue_type_script_lang_js = (Gridvue_type_script_lang_js); 
-;// ./src/components/components/Chart/Grid.vue
+;// ./src/components/Chart/Grid.vue
 
 
 
@@ -4003,8 +4897,8 @@ var Gridvue_type_template_id_1f8d69e4_staticRenderFns = [];
 ;
 var Grid_component = normalizeComponent(
   Chart_Gridvue_type_script_lang_js,
-  Gridvue_type_template_id_1f8d69e4_render,
-  Gridvue_type_template_id_1f8d69e4_staticRenderFns,
+  Gridvue_type_template_id_b2e4dec2_render,
+  Gridvue_type_template_id_b2e4dec2_staticRenderFns,
   false,
   null,
   null,
@@ -4013,8 +4907,8 @@ var Grid_component = normalizeComponent(
 )
 
 /* harmony default export */ var Grid = (Grid_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/components/Chart/DaysHighlight.vue?vue&type=template&id=06b8681f
-var DaysHighlightvue_type_template_id_06b8681f_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/DaysHighlight.vue?vue&type=template&id=94382932
+var DaysHighlightvue_type_template_id_94382932_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _vm.showWorkingDays ? _c('g', {
@@ -4038,9 +4932,9 @@ var DaysHighlightvue_type_template_id_06b8681f_render = function render() {
     });
   }), 0) : _vm._e();
 };
-var DaysHighlightvue_type_template_id_06b8681f_staticRenderFns = [];
+var DaysHighlightvue_type_template_id_94382932_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/components/Chart/DaysHighlight.vue?vue&type=script&lang=js
+;// ./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/DaysHighlight.vue?vue&type=script&lang=js
 
 
 
@@ -4058,7 +4952,8 @@ var DaysHighlightvue_type_template_id_06b8681f_staticRenderFns = [];
      * @returns {string} key ideintifier for loop
      */
     getKey(day) {
-      return dayjs_min_default()(day.time).format('YYYY-MM-DD');
+      // Return the full date-time format
+      return dayjs_min_default()(day.time).format('YYYY-MM-DD HH:mm');
     }
   },
   computed: {
@@ -4086,9 +4981,9 @@ var DaysHighlightvue_type_template_id_06b8681f_staticRenderFns = [];
     }
   }
 });
-;// ./src/components/components/Chart/DaysHighlight.vue?vue&type=script&lang=js
+;// ./src/components/Chart/DaysHighlight.vue?vue&type=script&lang=js
  /* harmony default export */ var Chart_DaysHighlightvue_type_script_lang_js = (DaysHighlightvue_type_script_lang_js); 
-;// ./src/components/components/Chart/DaysHighlight.vue
+;// ./src/components/Chart/DaysHighlight.vue
 
 
 
@@ -4098,8 +4993,8 @@ var DaysHighlightvue_type_template_id_06b8681f_staticRenderFns = [];
 ;
 var DaysHighlight_component = normalizeComponent(
   Chart_DaysHighlightvue_type_script_lang_js,
-  DaysHighlightvue_type_template_id_06b8681f_render,
-  DaysHighlightvue_type_template_id_06b8681f_staticRenderFns,
+  DaysHighlightvue_type_template_id_94382932_render,
+  DaysHighlightvue_type_template_id_94382932_staticRenderFns,
   false,
   null,
   null,
@@ -4108,8 +5003,8 @@ var DaysHighlight_component = normalizeComponent(
 )
 
 /* harmony default export */ var DaysHighlight = (DaysHighlight_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/components/Calendar/Calendar.vue?vue&type=template&id=19446f31
-var Calendarvue_type_template_id_19446f31_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/Calendar/Calendar.vue?vue&type=template&id=c22056b8
+var Calendarvue_type_template_id_c22056b8_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -4124,30 +5019,41 @@ var Calendarvue_type_template_id_19446f31_render = function render() {
       ..._vm.root.style['calendar'],
       width: _vm.root.state.options.width + 'px'
     }
-  }, [_vm.root.state.options.calendar.month.display ? _c('calendar-row', {
+  }, [_vm.viewMode === 'quarter' ? _c('calendar-row', {
+    attrs: {
+      "items": _vm.dates.quarters,
+      "which": "quarter"
+    }
+  }) : _vm._e(), _vm.viewMode === 'month' ? _c('calendar-row', {
     attrs: {
       "items": _vm.dates.months,
       "which": "month"
     }
-  }) : _vm._e(), _vm.root.state.options.calendar.day.display ? _c('calendar-row', {
+  }) : _vm._e(), _vm.viewMode === 'week' ? _c('calendar-row', {
     attrs: {
-      "items": _vm.dates.days,
-      "which": "day"
+      "items": _vm.dates.weeks,
+      "which": "week"
     }
-  }) : _vm._e(), _vm.root.state.options.calendar.hour.display ? _c('calendar-row', {
+  }) : _vm._e(), _vm.viewMode === 'day' ? _c('calendar-row', {
     attrs: {
-      "items": _vm.dates.hours,
-      "which": "hour"
+      "items": _vm.dates.days,
+      "which": "day"
     }
   }) : _vm._e()], 1)]);
 };
-var Calendarvue_type_template_id_19446f31_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/components/Calendar/CalendarRow.vue?vue&type=template&id=50cc12d2
-var CalendarRowvue_type_template_id_50cc12d2_render = function render() {
+var Calendarvue_type_template_id_c22056b8_staticRenderFns = [];
+
+// EXTERNAL MODULE: ./node_modules/dayjs/plugin/weekOfYear.js
+var weekOfYear = __webpack_require__(8134);
+var weekOfYear_default = /*#__PURE__*/__webpack_require__.n(weekOfYear);
+// EXTERNAL MODULE: ./node_modules/dayjs/plugin/quarterOfYear.js
+var quarterOfYear = __webpack_require__(1816);
+var quarterOfYear_default = /*#__PURE__*/__webpack_require__.n(quarterOfYear);
+;// ./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/Calendar/CalendarRow.vue?vue&type=template&id=db48ac98
+var CalendarRowvue_type_template_id_db48ac98_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('div', {
+  return _c('section', [_c('div', {
     class: 'gantt-elastic__calendar-row gantt-elastic__calendar-row--' + _vm.which,
     style: _vm.rowStyle
   }, _vm._l(_vm.items, function (item, itemIndex) {
@@ -4165,11 +5071,11 @@ var CalendarRowvue_type_template_id_50cc12d2_render = function render() {
         style: _vm.textStyle(child)
       }, [_vm._v(" " + _vm._s(child.label) + " ")])]);
     }), 0);
-  }), 0);
+  }), 0)]);
 };
-var CalendarRowvue_type_template_id_50cc12d2_staticRenderFns = [];
+var CalendarRowvue_type_template_id_db48ac98_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/components/Calendar/CalendarRow.vue?vue&type=script&lang=js
+;// ./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/Calendar/CalendarRow.vue?vue&type=script&lang=js
 
 /* harmony default export */ var CalendarRowvue_type_script_lang_js = ({
   name: 'CalendarRow',
@@ -4185,24 +5091,41 @@ var CalendarRowvue_type_template_id_50cc12d2_staticRenderFns = [];
      * @returns {number}
      */
     getTextX(item) {
-      let x = item.x + item.width / 2 - item.textWidth / 2;
-      if (this.which === 'month' && this.root.isInsideViewPort(item.x, item.width, 0)) {
-        let scrollWidth = this.root.state.options.scroll.chart.right - this.root.state.options.scroll.chart.left;
-        x = this.root.state.options.scroll.chart.left + scrollWidth / 2 - item.textWidth / 2 + 2;
-        if (x + item.textWidth + 2 > item.x + item.width) {
-          x = item.x + item.width - item.textWidth - 2;
-        } else if (x < item.x) {
-          x = item.x + 2;
+      // Calculate center position within the item
+      let x = item.width / 2 - item.textWidth / 2;
+
+      // Add padding to avoid overlap with grid lines
+      const gridLineWidth = this.root.style['grid-line-vertical']['stroke-width'] || 1;
+      const padding = Math.max(gridLineWidth / 2 + 2, 4); // At least 4px padding
+
+      // For month view, use perfect centering with bounds checking
+      if (this.which === 'month') {
+        // Perfect center calculation
+        x = (item.width - item.textWidth) / 2;
+
+        // Ensure text stays within bounds with padding
+        if (x < padding) {
+          x = padding;
+        } else if (x + item.textWidth + padding > item.width) {
+          x = item.width - item.textWidth - padding;
+        }
+      } else {
+        // For other view types, ensure text stays within bounds
+        if (x + item.textWidth + padding > item.width) {
+          x = item.width - item.textWidth - padding;
+        } else if (x < padding) {
+          x = padding;
         }
       }
-      return x - item.x;
+      return x;
     }
   },
   computed: {
     rowStyle() {
       return {
         ...this.root.style['calendar-row'],
-        ...this.root.style['calendar-row--' + this.which]
+        ...this.root.style['calendar-row--' + this.which],
+        position: 'relative' // Ensure relative positioning for absolute children
       };
     },
     rectStyle() {
@@ -4223,7 +5146,10 @@ var CalendarRowvue_type_template_id_50cc12d2_staticRenderFns = [];
           childrenStyle.push({
             ...basicStyle,
             width: child.width + 'px',
-            height: child.height + 'px'
+            height: child.height + 'px',
+            left: child.x + 'px',
+            // Use exact x position for perfect alignment
+            position: 'absolute' // Ensure absolute positioning
           });
         }
         style.push(childrenStyle);
@@ -4239,17 +5165,15 @@ var CalendarRowvue_type_template_id_50cc12d2_staticRenderFns = [];
         const style = {
           ...basicStyle
         };
-        if (this.which === 'month') {
-          style.left = this.getTextX(child) + 'px';
-        }
+        // Remove left positioning for month view - let CSS handle centering
         return style;
       };
     }
   }
 });
-;// ./src/components/components/Calendar/CalendarRow.vue?vue&type=script&lang=js
+;// ./src/components/Calendar/CalendarRow.vue?vue&type=script&lang=js
  /* harmony default export */ var Calendar_CalendarRowvue_type_script_lang_js = (CalendarRowvue_type_script_lang_js); 
-;// ./src/components/components/Calendar/CalendarRow.vue
+;// ./src/components/Calendar/CalendarRow.vue
 
 
 
@@ -4259,8 +5183,8 @@ var CalendarRowvue_type_template_id_50cc12d2_staticRenderFns = [];
 ;
 var CalendarRow_component = normalizeComponent(
   Calendar_CalendarRowvue_type_script_lang_js,
-  CalendarRowvue_type_template_id_50cc12d2_render,
-  CalendarRowvue_type_template_id_50cc12d2_staticRenderFns,
+  CalendarRowvue_type_template_id_db48ac98_render,
+  CalendarRowvue_type_template_id_db48ac98_staticRenderFns,
   false,
   null,
   null,
@@ -4269,10 +5193,16 @@ var CalendarRow_component = normalizeComponent(
 )
 
 /* harmony default export */ var CalendarRow = (CalendarRow_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/components/Calendar/Calendar.vue?vue&type=script&lang=js
+;// ./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/Calendar/Calendar.vue?vue&type=script&lang=js
+
+
 
 
 
+
+// Extend dayjs with required plugins
+dayjs_min_default().extend((weekOfYear_default()));
+dayjs_min_default().extend((quarterOfYear_default()));
 /* harmony default export */ var Calendarvue_type_script_lang_js = ({
   name: 'Calendar',
   components: {
@@ -4280,155 +5210,60 @@ var CalendarRow_component = normalizeComponent(
   },
   inject: ['root'],
   data() {
-    return {};
+    return {
+      dayjsInstance: (dayjs_min_default()) // Store dayjs instance for consistent usage
+    };
+  },
+  computed: {
+    viewMode() {
+      return this.root.state.options.calendar.viewMode || 'day';
+    },
+    dates() {
+      const days = this.generateDays();
+      const weeks = this.generateWeeks();
+      const months = this.generateMonths();
+      const quarters = this.generateQuarters();
+      const allDates = {
+        days,
+        weeks,
+        months,
+        quarters
+      };
+      this.calculateCalendarDimensions(allDates);
+      return allDates;
+    }
   },
   methods: {
-    /**
-     * How many hours will fit?
-     *
-     * @returns {object}
-     */
-    howManyHoursFit(dayIndex) {
-      const stroke = 1;
-      const additionalSpace = stroke + 2;
-      let fullCellWidth = this.root.state.options.times.steps[dayIndex].width.px;
-      let formatNames = Object.keys(this.root.state.options.calendar.hour.format);
-      for (let hours = 24; hours > 1; hours = Math.ceil(hours / 2)) {
-        for (let formatName of formatNames) {
-          if ((this.root.state.options.calendar.hour.maxWidths[formatName] + additionalSpace) * hours <= fullCellWidth && hours > 1) {
-            return {
-              count: hours,
-              type: formatName
-            };
-          }
-        }
+    calculateCalendarDimensions({
+      days,
+      weeks,
+      months,
+      quarters
+    }) {
+      let height = 0;
+      if (this.viewMode === 'quarter' && quarters.length > 0) {
+        height += this.root.state.options.calendar.quarter && this.root.state.options.calendar.quarter.height || 30;
       }
-      return {
-        count: 0,
-        type: ''
-      };
-    },
-    /**
-     * How many days will fit?
-     *
-     * @returns {object}
-     */
-    howManyDaysFit() {
-      const stroke = 1;
-      const additionalSpace = stroke + 2;
-      let fullWidth = this.root.state.options.width;
-      let formatNames = Object.keys(this.root.state.options.calendar.day.format);
-      for (let days = this.root.state.options.times.steps.length; days > 1; days = Math.ceil(days / 2)) {
-        for (let formatName of formatNames) {
-          if ((this.root.state.options.calendar.day.maxWidths[formatName] + additionalSpace) * days <= fullWidth && days > 1) {
-            return {
-              count: days,
-              type: formatName
-            };
-          }
-        }
+
+      // Add month height if visible
+      if (this.viewMode === 'month' && months.length > 0) {
+        height += this.root.state.options.calendar.month.height || 25;
       }
-      return {
-        count: 0,
-        type: ''
-      };
+
+      // Add week height if visible
+      if (this.viewMode === 'week' && weeks.length > 0) {
+        height += this.root.state.options.calendar.week && this.root.state.options.calendar.week.height || 25;
+      }
+
+      // Add day height if visible
+      if (this.viewMode === 'day' && days.length > 0) {
+        height += this.root.state.options.calendar.day.height;
+      }
+      this.root.state.options.calendar.height = height;
     },
-    /**
-     * How many months will fit?
-     *
-     * @returns {object}
-     */
-    howManyMonthsFit() {
-      const stroke = 1;
-      const additionalSpace = stroke + 2;
-      let fullWidth = this.root.state.options.width;
-      let formatNames = Object.keys(this.root.state.options.calendar.month.format);
-      let currentMonth = dayjs_min_default()(this.root.state.options.times.firstTime);
-      let previousMonth = currentMonth.clone();
-      const lastTime = this.root.state.options.times.lastTime;
-      let monthsCount = this.root.monthsCount(this.root.state.options.times.firstTime, this.root.state.options.times.lastTime);
-      if (monthsCount === 1) {
-        for (let formatName of formatNames) {
-          if (this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace <= fullWidth) {
-            return {
-              count: 1,
-              type: formatName
-            };
-          }
-        }
-      }
-      for (let months = monthsCount; months > 1; months = Math.ceil(months / 2)) {
-        for (let formatName of formatNames) {
-          if ((this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace) * months <= fullWidth && months > 1) {
-            return {
-              count: months,
-              type: formatName
-            };
-          }
-        }
-      }
-      return {
-        count: 0,
-        type: formatNames[0]
-      };
-    },
-    /**
-     * Generate hours
-     *
-     * @returns {array}
-     */
-    generateHours() {
-      let allHours = [];
-      if (!this.root.state.options.calendar.hour.display) {
-        return allHours;
-      }
-      const steps = this.root.state.options.times.steps;
-      const localeName = this.root.state.options.locale.name;
-      for (let hourIndex = 0, len = steps.length; hourIndex < len; hourIndex++) {
-        const hoursCount = this.howManyHoursFit(hourIndex);
-        if (hoursCount.count === 0) {
-          continue;
-        }
-        const hours = {
-          key: hourIndex + 'step',
-          children: []
-        };
-        const hourStep = 24 / hoursCount.count;
-        const hourWidthPx = steps[hourIndex].width.px / hoursCount.count;
-        for (let i = 0, len = hoursCount.count; i < len; i++) {
-          const hour = i * hourStep;
-          let index = hourIndex;
-          if (hourIndex > 0) {
-            index = hourIndex - Math.floor(hourIndex / 24) * 24;
-          }
-          let textWidth = 0;
-          if (typeof this.root.state.options.calendar.hour.widths[index] !== 'undefined') {
-            textWidth = this.root.state.options.calendar.hour.widths[index][hoursCount.type];
-          }
-          let x = steps[hourIndex].offset.px + hourWidthPx * i;
-          hours.children.push({
-            index: hourIndex,
-            key: 'h' + i,
-            x,
-            y: this.root.state.options.calendar.day.height + this.root.state.options.calendar.month.height,
-            width: hourWidthPx,
-            textWidth,
-            height: this.root.state.options.calendar.hour.height,
-            label: this.root.state.options.calendar.hour.formatted[hoursCount.type][hour]
-          });
-        }
-        allHours.push(hours);
-      }
-      return allHours;
-    },
-    /**
-     * Generate days
-     *
-     * @returns {array}
-     */
     generateDays() {
       let days = [];
-      if (!this.root.state.options.calendar.day.display) {
+      if (!(this.viewMode === 'day' || this.viewMode === 'week')) {
         return days;
       }
       const daysCount = this.howManyDaysFit();
@@ -4440,23 +5275,26 @@ var CalendarRow_component = normalizeComponent(
       const dayStep = Math.ceil(steps.length / daysCount.count);
       for (let dayIndex = 0, len = steps.length; dayIndex < len; dayIndex += dayStep) {
         let dayWidthPx = 0;
-        // day could be shorter (daylight saving time) so join widths and divide
+
+        // Calculate total width for this day group
         for (let currentStep = 0; currentStep < dayStep; currentStep++) {
           if (typeof steps[dayIndex + currentStep] !== 'undefined') {
             dayWidthPx += steps[dayIndex + currentStep].width.px;
           }
         }
-        const date = dayjs_min_default()(steps[dayIndex].time);
+        const date = this.dayjsInstance(steps[dayIndex].time);
         let textWidth = 0;
         if (typeof this.root.state.options.calendar.day.widths[dayIndex] !== 'undefined') {
           textWidth = this.root.state.options.calendar.day.widths[dayIndex][daysCount.type];
         }
-        let x = steps[dayIndex].offset.px;
+
+        // Use exact step offset for perfect alignment with grid lines
+        let x = Math.round(steps[dayIndex].offset.px); // Round to ensure exact pixel alignment
         days.push({
           index: dayIndex,
           key: steps[dayIndex].time + 'd',
           x,
-          y: this.root.state.options.calendar.month.height,
+          y: this.getYPosition('day'),
           width: dayWidthPx,
           textWidth,
           height: this.root.state.options.calendar.day.height,
@@ -4468,11 +5306,99 @@ var CalendarRow_component = normalizeComponent(
         children: [item]
       }));
     },
-    /**
-     * Generate months
-     *
-     * @returns {array}
-     */
+    generateWeeks() {
+      let weeks = [];
+      if (this.viewMode !== 'week') {
+        return weeks;
+      }
+      const steps = this.root.state.options.times.steps;
+      let currentWeek = null;
+      let weekStartX = 0;
+      let weekWidth = 0;
+      let weekStartDate = null;
+      let weekEndDate = null;
+      for (let i = 0; i < steps.length; i++) {
+        try {
+          const stepDate = this.dayjsInstance(steps[i].time);
+          const weekNumber = stepDate.week();
+          const year = stepDate.year();
+          const weekKey = `${year}-W${weekNumber}`;
+          if (weekKey !== currentWeek) {
+            // Save previous week
+            if (currentWeek !== null) {
+              // Format the label as "Month Day-Day"
+              const startMonth = weekStartDate.format('MMMM');
+              const startDay = weekStartDate.date();
+              const endDay = weekEndDate.date();
+              let label = `${startMonth} ${startDay}`;
+
+              // If the week spans multiple months, show both months
+              if (weekStartDate.month() !== weekEndDate.month()) {
+                const endMonth = weekEndDate.format('MMMM');
+                label = `${startMonth} ${startDay} - ${endMonth} ${endDay}`;
+              } else if (startDay !== endDay) {
+                label = `${startMonth} ${startDay}-${endDay}`;
+              }
+              weeks.push({
+                key: currentWeek,
+                x: weekStartX,
+                // Use exact step offset for perfect alignment
+                y: this.getYPosition('week'),
+                width: weekWidth,
+                textWidth: 50,
+                height: this.root.state.options.calendar.week && this.root.state.options.calendar.week.height || 25,
+                label: label
+              });
+            }
+
+            // Start new week - use exact step offset
+            currentWeek = weekKey;
+            weekStartX = Math.round(steps[i].offset.px); // Round to ensure exact pixel alignment
+            weekWidth = steps[i].width.px;
+            weekStartDate = stepDate.clone().startOf('week');
+            weekEndDate = stepDate.clone().endOf('week');
+          } else {
+            // Same week, accumulate width and update end date
+            weekWidth += steps[i].width.px;
+            weekEndDate = stepDate.clone().endOf('week');
+          }
+        } catch (error) {
+          console.error('Error processing week:', error);
+          continue;
+        }
+      }
+
+      // Add the last week
+      if (currentWeek !== null) {
+        // Format the label as "Month Day-Day"
+        const startMonth = weekStartDate.format('MMMM');
+        const startDay = weekStartDate.date();
+        const endDay = weekEndDate.date();
+        let label = `${startMonth} ${startDay}`;
+
+        // If the week spans multiple months, show both months
+        if (weekStartDate.month() !== weekEndDate.month()) {
+          const endMonth = weekEndDate.format('MMMM');
+          label = `${startMonth} ${startDay} - ${endMonth} ${endDay}`;
+        } else if (startDay !== endDay) {
+          label = `${startMonth} ${startDay}-${endDay}`;
+        }
+        weeks.push({
+          key: currentWeek,
+          x: weekStartX,
+          // Use exact step offset for perfect alignment
+          y: this.getYPosition('week'),
+          width: weekWidth,
+          textWidth: 60,
+          height: this.root.state.options.calendar.week && this.root.state.options.calendar.week.height || 25,
+          label: label
+        });
+      }
+      return weeks.map(week => ({
+        key: week.key,
+        children: [week]
+      }));
+    },
     generateMonths() {
       let months = [];
       if (!this.root.state.options.calendar.month.display) {
@@ -4515,7 +5441,8 @@ var CalendarRow_component = normalizeComponent(
         if (typeof this.root.state.options.calendar.month.widths[monthIndex] !== 'undefined') {
           textWidth = this.root.state.options.calendar.month.widths[monthIndex][choosenFormatName];
         }
-        let x = monthOffset;
+        // Use exact step offset for perfect alignment with grid lines
+        let x = Math.round(monthOffset); // Round to ensure exact pixel alignment
         months.push({
           index: monthIndex,
           key: monthIndex + 'm',
@@ -4537,47 +5464,230 @@ var CalendarRow_component = normalizeComponent(
         children: [item]
       }));
     },
-    /**
-     * Sum all calendar rows height and return result
-     *
-     * @returns {int}
-     */
-    calculateCalendarDimensions({
-      hours,
-      days,
-      months
-    }) {
-      let height = 0;
-      if (this.root.state.options.calendar.hour.display && hours.length > 0) {
-        height += this.root.state.options.calendar.hour.height;
+    generateQuarters() {
+      let quarters = [];
+      if (this.viewMode !== 'quarter') {
+        return quarters;
       }
-      if (this.root.state.options.calendar.day.display && days.length > 0) {
-        height += this.root.state.options.calendar.day.height;
+      const steps = this.root.state.options.times.steps;
+
+      // Debug: Log quarter generation info
+      console.log('Quarter Generation Debug:', {
+        stepsCount: steps.length,
+        firstStepTime: this.dayjsInstance(steps[0] && steps[0].time).format('YYYY-MM-DD'),
+        lastStepTime: this.dayjsInstance(steps[steps.length - 1] && steps[steps.length - 1].time).format('YYYY-MM-DD'),
+        firstStepQuarter: this.dayjsInstance(steps[0] && steps[0].time).quarter(),
+        lastStepQuarter: this.dayjsInstance(steps[steps.length - 1] && steps[steps.length - 1].time).quarter()
+      });
+      let currentQuarter = null;
+      let quarterStartX = 0;
+      let quarterWidth = 0;
+      let quarterStartDate = null;
+      let quarterEndDate = null;
+      for (let i = 0; i < steps.length; i++) {
+        try {
+          // Use UTC to avoid locale/timezone issues
+          const stepDate = this.dayjsInstance(steps[i].time);
+          const quarter = stepDate.quarter();
+          const year = stepDate.year();
+          const quarterKey = `Q${quarter}-${year}`;
+          console.log(`Step ${i}:`, {
+            time: stepDate.format('YYYY-MM-DD'),
+            quarter: quarter,
+            year: year,
+            quarterKey: quarterKey,
+            currentQuarter: currentQuarter
+          });
+          if (quarterKey !== currentQuarter) {
+            // Save previous quarter
+            if (currentQuarter !== null) {
+              // Format the label as "Month – Month 'Year"
+              const startMonth = quarterStartDate.format('MMMM');
+              const endMonth = quarterEndDate.format('MMMM');
+              const shortYear = quarterEndDate.format("YY");
+              const label = `${startMonth} – ${endMonth} '${shortYear}`;
+              quarters.push({
+                key: currentQuarter,
+                x: quarterStartX,
+                // Use exact step offset for perfect alignment
+                y: this.getYPosition('quarter'),
+                width: quarterWidth,
+                textWidth: 50,
+                height: this.root.state.options.calendar.quarter && this.root.state.options.calendar.quarter.height || 30,
+                label: label
+              });
+            }
+
+            // Start new quarter
+            currentQuarter = quarterKey;
+            quarterStartX = Math.round(steps[i].offset.px); // Round to ensure exact pixel alignment
+            quarterWidth = steps[i].width.px;
+            quarterStartDate = stepDate.clone().startOf('quarter');
+            quarterEndDate = stepDate.clone().endOf('quarter');
+          } else {
+            // Same quarter, accumulate width and update end date
+            quarterWidth += steps[i].width.px;
+            quarterEndDate = stepDate.clone().endOf('quarter');
+          }
+        } catch (error) {
+          console.error('Error processing quarter:', error);
+          continue;
+        }
       }
-      if (this.root.state.options.calendar.month.display && months.length > 0) {
-        height += this.root.state.options.calendar.month.height;
+
+      // Add the last quarter
+      if (currentQuarter !== null) {
+        // Format the label as "Month – Month 'Year"
+        const startMonth = quarterStartDate.format('MMMM');
+        const endMonth = quarterEndDate.format('MMMM');
+        const shortYear = quarterEndDate.format("YY");
+        const label = `${startMonth} – ${endMonth} '${shortYear}`;
+        quarters.push({
+          key: currentQuarter,
+          x: quarterStartX,
+          // Use exact step offset for perfect alignment
+          y: this.getYPosition('quarter'),
+          width: quarterWidth,
+          textWidth: 60,
+          height: this.root.state.options.calendar.quarter && this.root.state.options.calendar.quarter.height || 30,
+          label: label
+        });
       }
-      this.root.state.options.calendar.height = height;
-    }
-  },
-  computed: {
-    dates() {
-      const hours = this.generateHours();
-      const days = this.generateDays();
-      const months = this.generateMonths();
-      const allDates = {
-        hours,
-        days,
-        months
+      return quarters.map(quarter => ({
+        key: quarter.key,
+        children: [quarter]
+      }));
+    },
+    getYPosition(type) {
+      let y = 0;
+      switch (type) {
+        case 'quarter':
+          return 0;
+        case 'month':
+          // Put month row below quarter if in quarterly view
+          return this.viewMode === 'quarter' ? this.root.state.options.calendar.quarter && this.root.state.options.calendar.quarter.height || 30 : 0;
+        case 'week':
+          // Put week row below month and quarter if applicable
+
+          if (this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.quarter && this.root.state.options.calendar.quarter.height || 30;
+          }
+          if (this.viewMode === 'month' || this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.month.height;
+          }
+          return y;
+        case 'day':
+          // Put day below week if applicable
+          y = 0;
+          if (this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.quarter && this.root.state.options.calendar.quarter.height || 30;
+          }
+          if (this.viewMode === 'month' || this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.month.height;
+          }
+          if (this.viewMode === 'week') {
+            y += this.root.state.options.calendar.week && this.root.state.options.calendar.week.height || 25;
+          }
+          return y;
+        case 'hour':
+          // Put hour row below day if applicable
+          y = 0;
+          if (this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.quarter && this.root.state.options.calendar.quarter.height || 30;
+          }
+          if (this.viewMode === 'month' || this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.month.height;
+          }
+          if (this.viewMode === 'week') {
+            y += this.root.state.options.calendar.week && this.root.state.options.calendar.week.height || 25;
+          }
+          if (this.viewMode === 'day') {
+            y += this.root.state.options.calendar.day.height;
+          }
+          return y;
+        default:
+          return 0;
+      }
+    },
+    howManyHoursFit(dayIndex) {
+      const stroke = 1;
+      const additionalSpace = stroke + 2;
+      let fullCellWidth = this.root.state.options.times.steps[dayIndex].width.px;
+      let formatNames = Object.keys(this.root.state.options.calendar.hour.format);
+      for (let hours = 24; hours > 1; hours = Math.ceil(hours / 2)) {
+        for (let formatName of formatNames) {
+          if ((this.root.state.options.calendar.hour.maxWidths[formatName] + additionalSpace) * hours <= fullCellWidth && hours > 1) {
+            return {
+              count: hours,
+              type: formatName
+            };
+          }
+        }
+      }
+      return {
+        count: 0,
+        type: ''
+      };
+    },
+    howManyDaysFit() {
+      const stroke = 1;
+      const additionalSpace = stroke + 2;
+      let fullWidth = this.root.state.options.width;
+      let formatNames = Object.keys(this.root.state.options.calendar.day.format);
+      for (let days = this.root.state.options.times.steps.length; days > 1; days = Math.ceil(days / 2)) {
+        for (let formatName of formatNames) {
+          if ((this.root.state.options.calendar.day.maxWidths[formatName] + additionalSpace) * days <= fullWidth && days > 1) {
+            return {
+              count: days,
+              type: formatName
+            };
+          }
+        }
+      }
+      return {
+        count: 0,
+        type: ''
+      };
+    },
+    howManyMonthsFit() {
+      const stroke = 1;
+      const additionalSpace = stroke + 2;
+      let fullWidth = this.root.state.options.width;
+      let formatNames = Object.keys(this.root.state.options.calendar.month.format);
+      let currentMonth = dayjs_min_default()(this.root.state.options.times.firstTime);
+      let previousMonth = currentMonth.clone();
+      const lastTime = this.root.state.options.times.lastTime;
+      let monthsCount = this.root.monthsCount(this.root.state.options.times.firstTime, this.root.state.options.times.lastTime);
+      if (monthsCount === 1) {
+        for (let formatName of formatNames) {
+          if (this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace <= fullWidth) {
+            return {
+              count: 1,
+              type: formatName
+            };
+          }
+        }
+      }
+      for (let months = monthsCount; months > 1; months = Math.ceil(months / 2)) {
+        for (let formatName of formatNames) {
+          if ((this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace) * months <= fullWidth && months > 1) {
+            return {
+              count: months,
+              type: formatName
+            };
+          }
+        }
+      }
+      return {
+        count: 0,
+        type: formatNames[0]
       };
-      this.calculateCalendarDimensions(allDates);
-      return allDates;
     }
   }
 });
-;// ./src/components/components/Calendar/Calendar.vue?vue&type=script&lang=js
+;// ./src/components/Calendar/Calendar.vue?vue&type=script&lang=js
  /* harmony default export */ var Calendar_Calendarvue_type_script_lang_js = (Calendarvue_type_script_lang_js); 
-;// ./src/components/components/Calendar/Calendar.vue
+;// ./src/components/Calendar/Calendar.vue
 
 
 
@@ -4587,8 +5697,8 @@ var CalendarRow_component = normalizeComponent(
 ;
 var Calendar_component = normalizeComponent(
   Calendar_Calendarvue_type_script_lang_js,
-  Calendarvue_type_template_id_19446f31_render,
-  Calendarvue_type_template_id_19446f31_staticRenderFns,
+  Calendarvue_type_template_id_c22056b8_render,
+  Calendarvue_type_template_id_c22056b8_staticRenderFns,
   false,
   null,
   null,
@@ -4597,8 +5707,8 @@ var Calendar_component = normalizeComponent(
 )
 
 /* harmony default export */ var Calendar = (Calendar_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/components/Chart/DependencyLines.vue?vue&type=template&id=eddd62e6
-var DependencyLinesvue_type_template_id_eddd62e6_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/DependencyLines.vue?vue&type=template&id=bc574838
+var DependencyLinesvue_type_template_id_bc574838_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('svg', {
@@ -4635,9 +5745,9 @@ var DependencyLinesvue_type_template_id_eddd62e6_render = function render() {
     }), 0);
   }), 0);
 };
-var DependencyLinesvue_type_template_id_eddd62e6_staticRenderFns = [];
+var DependencyLinesvue_type_template_id_bc574838_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/components/Chart/DependencyLines.vue?vue&type=script&lang=js
+;// ./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/DependencyLines.vue?vue&type=script&lang=js
 
 
 
@@ -4718,9 +5828,9 @@ var DependencyLinesvue_type_template_id_eddd62e6_staticRenderFns = [];
     }
   }
 });
-;// ./src/components/components/Chart/DependencyLines.vue?vue&type=script&lang=js
+;// ./src/components/Chart/DependencyLines.vue?vue&type=script&lang=js
  /* harmony default export */ var Chart_DependencyLinesvue_type_script_lang_js = (DependencyLinesvue_type_script_lang_js); 
-;// ./src/components/components/Chart/DependencyLines.vue
+;// ./src/components/Chart/DependencyLines.vue
 
 
 
@@ -4730,8 +5840,8 @@ var DependencyLinesvue_type_template_id_eddd62e6_staticRenderFns = [];
 ;
 var DependencyLines_component = normalizeComponent(
   Chart_DependencyLinesvue_type_script_lang_js,
-  DependencyLinesvue_type_template_id_eddd62e6_render,
-  DependencyLinesvue_type_template_id_eddd62e6_staticRenderFns,
+  DependencyLinesvue_type_template_id_bc574838_render,
+  DependencyLinesvue_type_template_id_bc574838_staticRenderFns,
   false,
   null,
   null,
@@ -4740,8 +5850,8 @@ var DependencyLines_component = normalizeComponent(
 )
 
 /* harmony default export */ var DependencyLines = (DependencyLines_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/components/Chart/Row/Task.vue?vue&type=template&id=2afb5353
-var Taskvue_type_template_id_2afb5353_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/Row/Task.vue?vue&type=template&id=208a9baa
+var Taskvue_type_template_id_208a9baa_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
@@ -4850,10 +5960,10 @@ var Taskvue_type_template_id_2afb5353_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Taskvue_type_template_id_2afb5353_staticRenderFns = [];
+var Taskvue_type_template_id_208a9baa_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/components/Chart/Text.vue?vue&type=template&id=d1c1415a
-var Textvue_type_template_id_d1c1415a_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/Text.vue?vue&type=template&id=634f40aa
+var Textvue_type_template_id_634f40aa_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('svg', {
@@ -4901,9 +6011,9 @@ var Textvue_type_template_id_d1c1415a_render = function render() {
     }
   }) : _vm._e()])])]);
 };
-var Textvue_type_template_id_d1c1415a_staticRenderFns = [];
+var Textvue_type_template_id_634f40aa_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/components/Chart/Text.vue?vue&type=script&lang=js
+;// ./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/Text.vue?vue&type=script&lang=js
 /* harmony default export */ var Textvue_type_script_lang_js = ({
   name: 'ChartText',
   inject: ['root'],
@@ -4965,9 +6075,9 @@ var Textvue_type_template_id_d1c1415a_staticRenderFns = [];
     }
   }
 });
-;// ./src/components/components/Chart/Text.vue?vue&type=script&lang=js
+;// ./src/components/Chart/Text.vue?vue&type=script&lang=js
  /* harmony default export */ var Chart_Textvue_type_script_lang_js = (Textvue_type_script_lang_js); 
-;// ./src/components/components/Chart/Text.vue
+;// ./src/components/Chart/Text.vue
 
 
 
@@ -4977,8 +6087,8 @@ var Textvue_type_template_id_d1c1415a_staticRenderFns = [];
 ;
 var Text_component = normalizeComponent(
   Chart_Textvue_type_script_lang_js,
-  Textvue_type_template_id_d1c1415a_render,
-  Textvue_type_template_id_d1c1415a_staticRenderFns,
+  Textvue_type_template_id_634f40aa_render,
+  Textvue_type_template_id_634f40aa_staticRenderFns,
   false,
   null,
   null,
@@ -4987,8 +6097,8 @@ var Text_component = normalizeComponent(
 )
 
 /* harmony default export */ var Text = (Text_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/components/Chart/ProgressBar.vue?vue&type=template&id=00ca07fa
-var ProgressBarvue_type_template_id_00ca07fa_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/ProgressBar.vue?vue&type=template&id=bc869ae8
+var ProgressBarvue_type_template_id_bc869ae8_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
@@ -5052,9 +6162,9 @@ var ProgressBarvue_type_template_id_00ca07fa_render = function render() {
     }
   })]) : _vm._e()]);
 };
-var ProgressBarvue_type_template_id_00ca07fa_staticRenderFns = [];
+var ProgressBarvue_type_template_id_bc869ae8_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/components/Chart/ProgressBar.vue?vue&type=script&lang=js
+;// ./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/ProgressBar.vue?vue&type=script&lang=js
 /* harmony default export */ var ProgressBarvue_type_script_lang_js = ({
   name: 'ProgressBar',
   inject: ['root'],
@@ -5101,9 +6211,9 @@ var ProgressBarvue_type_template_id_00ca07fa_staticRenderFns = [];
     }
   }
 });
-;// ./src/components/components/Chart/ProgressBar.vue?vue&type=script&lang=js
+;// ./src/components/Chart/ProgressBar.vue?vue&type=script&lang=js
  /* harmony default export */ var Chart_ProgressBarvue_type_script_lang_js = (ProgressBarvue_type_script_lang_js); 
-;// ./src/components/components/Chart/ProgressBar.vue
+;// ./src/components/Chart/ProgressBar.vue
 
 
 
@@ -5113,8 +6223,8 @@ var ProgressBarvue_type_template_id_00ca07fa_staticRenderFns = [];
 ;
 var ProgressBar_component = normalizeComponent(
   Chart_ProgressBarvue_type_script_lang_js,
-  ProgressBarvue_type_template_id_00ca07fa_render,
-  ProgressBarvue_type_template_id_00ca07fa_staticRenderFns,
+  ProgressBarvue_type_template_id_bc869ae8_render,
+  ProgressBarvue_type_template_id_bc869ae8_staticRenderFns,
   false,
   null,
   null,
@@ -5123,7 +6233,7 @@ var ProgressBar_component = normalizeComponent(
 )
 
 /* harmony default export */ var ProgressBar = (ProgressBar_component.exports);
-;// ./src/components/components/Chart/Row/Task.mixin.js
+;// ./src/components/Chart/Row/Task.mixin.js
 /* harmony default export */ var Task_mixin = ({
   computed: {
     /**
@@ -5150,7 +6260,8 @@ var ProgressBar_component = normalizeComponent(
      */
     displayExpander() {
       const expander = this.root.state.options.chart.expander;
-      return expander.display || expander.displayIfTaskListHidden && !this.root.state.options.taskList.display;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || expander.displayIfTaskListHidden && !this.root.state.options.taskList.display) && hasChildren;
     }
   },
   methods: {
@@ -5170,7 +6281,7 @@ var ProgressBar_component = normalizeComponent(
     }
   }
 });
-;// ./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/components/Chart/Row/Task.vue?vue&type=script&lang=js
+;// ./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/Task.vue?vue&type=script&lang=js
 
 
 
@@ -5198,19 +6309,593 @@ var ProgressBar_component = normalizeComponent(
       return 'gantt-elastic__task-clip-path-' + this.task.id;
     },
     /**
-     * Get points
+     * Get points
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
+    }
+  }
+});
+;// ./src/components/Chart/Row/Task.vue?vue&type=script&lang=js
+ /* harmony default export */ var Row_Taskvue_type_script_lang_js = (Taskvue_type_script_lang_js); 
+;// ./src/components/Chart/Row/Task.vue
+
+
+
+
+
+/* normalize component */
+;
+var Task_component = normalizeComponent(
+  Row_Taskvue_type_script_lang_js,
+  Taskvue_type_template_id_208a9baa_render,
+  Taskvue_type_template_id_208a9baa_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Task = (Task_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/Milestone.vue?vue&type=template&id=edd49e02
+var Milestonevue_type_template_id_edd49e02_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('g', {
+    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-milestone-wrapper",
+    style: {
+      ..._vm.root.style['chart-row-bar-wrapper'],
+      ..._vm.root.style['chart-row-milestone-wrapper'],
+      ..._vm.task.style['chart-row-bar-wrapper']
+    }
+  }, [_vm.displayExpander ? _c('foreignObject', {
+    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--milestone",
+    style: {
+      ..._vm.root.style['chart-expander'],
+      ..._vm.root.style['chart-expander--milestone'],
+      ..._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-milestone",
+    style: {
+      ..._vm.root.style['chart-row-bar'],
+      ..._vm.root.style['chart-row-milestone'],
+      ..._vm.task.style['chart-row-bar']
+    },
+    attrs: {
+      "x": _vm.task.x,
+      "y": _vm.task.y,
+      "width": _vm.task.width,
+      "height": _vm.task.height,
+      "viewBox": `0 0 ${_vm.task.width} ${_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('polygon', {
+    attrs: {
+      "points": _vm.getPoints
+    }
+  })])]), _c('polygon', {
+    staticClass: "gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-milestone-polygon",
+    style: {
+      ..._vm.root.style['chart-row-bar-polygon'],
+      ..._vm.root.style['chart-row-milestone-polygon'],
+      ..._vm.task.style['base'],
+      ..._vm.task.style['chart-row-bar-polygon']
+    },
+    attrs: {
+      "points": _vm.getPoints
+    }
+  }), _c('progress-bar', {
+    attrs: {
+      "task": _vm.task,
+      "clip-path": 'url(#' + _vm.clipPathId + ')'
+    }
+  })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
+    attrs: {
+      "task": _vm.task
+    }
+  }) : _vm._e()], 1);
+};
+var Milestonevue_type_template_id_edd49e02_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/Milestone.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ var Milestonevue_type_script_lang_js = ({
+  name: 'Milestone',
+  components: {
+    ChartText: Text,
+    ProgressBar: ProgressBar,
+    Expander: Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [Task_mixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__milestone-clip-path-' + this.task.id;
+    },
+    /**
+     * Get points
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const fifty = task.height / 2;
+      let offset = fifty;
+      if (task.width / 2 - offset < 0) {
+        offset = task.width / 2;
+      }
+      return `0,${fifty}
+        ${offset},0
+        ${task.width - offset},0
+        ${task.width},${fifty}
+        ${task.width - offset},${task.height}
+        ${offset},${task.height}`;
+    }
+  }
+});
+;// ./src/components/Chart/Row/Milestone.vue?vue&type=script&lang=js
+ /* harmony default export */ var Row_Milestonevue_type_script_lang_js = (Milestonevue_type_script_lang_js); 
+;// ./src/components/Chart/Row/Milestone.vue
+
+
+
+
+
+/* normalize component */
+;
+var Milestone_component = normalizeComponent(
+  Row_Milestonevue_type_script_lang_js,
+  Milestonevue_type_template_id_edd49e02_render,
+  Milestonevue_type_template_id_edd49e02_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Milestone = (Milestone_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/Project.vue?vue&type=template&id=760bf767
+var Projectvue_type_template_id_760bf767_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('g', {
+    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-project-wrapper",
+    style: {
+      ..._vm.root.style['chart-row-bar-wrapper'],
+      ..._vm.root.style['chart-row-project-wrapper'],
+      ..._vm.task.style['chart-row-bar-wrapper']
+    }
+  }, [_vm.displayExpander ? _c('foreignObject', {
+    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--project",
+    style: {
+      ..._vm.root.style['chart-expander'],
+      ..._vm.root.style['chart-expander--project'],
+      ..._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-project",
+    style: {
+      ..._vm.root.style['chart-row-bar'],
+      ..._vm.root.style['chart-row-project'],
+      ..._vm.task.style['chart-row-bar']
+    },
+    attrs: {
+      "x": _vm.task.x,
+      "y": _vm.task.y,
+      "width": _vm.task.width,
+      "height": _vm.task.height,
+      "viewBox": `0 0 ${_vm.task.width} ${_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-project-polygon",
+    style: {
+      ..._vm.root.style['chart-row-bar-polygon'],
+      ..._vm.root.style['chart-row-project-polygon'],
+      ..._vm.task.style['base'],
+      ..._vm.task.style['chart-row-bar-polygon']
+    },
+    attrs: {
+      "d": _vm.getPoints
+    }
+  }), _c('progress-bar', {
+    attrs: {
+      "task": _vm.task,
+      "clip-path": 'url(#' + _vm.clipPathId + ')'
+    }
+  })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
+    attrs: {
+      "task": _vm.task
+    }
+  }) : _vm._e()], 1);
+};
+var Projectvue_type_template_id_760bf767_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/Project.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ var Projectvue_type_script_lang_js = ({
+  name: 'Project',
+  components: {
+    ChartText: Text,
+    ProgressBar: ProgressBar,
+    Expander: Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [Task_mixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__project-clip-path-' + this.task.id;
+    },
+    /**
+     * Get points
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const bottom = task.height - task.height / 4;
+      const corner = task.height / 6;
+      const smallCorner = task.height / 8;
+      return `M ${smallCorner},0
+                L ${task.width - smallCorner} 0
+                L ${task.width} ${smallCorner}
+                L ${task.width} ${bottom}
+                L ${task.width - corner} ${task.height}
+                L ${task.width - corner * 2} ${bottom}
+                L ${corner * 2} ${bottom}
+                L ${corner} ${task.height}
+                L 0 ${bottom}
+                L 0 ${smallCorner}
+                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/Project.vue?vue&type=script&lang=js
+ /* harmony default export */ var Row_Projectvue_type_script_lang_js = (Projectvue_type_script_lang_js); 
+;// ./src/components/Chart/Row/Project.vue
+
+
+
+
+
+/* normalize component */
+;
+var Project_component = normalizeComponent(
+  Row_Projectvue_type_script_lang_js,
+  Projectvue_type_template_id_760bf767_render,
+  Projectvue_type_template_id_760bf767_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Project = (Project_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/Epic.vue?vue&type=template&id=a2e89cd8
+var Epicvue_type_template_id_a2e89cd8_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('g', {
+    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-epic-wrapper",
+    style: {
+      ..._vm.root.style['chart-row-bar-wrapper'],
+      ..._vm.root.style['chart-row-epic-wrapper'],
+      ..._vm.task.style['chart-row-bar-wrapper']
+    }
+  }, [_vm.displayExpander ? _c('foreignObject', {
+    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--epic",
+    style: {
+      ..._vm.root.style['chart-expander'],
+      ..._vm.root.style['chart-expander--epic'],
+      ..._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-epic",
+    style: {
+      ..._vm.root.style['chart-row-bar'],
+      ..._vm.root.style['chart-row-epic'],
+      ..._vm.task.style['chart-row-bar']
+    },
+    attrs: {
+      "x": _vm.task.x,
+      "y": _vm.task.y,
+      "width": _vm.task.width,
+      "height": _vm.task.height,
+      "viewBox": `0 0 ${_vm.task.width} ${_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-epic-polygon",
+    style: {
+      ..._vm.root.style['chart-row-bar-polygon'],
+      ..._vm.root.style['chart-row-epic-polygon'],
+      ..._vm.task.style['base'],
+      ..._vm.task.style['chart-row-bar-polygon']
+    },
+    attrs: {
+      "d": _vm.getPoints
+    }
+  }), _c('progress-bar', {
+    attrs: {
+      "task": _vm.task,
+      "clip-path": 'url(#' + _vm.clipPathId + ')'
+    }
+  })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
+    attrs: {
+      "task": _vm.task
+    }
+  }) : _vm._e()], 1);
+};
+var Epicvue_type_template_id_a2e89cd8_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/Epic.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ var Epicvue_type_script_lang_js = ({
+  name: 'Epic',
+  components: {
+    ChartText: Text,
+    ProgressBar: ProgressBar,
+    Expander: Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [Task_mixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__epic-clip-path-' + this.task.id;
+    },
+    /**
+     * Get points (same shape as project)
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const bottom = task.height - task.height / 4;
+      const corner = task.height / 6;
+      const smallCorner = task.height / 8;
+      return `M ${smallCorner},0
+                L ${task.width - smallCorner} 0
+                L ${task.width} ${smallCorner}
+                L ${task.width} ${bottom}
+                L ${task.width - corner} ${task.height}
+                L ${task.width - corner * 2} ${bottom}
+                L ${corner * 2} ${bottom}
+                L ${corner} ${task.height}
+                L 0 ${bottom}
+                L 0 ${smallCorner}
+                Z
+        `;
+    },
+    /**
+     * Should we display expander?
      *
-     * @returns {string}
+     * @returns {boolean}
      */
-    getPoints() {
-      const task = this.task;
-      return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
+    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/components/Chart/Row/Task.vue?vue&type=script&lang=js
- /* harmony default export */ var Row_Taskvue_type_script_lang_js = (Taskvue_type_script_lang_js); 
-;// ./src/components/components/Chart/Row/Task.vue
+;// ./src/components/Chart/Row/Epic.vue?vue&type=script&lang=js
+ /* harmony default export */ var Row_Epicvue_type_script_lang_js = (Epicvue_type_script_lang_js); 
+;// ./src/components/Chart/Row/Epic.vue
 
 
 
@@ -5218,10 +6903,10 @@ var ProgressBar_component = normalizeComponent(
 
 /* normalize component */
 ;
-var Task_component = normalizeComponent(
-  Row_Taskvue_type_script_lang_js,
-  Taskvue_type_template_id_2afb5353_render,
-  Taskvue_type_template_id_2afb5353_staticRenderFns,
+var Epic_component = normalizeComponent(
+  Row_Epicvue_type_script_lang_js,
+  Epicvue_type_template_id_a2e89cd8_render,
+  Epicvue_type_template_id_a2e89cd8_staticRenderFns,
   false,
   null,
   null,
@@ -5229,23 +6914,23 @@ var Task_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var Task = (Task_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/components/Chart/Row/Milestone.vue?vue&type=template&id=4f4f8994
-var Milestonevue_type_template_id_4f4f8994_render = function render() {
+/* harmony default export */ var Epic = (Epic_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/Subtask.vue?vue&type=template&id=86599310
+var Subtaskvue_type_template_id_86599310_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
-    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-milestone-wrapper",
+    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-subtask-wrapper",
     style: {
       ..._vm.root.style['chart-row-bar-wrapper'],
-      ..._vm.root.style['chart-row-milestone-wrapper'],
+      ..._vm.root.style['chart-row-subtask-wrapper'],
       ..._vm.task.style['chart-row-bar-wrapper']
     }
   }, [_vm.displayExpander ? _c('foreignObject', {
-    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--milestone",
+    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--subtask",
     style: {
       ..._vm.root.style['chart-expander'],
-      ..._vm.root.style['chart-expander--milestone'],
+      ..._vm.root.style['chart-expander--subtask'],
       ..._vm.task.style['chart-expander']
     },
     attrs: {
@@ -5261,10 +6946,10 @@ var Milestonevue_type_template_id_4f4f8994_render = function render() {
       "type": "chart"
     }
   })], 1) : _vm._e(), _c('svg', {
-    staticClass: "gantt-elastic__chart-row-bar gantt-elastic__chart-row-milestone",
+    staticClass: "gantt-elastic__chart-row-bar gantt-elastic__chart-row-subtask",
     style: {
       ..._vm.root.style['chart-row-bar'],
-      ..._vm.root.style['chart-row-milestone'],
+      ..._vm.root.style['chart-row-subtask'],
       ..._vm.task.style['chart-row-bar']
     },
     attrs: {
@@ -5319,10 +7004,10 @@ var Milestonevue_type_template_id_4f4f8994_render = function render() {
       "points": _vm.getPoints
     }
   })])]), _c('polygon', {
-    staticClass: "gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-milestone-polygon",
+    staticClass: "gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-subtask-polygon",
     style: {
       ..._vm.root.style['chart-row-bar-polygon'],
-      ..._vm.root.style['chart-row-milestone-polygon'],
+      ..._vm.root.style['chart-row-subtask-polygon'],
       ..._vm.task.style['base'],
       ..._vm.task.style['chart-row-bar-polygon']
     },
@@ -5340,15 +7025,15 @@ var Milestonevue_type_template_id_4f4f8994_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Milestonevue_type_template_id_4f4f8994_staticRenderFns = [];
+var Subtaskvue_type_template_id_86599310_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/components/Chart/Row/Milestone.vue?vue&type=script&lang=js
+;// ./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/Subtask.vue?vue&type=script&lang=js
 
 
 
 
-/* harmony default export */ var Milestonevue_type_script_lang_js = ({
-  name: 'Milestone',
+/* harmony default export */ var Subtaskvue_type_script_lang_js = ({
+  name: 'Subtask',
   components: {
     ChartText: Text,
     ProgressBar: ProgressBar,
@@ -5367,32 +7052,32 @@ var Milestonevue_type_template_id_4f4f8994_staticRenderFns = [];
      * @returns {string}
      */
     clipPathId() {
-      return 'gantt-elastic__milestone-clip-path-' + this.task.id;
+      return 'gantt-elastic__subtask-clip-path-' + this.task.id;
     },
     /**
-     * Get points
+     * Get points (simple rectangle for subtasks)
      *
      * @returns {string}
      */
     getPoints() {
       const task = this.task;
-      const fifty = task.height / 2;
-      let offset = fifty;
-      if (task.width / 2 - offset < 0) {
-        offset = task.width / 2;
-      }
-      return `0,${fifty}
-        ${offset},0
-        ${task.width - offset},0
-        ${task.width},${fifty}
-        ${task.width - offset},${task.height}
-        ${offset},${task.height}`;
+      return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
+    },
+    /**
+     * 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/components/Chart/Row/Milestone.vue?vue&type=script&lang=js
- /* harmony default export */ var Row_Milestonevue_type_script_lang_js = (Milestonevue_type_script_lang_js); 
-;// ./src/components/components/Chart/Row/Milestone.vue
+;// ./src/components/Chart/Row/Subtask.vue?vue&type=script&lang=js
+ /* harmony default export */ var Row_Subtaskvue_type_script_lang_js = (Subtaskvue_type_script_lang_js); 
+;// ./src/components/Chart/Row/Subtask.vue
 
 
 
@@ -5400,10 +7085,10 @@ var Milestonevue_type_template_id_4f4f8994_staticRenderFns = [];
 
 /* normalize component */
 ;
-var Milestone_component = normalizeComponent(
-  Row_Milestonevue_type_script_lang_js,
-  Milestonevue_type_template_id_4f4f8994_render,
-  Milestonevue_type_template_id_4f4f8994_staticRenderFns,
+var Subtask_component = normalizeComponent(
+  Row_Subtaskvue_type_script_lang_js,
+  Subtaskvue_type_template_id_86599310_render,
+  Subtaskvue_type_template_id_86599310_staticRenderFns,
   false,
   null,
   null,
@@ -5411,23 +7096,23 @@ var Milestone_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var Milestone = (Milestone_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/components/Chart/Row/Project.vue?vue&type=template&id=38b2a86e
-var Projectvue_type_template_id_38b2a86e_render = function render() {
+/* harmony default export */ var Subtask = (Subtask_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/Story.vue?vue&type=template&id=1f59b61a
+var Storyvue_type_template_id_1f59b61a_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
-    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-project-wrapper",
+    staticClass: "gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-story-wrapper",
     style: {
       ..._vm.root.style['chart-row-bar-wrapper'],
-      ..._vm.root.style['chart-row-project-wrapper'],
+      ..._vm.root.style['chart-row-story-wrapper'],
       ..._vm.task.style['chart-row-bar-wrapper']
     }
   }, [_vm.displayExpander ? _c('foreignObject', {
-    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--project",
+    staticClass: "gantt-elastic__chart-expander gantt-elastic__chart-expander--story",
     style: {
       ..._vm.root.style['chart-expander'],
-      ..._vm.root.style['chart-expander--project'],
+      ..._vm.root.style['chart-expander--story'],
       ..._vm.task.style['chart-expander']
     },
     attrs: {
@@ -5443,10 +7128,10 @@ var Projectvue_type_template_id_38b2a86e_render = function render() {
       "type": "chart"
     }
   })], 1) : _vm._e(), _c('svg', {
-    staticClass: "gantt-elastic__chart-row-bar gantt-elastic__chart-row-project",
+    staticClass: "gantt-elastic__chart-row-bar gantt-elastic__chart-row-story",
     style: {
       ..._vm.root.style['chart-row-bar'],
-      ..._vm.root.style['chart-row-project'],
+      ..._vm.root.style['chart-row-story'],
       ..._vm.task.style['chart-row-bar']
     },
     attrs: {
@@ -5501,10 +7186,10 @@ var Projectvue_type_template_id_38b2a86e_render = function render() {
       "d": _vm.getPoints
     }
   })])]), _c('path', {
-    staticClass: "gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-project-polygon",
+    staticClass: "gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-story-polygon",
     style: {
       ..._vm.root.style['chart-row-bar-polygon'],
-      ..._vm.root.style['chart-row-project-polygon'],
+      ..._vm.root.style['chart-row-story-polygon'],
       ..._vm.task.style['base'],
       ..._vm.task.style['chart-row-bar-polygon']
     },
@@ -5522,15 +7207,15 @@ var Projectvue_type_template_id_38b2a86e_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Projectvue_type_template_id_38b2a86e_staticRenderFns = [];
+var Storyvue_type_template_id_1f59b61a_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/components/Chart/Row/Project.vue?vue&type=script&lang=js
+;// ./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/Story.vue?vue&type=script&lang=js
 
 
 
 
-/* harmony default export */ var Projectvue_type_script_lang_js = ({
-  name: 'Project',
+/* harmony default export */ var Storyvue_type_script_lang_js = ({
+  name: 'Story',
   components: {
     ChartText: Text,
     ProgressBar: ProgressBar,
@@ -5549,30 +7234,26 @@ var Projectvue_type_template_id_38b2a86e_staticRenderFns = [];
      * @returns {string}
      */
     clipPathId() {
-      return 'gantt-elastic__project-clip-path-' + this.task.id;
+      return 'gantt-elastic__story-clip-path-' + this.task.id;
     },
     /**
-     * Get points
+     * Get points (rounded rectangle for stories)
      *
      * @returns {string}
      */
     getPoints() {
       const task = this.task;
-      const bottom = task.height - task.height / 4;
-      const corner = task.height / 6;
-      const smallCorner = task.height / 8;
-      return `M ${smallCorner},0
-                L ${task.width - smallCorner} 0
-                L ${task.width} ${smallCorner}
-                L ${task.width} ${bottom}
-                L ${task.width - corner} ${task.height}
-                L ${task.width - corner * 2} ${bottom}
-                L ${corner * 2} ${bottom}
+      const corner = Math.min(task.height / 4, 8); // Rounded corners
+      return `M ${corner},0
+                L ${task.width - corner} 0
+                Q ${task.width} 0 ${task.width} ${corner}
+                L ${task.width} ${task.height - corner}
+                Q ${task.width} ${task.height} ${task.width - corner} ${task.height}
                 L ${corner} ${task.height}
-                L 0 ${bottom}
-                L 0 ${smallCorner}
-                Z
-        `;
+                Q 0 ${task.height} 0 ${task.height - corner}
+                L 0 ${corner}
+                Q 0 0 ${corner} 0
+                Z`;
     },
     /**
      * Should we display expander?
@@ -5581,13 +7262,14 @@ var Projectvue_type_template_id_38b2a86e_staticRenderFns = [];
      */
     displayExpander() {
       const expander = this.root.state.options.chart.expander;
-      return expander.display || expander.displayIfTaskListHidden && !this.root.state.options.taskList.display;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || expander.displayIfTaskListHidden && !this.root.state.options.taskList.display) && hasChildren;
     }
   }
 });
-;// ./src/components/components/Chart/Row/Project.vue?vue&type=script&lang=js
- /* harmony default export */ var Row_Projectvue_type_script_lang_js = (Projectvue_type_script_lang_js); 
-;// ./src/components/components/Chart/Row/Project.vue
+;// ./src/components/Chart/Row/Story.vue?vue&type=script&lang=js
+ /* harmony default export */ var Row_Storyvue_type_script_lang_js = (Storyvue_type_script_lang_js); 
+;// ./src/components/Chart/Row/Story.vue
 
 
 
@@ -5595,10 +7277,10 @@ var Projectvue_type_template_id_38b2a86e_staticRenderFns = [];
 
 /* normalize component */
 ;
-var Project_component = normalizeComponent(
-  Row_Projectvue_type_script_lang_js,
-  Projectvue_type_template_id_38b2a86e_render,
-  Projectvue_type_template_id_38b2a86e_staticRenderFns,
+var Story_component = normalizeComponent(
+  Row_Storyvue_type_script_lang_js,
+  Storyvue_type_template_id_1f59b61a_render,
+  Storyvue_type_template_id_1f59b61a_staticRenderFns,
   false,
   null,
   null,
@@ -5606,8 +7288,11 @@ var Project_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var Project = (Project_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/components/Chart/Chart.vue?vue&type=script&lang=js
+/* 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/index.js??vue-loader-options!./src/components/Chart/Chart.vue?vue&type=script&lang=js
+
+
+
 
 
 
@@ -5621,9 +7306,12 @@ var Project_component = normalizeComponent(
     Grid: Grid,
     DependencyLines: DependencyLines,
     Calendar: Calendar,
-    Task: Task,
-    Milestone: Milestone,
-    Project: Project,
+    task: Task,
+    milestone: Milestone,
+    project: Project,
+    epic: Epic,
+    subtask: Subtask,
+    story: Story,
     DaysHighlight: DaysHighlight
   },
   inject: ['root'],
@@ -5653,9 +7341,9 @@ var Project_component = normalizeComponent(
     }
   }
 });
-;// ./src/components/components/Chart/Chart.vue?vue&type=script&lang=js
+;// ./src/components/Chart/Chart.vue?vue&type=script&lang=js
  /* harmony default export */ var Chart_Chartvue_type_script_lang_js = (Chartvue_type_script_lang_js); 
-;// ./src/components/components/Chart/Chart.vue
+;// ./src/components/Chart/Chart.vue
 
 
 
@@ -5665,8 +7353,8 @@ var Project_component = normalizeComponent(
 ;
 var Chart_component = normalizeComponent(
   Chart_Chartvue_type_script_lang_js,
-  Chartvue_type_template_id_4ae99150_render,
-  Chartvue_type_template_id_4ae99150_staticRenderFns,
+  Chartvue_type_template_id_1d5eb6d6_render,
+  Chartvue_type_template_id_1d5eb6d6_staticRenderFns,
   false,
   null,
   null,
@@ -5675,7 +7363,7 @@ var Chart_component = normalizeComponent(
 )
 
 /* harmony default export */ var Chart = (Chart_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/components/MainView.vue?vue&type=script&lang=js
+;// ./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/MainView.vue?vue&type=script&lang=js
 
 
 let ignoreScrollEvents = false;
@@ -5859,9 +7547,9 @@ let ignoreScrollEvents = false;
   //   document.removeEventListener('touchend', this.chartMouseUp);
   // }
 });
-;// ./src/components/components/MainView.vue?vue&type=script&lang=js
+;// ./src/components/MainView.vue?vue&type=script&lang=js
  /* harmony default export */ var components_MainViewvue_type_script_lang_js = (MainViewvue_type_script_lang_js); 
-;// ./src/components/components/MainView.vue
+;// ./src/components/MainView.vue
 
 
 
@@ -5871,8 +7559,8 @@ let ignoreScrollEvents = false;
 ;
 var MainView_component = normalizeComponent(
   components_MainViewvue_type_script_lang_js,
-  MainViewvue_type_template_id_5e6f381a_render,
-  MainViewvue_type_template_id_5e6f381a_staticRenderFns,
+  MainViewvue_type_template_id_1a4b756c_render,
+  MainViewvue_type_template_id_1a4b756c_staticRenderFns,
   false,
   null,
   null,
@@ -5881,7 +7569,7 @@ var MainView_component = normalizeComponent(
 )
 
 /* harmony default export */ var MainView = (MainView_component.exports);
-;// ./src/components/style.js
+;// ./src/style.js
 function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
   return {
     fontSize,
@@ -5931,10 +7619,10 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
     'calendar-row-rect-child': {
       display: 'block',
       'border-right-width': '1px',
-      // Calendar
-      'border-right-color': '#dadada',
+      'border-right-color': '#E5E7EB',
       'border-right-style': 'solid',
-      position: 'relative'
+      position: 'relative',
+      'box-sizing': 'border-box'
     },
     'calendar-row-rect-child--month': {},
     'calendar-row-rect-child--day': {
@@ -5950,11 +7638,20 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
       //GanttElastic
       color: '#606060',
       display: 'inline-block',
-      position: 'relative'
+      position: 'relative',
+      'text-align': 'center',
+      'white-space': 'nowrap',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis',
+      'max-width': '100%',
+      'width': '100%',
+      'box-sizing': 'border-box'
     },
     'calendar-row-text--month': {},
     'calendar-row-text--day': {},
     'calendar-row-text--hour': {},
+    'calendar-row-text--quarter': {},
+    'calendar-row-text--week': {},
     'task-list-wrapper': {},
     'task-list': {
       background: 'transparent',
@@ -5997,6 +7694,13 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
       fill: '#ffffffa0',
       stroke: '#000000A0'
     },
+    'task-list-expander-arrow': {
+      fill: 'none',
+      stroke: '#999999',
+      'stroke-width': '2',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round'
+    },
     'chart-expander-wrapper': {
       display: 'block',
       'line-height': '1',
@@ -6020,6 +7724,13 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
       fill: '#ffffffa0',
       stroke: '#000000A0'
     },
+    'chart-expander-arrow': {
+      fill: 'none',
+      stroke: '#999999',
+      'stroke-width': '2',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round'
+    },
     'task-list-container': {},
     'task-list-header-label': {
       overflow: 'hidden',
@@ -6076,7 +7787,8 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
       overflow: 'hidden'
     },
     'task-list-item-value': {
-      display: 'block',
+      display: 'flex',
+      'align-items': 'center',
       'flex-shrink': '100',
       'font-family': fontFamily,
       'font-size': fontSize,
@@ -6093,13 +7805,34 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
       color: '#606060',
       background: '#FFFFFF'
     },
+    'task-list-item-content': {
+      'display': 'flex',
+      'align-items': 'center',
+      'width': '100%',
+      'min-width': '0'
+    },
+    'task-list-item-icon': {
+      'display': 'flex',
+      'align-items': 'center',
+      'margin-right': '6px',
+      'flex-shrink': '0',
+      'width': '14px',
+      'height': '14px'
+    },
+    'task-list-item-text': {
+      'flex': '1',
+      'min-width': '0',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis',
+      'white-space': 'nowrap'
+    },
     'grid-lines': {},
     'grid-line-horizontal': {
-      stroke: '#00000010',
+      stroke: '#F3F4F6',
       'stroke-width': 1
     },
     'grid-line-vertical': {
-      stroke: '#00000010',
+      stroke: '#E5E7EB',
       'stroke-width': 1
     },
     'grid-line-time': {
@@ -6114,13 +7847,17 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
       'user-select': 'none',
       overflow: 'hidden',
       'max-width': '100%',
-      'border-right': '1px solid #eee'
+      'border-right': '1px solid #E5E7EB',
+      'position': 'relative',
+      'z-index': 1
     },
     'chart-graph-container': {
       'user-select': 'none',
       overflow: 'hidden',
       'max-width': '100%',
-      'border-right': '1px solid #eee'
+      'border-right': '1px solid #E5E7EB',
+      'position': 'relative',
+      'z-index': 0
     },
     'chart-area': {},
     'chart-graph': {
@@ -6128,17 +7865,23 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
     },
     'chart-row-text-wrapper': {},
     'chart-row-text': {
-      background: '#ffffffa0',
-      'border-radius': '10px',
+      background: '#ffffff',
+      'border-radius': '4px',
       'font-family': fontFamily,
-      'font-size': fontSize,
-      'font-weight': 'normal',
-      color: '#000000a0',
+      'font-size': '11px',
+      'font-weight': '500',
+      color: '#374151',
       height: '100%',
-      display: 'inline-block'
+      display: 'inline-block',
+      'box-shadow': '0 1px 3px rgba(0, 0, 0, 0.1)',
+      'border': '1px solid #E5E7EB'
     },
     'chart-row-text-content': {
-      padding: '0px 6px'
+      padding: '2px 8px',
+      'white-space': 'nowrap',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis',
+      'max-width': '120px'
     },
     'chart-row-text-content--text': {},
     'chart-row-text-content--html': {},
@@ -6153,12 +7896,46 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
     'chart-row-project-wrapper': {},
     'chart-row-project': {},
     'chart-row-project-polygon': {},
+    'chart-row-epic-wrapper': {},
+    'chart-row-epic': {},
+    'chart-row-epic-polygon': {
+      stroke: '#8B5CF6',
+      'stroke-width': 2,
+      fill: '#8B5CF6',
+      'fill-opacity': 0.9
+    },
+    'chart-row-subtask-wrapper': {},
+    'chart-row-subtask': {},
+    'chart-row-subtask-polygon': {
+      stroke: '#3B82F6',
+      'stroke-width': 1,
+      fill: '#3B82F6',
+      'fill-opacity': 0.9
+    },
+    'chart-row-story-wrapper': {},
+    'chart-row-story': {},
+    'chart-row-story-polygon': {
+      stroke: '#86EFAC',
+      'stroke-width': 1,
+      fill: '#86EFAC',
+      'fill-opacity': 0.9
+    },
     'chart-row-milestone-wrapper': {},
     'chart-row-milestone': {},
-    'chart-row-milestone-polygon': {},
+    'chart-row-milestone-polygon': {
+      stroke: '#CD5C5C',
+      'stroke-width': 2,
+      fill: '#CD5C5C',
+      'fill-opacity': 0.9
+    },
     'chart-row-task-wrapper': {},
     'chart-row-task': {},
-    'chart-row-task-polygon': {},
+    'chart-row-task-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': {
@@ -7132,8 +8909,8 @@ var index = (function () {
 
 /* harmony default export */ var ResizeObserver_es = (index);
 
-;// ./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/components/Header/Header.vue?vue&type=template&id=63647db0
-var Headervue_type_template_id_63647db0_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/Header.vue?vue&type=template&id=7624c9ea
+var Headervue_type_template_id_7624c9ea_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -7330,7 +9107,7 @@ var Headervue_type_template_id_63647db0_render = function render() {
     }
   }), _vm._v(" " + _vm._s(_vm.opts.locale["Display task list"]) + " ")], 1)])]);
 };
-var Headervue_type_template_id_63647db0_staticRenderFns = [];
+var Headervue_type_template_id_7624c9ea_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/vue-slider-component/dist/vue-slider-component.umd.min.js
 var vue_slider_component_umd_min = __webpack_require__(378);
@@ -7444,7 +9221,7 @@ var switches_component = normalizeComponent(
 )
 
 /* harmony default export */ var switches = (switches_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/components/Header/Header.vue?vue&type=script&lang=js
+;// ./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/Header.vue?vue&type=script&lang=js
 
 
 
@@ -7515,7 +9292,7 @@ const defaultStyle = {
 };
 const defaultOptions = {
   title: {
-    label: "",
+    label: "ajay",
     html: true
   },
   locale: {
@@ -7553,6 +9330,7 @@ const defaultOptions = {
     };
   },
   created() {
+    debugger; // eslint-disable-line no-debugger
     defaultOptions.title.label = this.root.projectName;
     this.localScale = this.root.state.options.times.timeZoom;
     this.localHeight = this.root.state.options.row.height;
@@ -7653,9 +9431,9 @@ const defaultOptions = {
     }
   }
 });
-;// ./src/components/components/Header/Header.vue?vue&type=script&lang=js
+;// ./src/components/Header/Header.vue?vue&type=script&lang=js
  /* harmony default export */ var Header_Headervue_type_script_lang_js = (Headervue_type_script_lang_js); 
-;// ./src/components/components/Header/Header.vue
+;// ./src/components/Header/Header.vue
 
 
 
@@ -7665,8 +9443,8 @@ const defaultOptions = {
 ;
 var Header_component = normalizeComponent(
   Header_Headervue_type_script_lang_js,
-  Headervue_type_template_id_63647db0_render,
-  Headervue_type_template_id_63647db0_staticRenderFns,
+  Headervue_type_template_id_7624c9ea_render,
+  Headervue_type_template_id_7624c9ea_staticRenderFns,
   false,
   null,
   null,
@@ -7675,7 +9453,14 @@ var Header_component = normalizeComponent(
 )
 
 /* harmony default export */ var Header = (Header_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/GanttElastic.vue?vue&type=script&lang=js
+;// ./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/GanttElastic.vue?vue&type=script&lang=js
+
+
+
+
+
+
+
 
 
 
@@ -7688,6 +9473,7 @@ var Header_component = normalizeComponent(
 
 
 
+
 const ctx = document.createElement('canvas').getContext('2d');
 // let VueInst = VueInstance;
 // function initVue() {
@@ -7697,7 +9483,7 @@ const ctx = document.createElement('canvas').getContext('2d');
 // }
 // initVue();
 
-// let hourWidthCache = null;
+let hourWidthCache = null;
 
 /**
  * Helper function to fill out empty options in user settings
@@ -7800,15 +9586,15 @@ function getOptions(userOptions) {
         bar: false
       },
       text: {
-        offset: 4,
+        offset: 8,
         //*
-        xPadding: 10,
+        xPadding: 12,
         //*
         display: true //*
       },
       expander: {
         type: 'chart',
-        display: false,
+        display: true,
         //*
         displayIfTaskListHidden: true,
         //*
@@ -7840,7 +9626,7 @@ function getOptions(userOptions) {
       minWidth: 18,
       expander: {
         type: 'task-list',
-        size: 16,
+        size: 18,
         columnWidth: 24,
         padding: 16,
         margin: 10,
@@ -7929,6 +9715,30 @@ function getOptions(userOptions) {
             return date.format('MMMM YYYY');
           }
         }
+      },
+      quarter: {
+        height: 30,
+        //*
+        display: true,
+        //*
+        widths: [],
+        maxWidths: {
+          short: 0,
+          medium: 0,
+          long: 0
+        },
+        format: {
+          //*
+          short(date) {
+            return date.format('Qo quarter');
+          },
+          medium(date) {
+            return date.format("Qo 'YY");
+          },
+          long(date) {
+            return date.format('Qo quarter YYYY');
+          }
+        }
       }
     },
     locale: {
@@ -8171,7 +9981,8 @@ const GanttElastic = {
   name: 'GanttElastic',
   components: {
     MainView: MainView,
-    'gantt-header': Header
+    'gantt-header': Header,
+    'gantt-view-filter': GanttViewFilter
   },
   props: ['tasks', 'options', 'dynamicStyle', 'isHeaderVisible', 'projectName'],
   provide() {
@@ -8200,7 +10011,7 @@ const GanttElastic = {
         refs: {},
         tasksById: {},
         taskTree: {},
-        ctx: ctx,
+        ctx,
         emitTasksChanges: true,
         // some operations may pause emitting changes to parent component
         emitOptionsChanges: true,
@@ -8218,6 +10029,51 @@ const GanttElastic = {
   methods: {
     mergeDeep,
     mergeDeepReactive,
+    onViewModeChanged(mode) {
+      // Update the calendar view mode
+      this.options.calendar.viewMode = mode;
+
+      // Update the step duration based on the view mode
+      if (this.options.times) {
+        switch (mode) {
+          case 'quarter':
+            this.options.times.stepDuration = 'quarter';
+            this.options.times.timeZoom = 15; // Reset zoom for better quarter view
+            break;
+          case 'month':
+            this.options.times.stepDuration = 'month';
+            this.options.times.timeZoom = 17; // Reset zoom for better month view
+            break;
+          case 'week':
+            this.options.times.stepDuration = 'week';
+            this.options.times.timeZoom = 19; // Reset zoom for better week view
+            break;
+          default:
+            // 'day' or any other mode
+            this.options.times.stepDuration = 'day';
+            this.options.times.timeZoom = 21; // Reset zoom for better day view
+            break;
+        }
+      }
+
+      // Force recalculation by triggering a reactive update
+      this.$nextTick(() => {
+        this.$forceUpdate();
+        // Recalculate start date based on new view mode and trigger full recalculation
+        if (this.$refs.ganttChart) {
+          // Trigger recalculation of dates and times with new view mode
+          this.$refs.ganttChart.prepareDates();
+          this.$refs.ganttChart.initTimes();
+          this.$refs.ganttChart.calculateSteps();
+          this.$refs.ganttChart.computeCalendarWidths();
+
+          // Ensure perfect alignment between calendar and chart
+          if (this.$refs.ganttChart.ensureCalendarChartAlignment) {
+            this.$refs.ganttChart.ensureCalendarChartAlignment();
+          }
+        }
+      });
+    },
     /**
      * Calculate height of scrollbar in current browser
      *
@@ -8353,7 +10209,22 @@ const GanttElastic = {
       tasks = this.fillTasks(tasks);
       this.state.tasksById = this.resetTaskTree(tasks);
       this.state.taskTree = this.makeTaskTree(this.state.rootTask, tasks);
-      this.state.tasks = this.state.taskTree.allChildren.map(childId => this.getTask(childId));
+
+      // Get all visible tasks including parent tasks
+      const visibleTaskIds = new Set();
+
+      // Add all root-level tasks (these include parent tasks that don't have parentId)
+      this.state.taskTree.allChildren.forEach(childId => {
+        visibleTaskIds.add(childId);
+      });
+
+      // Also add any parent tasks that have children but might not be in root children
+      tasks.forEach(task => {
+        if (task.allChildren && task.allChildren.length > 0) {
+          visibleTaskIds.add(task.id);
+        }
+      });
+      this.state.tasks = Array.from(visibleTaskIds).map(childId => this.getTask(childId));
       this.calculateTaskListColumnsDimensions();
       this.state.options.scrollBarHeight = this.getScrollBarHeight();
       this.state.options.outerHeight = this.state.options.height + this.state.options.scrollBarHeight;
@@ -8505,11 +10376,21 @@ const GanttElastic = {
       if (typeof task === 'number' || typeof task === 'string') {
         task = this.getTask(task);
       }
+
+      // Always show parent tasks (tasks with children) - they need to be visible for expander functionality
+      if (task.allChildren && task.allChildren.length > 0) {
+        return true;
+      }
+
+      // For child tasks, check if any parent is collapsed
       for (let i = 0, len = task.parents.length; i < len; i++) {
-        if (this.getTask(task.parents[i]).collapsed) {
+        const parentTask = this.getTask(task.parents[i]);
+        if (parentTask && parentTask.collapsed) {
           return false;
         }
       }
+
+      // Show all other tasks (root-level tasks and non-collapsed child tasks)
       return true;
     },
     /**
@@ -8767,46 +10648,311 @@ const GanttElastic = {
       this.$on('taskList-width-change', this.onTaskListWidthChange);
       this.$on('taskList-column-width-change', this.onTaskListColumnWidthChange);
     },
+    /**
+     * Get responsive step widths based on screen size
+     */
+    getResponsiveStepWidths(stepDuration) {
+      const clientWidth = this.state.options.clientWidth;
+
+      // Enhanced base step widths for different screen sizes
+      const baseWidths = {
+        'day': {
+          mobile: 40,
+          tablet: 50,
+          desktopSmall: 60,
+          desktopBig: 80
+        },
+        'week': {
+          mobile: 80,
+          tablet: 100,
+          desktopSmall: 120,
+          desktopBig: 150
+        },
+        'month': {
+          mobile: 120,
+          tablet: 140,
+          desktopSmall: 160,
+          desktopBig: 200
+        },
+        'quarter': {
+          mobile: 200,
+          tablet: 250,
+          desktopSmall: 300,
+          desktopBig: 400
+        }
+      };
+
+      // Determine screen size with desktop variants
+      let screenSize;
+      if (clientWidth < 768) {
+        screenSize = 'mobile';
+      } else if (clientWidth < 1024) {
+        screenSize = 'tablet';
+      } else if (clientWidth < 1440) {
+        screenSize = 'desktopSmall';
+      } else {
+        screenSize = 'desktopBig';
+      }
+
+      // Get responsive width for the step duration
+      let responsiveWidth = baseWidths[stepDuration][screenSize];
+
+      // Calculate dynamic width based on data content
+      const dataBasedWidth = this.getDataBasedStepWidth(stepDuration, clientWidth);
+
+      // Use the larger of responsive width or data-based width
+      return Math.max(responsiveWidth, dataBasedWidth);
+    },
+    /**
+     * Get step width based on data content and minimum visibility requirements
+     */
+    getDataBasedStepWidth(stepDuration, clientWidth) {
+      const estimatedSteps = this.getEstimatedStepCount(stepDuration);
+      const taskListWidth = 300; // Account for task list width
+      const availableWidth = clientWidth - taskListWidth;
+
+      // Define minimum visibility requirements
+      const minVisibilitySteps = {
+        'day': 30,
+        // Show at least 30 days
+        'week': 12,
+        // Show at least 12 weeks (3 months)
+        'month': 8,
+        // Show at least 8 months
+        'quarter': 3 // Show at least 3 quarters
+      };
+
+      // Calculate minimum steps needed for good visibility
+      const minSteps = Math.max(estimatedSteps, minVisibilitySteps[stepDuration]);
+
+      // Define minimum readable width per step
+      const minReadableWidth = {
+        'day': 30,
+        'week': 60,
+        'month': 80,
+        'quarter': 120
+      };
+
+      // Calculate width per step to ensure minimum visibility
+      const minWidthPerStep = availableWidth / minSteps;
+
+      // Use the larger of minimum readable width or calculated width
+      const calculatedWidth = Math.max(minWidthPerStep, minReadableWidth[stepDuration]);
+
+      // Define maximum reasonable width per step
+      const maxWidthPerStep = {
+        'day': 100,
+        'week': 200,
+        'month': 300,
+        'quarter': 500
+      };
+
+      // Ensure we don't exceed maximum reasonable width
+      return Math.min(calculatedWidth, maxWidthPerStep[stepDuration]);
+    },
+    /**
+     * Get maximum width multiplier based on screen size and data content
+     */
+    getMaxWidthMultiplier(stepDuration, stepCount) {
+      const clientWidth = this.state.options.clientWidth;
+
+      // Base multipliers for different screen sizes
+      const baseMultipliers = {
+        mobile: 2,
+        // 2x viewport width on mobile
+        tablet: 2.5,
+        // 2.5x viewport width on tablet
+        desktopSmall: 3,
+        // 3x viewport width on small desktop
+        desktopBig: 4 // 4x viewport width on big desktop
+      };
+
+      // Determine screen size
+      let screenSize;
+      if (clientWidth < 768) {
+        screenSize = 'mobile';
+      } else if (clientWidth < 1024) {
+        screenSize = 'tablet';
+      } else if (clientWidth < 1440) {
+        screenSize = 'desktopSmall';
+      } else {
+        screenSize = 'desktopBig';
+      }
+      let multiplier = baseMultipliers[screenSize];
+
+      // Adjust multiplier based on data content
+      const minVisibilitySteps = {
+        'day': 30,
+        'week': 12,
+        'month': 8,
+        'quarter': 3
+      };
+
+      // If we have more data than minimum visibility, allow more width
+      if (stepCount > minVisibilitySteps[stepDuration]) {
+        const dataRatio = stepCount / minVisibilitySteps[stepDuration];
+        multiplier = Math.min(multiplier * (1 + dataRatio * 0.5), 6); // Max 6x viewport width
+      }
+      return multiplier;
+    },
+    /**
+     * Get estimated step count for responsive calculations
+     */
+    getEstimatedStepCount(stepDuration) {
+      const totalDurationMs = dayjs_min_default()(this.state.options.times.lastTime).diff(this.state.options.times.firstTime, 'milliseconds');
+      switch (stepDuration) {
+        case 'quarter':
+          return Math.ceil(dayjs_min_default()(this.state.options.times.lastTime).diff(dayjs_min_default()(this.state.options.times.firstTime), 'quarter', true));
+        case 'month':
+          return Math.ceil(dayjs_min_default()(this.state.options.times.lastTime).diff(dayjs_min_default()(this.state.options.times.firstTime), 'month', true));
+        case 'week':
+          return Math.ceil(dayjs_min_default()(this.state.options.times.lastTime).diff(dayjs_min_default()(this.state.options.times.firstTime), 'week', true));
+        case 'day':
+        default:
+          return Math.ceil(dayjs_min_default()(this.state.options.times.lastTime).diff(dayjs_min_default()(this.state.options.times.firstTime), 'day', true));
+      }
+    },
     /**
      * When some action was performed (scale change for example) - recalculate time variables
      */
     recalculateTimes() {
-      let max = this.state.options.times.timeScale * 60;
-      let min = this.state.options.times.timeScale;
-      let steps = max / min;
-      let percent = this.state.options.times.timeZoom / 100;
-      this.state.options.times.timePerPixel = this.state.options.times.timeScale * steps * percent + Math.pow(2, this.state.options.times.timeZoom);
-      this.state.options.times.totalViewDurationMs = dayjs_min_default()(this.state.options.times.lastTime).diff(this.state.options.times.firstTime, 'milliseconds');
+      const stepDuration = this.state.options.times.stepDuration;
+      const timeZoom = this.state.options.times.timeZoom;
+
+      // Calculate base time per pixel based on step duration
+      let baseTimePerPixel;
+      const totalDurationMs = dayjs_min_default()(this.state.options.times.lastTime).diff(this.state.options.times.firstTime, 'milliseconds');
+
+      // Get responsive step width based on screen size and data content
+      const responsiveStepWidth = this.getResponsiveStepWidths(stepDuration);
+
+      // Calculate how many steps we'll have
+      const stepCount = this.getEstimatedStepCount(stepDuration);
+
+      // Define minimum visibility requirements
+      const minVisibilitySteps = {
+        'day': 30,
+        // Show at least 30 days
+        'week': 12,
+        // Show at least 12 weeks (3 months)
+        'month': 8,
+        // Show at least 8 months
+        'quarter': 3 // Show at least 3 quarters
+      };
+
+      // Ensure we show at least the minimum number of steps
+      const actualSteps = Math.max(stepCount, minVisibilitySteps[stepDuration]);
+
+      // Ensure minimum visibility for all view types
+      if (stepCount < minVisibilitySteps[stepDuration]) {
+        const firstTime = dayjs_min_default()(this.state.options.times.firstTime);
+        let lastTime;
+        switch (stepDuration) {
+          case 'month':
+            lastTime = firstTime.add(8, 'month');
+            break;
+          case 'week':
+            lastTime = firstTime.add(12, 'week');
+            break;
+          case 'quarter':
+            lastTime = firstTime.add(3, 'quarter');
+            break;
+          case 'day':
+          default:
+            lastTime = firstTime.add(30, 'day');
+            break;
+        }
+        this.state.options.times.lastTime = lastTime.valueOf();
+        // Recalculate total duration with extended range
+        const extendedDurationMs = lastTime.diff(firstTime, 'milliseconds');
+        const minSteps = minVisibilitySteps[stepDuration];
+        this.state.options.times.timePerPixel = extendedDurationMs / (minSteps * responsiveStepWidth);
+        this.state.options.times.totalViewDurationMs = extendedDurationMs;
+        this.state.options.times.totalViewDurationPx = minSteps * responsiveStepWidth;
+        return; // Exit early for views with extended range
+      }
+
+      // Calculate total width needed for all steps
+      const totalWidthNeeded = actualSteps * responsiveStepWidth;
+
+      // Calculate time per pixel to fit the content with responsive step width
+      this.state.options.times.timePerPixel = totalDurationMs / totalWidthNeeded;
+
+      // Apply zoom factor (higher zoom = more compressed view)
+      const zoomFactor = Math.pow(0.8, (timeZoom - 17) / 10); // Adjust zoom sensitivity
+      this.state.options.times.timePerPixel *= zoomFactor;
+      this.state.options.times.totalViewDurationMs = totalDurationMs;
       this.state.options.times.totalViewDurationPx = this.state.options.times.totalViewDurationMs / this.state.options.times.timePerPixel;
-      this.state.options.width = this.state.options.times.totalViewDurationPx + this.style['grid-line-vertical']['stroke-width'];
+
+      // Calculate final width
+      const calculatedWidth = this.state.options.times.totalViewDurationPx + this.style['grid-line-vertical']['stroke-width'];
+
+      // Define maximum width based on screen size and data content
+      const maxWidthMultiplier = this.getMaxWidthMultiplier(stepDuration, actualSteps);
+      const maxWidth = this.state.options.clientWidth * maxWidthMultiplier;
+
+      // Ensure minimum width for scrolling when we have minimum visibility requirements
+      const minWidthForScrolling = this.state.options.clientWidth * 1.2; // 20% more than viewport
+      const finalWidth = Math.max(calculatedWidth, minWidthForScrolling);
+      if (finalWidth > maxWidth) {
+        // Only limit width if it's truly excessive
+        this.state.options.times.timePerPixel = totalDurationMs / (maxWidth - this.style['grid-line-vertical']['stroke-width']);
+        this.state.options.times.totalViewDurationPx = totalDurationMs / this.state.options.times.timePerPixel;
+        this.state.options.width = maxWidth;
+      } else {
+        this.state.options.width = finalWidth;
+      }
     },
     /**
      * Initialize time variables
      */
     initTimes() {
-      this.state.options.times.firstTime = dayjs_min_default()(this.state.options.times.firstTaskTime).locale(this.state.options.locale.name).startOf('day').subtract(this.state.options.scope.before, 'days').startOf('day').valueOf();
+      // Calculate dynamic start date based on the formula
+      const minDataDate = dayjs_min_default()(this.state.options.times.firstTaskTime).startOf('day');
+      const viewBasedStartDate = this.calculateDynamicStartDate();
+
+      // Use the minimum of data start date and view-based start date
+      const dynamicStartDate = minDataDate.isBefore(viewBasedStartDate) ? minDataDate : viewBasedStartDate;
+      this.state.options.times.firstTime = dynamicStartDate.locale(this.state.options.locale.name).subtract(this.state.options.scope.before, 'days').startOf('day').valueOf();
       this.state.options.times.lastTime = dayjs_min_default()(this.state.options.times.lastTaskTime).locale(this.state.options.locale.name).endOf('day').add(this.state.options.scope.after, 'days').endOf('day').valueOf();
       this.recalculateTimes();
     },
     /**
      * Calculate steps
-     * Steps are days by default
+     * Steps are calculated based on stepDuration (day, week, month, quarter)
      * Each step contain information about time offset and pixel offset of this time inside gantt chart
      */
     calculateSteps() {
       const steps = [];
       const lastMs = dayjs_min_default()(this.state.options.times.lastTime).valueOf();
-      const currentDate = dayjs_min_default()(this.state.options.times.firstTime);
+      const stepDuration = this.state.options.times.stepDuration;
+
+      // Get the appropriate startOf method based on step duration
+      const getStartOf = (date, duration) => {
+        switch (duration) {
+          case 'quarter':
+            return date.startOf('quarter');
+          case 'month':
+            return date.startOf('month');
+          case 'week':
+            return date.startOf('week');
+          case 'day':
+          default:
+            return date.startOf('day');
+        }
+      };
+      const firstDate = dayjs_min_default()(this.state.options.times.firstTime);
       steps.push({
-        time: currentDate.valueOf(),
+        time: firstDate.valueOf(),
         offset: {
           ms: 0,
           px: 0
         }
       });
-      for (let currentDate = dayjs_min_default()(this.state.options.times.firstTime).add(1, this.state.options.times.stepDuration).startOf('day'); currentDate.valueOf() <= lastMs; currentDate = currentDate.add(1, this.state.options.times.stepDuration).startOf('day')) {
+      let currentDate = getStartOf(firstDate.clone().add(1, stepDuration), stepDuration);
+      while (currentDate.valueOf() <= lastMs) {
         const offsetMs = currentDate.diff(this.state.options.times.firstTime, 'milliseconds');
-        const offsetPx = offsetMs / this.state.options.times.timePerPixel;
+        const offsetPx = Math.round(offsetMs / this.state.options.times.timePerPixel); // Round to avoid sub-pixel issues
         const step = {
           time: currentDate.valueOf(),
           offset: {
@@ -8817,14 +10963,17 @@ const GanttElastic = {
         const previousStep = steps[steps.length - 1];
         previousStep.width = {
           ms: offsetMs - previousStep.offset.ms,
-          px: offsetPx - previousStep.offset.px
+          px: Math.round(offsetPx - previousStep.offset.px) // Round to avoid sub-pixel issues
         };
         steps.push(step);
+
+        // Move to next step
+        currentDate = getStartOf(currentDate.add(1, stepDuration), stepDuration);
       }
       const lastStep = steps[steps.length - 1];
       lastStep.width = {
         ms: this.state.options.times.totalViewDurationMs - lastStep.offset.ms,
-        px: this.state.options.times.totalViewDurationPx - lastStep.offset.px
+        px: Math.round(this.state.options.times.totalViewDurationPx - lastStep.offset.px) // Round to avoid sub-pixel issues
       };
       this.state.options.times.steps = steps;
     },
@@ -8963,6 +11112,32 @@ const GanttElastic = {
         currentDate = currentDate.add(1, 'month');
       }
     },
+    /**
+     * Calculate dynamic start date based on view mode and current date
+     * Formula: Min((Min Date from data), case when day then Current Date when week then current date - 1 week, when month then Current Month -1 when quarter then current quarter - 1)
+     */
+    calculateDynamicStartDate() {
+      const currentDate = dayjs_min_default()();
+      const stepDuration = this.state.options.times.stepDuration;
+      let viewBasedStartDate;
+      switch (stepDuration) {
+        case 'day':
+          viewBasedStartDate = currentDate.startOf('day');
+          break;
+        case 'week':
+          viewBasedStartDate = currentDate.subtract(1, 'week').startOf('week');
+          break;
+        case 'month':
+          viewBasedStartDate = currentDate.subtract(1, 'month').startOf('month');
+          break;
+        case 'quarter':
+          viewBasedStartDate = currentDate.subtract(1, 'quarter').startOf('quarter');
+          break;
+        default:
+          viewBasedStartDate = currentDate.startOf('day');
+      }
+      return viewBasedStartDate;
+    },
     /**
      * Prepare time and date variables for gantt
      */
@@ -8980,7 +11155,14 @@ const GanttElastic = {
       }
       this.state.options.times.firstTaskTime = firstTaskTime;
       this.state.options.times.lastTaskTime = lastTaskTime;
-      this.state.options.times.firstTime = dayjs_min_default()(firstTaskTime).locale(this.state.options.locale.name).startOf('day').subtract(this.state.options.scope.before, 'days').startOf('day').valueOf();
+
+      // Calculate dynamic start date based on the formula
+      const minDataDate = dayjs_min_default()(firstTaskTime).startOf('day');
+      const viewBasedStartDate = this.calculateDynamicStartDate();
+
+      // Use the minimum of data start date and view-based start date
+      const dynamicStartDate = minDataDate.isBefore(viewBasedStartDate) ? minDataDate : viewBasedStartDate;
+      this.state.options.times.firstTime = dynamicStartDate.locale(this.state.options.locale.name).subtract(this.state.options.scope.before, 'days').startOf('day').valueOf();
       this.state.options.times.lastTime = dayjs_min_default()(lastTaskTime).locale(this.state.options.locale.name).endOf('day').add(this.state.options.scope.after, 'days').endOf('day').valueOf();
     },
     /**
@@ -9023,6 +11205,11 @@ const GanttElastic = {
         });
       }
       this.calculateTaskListColumnsDimensions();
+
+      // Recalculate times when window is resized to adjust step widths
+      this.recalculateTimes();
+      this.calculateSteps();
+      this.computeCalendarWidths();
       this.$emit('calendar-recalculate');
       this.syncScrollTop();
     }
@@ -9189,14 +11376,14 @@ const GanttElastic = {
   }
 };
 /* harmony default export */ var GanttElasticvue_type_script_lang_js = (GanttElastic);
-;// ./src/components/GanttElastic.vue?vue&type=script&lang=js
- /* harmony default export */ var components_GanttElasticvue_type_script_lang_js = (GanttElasticvue_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/GanttElastic.vue?vue&type=style&index=0&id=bf79b1fe&prod&lang=css
+;// ./src/GanttElastic.vue?vue&type=script&lang=js
+ /* harmony default export */ var src_GanttElasticvue_type_script_lang_js = (GanttElasticvue_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/GanttElastic.vue?vue&type=style&index=0&id=2767341e&prod&lang=css
 // extracted by mini-css-extract-plugin
 
-;// ./src/components/GanttElastic.vue?vue&type=style&index=0&id=bf79b1fe&prod&lang=css
+;// ./src/GanttElastic.vue?vue&type=style&index=0&id=2767341e&prod&lang=css
 
-;// ./src/components/GanttElastic.vue
+;// ./src/GanttElastic.vue
 
 
 
@@ -9206,7 +11393,68 @@ const GanttElastic = {
 /* normalize component */
 
 var GanttElastic_component = normalizeComponent(
-  components_GanttElasticvue_type_script_lang_js,
+  src_GanttElasticvue_type_script_lang_js,
+  GanttElasticvue_type_template_id_2767341e_render,
+  GanttElasticvue_type_template_id_2767341e_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var src_GanttElastic = (GanttElastic_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/GanttElastic.standalone.vue?vue&type=script&lang=js
+
+/* harmony default export */ var GanttElastic_standalonevue_type_script_lang_js = ({
+  name: 'GanttElasticStandalone',
+  components: {
+    'gantt-elastic': src_GanttElastic
+  },
+  props: {
+    // Props to receive from parent
+    tasks: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    dynamicStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    header: {
+      type: Object,
+      default: () => ({})
+    },
+    footer: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      components: {
+        header: this.header,
+        footer: this.footer
+      }
+    };
+  }
+});
+;// ./src/GanttElastic.standalone.vue?vue&type=script&lang=js
+ /* harmony default export */ var src_GanttElastic_standalonevue_type_script_lang_js = (GanttElastic_standalonevue_type_script_lang_js); 
+;// ./src/GanttElastic.standalone.vue
+
+
+
+
+
+/* normalize component */
+;
+var GanttElastic_standalone_component = normalizeComponent(
+  src_GanttElastic_standalonevue_type_script_lang_js,
   render,
   staticRenderFns,
   false,
@@ -9216,12 +11464,12 @@ var GanttElastic_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var components_GanttElastic = (GanttElastic_component.exports);
+/* harmony default export */ var GanttElastic_standalone = (GanttElastic_standalone_component.exports);
 ;// ./src/index.js
 
 /* harmony default export */ var src_0 = ({
   install(app, options = {}) {
-    app.component('tg-ganttchart', components_GanttElastic);
+    app.component('tg-ganttchart', GanttElastic_standalone);
   }
 });
 // if (typeof window !== 'undefined' && window.Vue) {