tg-ganttchart 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,2 @@
+# tg-ganttchart
+this contains the plugin of Gantt chart. This Gantt chart is used in project to show the project timings and teams and much more.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tg-ganttchart",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Vue js compnonet for dynamic list in which we can provide and schema and data. It will render the table view according to the dynamic fields",
   "main": "./dist/tgganttchart.umd.cjs",
   "module": "./dist/tgganttchart.es.js",
@@ -51,7 +51,10 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+      "vue/no-deprecated-slot-attribute": "off",
+      "no-prototype-builtins": "off"
+    }
   },
   "browserslist": [
     "> 1%",

package/src/components/GanttElastic.standalone.vue

@@ -1,40 +1,32 @@
 <template>
-
   <gantt-elastic :tasks="tasks" :options="options" :dynamicStyle="dynamicStyle">
     <component v-if="components.header" :is="components.header" slot="header"></component>
     <component v-if="components.footer" :is="components.footer" slot="footer"></component>
-    <gantt-header slot="header"></gantt-header>
   </gantt-elastic>
 </template>
 
 <script>
 import GanttElastic from './GanttElastic.vue';
-import GanttHeader from './components/Header/Header.vue';
-import dayjs from "dayjs";
-
-function getDate(hours) {
-  const currentDate = new Date();
-  const currentYear = currentDate.getFullYear();
-  const currentMonth = currentDate.getMonth();
-  const currentDay = currentDate.getDate();
-  const timeStamp = new Date(
-    currentYear,
-    currentMonth,
-    currentDay,
-    0,
-    0,
-    0
-  ).getTime();
-  return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
-}
 
 export default {
   name: 'GanttElasticStandalone',
   components: {
     'gantt-elastic': GanttElastic,
-    'gantt-header': GanttHeader
   },
   props: {
+    // Props to receive from parent
+    tasks: {
+      type: Array,
+      default: () => [],
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    dynamicStyle: {
+      type: Object,
+      default: () => ({}),
+    },
     header: {
       type: Object,
       default: () => ({}),
@@ -50,299 +42,6 @@ export default {
         header: this.header,
         footer: this.footer,
       },
-      tasks: [
-        {
-          id: 1,
-          label: "Make some noise",
-          user:
-            '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
-          start: getDate(-24 * 5),
-          duration: 15 * 24 * 60 * 60 * 1000,
-          percent: 10,
-          type: "project"
-          //collapsed: true,
-        },
-        {
-          id: 2,
-          label: "With great power comes great responsibility",
-          user:
-            '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
-          parentId: 1,
-          start: getDate(-24 * 4),
-          duration: 4 * 24 * 60 * 60 * 1000,
-          percent: 50,
-          type: "milestone",
-          collapsed: true,
-          style: {
-            base: {
-              fill: "#1EBC61",
-              stroke: "#0EAC51"
-            }
-          }
-        },
-        {
-          id: 3,
-          label: "Courage is being scared to death, but saddling up anyway.",
-          user:
-            '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
-          parentId: 2,
-          start: getDate(-24 * 3),
-          duration: 2 * 24 * 60 * 60 * 1000,
-          percent: 100,
-          type: "task"
-        },
-        {
-          id: 4,
-          label: "Put that toy AWAY!",
-          user:
-            '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
-          start: getDate(-24 * 2),
-          duration: 2 * 24 * 60 * 60 * 1000,
-          percent: 50,
-          type: "task",
-          dependentOn: [3]
-        },
-        {
-          id: 5,
-          label:
-            "One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.",
-          user:
-            '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
-          parentId: 4,
-          start: getDate(0),
-          duration: 2 * 24 * 60 * 60 * 1000,
-          percent: 10,
-          type: "milestone",
-          style: {
-            base: {
-              fill: "#0287D0",
-              stroke: "#0077C0"
-            }
-          }
-        },
-        {
-          id: 6,
-          label: "Butch Mario and the Luigi Kid",
-          user:
-            '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
-          parentId: 5,
-          start: getDate(24),
-          duration: 1 * 24 * 60 * 60 * 1000,
-          percent: 50,
-          type: "task",
-          collapsed: true,
-          style: {
-            base: {
-              fill: "#8E44AD",
-              stroke: "#7E349D"
-            }
-          }
-        },
-        {
-          id: 7,
-          label: "Devon, the old man wanted me, it was his dying request",
-          user:
-            '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
-          parentId: 2,
-          dependentOn: [6],
-          start: getDate(24 * 2),
-          duration: 4 * 60 * 60 * 1000,
-          percent: 20,
-          type: "task",
-          collapsed: true
-        },
-        {
-          id: 8,
-          label: "Hey, Baby! Anybody ever tell you I have beautiful eyes?",
-          user:
-            '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
-          parentId: 7,
-          dependentOn: [7],
-          start: getDate(24 * 3),
-          duration: 1 * 24 * 60 * 60 * 1000,
-          percent: 0,
-          type: "task"
-        },
-        {
-          id: 9,
-          label:
-            "This better be important, woman. You are interrupting my very delicate calculations.",
-          user:
-            '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
-          parentId: 8,
-          dependentOn: [8, 7],
-          start: getDate(24 * 4),
-          duration: 4 * 60 * 60 * 1000,
-          percent: 20,
-          type: "task",
-          style: {
-            base: {
-              fill: "#8E44AD",
-              stroke: "#7E349D"
-            }
-          }
-        },
-        {
-          id: 10,
-          label: "current task",
-          user:
-            '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
-          start: getDate(24 * 5),
-          duration: 24 * 60 * 60 * 1000,
-          percent: 0,
-          type: "task"
-        },
-        {
-          id: 11,
-          label: "test task",
-          user:
-            '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
-          start: getDate(24 * 6),
-          duration: 24 * 60 * 60 * 1000,
-          percent: 0,
-          type: "task"
-        },
-        {
-          id: 12,
-          label: "test task",
-          user:
-            '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
-          start: getDate(24 * 7),
-          duration: 24 * 60 * 60 * 1000,
-          percent: 0,
-          type: "task",
-          parentId: 11
-        },
-        {
-          id: 13,
-          label: "test task",
-          user:
-            '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
-          start: getDate(24 * 8),
-          duration: 24 * 60 * 60 * 1000,
-          percent: 0,
-          type: "task"
-        },
-        {
-          id: 14,
-          label: "test task",
-          user:
-            '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
-          start: getDate(24 * 9),
-          duration: 24 * 60 * 60 * 1000,
-          percent: 0,
-          type: "task"
-        },
-        {
-          id: 15,
-          label: "test task",
-          user:
-            '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
-          start: getDate(24 * 16),
-          duration: 24 * 60 * 60 * 1000,
-          percent: 0,
-          type: "task"
-        }
-      ],
-      options: {
-        taskMapping: {
-          progress: "percent"
-        },
-        maxRows: 100,
-        maxHeight: 500,
-        title: {
-          label: "Your project title as html (link or whatever...)",
-          html: false
-        },
-        row: {
-          height: 24
-        },
-        calendar: {
-          hour: {
-            display: true
-          }
-        },
-        chart: {
-          progress: {
-            bar: false
-          },
-          expander: {
-            display: true
-          }
-        },
-        taskList: {
-          expander: {
-            straight: false
-          },
-          columns: [
-            {
-              id: 1,
-              label: "ID",
-              value: "id",
-              width: 10
-            },
-            {
-              id: 2,
-              label: "Description",
-              value: "label",
-              width: 200,
-              expander: true,
-              html: true,
-              events: {
-                click({ data }) {
-                  alert("description clicked!\n" + data.label);
-                }
-              }
-            },
-            {
-              id: 3,
-              label: "Assigned to",
-              value: "user",
-              width: 130,
-              html: true
-            },
-            {
-              id: 3,
-              label: "Start",
-              value: task => dayjs(task.start).format("YYYY-MM-DD"),
-              width: 78
-            },
-            {
-              id: 4,
-              label: "Type",
-              value: "type",
-              width: 68
-            },
-            {
-              id: 5,
-              label: "%",
-              value: "progress",
-              width: 35,
-              style: {
-                "task-list-header-label": {
-                  "text-align": "center",
-                  width: "100%"
-                },
-                "task-list-item-value-container": {
-                  "text-align": "center",
-                  width: "100%"
-                }
-              }
-            }
-          ]
-        },
-        locale: {
-          name: "en",
-          Now: "Now",
-          "X-Scale": "Zoom-X",
-          "Y-Scale": "Zoom-Y",
-          "Task list width": "Task list",
-          "Before/After": "Expand",
-          "Display task list": "Task list"
-        }
-      }
-      ,
-      dynamicStyle: {},
     };
   },
 };

package/src/components/GanttElastic.vue

@@ -1,6 +1,6 @@
-
 <template>
   <div class="gantt-elastic" style="width:100%">
+    <gantt-header slot="header"></gantt-header>
     <slot name="header"></slot>
     <main-view ref="mainView"></main-view>
     <slot name="footer"></slot>
@@ -13,6 +13,8 @@ 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;
@@ -23,7 +25,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
@@ -444,7 +446,8 @@ export function notEqualDeep(left, right, cache = [], path = '') {
 const GanttElastic = {
   name: 'GanttElastic',
   components: {
-    MainView
+    MainView,
+    'gantt-header': GanttHeader
   },
   props: ['tasks', 'options', 'dynamicStyle'],
   provide() {
@@ -473,7 +476,7 @@ const GanttElastic = {
         refs: {},
         tasksById: {},
         taskTree: {},
-        ctx,
+        ctx: 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,

package/src/components/components/Calendar/CalendarRow.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div :class="'gantt-elastic__calendar-row gantt-elastic__calendar-row--' + which" :style="rowStyle">
     <div
@@ -7,9 +8,9 @@
       :style="rectStyle"
     >
       <div
+        :class="'gantt-elastic__calendar-row-rect-child gantt-elastic__calendar-row-rect-child--' + which"
         v-for="(child, childIndex) in item.children"
         :key="child.key"
-        :class="'gantt-elastic__calendar-row-rect-child gantt-elastic__calendar-row-rect-child--' + which"
         :style="rectChildStyle[itemIndex][childIndex]"
       >
         <div
@@ -32,12 +33,16 @@ export default {
     return {};
   },
   methods: {
+    /**
+     * Get x position
+     *
+     * @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)) {
-        const scrollWidth = this.root.state.options.scroll.chart.right - this.root.state.options.scroll.chart.left;
+        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) {
@@ -49,33 +54,39 @@ export default {
   },
   computed: {
     rowStyle() {
-      return { ...this.root.style['calendar-row'], ...this.root.style[`calendar-row--${this.which}`] };
+      return { ...this.root.style['calendar-row'], ...this.root.style['calendar-row--' + this.which] };
     },
     rectStyle() {
-      return { ...this.root.style['calendar-row-rect'], ...this.root.style[`calendar-row-rect--${this.which}`] };
+      return { ...this.root.style['calendar-row-rect'], ...this.root.style['calendar-row-rect--' + this.which] };
     },
     rectChildStyle() {
       const basicStyle = {
         ...this.root.style['calendar-row-rect-child'],
-        ...this.root.style[`calendar-row-rect-child--${this.which}`]
+        ...this.root.style['calendar-row-rect-child--' + this.which]
       };
-      return this.items.map(item => {
-        return item.children.map(child => ({
-          ...basicStyle,
-          width: `${child.width}px`,
-          height: `${child.height}px`
-        }));
-      });
+      const style = [];
+      for (let item of this.items) {
+        const childrenStyle = [];
+        for (let child of item.children) {
+          childrenStyle.push({
+            ...basicStyle,
+            width: child.width + 'px',
+            height: child.height + 'px'
+          });
+        }
+        style.push(childrenStyle);
+      }
+      return style;
     },
     textStyle() {
       const basicStyle = {
         ...this.root.style['calendar-row-text'],
-        ...this.root.style[`calendar-row-text--${this.which}`]
+        ...this.root.style['calendar-row-text--' + this.which]
       };
       return child => {
         const style = { ...basicStyle };
         if (this.which === 'month') {
-          style.left = `${this.getTextX(child)}px`;
+          style.left = this.getTextX(child) + 'px';
         }
         return style;
       };

package/src/components/components/Chart/Chart.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div class="gantt-elastic__chart" :style="{ ...root.style['chart'] }" ref="chart">
     <div

package/src/components/components/Chart/DaysHighlight.vue

@@ -1,4 +1,5 @@
 
+
 <template>
   <g
     class="gantt-elastic__chart-days-highlight-container"

package/src/components/components/Chart/ProgressBar.vue

@@ -1,3 +1,4 @@
+
 <template>
   <g
     class="gantt-elastic__chart-row-progress-bar-wrapper"

package/src/components/components/Chart/Row/Task.mixin.js

@@ -1,5 +1,4 @@
 
-
 export default {
   computed: {
     /**

package/src/components/components/Header/Header.vue

@@ -159,8 +159,6 @@ export default {
     };
   },
   created() {
-    debugger; // eslint-disable-line no-debugger
-    console.log("this.localScale", this.root);
     this.localScale = this.root.state.options.times.timeZoom;
     this.localHeight = this.root.state.options.row.height;
     this.localBefore = this.root.state.options.scope.before;

package/src/components/components/TaskList/ItemColumn.vue

@@ -4,6 +4,7 @@
       <slot></slot>
       <div class="gantt-elastic__task-list-item-value-container" :style="containerStyle">
         <div
+          v-if="!html"
           class="gantt-elastic__task-list-item-value"
           :style="valueStyle"
           @click="emitEvent('click', $event)"
@@ -17,15 +18,13 @@
           @touchstart="emitEvent('touchstart', $event)"
           @touchmove="emitEvent('touchmove', $event)"
           @touchend="emitEvent('touchend', $event)"
-          v-if="!html"
         >
           {{ value }}
         </div>
         <div
+          v-else
           class="gantt-elastic__task-list-item-value"
           :style="valueStyle"
-          v-else
-          v-html="value"
           @click="emitEvent('click', $event)"
           @mouseenter="emitEvent('mouseenter', $event)"
           @mouseover="emitEvent('mouseover', $event)"
@@ -37,6 +36,7 @@
           @touchstart="emitEvent('touchstart', $event)"
           @touchmove="emitEvent('touchmove', $event)"
           @touchend="emitEvent('touchend', $event)"
+          v-html="value"
         ></div>
       </div>
     </div>
@@ -47,51 +47,74 @@
 export default {
   name: 'ItemColumn',
   inject: ['root'],
-  props: {
-    column: Object,
-    task: Object
+  props: ['column', 'task'],
+  data() {
+    return {};
   },
   methods: {
+    /**
+     * Emit event
+     *
+     * @param {String} eventName
+     * @param {Event} event
+     */
     emitEvent(eventName, event) {
-      const eventHandler = this.column.events.eventName;
-      if (eventHandler) {
-        eventHandler({ event, data: this.task, column: this.column });
+      if (typeof this.column.events !== 'undefined' && typeof this.column.events[eventName] === 'function') {
+        this.column.events[eventName]({ event, data: this.task, column: this.column });
       }
       this.root.$emit(`taskList-${this.task.type}-${eventName}`, { event, data: this.task, column: this.column });
     }
   },
   computed: {
+    /**
+     * Should we display html or just text?
+     *
+     * @returns {boolean}
+     */
     html() {
-      return this.column.html === true;
+      if (typeof this.column.html !== 'undefined' && this.column.html === true) {
+        return true;
+      }
+      return false;
     },
+
+    /**
+     * Get column value
+     *
+     * @returns {any|string}
+     */
     value() {
-      return typeof this.column.value === 'function' ? this.column.value(this.task) : this.task[this.column.value];
+      if (typeof this.column.value === 'function') {
+        return this.column.value(this.task);
+      }
+      return this.task[this.column.value];
     },
+
     itemColumnStyle() {
       return {
         ...this.root.style['task-list-item-column'],
         ...this.column.style['task-list-item-column'],
-        width: `${this.column.finalWidth}px`,
-        height: `${this.column.height}px`
+        width: this.column.finalWidth + 'px',
+        height: this.column.height + 'px'
       };
     },
+
     wrapperStyle() {
       return {
         ...this.root.style['task-list-item-value-wrapper'],
         ...this.column.style['task-list-item-value-wrapper']
       };
     },
+
     containerStyle() {
       return {
         ...this.root.style['task-list-item-value-container'],
         ...this.column.style['task-list-item-value-container']
       };
     },
+
     valueStyle() {
-      return {
-        ...this.root.style['task-list-item-value'],
-        ...this.column.style['task-list-item-value']
-      };
+      return { ...this.root.style['task-list-item-value'], ...this.column.style['task-list-item-value'] };
     }
   }
 };

package/src/components/components/TaskList/TaskList.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div
     class="gantt-elastic__task-list-wrapper"
@@ -10,13 +11,9 @@
       <div
         class="gantt-elastic__task-list-items"
         ref="taskListItems"
-        :style="{ ...root.style['task-list-items'], height: `${root.state.options.rowsHeight}px` }"
+        :style="{ ...root.style['task-list-items'], height: root.state.options.rowsHeight + 'px' }"
       >
-        <task-list-item
-          v-for="task in root.visibleTasks"
-          :key="task.id"
-          :task="task"
-        ></task-list-item>
+        <task-list-item v-for="task in root.visibleTasks" :key="task.id" :task="task"></task-list-item>
       </div>
     </div>
   </div>
@@ -25,7 +22,6 @@
 <script>
 import TaskListHeader from './TaskListHeader.vue';
 import TaskListItem from './TaskListItem.vue';
-
 export default {
   name: 'TaskList',
   components: {
@@ -33,6 +29,13 @@ export default {
     TaskListItem
   },
   inject: ['root'],
+  data() {
+    return {};
+  },
+
+  /**
+   * Mounted
+   */
   mounted() {
     this.root.state.refs.taskListWrapper = this.$refs.taskListWrapper;
     this.root.state.refs.taskList = this.$refs.taskList;

package/src/components/components/TaskList/TaskListItem.vue

@@ -1,11 +1,7 @@
+
 <template>
-  <div class="gantt-elastic__task-list-item" :style="root.style['task-list-item']">
-    <item-column
-      v-for="column in columns"
-      :key="column._id"
-      :column="column"
-      :task="task"
-    >
+  <div class="gantt-elastic__task-list-item" :style="{ ...root.style['task-list-item'] }">
+    <item-column v-for="column in columns" :key="column._id" :column="column" :task="task">
       <task-list-expander
         v-if="column.expander"
         :tasks="[task]"
@@ -15,7 +11,6 @@
     </item-column>
   </div>
 </template>
-
 <script>
 import TaskListExpander from '../Expander.vue';
 import ItemColumn from './ItemColumn.vue';
@@ -27,8 +22,9 @@ export default {
     ItemColumn
   },
   inject: ['root'],
-  props: {
-    task: Object
+  props: ['task'],
+  data() {
+    return {};
   },
   computed: {
     columns() {

package/src/index.js

@@ -1,6 +1,5 @@
 
-
-import ganttChart from './components/GanttElastic.standalone.vue';
+import ganttChart from './components/GanttElastic.vue';
 export default {
     install(app, options = {}) {
         app.component('tg-ganttchart', ganttChart);