tg-ganttchart 0.0.1

package/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "tg-ganttchart",
+  "version": "0.0.1",
+  "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",
+  "export": {
+    ".": {
+      "require": "./dist/tgganttchart.umd.cjs",
+      "import": "./dist/tgganttchart.es.js"
+    }
+  },
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --target lib --name tgganttchart ./src/index.js"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "dayjs": "^1.11.13",
+    "resize-observer-polyfill": "^1.5.1",
+    "vue": "^2.6.10",
+    "vue-loader": "^15.11.1",
+    "vue-slider-component": "^3.0.31",
+    "vue-switches": "^2.0.1",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@types/chai": "^4.2.2",
+    "@types/cypress": "^1.1.3",
+    "@types/mocha": "^5.2.7",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "cypress": "^3.4.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.7.1"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/src/components/GanttElastic.standalone.vue

@@ -0,0 +1,349 @@
+<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: {
+    header: {
+      type: Object,
+      default: () => ({}),
+    },
+    footer: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      components: {
+        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: {},
+    };
+  },
+};
+</script>