tg-ganttchart 0.0.7 → 0.0.8

package/src/GanttElastic.vue

@@ -0,0 +1,2305 @@
+<template>
+  <div class="gantt-elastic" style="width:100%">
+    <gantt-header v-if="isHeaderVisible == true" slot="header"></gantt-header>
+    <slot name="header"></slot>
+    <main-view ref="mainView"></main-view>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+// import VueInstance from 'vue';
+import dayjs from 'dayjs';
+
+import MainView from './components/MainView.vue';
+import getStyle from './style.js';
+import ResizeObserver from 'resize-observer-polyfill';
+import GanttHeader from './components/Header/Header.vue';
+
+
+const ctx = document.createElement('canvas').getContext('2d');
+// let VueInst = VueInstance;
+// function initVue() {
+//   if (typeof Vue !== 'undefined' && typeof VueInst === 'undefined') {
+//     VueInst = Vue;
+//   }
+// }
+// initVue();
+
+let hourWidthCache = null;
+
+/**
+ * Helper function to fill out empty options in user settings
+ *
+ * @param {object} userOptions - initial user options that will merge with those below
+ * @returns {object} merged options
+ */
+function getOptions(userOptions) {
+  let localeName = 'en';
+  if (typeof userOptions.locale !== 'undefined' && typeof userOptions.locale.name !== 'undefined') {
+    localeName = userOptions.locale.name;
+  }
+  return {
+    slots: {
+      header: {}
+    },
+    taskMapping: {
+      //*
+      id: 'id',
+      start: 'start',
+      label: 'label',
+      duration: 'duration',
+      progress: 'progress',
+      type: 'type',
+      style: 'style',
+      collapsed: 'collapsed'
+    },
+    width: 0,
+    height: 0,
+    clientWidth: 0,
+    outerHeight: 0,
+    rowsHeight: 0,
+    allVisibleTasksHeight: 0,
+    scroll: {
+      scrolling: false,
+      dragXMoveMultiplier: 3, //*
+      dragYMoveMultiplier: 2, //*
+      top: 0,
+      taskList: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      chart: {
+        left: 0,
+        right: 0,
+        percent: 0,
+        timePercent: 0,
+        top: 0,
+        bottom: 0,
+        time: 0,
+        timeCenter: 0,
+        dateTime: {
+          left: '',
+          right: ''
+        }
+      }
+    },
+    scope: {
+      //*
+      before: 1,
+      after: 1
+    },
+    times: {
+      timeScale: 60 * 1000,
+      timeZoom: 17, //*
+      timePerPixel: 0,
+      firstTime: null,
+      lastTime: null,
+      firstTaskTime: 0,
+      lastTaskTime: 0,
+      totalViewDurationMs: 0,
+      totalViewDurationPx: 0,
+      stepDuration: 'day',
+      steps: []
+    },
+    row: {
+      height: 24 //*
+    },
+    maxRows: 20, //*
+    maxHeight: 0, //*
+    chart: {
+      grid: {
+        horizontal: {
+          gap: 6 //*
+        }
+      },
+      progress: {
+        width: 20, //*
+        height: 6, //*
+        pattern: true,
+        bar: false
+      },
+      text: {
+        offset: 8, //*
+        xPadding: 12, //*
+        display: true //*
+      },
+      expander: {
+        type: 'chart',
+        display: true, //*
+        displayIfTaskListHidden: true, //*
+        offset: 4, //*
+        size: 18
+      }
+    },
+    taskList: {
+      display: true, //*
+      resizeAfterThreshold: true, //*
+      widthThreshold: 75, //*
+      columns: [
+        //*
+        {
+          id: 0,
+          label: 'ID',
+          value: 'id',
+          width: 40
+        }
+      ],
+      percent: 100, //*
+      width: 0,
+      finalWidth: 0,
+      widthFromPercentage: 0,
+      minWidth: 18,
+      expander: {
+        type: 'task-list',
+        size: 18,
+        columnWidth: 24,
+        padding: 16,
+        margin: 10,
+        straight: false
+      }
+    },
+    calendar: {
+      workingDays: [1, 2, 3, 4, 5], //*
+      gap: 6, //*
+      height: 0,
+      strokeWidth: 1,
+      hour: {
+        height: 20, //*
+        display: true, //*
+        widths: [],
+        maxWidths: { short: 0, medium: 0, long: 0 },
+        formatted: {
+          long: [],
+          medium: [],
+          short: []
+        },
+        format: {
+          //*
+          long(date) {
+            return date.format('HH:mm');
+          },
+          medium(date) {
+            return date.format('HH:mm');
+          },
+          short(date) {
+            return date.format('HH');
+          }
+        }
+      },
+      day: {
+        height: 20, //*
+        display: true, //*
+        widths: [],
+        maxWidths: { short: 0, medium: 0, long: 0 },
+        format: {
+          long(date) {
+            return date.format('DD dddd');
+          },
+          medium(date) {
+            return date.format('DD ddd');
+          },
+          short(date) {
+            return date.format('DD');
+          }
+        }
+      },
+      month: {
+        height: 20, //*
+        display: true, //*
+        widths: [],
+        maxWidths: { short: 0, medium: 0, long: 0 },
+        format: {
+          //*
+          short(date) {
+            return date.format('MM');
+          },
+          medium(date) {
+            return date.format("MMM 'YY");
+          },
+          long(date) {
+            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: {
+      //*
+      name: 'en',
+      weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+      weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+      weekdaysMin: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),
+      months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
+      monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
+      weekStart: 1,
+      relativeTime: {
+        future: 'in %s',
+        past: '%s ago',
+        s: 'a few seconds',
+        m: 'a minute',
+        mm: '%d minutes',
+        h: 'an hour',
+        hh: '%d hours',
+        d: 'a day',
+        dd: '%d days',
+        M: 'a month',
+        MM: '%d months',
+        y: 'a year',
+        yy: '%d years'
+      },
+      formats: {
+        LT: 'HH:mm',
+        LTS: 'HH:mm:ss',
+        L: 'DD/MM/YYYY',
+        LL: 'D MMMM YYYY',
+        LLL: 'D MMMM YYYY HH:mm',
+        LLLL: 'dddd, D MMMM YYYY HH:mm'
+      },
+      ordinal: n => {
+        const s = ['th', 'st', 'nd', 'rd'];
+        const v = n % 100;
+        return `[${n}${s[(v - 20) % 10] || s[v] || s[0]}]`;
+      }
+    }
+  };
+}
+
+/**
+ * Prepare style
+ *
+ * @returns {object}
+ */
+function prepareStyle(userStyle) {
+  let fontSize = '12px';
+  let fontFamily = window
+    .getComputedStyle(document.body)
+    .getPropertyValue('font-family')
+    .toString();
+  if (typeof userStyle !== 'undefined') {
+    if (typeof userStyle.fontSize !== 'undefined') {
+      fontSize = userStyle.fontSize;
+    }
+    if (typeof userStyle.fontFamily !== 'undefined') {
+      fontFamily = userStyle.fontFamily;
+    }
+  }
+  return getStyle(fontSize, fontFamily);
+}
+
+/**
+ * Helper function to determine if specified variable is an object
+ *
+ * @param {any} item
+ *
+ * @returns {boolean}
+ */
+function isObject(item) {
+  return (
+    item &&
+    typeof item === 'object' &&
+    !Array.isArray(item) &&
+    !(item instanceof HTMLElement) &&
+    !(item instanceof CanvasRenderingContext2D) &&
+    typeof item !== 'function'
+  );
+}
+
+/**
+ * Helper function which will merge objects recursively - creating brand new one - like clone
+ *
+ * @param {object} target
+ * @params {object} sources
+ *
+ * @returns {object}
+ */
+export function mergeDeep(target, ...sources) {
+  if (!sources.length) {
+    return target;
+  }
+  const source = sources.shift();
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (typeof target[key] === 'undefined') {
+          target[key] = {};
+        }
+        target[key] = mergeDeep(target[key], source[key]);
+      } else if (Array.isArray(source[key])) {
+        target[key] = [];
+        for (let item of source[key]) {
+          if (isObject(item)) {
+            target[key].push(mergeDeep({}, item));
+            continue;
+          }
+          target[key].push(item);
+        }
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+  return mergeDeep(target, ...sources);
+}
+
+/**
+ * Detect if object or array is observable
+ *
+ * @param {object|array} obj
+ *
+ * @returns {boolean}
+ */
+function isObservable(obj) {
+  return typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, '__ob__');
+}
+
+
+/**
+ * Same as above but with reactivity in mind
+ *
+ * @param {object} target
+ * @params {object} sources
+ *
+ * @returns {object}
+ */
+export function mergeDeepReactive(component, target, ...sources) {
+  if (!sources.length) {
+    return target;
+  }
+  const source = sources.shift();
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (typeof target[key] === 'undefined') {
+          component.$set(target, key, {});
+        }
+        mergeDeepReactive(component, target[key], source[key]);
+      } else if (Array.isArray(source[key])) {
+        component.$set(target, key, source[key]);
+      } else if (typeof source[key] === 'function') {
+        if (source[key].toString().indexOf('[native code]') === -1) {
+          target[key] = source[key];
+        }
+      } else {
+        component.$set(target, key, source[key]);
+      }
+    }
+  }
+  return mergeDeepReactive(component, target, ...sources);
+}
+/**
+ * Check if objects or arrays are equal by comparing nested values
+ *
+ * @param {object|array} left
+ * @param {object|array} right
+ *
+ * @returns {boolean}
+ */
+export function notEqualDeep(left, right, cache = [], path = '') {
+  if (typeof right !== typeof left) {
+    return { left, right, what: path + '.typeof' };
+  } else if (Array.isArray(left) && !Array.isArray(right)) {
+    return { left, right, what: path + '.isArray' };
+  } else if (Array.isArray(right) && !Array.isArray(left)) {
+    return { left, right, what: path + '.isArray' };
+  } else if (Array.isArray(left) && Array.isArray(right)) {
+    if (left.length !== right.length) {
+      return { left, right, what: path + '.length' };
+    }
+    let what;
+    for (let index = 0, len = left.length; index < len; index++) {
+      if ((what = notEqualDeep(left[index], right[index], cache, path + '.' + index))) {
+        return what;
+      }
+    }
+  } else if (isObject(left) && !isObject(right)) {
+    return { left, right, what: path + '.isObject' };
+  } else if (isObject(right) && !isObject(left)) {
+    return { left, right, what: path + '.isObject' };
+  } else if (isObject(left) && isObject(right)) {
+    for (let key in left) {
+      if (
+        !Object.prototype.hasOwnProperty.call(left, key) ||
+        !Object.prototype.propertyIsEnumerable.call(left, key)
+      ) {
+        continue;
+      }
+
+      if (!Object.prototype.hasOwnProperty.call(right, key)) {
+        return { left, right, what: path + '.' + key };
+      }
+      let what;
+      if ((what = notEqualDeep(left[key], right[key], cache, path + '.' + key))) {
+        return what;
+      }
+    }
+  } else if (left !== right) {
+    return { left, right, what: path + '. !==' };
+  }
+  return false;
+}
+
+/**
+ * GanttElastic
+ * Main vue component
+ */
+const GanttElastic = {
+  name: 'GanttElastic',
+  components: {
+    MainView,
+    'gantt-header': GanttHeader
+  },
+  props: ['tasks', 'options', 'dynamicStyle', 'isHeaderVisible', 'projectName'],
+  provide() {
+    const provider = {};
+    const self = this;
+    Object.defineProperty(provider, 'root', {
+      enumerable: true,
+      get: () => self
+    });
+    return provider;
+  },
+  data() {
+    return {
+      state: {
+        tasks: [],
+        options: {
+          scrollBarHeight: 0,
+          allVisibleTasksHeight: 0,
+          outerHeight: 0,
+          scroll: {
+            left: 0,
+            top: 0
+          }
+        },
+        dynamicStyle: {},
+        refs: {},
+        tasksById: {},
+        taskTree: {},
+        ctx,
+        emitTasksChanges: true, // some operations may pause emitting changes to parent component
+        emitOptionsChanges: true, // some operations may pause emitting changes to parent component
+        resizeObserver: null,
+        unwatchTasks: null,
+        unwatchOptions: null,
+        unwatchStyle: null,
+        unwatchOutputTasks: null,
+        unwatchOutputOptions: null,
+        unwatchOutputStyle: null
+      }
+    };
+  },
+  methods: {
+    mergeDeep,
+    mergeDeepReactive,
+
+    /**
+     * Calculate height of scrollbar in current browser
+     *
+     * @returns {number}
+     */
+    getScrollBarHeight() {
+      const outer = document.createElement('div');
+      outer.style.visibility = 'hidden';
+      outer.style.height = '100px';
+      outer.style.msOverflowStyle = 'scrollbar';
+      document.body.appendChild(outer);
+      var noScroll = outer.offsetHeight;
+      outer.style.overflow = 'scroll';
+      var inner = document.createElement('div');
+      inner.style.height = '100%';
+      outer.appendChild(inner);
+      var withScroll = inner.offsetHeight;
+      outer.parentNode.removeChild(outer);
+      const height = noScroll - withScroll;
+      this.style['chart-scroll-container--vertical']['margin-left'] = `-${height}px`;
+      return (this.state.options.scrollBarHeight = height);
+    },
+
+    /**
+     * Fill out empty task properties and make it reactive
+     *
+     * @param {array} tasks
+     */
+    fillTasks(tasks) {
+      for (let task of tasks) {
+        if (typeof task.x === 'undefined') {
+          task.x = 0;
+        }
+        if (typeof task.y === 'undefined') {
+          task.y = 0;
+        }
+        if (typeof task.width === 'undefined') {
+          task.width = 0;
+        }
+        if (typeof task.height === 'undefined') {
+          task.height = 0;
+        }
+        if (typeof task.mouseOver === 'undefined') {
+          task.mouseOver = false;
+        }
+        if (typeof task.collapsed === 'undefined') {
+          task.collapsed = false;
+        }
+        if (typeof task.dependentOn === 'undefined') {
+          task.dependentOn = [];
+        }
+        if (typeof task.parentId === 'undefined') {
+          task.parentId = null;
+        }
+        if (typeof task.style === 'undefined') {
+          task.style = {};
+        }
+        if (typeof task.children === 'undefined') {
+          task.children = [];
+        }
+        if (typeof task.allChildren === 'undefined') {
+          task.allChildren = [];
+        }
+        if (typeof task.parents === 'undefined') {
+          task.parents = [];
+        }
+        if (typeof task.parent === 'undefined') {
+          task.parent = null;
+        }
+        if (typeof task.startTime === 'undefined') {
+          task.startTime = dayjs(task.start).valueOf();
+        }
+        if (typeof task.endTime === 'undefined' && Object.prototype.hasOwnProperty.call(task, 'end')) {
+          task.endTime = dayjs(task.end).valueOf();
+        } else if (typeof task.endTime === 'undefined' && Object.prototype.hasOwnProperty.call(task, 'duration')) {
+          task.endTime = task.startTime + task.duration;
+        }
+        if (typeof task.duration === 'undefined' && Object.prototype.hasOwnProperty.call(task, 'endTime')) {
+          task.duration = task.endTime - task.startTime;
+        }
+      }
+      return tasks;
+    },
+
+    /**
+     * Map tasks
+     *
+     * @param {Array} tasks
+     * @param {Object} options
+     */
+    mapTasks(tasks, options) {
+      for (let [index, task] of tasks.entries()) {
+        tasks[index] = {
+          ...task,
+          id: task[options.taskMapping.id],
+          start: task[options.taskMapping.start],
+          label: task[options.taskMapping.label],
+          duration: task[options.taskMapping.duration],
+          progress: task[options.taskMapping.progress],
+          type: task[options.taskMapping.type],
+          style: task[options.taskMapping.style],
+          collapsed: task[options.taskMapping.collapsed]
+        };
+      }
+      return tasks;
+    },
+
+    /**
+     * Initialize component
+     */
+    initialize(itsUpdate = '') {
+      let options = mergeDeep({}, this.state.options, getOptions(this.options), this.options);
+      let tasks = this.mapTasks(this.tasks, options);
+      if (Object.keys(this.state.dynamicStyle).length === 0) {
+        this.initializeStyle();
+      }
+      dayjs.locale(options.locale, null, true);
+      dayjs.locale(options.locale.name);
+      if (typeof options.taskList === 'undefined') {
+        options.taskList = {};
+      }
+      options.taskList.columns = options.taskList.columns.map((column, index) => {
+        column.thresholdPercent = 100;
+        column.widthFromPercentage = 0;
+        column.finalWidth = 0;
+        if (typeof column.height === 'undefined') {
+          column.height = 0;
+        }
+        if (typeof column.style === 'undefined') {
+          column.style = {};
+        }
+        column._id = `${index}-${column.label}`;
+        return column;
+      });
+      this.state.options = options;
+      tasks = this.fillTasks(tasks);
+      this.state.tasksById = this.resetTaskTree(tasks);
+      this.state.taskTree = this.makeTaskTree(this.state.rootTask, tasks);
+      
+      // 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;
+      this.globalOnResize();
+    },
+
+    /**
+     * Initialize style
+     */
+    initializeStyle() {
+      this.state.dynamicStyle = mergeDeep({}, prepareStyle(this.dynamicStyle), this.dynamicStyle);
+    },
+
+    /**
+     * Get calendar rows outer height
+     *
+     * @returns {int}
+     */
+    getCalendarHeight() {
+      return this.state.options.calendar.height + this.state.options.calendar.strokeWidth;
+    },
+
+    /**
+     * Get maximal level of nested task children
+     *
+     * @returns {int}
+     */
+    getMaximalLevel() {
+      let maximalLevel = 0;
+      this.state.tasks.forEach(task => {
+        if (task.parents.length > maximalLevel) {
+          maximalLevel = task.parents.length;
+        }
+      });
+      return maximalLevel - 1;
+    },
+
+    /**
+     * Get maximal expander width - to calculate straight task list text
+     *
+     * @returns {int}
+     */
+    getMaximalExpanderWidth() {
+      return (
+        this.getMaximalLevel() * this.state.options.taskList.expander.padding +
+        this.state.options.taskList.expander.margin
+      );
+    },
+
+    /**
+     * Synchronize scrollTop property when row height is changed
+     */
+    syncScrollTop() {
+      if (
+        this.state.refs.taskListItems &&
+        this.state.refs.chartGraph.scrollTop !== this.state.refs.taskListItems.scrollTop
+      ) {
+        this.state.options.scroll.top = this.state.refs.taskListItems.scrollTop = this.state.refs.chartScrollContainerVertical.scrollTop = this.state.refs.chartGraph.scrollTop;
+      }
+    },
+
+    /**
+     * Calculate task list columns dimensions
+     */
+    calculateTaskListColumnsDimensions() {
+      let final = 0;
+      let percentage = 0;
+      for (let column of this.state.options.taskList.columns) {
+        if (column.expander) {
+          column.widthFromPercentage =
+            ((this.getMaximalExpanderWidth() + column.width) / 100) * this.state.options.taskList.percent;
+        } else {
+          column.widthFromPercentage = (column.width / 100) * this.state.options.taskList.percent;
+        }
+        percentage += column.widthFromPercentage;
+        column.finalWidth = (column.thresholdPercent * column.widthFromPercentage) / 100;
+        final += column.finalWidth;
+        column.height = this.getTaskHeight() - this.style['grid-line-horizontal']['stroke-width'];
+      }
+      this.state.options.taskList.widthFromPercentage = percentage;
+      this.state.options.taskList.finalWidth = final;
+    },
+
+    /**
+     * Reset task tree - which is used to create tree like structure inside task list
+     */
+    resetTaskTree(tasks) {
+      this.$set(this.state, 'rootTask', {
+        id: null,
+        label: 'root',
+        children: [],
+        allChildren: [],
+        parents: [],
+        parent: null,
+        __root: true
+      });
+      const tasksById = {};
+      for (let i = 0, len = tasks.length; i < len; i++) {
+        let current = tasks[i];
+        current.children = [];
+        current.allChildren = [];
+        current.parent = null;
+        current.parents = [];
+        tasksById[current.id] = current;
+      }
+      return tasksById;
+    },
+
+    /**
+     * Make task tree, after reset - look above
+     *
+     * @param {object} task
+     * @returns {object} tasks with children and parents
+     */
+    makeTaskTree(task, tasks) {
+      for (let i = 0, len = tasks.length; i < len; i++) {
+        let current = tasks[i];
+        if (current.parentId === task.id) {
+          if (task.parents.length) {
+            task.parents.forEach(parent => current.parents.push(parent));
+          }
+          if (!Object.prototype.propertyIsEnumerable.call(task, '__root')) {
+            current.parents.push(task.id);
+            current.parent = task.id;
+          } else {
+            current.parents = [];
+            current.parent = null;
+          }
+          current = this.makeTaskTree(current, tasks);
+          task.allChildren.push(current.id);
+          task.children.push(current.id);
+          current.allChildren.forEach(childId => task.allChildren.push(childId));
+        }
+      }
+      
+      
+      return task;
+    },
+
+    /**
+     * Get task by id
+     *
+     * @param {any} taskId
+     * @returns {object|null} task
+     */
+    getTask(taskId) {
+      if (typeof this.state.tasksById[taskId] !== 'undefined') {
+        return this.state.tasksById[taskId];
+      }
+      return null;
+    },
+
+    /**
+     * Get children tasks for specified taskId
+     *
+     * @param {any} taskId
+     * @returns {array} children
+     */
+    getChildren(taskId) {
+      return this.state.tasks.filter(task => task.parent === taskId);
+    },
+
+    /**
+     * Is task visible
+     *
+     * @param {Number|String|Task} task
+     */
+    isTaskVisible(task) {
+      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++) {
+        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;
+    },
+
+    /**
+     * Get svg
+     *
+     * @returns {string} html svg image of gantt
+     */
+    getSVG() {
+      return this.state.options.mainView.outerHTML;
+    },
+
+    /**
+     * Get image
+     *
+     * @param {string} type image format
+     * @returns {Promise} when resolved returns base64 image string of gantt
+     */
+    getImage(type = 'image/png') {
+      return new Promise(resolve => {
+        const img = new Image();
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          canvas.width = this.state.options.mainView.clientWidth;
+          canvas.height = this.state.options.rowsHeight;
+          canvas.getContext('2d').drawImage(img, 0, 0);
+          resolve(canvas.toDataURL(type));
+        };
+        img.src = 'data:image/svg+xml,' + encodeURIComponent(this.getSVG());
+      });
+    },
+
+    /**
+     * Get gantt total height
+     *
+     * @returns {number}
+     */
+    getHeight(visibleTasks, outer = false) {
+      let height =
+        visibleTasks.length * (this.state.options.row.height + this.state.options.chart.grid.horizontal.gap * 2) +
+        this.state.options.calendar.height +
+        this.state.options.calendar.strokeWidth +
+        this.state.options.calendar.gap;
+      if (outer) {
+        height += this.state.options.scrollBarHeight;
+      }
+      return height;
+    },
+
+    /**
+     * Get one task height
+     *
+     * @returns {number}
+     */
+    getTaskHeight(withStroke = false) {
+      if (withStroke) {
+        return (
+          this.state.options.row.height +
+          this.state.options.chart.grid.horizontal.gap * 2 +
+          this.style['grid-line-horizontal']['stroke-width']
+        );
+      }
+      return this.state.options.row.height + this.state.options.chart.grid.horizontal.gap * 2;
+    },
+
+    /**
+     * Get specified tasks height
+     *
+     * @returns {number}
+     */
+    getTasksHeight(visibleTasks) {
+      return visibleTasks.length * this.getTaskHeight();
+    },
+
+    /**
+     * Convert time (in milliseconds) to pixel offset inside chart
+     *
+     * @param {int} ms
+     * @returns {number}
+     */
+    timeToPixelOffsetX(ms) {
+      let x = ms - this.state.options.times.firstTime;
+      if (x) {
+        x = x / this.state.options.times.timePerPixel;
+      }
+      return x;
+    },
+
+    /**
+     * Convert pixel offset inside chart to corresponding time offset in milliseconds
+     *
+     * @param {number} pixelOffsetX
+     * @returns {int} milliseconds
+     */
+    pixelOffsetXToTime(pixelOffsetX) {
+      let offset = pixelOffsetX + this.style['grid-line-vertical']['stroke-width'] / 2;
+      return offset * this.state.options.times.timePerPixel + this.state.options.times.firstTime;
+    },
+
+    /**
+     * Determine if element is inside current view port
+     *
+     * @param {number} x - element placement
+     * @param {number} width - element width
+     * @param {int} buffer - or threshold, if element is outside viewport but offset from view port is below this value return true
+     * @returns {boolean}
+     */
+    isInsideViewPort(x, width, buffer = 5000) {
+      return (
+        (x + width + buffer >= this.state.options.scroll.chart.left &&
+          x - buffer <= this.state.options.scroll.chart.right) ||
+        (x - buffer <= this.state.options.scroll.chart.left &&
+          x + width + buffer >= this.state.options.scroll.chart.right)
+      );
+    },
+
+    /**
+     * Chart scroll event handler
+     *
+     * @param {event} ev
+     */
+    onScrollChart(ev) {
+      this._onScrollChart(
+        this.state.refs.chartScrollContainerHorizontal.scrollLeft,
+        this.state.refs.chartScrollContainerVertical.scrollTop
+      );
+    },
+
+    /**
+     * After same as above but with different arguments - normalized
+     *
+     * @param {number} left
+     * @param {number} top
+     */
+    _onScrollChart(left, top) {
+      if (this.state.options.scroll.chart.left === left && this.state.options.scroll.chart.top === top) {
+        return;
+      }
+      const chartContainerWidth = this.state.refs.chartContainer.clientWidth;
+      this.state.options.scroll.chart.left = left;
+      this.state.options.scroll.chart.right = left + chartContainerWidth;
+      this.state.options.scroll.chart.percent = (left / this.state.options.times.totalViewDurationPx) * 100;
+      this.state.options.scroll.chart.top = top;
+      this.state.options.scroll.chart.time = this.pixelOffsetXToTime(left);
+      this.state.options.scroll.chart.timeCenter = this.pixelOffsetXToTime(left + chartContainerWidth / 2);
+      this.state.options.scroll.chart.dateTime.left = dayjs(this.state.options.scroll.chart.time).valueOf();
+      this.state.options.scroll.chart.dateTime.right = dayjs(
+        this.pixelOffsetXToTime(left + this.state.refs.chart.clientWidth)
+      ).valueOf();
+      this.scrollTo(left, top);
+    },
+
+    /**
+     * Scroll current chart to specified time (in milliseconds)
+     *
+     * @param {int} time
+     */
+    scrollToTime(time) {
+      let pos = this.timeToPixelOffsetX(time);
+      const chartContainerWidth = this.state.refs.chartContainer.clientWidth;
+      pos = pos - chartContainerWidth / 2;
+      if (pos > this.state.options.width) {
+        pos = this.state.options.width - chartContainerWidth;
+      }
+      this.scrollTo(pos);
+    },
+
+    /**
+     * Scroll chart or task list to specified pixel values
+     *
+     * @param {number|null} left
+     * @param {number|null} top
+     */
+    scrollTo(left = null, top = null) {
+      if (left !== null) {
+        this.state.refs.chartCalendarContainer.scrollLeft = left;
+        this.state.refs.chartGraphContainer.scrollLeft = left;
+        this.state.refs.chartScrollContainerHorizontal.scrollLeft = left;
+        this.state.options.scroll.left = left;
+      }
+      if (top !== null) {
+        this.state.refs.chartScrollContainerVertical.scrollTop = top;
+        this.state.refs.chartGraph.scrollTop = top;
+        this.state.refs.taskListItems.scrollTop = top;
+        this.state.options.scroll.top = top;
+        this.syncScrollTop();
+      }
+    },
+
+    /**
+     * After some actions like time zoom change we need to recompensate scroll position
+     * so as a result everything will be in same place
+     */
+    fixScrollPos() {
+      this.scrollToTime(this.state.options.scroll.chart.timeCenter);
+    },
+
+    /**
+     * Mouse wheel event handler
+     */
+    onWheelChart(ev) {
+      if (!ev.shiftKey && ev.deltaX === 0) {
+        let top = this.state.options.scroll.top + ev.deltaY;
+        const chartClientHeight = this.state.options.rowsHeight;
+        const scrollHeight = this.state.refs.chartGraph.scrollHeight - chartClientHeight;
+        if (top < 0) {
+          top = 0;
+        } else if (top > scrollHeight) {
+          top = scrollHeight;
+        }
+        this.scrollTo(null, top);
+      } else if (ev.shiftKey && ev.deltaX === 0) {
+        let left = this.state.options.scroll.left + ev.deltaY;
+        const chartClientWidth = this.state.refs.chartScrollContainerHorizontal.clientWidth;
+        const scrollWidth = this.state.refs.chartScrollContainerHorizontal.scrollWidth - chartClientWidth;
+        if (left < 0) {
+          left = 0;
+        } else if (left > scrollWidth) {
+          left = scrollWidth;
+        }
+        this.scrollTo(left);
+      } else {
+        let left = this.state.options.scroll.left + ev.deltaX;
+        const chartClientWidth = this.state.refs.chartScrollContainerHorizontal.clientWidth;
+        const scrollWidth = this.state.refs.chartScrollContainerHorizontal.scrollWidth - chartClientWidth;
+        if (left < 0) {
+          left = 0;
+        } else if (left > scrollWidth) {
+          left = scrollWidth;
+        }
+        this.scrollTo(left);
+      }
+    },
+
+    /**
+     * Time zoom change event handler
+     */
+    onTimeZoomChange(timeZoom) {
+      this.state.options.times.timeZoom = timeZoom;
+      this.recalculateTimes();
+      this.calculateSteps();
+      this.fixScrollPos();
+    },
+
+    /**
+     * Row height change event handler
+     */
+    onRowHeightChange(height) {
+      this.state.options.row.height = height;
+      this.calculateTaskListColumnsDimensions();
+      this.syncScrollTop();
+    },
+
+    /**
+     * Scope change event handler
+     */
+    onScopeChange(value) {
+      this.state.options.scope.before = value;
+      this.state.options.scope.after = value;
+      this.initTimes();
+      this.calculateSteps();
+      this.computeCalendarWidths();
+      this.fixScrollPos();
+    },
+
+    /**
+     * Task list width change event handler
+     */
+    onTaskListWidthChange(value) {
+      this.state.options.taskList.percent = value;
+      this.calculateTaskListColumnsDimensions();
+      this.fixScrollPos();
+    },
+
+    /**
+     * Task list column width change event handler
+     */
+    onTaskListColumnWidthChange() {
+      this.calculateTaskListColumnsDimensions();
+      this.fixScrollPos();
+    },
+
+    /**
+     * Listen to specified event names
+     */
+    initializeEvents() {
+      this.$on('chart-scroll-horizontal', this.onScrollChart);
+      this.$on('chart-scroll-vertical', this.onScrollChart);
+      this.$on('chart-wheel', this.onWheelChart);
+      this.$on('times-timeZoom-change', this.onTimeZoomChange);
+      this.$on('row-height-change', this.onRowHeightChange);
+      this.$on('scope-change', this.onScopeChange);
+      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(this.state.options.times.lastTime).diff(
+        this.state.options.times.firstTime,
+        'milliseconds'
+      );
+      
+      switch (stepDuration) {
+        case 'quarter':
+          return Math.ceil(dayjs(this.state.options.times.lastTime).diff(
+            dayjs(this.state.options.times.firstTime), 'quarter', true
+          ));
+        case 'month':
+          return Math.ceil(dayjs(this.state.options.times.lastTime).diff(
+            dayjs(this.state.options.times.firstTime), 'month', true
+          ));
+        case 'week':
+          return Math.ceil(dayjs(this.state.options.times.lastTime).diff(
+            dayjs(this.state.options.times.firstTime), 'week', true
+          ));
+        case 'day':
+        default:
+          return Math.ceil(dayjs(this.state.options.times.lastTime).diff(
+            dayjs(this.state.options.times.firstTime), 'day', true
+          ));
+      }
+    },
+
+    /**
+     * When some action was performed (scale change for example) - recalculate time variables
+     */
+    recalculateTimes() {
+      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(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(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;
+      
+      // 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() {
+      // Calculate dynamic start date based on the formula
+      const minDataDate = dayjs(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(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 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(this.state.options.times.lastTime).valueOf();
+      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(this.state.options.times.firstTime);
+      steps.push({
+        time: firstDate.valueOf(),
+        offset: {
+          ms: 0,
+          px: 0
+        }
+      });
+
+      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 = Math.round(offsetMs / this.state.options.times.timePerPixel); // Round to avoid sub-pixel issues
+        const step = {
+          time: currentDate.valueOf(),
+          offset: {
+            ms: offsetMs,
+            px: offsetPx
+          }
+        };
+        const previousStep = steps[steps.length - 1];
+        previousStep.width = {
+          ms: offsetMs - previousStep.offset.ms,
+          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: Math.round(this.state.options.times.totalViewDurationPx - lastStep.offset.px) // Round to avoid sub-pixel issues
+      };
+      this.state.options.times.steps = steps;
+    },
+
+    /**
+     * Calculate calendar widths - when scale was changed for example
+     */
+    computeCalendarWidths() {
+      this.computeDayWidths();
+      this.computeHourWidths();
+      this.computeMonthWidths();
+    },
+
+    /**
+     * Compute width of calendar hours column widths basing on text widths
+     */
+    computeHourWidths() {
+      const style = { ...this.style['calendar-row-text'], ...this.style['calendar-row-text--hour'] };
+      this.state.ctx.font = style['font-size'] + ' ' + style['font-family'];
+      const localeName = this.state.options.locale.name;
+      let currentDate = dayjs('2018-01-01T00:00:00').locale(localeName); // any date will be good for hours
+      let maxWidths = this.state.options.calendar.hour.maxWidths;
+      if (maxWidths.length) {
+        return;
+      }
+      for (let formatName in this.state.options.calendar.hour.format) {
+        maxWidths[formatName] = 0;
+      }
+      for (let hour = 0; hour < 24; hour++) {
+        let widths = { hour };
+        for (let formatName in this.state.options.calendar.hour.format) {
+          const hourFormatted = this.state.options.calendar.hour.format[formatName](currentDate);
+          this.state.options.calendar.hour.formatted[formatName].push(hourFormatted);
+          widths[formatName] = this.state.ctx.measureText(hourFormatted).width;
+        }
+        this.state.options.calendar.hour.widths.push(widths);
+        for (let formatName in this.state.options.calendar.hour.format) {
+          if (widths[formatName] > maxWidths[formatName]) {
+            maxWidths[formatName] = widths[formatName];
+          }
+        }
+        currentDate = currentDate.add(1, 'hour');
+      }
+    },
+
+    /**
+     * Compute calendar days column widths basing on text widths
+     */
+    computeDayWidths() {
+      const style = { ...this.style['calendar-row-text'], ...this.style['calendar-row-text--day'] };
+      this.state.ctx.font = style['font-size'] + ' ' + style['font-family'];
+      const localeName = this.state.options.locale.name;
+      let currentDate = dayjs(this.state.options.times.steps[0].time).locale(localeName);
+      let maxWidths = this.state.options.calendar.day.maxWidths;
+      this.state.options.calendar.day.widths = [];
+      Object.keys(this.state.options.calendar.day.format).forEach(formatName => {
+        maxWidths[formatName] = 0;
+      });
+      for (let day = 0, daysLen = this.state.options.times.steps.length; day < daysLen; day++) {
+        const widths = {
+          day
+        };
+        Object.keys(this.state.options.calendar.day.format).forEach(formatName => {
+          widths[formatName] = this.state.ctx.measureText(
+            this.state.options.calendar.day.format[formatName](currentDate)
+          ).width;
+        });
+        this.state.options.calendar.day.widths.push(widths);
+        Object.keys(this.state.options.calendar.day.format).forEach(formatName => {
+          if (widths[formatName] > maxWidths[formatName]) {
+            maxWidths[formatName] = widths[formatName];
+          }
+        });
+        currentDate = currentDate.add(1, 'day');
+      }
+    },
+
+    /**
+     * Months count
+     *
+     * @description Returns number of different months in specified time range
+     *
+     * @param {number} fromTime - date in ms
+     * @param {number} toTime - date in ms
+     *
+     * @returns {number} different months count
+     */
+    monthsCount(fromTime, toTime) {
+      if (fromTime > toTime) {
+        return 0;
+      }
+      let currentMonth = dayjs(fromTime);
+      let previousMonth = currentMonth.clone();
+      let monthsCount = 1;
+      while (currentMonth.valueOf() <= toTime) {
+        currentMonth = currentMonth.add(1, 'day');
+        if (previousMonth.month() !== currentMonth.month()) {
+          monthsCount++;
+        }
+        previousMonth = currentMonth.clone();
+      }
+      return monthsCount;
+    },
+
+    /**
+     * Compute month calendar columns widths basing on text widths
+     */
+    computeMonthWidths() {
+      const style = { ...this.style['calendar-row-text'], ...this.style['calendar-row-text--month'] };
+      this.state.ctx.font = style['font-size'] + ' ' + style['font-family'];
+      let maxWidths = this.state.options.calendar.month.maxWidths;
+      this.state.options.calendar.month.widths = [];
+      Object.keys(this.state.options.calendar.month.format).forEach(formatName => {
+        maxWidths[formatName] = 0;
+      });
+      const localeName = this.state.options.locale.name;
+      let currentDate = dayjs(this.state.options.times.firstTime).locale(localeName);
+      const monthsCount = this.monthsCount(this.state.options.times.firstTime, this.state.options.times.lastTime);
+      for (let month = 0; month < monthsCount; month++) {
+        const widths = {
+          month
+        };
+        Object.keys(this.state.options.calendar.month.format).forEach(formatName => {
+          widths[formatName] = this.state.ctx.measureText(
+            this.state.options.calendar.month.format[formatName](currentDate)
+          ).width;
+        });
+        this.state.options.calendar.month.widths.push(widths);
+        Object.keys(this.state.options.calendar.month.format).forEach(formatName => {
+          if (widths[formatName] > maxWidths[formatName]) {
+            maxWidths[formatName] = widths[formatName];
+          }
+        });
+        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();
+      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
+     */
+    prepareDates() {
+      let firstTaskTime = Number.MAX_SAFE_INTEGER;
+      let lastTaskTime = 0;
+      for (let index = 0, len = this.state.tasks.length; index < len; index++) {
+        let task = this.state.tasks[index];
+        if (task.startTime < firstTaskTime) {
+          firstTaskTime = task.startTime;
+        }
+        if (task.startTime + task.duration > lastTaskTime) {
+          lastTaskTime = task.startTime + task.duration;
+        }
+      }
+      this.state.options.times.firstTaskTime = firstTaskTime;
+      this.state.options.times.lastTaskTime = lastTaskTime;
+      
+      // Calculate dynamic start date based on the formula
+      const minDataDate = dayjs(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(lastTaskTime)
+        .locale(this.state.options.locale.name)
+        .endOf('day')
+        .add(this.state.options.scope.after, 'days')
+        .endOf('day')
+        .valueOf();
+    },
+
+    /**
+     * Setup and calculate everything
+     */
+    setup(itsUpdate = '') {
+      this.initialize(itsUpdate);
+      this.prepareDates();
+      this.initTimes();
+      this.calculateSteps();
+      this.computeCalendarWidths();
+      this.state.options.taskList.width = this.state.options.taskList.columns.reduce(
+        (prev, current) => {
+          return { width: prev.width + current.width };
+        },
+        { width: 0 }
+      ).width;
+    },
+
+    /**
+     * Global resize event (from window.addEventListener)
+     */
+    globalOnResize() {
+      if (typeof this.$el === 'undefined' || !this.$el) {
+        return;
+      }
+      this.state.options.clientWidth = this.$el.clientWidth;
+      if (
+        this.state.options.taskList.widthFromPercentage >
+        (this.state.options.clientWidth / 100) * this.state.options.taskList.widthThreshold
+      ) {
+        const diff =
+          this.state.options.taskList.widthFromPercentage -
+          (this.state.options.clientWidth / 100) * this.state.options.taskList.widthThreshold;
+        let diffPercent = 100 - (diff / this.state.options.taskList.widthFromPercentage) * 100;
+        if (diffPercent < 0) {
+          diffPercent = 0;
+        }
+        this.state.options.taskList.columns.forEach(column => {
+          column.thresholdPercent = diffPercent;
+        });
+      } else {
+        this.state.options.taskList.columns.forEach(column => {
+          column.thresholdPercent = 100;
+        });
+      }
+      this.calculateTaskListColumnsDimensions();
+      
+      // Recalculate times when window is resized to adjust step widths
+      this.recalculateTimes();
+      this.calculateSteps();
+      this.computeCalendarWidths();
+      
+      this.$emit('calendar-recalculate');
+      this.syncScrollTop();
+    }
+  },
+
+  computed: {
+    /**
+     * Get visible tasks
+     * Very important method which will bring us only those tasks that are visible inside gantt chart
+     * For example when task is collapsed - children of this task are not visible - we should not render them
+     */
+    visibleTasks() {
+      const visibleTasks = this.state.tasks.filter(task => this.isTaskVisible(task));
+      
+      
+      const maxRows = visibleTasks.slice(0, this.state.options.maxRows);
+      this.state.options.rowsHeight = this.getTasksHeight(maxRows);
+      let heightCompensation = 0;
+      if (this.state.options.maxHeight && this.state.options.rowsHeight > this.state.options.maxHeight) {
+        heightCompensation = this.state.options.rowsHeight - this.state.options.maxHeight;
+        this.state.options.rowsHeight = this.state.options.maxHeight;
+      }
+      this.state.options.height = this.getHeight(maxRows) - heightCompensation;
+      this.state.options.allVisibleTasksHeight = this.getTasksHeight(visibleTasks);
+      this.state.options.outerHeight = this.getHeight(maxRows, true) - heightCompensation;
+      let len = visibleTasks.length;
+      for (let index = 0; index < len; index++) {
+        let task = visibleTasks[index];
+        task.width =
+          task.duration / this.state.options.times.timePerPixel - this.style['grid-line-vertical']['stroke-width'];
+        if (task.width < 0) {
+          task.width = 0;
+        }
+        task.height = this.state.options.row.height;
+        task.x = this.timeToPixelOffsetX(task.startTime);
+        task.y =
+          (this.state.options.row.height + this.state.options.chart.grid.horizontal.gap * 2) * index +
+          this.state.options.chart.grid.horizontal.gap;
+      }
+      return visibleTasks;
+    },
+
+    /**
+     * Style shortcut
+     */
+    style() {
+      return this.state.dynamicStyle;
+    },
+
+    /**
+     * Get columns and compute dimensions on the fly
+     */
+    getTaskListColumns() {
+      this.calculateTaskListColumnsDimensions();
+      return this.state.options.taskList.columns;
+    },
+
+    /**
+     * Tasks used for communicate with parent component
+     */
+    outputTasks() {
+      return this.state.tasks;
+    },
+
+    /**
+     * Options used to communicate with parent component
+     */
+    outputOptions() {
+      return this.state.options;
+    }
+  },
+
+  /**
+   * Watch tasks after gantt instance is created and react when we have new kids on the block
+   */
+  created() {
+    this.initializeEvents();
+    this.setup();
+    this.state.unwatchTasks = this.$watch(
+      'tasks',
+      tasks => {
+        const notEqual = notEqualDeep(tasks, this.outputTasks);
+        if (notEqual) {
+          this.setup('tasks');
+        }
+      },
+      { deep: true }
+    );
+    this.state.unwatchOptions = this.$watch(
+      'options',
+      opts => {
+        const notEqual = notEqualDeep(opts, this.outputOptions);
+        if (notEqual) {
+          this.setup('options');
+        }
+      },
+      { deep: true }
+    );
+    this.state.unwatchStyle = this.$watch(
+      'dynamicStyle',
+      style => {
+        const notEqual = notEqualDeep(style, this.dynamicStyle);
+        if (notEqual) {
+          this.initializeStyle();
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    this.state.unwatchOutputTasks = this.$watch(
+      'outputTasks',
+      tasks => {
+        this.$emit('tasks-changed', tasks.map(task => task));
+      },
+      { deep: true }
+    );
+    this.state.unwatchOutputOptions = this.$watch(
+      'outputOptions',
+      options => {
+        this.$emit('options-changed', mergeDeep({}, options));
+      },
+      { deep: true }
+    );
+    this.state.unwatchOutputStyle = this.$watch(
+      'style',
+      style => {
+        this.$emit('dynamic-style-changed', mergeDeep({}, style));
+      },
+      { deep: true }
+    );
+
+    this.$root.$emit('gantt-elastic-created', this);
+    this.$emit('created', this);
+  },
+
+  /**
+   * Emit before-mount event
+   */
+  beforeMount() {
+    this.$emit('before-mount', this);
+  },
+
+  /**
+   * Emit ready/mounted events and deliver this gantt instance to outside world when needed
+   */
+  mounted() {
+    this.state.options.clientWidth = this.$el.clientWidth;
+    this.state.resizeObserver = new ResizeObserver((entries, observer) => {
+      this.globalOnResize();
+    });
+    this.state.resizeObserver.observe(this.$el.parentNode);
+    this.globalOnResize();
+    this.$emit('ready', this);
+    this.$root.$emit('gantt-elastic-mounted', this);
+    this.$emit('mounted', this);
+    this.$root.$emit('gantt-elastic-ready', this);
+  },
+
+  /**
+   * Emit event when data was changed and before update (you can cleanup dom events here for example)
+   */
+  beforeUpdate() {
+    this.$emit('before-update');
+  },
+
+  /**
+   * Emit event when gantt-elastic view was updated
+   */
+  updated() {
+    this.$nextTick(() => {
+      this.$emit('updated');
+    });
+  },
+
+  /**
+   * Before destroy event - clean up
+   */
+  beforeDestroy() {
+    this.state.resizeObserver.unobserve(this.$el.parentNode);
+    this.state.unwatchTasks();
+    this.state.unwatchOptions();
+    this.state.unwatchStyle();
+    this.state.unwatchOutputTasks();
+    this.state.unwatchOutputOptions();
+    this.state.unwatchOutputStyle();
+    this.$emit('before-destroy');
+  },
+
+  /**
+   * Emit event after gantt-elastic was destroyed
+   */
+  destroyed() {
+    this.$emit('destroyed');
+  }
+};
+export default GanttElastic;
+</script>
+
+<style>
+[class^='gantt-elastic'],
+[class*=' gantt-elastic'] {
+  box-sizing: border-box;
+}
+
+.gantt-elastic__main-view svg {
+  display: block;
+}
+
+.gantt-elastic__grid-horizontal-line,
+.gantt-elastic__grid-vertical-line {
+  stroke: rgba(0, 0, 0, 0.08);
+  stroke-width: 1;
+}
+
+.gantt-elastic__grid-horizontal-line {
+  stroke: rgba(0, 0, 0, 0.05);
+}
+
+.gantt-elastic__grid-vertical-line {
+  stroke: rgba(0, 0, 0, 0.1);
+}
+
+foreignObject>* {
+  margin: 0px;
+}
+
+.gantt-elastic .p-2 {
+  padding: 10rem;
+}
+
+.gantt-elastic__main-view-main-container,
+.gantt-elastic__main-view-container {
+  overflow: hidden;
+  max-width: 100%;
+  background: #fafbfc;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.gantt-elastic__task-list-header-column:last-of-type {
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.gantt-elastic__task-list-item:last-of-type {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.gantt-elastic__task-list-item-value-wrapper:hover {
+  overflow: visible !important;
+}
+
+.gantt-elastic__task-list-item-value-wrapper:hover>.gantt-elastic__task-list-item-value-container {
+  position: relative;
+  overflow: visible !important;
+}
+
+.gantt-elastic__task-list-item-value-wrapper:hover>.gantt-elastic__task-list-item-value {
+  position: absolute;
+}
+
+/* Modern scrollbar styling */
+.gantt-elastic__chart-scroll-container {
+  overflow: auto !important;
+}
+
+.gantt-elastic__chart-scroll-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.gantt-elastic__chart-scroll-container::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.gantt-elastic__chart-scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  transition: background 0.3s ease;
+}
+
+.gantt-elastic__chart-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* Ensure horizontal scroll container shows scroll bars when needed */
+.gantt-elastic__chart-scroll-container--horizontal {
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+}
+
+/* Ensure vertical scroll container shows scroll bars when needed */
+.gantt-elastic__chart-scroll-container--vertical {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+/* Calendar text positioning to avoid grid line overlap */
+.gantt-elastic__calendar-row-text {
+  position: relative;
+  z-index: 2;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gantt-elastic__calendar-row-text--month {
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+
+.gantt-elastic__calendar-row-text--week {
+  padding: 0 3px;
+  box-sizing: border-box;
+}
+
+.gantt-elastic__calendar-row-text--day {
+  padding: 0 2px;
+  box-sizing: border-box;
+}
+
+.gantt-elastic__calendar-row-text--quarter {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+/* Simple expander arrow icons */
+.gantt-elastic__task-list-expander-content,
+.gantt-elastic__chart-expander-content {
+  transition: all 0.2s ease;
+  border-radius: 2px;
+  padding: 1px;
+  cursor: pointer;
+}
+
+.gantt-elastic__task-list-expander-content:hover,
+.gantt-elastic__chart-expander-content:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  transform: scale(1.05);
+}
+
+.gantt-elastic__task-list-expander-arrow,
+.gantt-elastic__chart-expander-arrow {
+  transition: all 0.2s ease;
+}
+
+.gantt-elastic__task-list-expander-content:hover .gantt-elastic__task-list-expander-arrow,
+.gantt-elastic__chart-expander-content:hover .gantt-elastic__chart-expander-arrow {
+  stroke: #666666;
+  stroke-width: 1.5;
+}
+
+/* Modern task list styling */
+.gantt-elastic__task-list-container {
+  background: #ffffff;
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
+}
+
+/* Modern chart area styling */
+.gantt-elastic__chart {
+  background: #ffffff;
+}
+
+/* Calendar styling improvements */
+.gantt-elastic__calendar {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.gantt-elastic__calendar-row {
+  background: transparent;
+}
+
+.gantt-elastic__calendar-row-rect {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+}
+
+.gantt-elastic__calendar-row-rect:hover {
+  background: rgba(255, 255, 255, 0.9);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.gantt-elastic__calendar-row-text {
+  color: #495057;
+  font-weight: 500;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+}
+
+/* Task styling improvements */
+.gantt-elastic__chart-row-wrapper {
+  transition: all 0.2s ease;
+}
+
+.gantt-elastic__chart-row-wrapper:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.05);
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+  .gantt-elastic__main-view-main-container,
+  .gantt-elastic__main-view-container {
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  }
+}
+
+/* Responsive design for different screen sizes */
+@media (max-width: 480px) {
+  .gantt-elastic__calendar-row-text {
+    font-size: 8px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--day {
+    font-size: 7px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--week {
+    font-size: 8px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--month {
+    font-size: 9px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--quarter {
+    font-size: 10px !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .gantt-elastic__calendar-row-text {
+    font-size: 10px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--day {
+    font-size: 9px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--week {
+    font-size: 10px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--month {
+    font-size: 11px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--quarter {
+    font-size: 12px !important;
+  }
+}
+
+/* Desktop Small (1024px - 1439px) */
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .gantt-elastic__calendar-row-text {
+    font-size: 12px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--day {
+    font-size: 11px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--week {
+    font-size: 12px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--month {
+    font-size: 13px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--quarter {
+    font-size: 14px !important;
+  }
+}
+
+/* Desktop Big (1440px+) */
+@media (min-width: 1440px) {
+  .gantt-elastic__calendar-row-text {
+    font-size: 14px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--day {
+    font-size: 13px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--week {
+    font-size: 14px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--month {
+    font-size: 15px !important;
+  }
+  
+  .gantt-elastic__calendar-row-text--quarter {
+    font-size: 16px !important;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .gantt-elastic__main-view-main-container,
+  .gantt-elastic__main-view-container {
+    background: #1a1a1a;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  }
+  
+  .gantt-elastic__task-list-container {
+    background: #2d2d2d;
+    border-right-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .gantt-elastic__chart {
+    background: #2d2d2d;
+  }
+  
+  .gantt-elastic__calendar {
+    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .gantt-elastic__calendar-row-rect {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .gantt-elastic__calendar-row-text {
+    color: #e9ecef;
+  }
+  
+  .gantt-elastic__grid-horizontal-line,
+  .gantt-elastic__grid-vertical-line {
+    stroke: rgba(255, 255, 255, 0.1);
+  }
+}
+</style>