tg-ganttchart 0.0.7 → 0.0.8

package/src/components/Chart/Row/Epic.vue

@@ -0,0 +1,131 @@
+<template>
+  <g
+    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-epic-wrapper"
+    :style="{
+      ...root.style['chart-row-bar-wrapper'],
+      ...root.style['chart-row-epic-wrapper'],
+      ...task.style['chart-row-bar-wrapper']
+    }"
+  >
+    <foreignObject
+      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--epic"
+      :style="{
+        ...root.style['chart-expander'],
+        ...root.style['chart-expander--epic'],
+        ...task.style['chart-expander']
+      }"
+      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
+      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
+      :width="root.state.options.chart.expander.size"
+      :height="root.state.options.chart.expander.size"
+      v-if="displayExpander"
+    >
+      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
+    </foreignObject>
+    <svg
+      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-epic"
+      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-epic'], ...task.style['chart-row-bar'] }"
+      :x="task.x"
+      :y="task.y"
+      :width="task.width"
+      :height="task.height"
+      :viewBox="`0 0 ${task.width} ${task.height}`"
+      @click="emitEvent('click', $event)"
+      @mouseenter="emitEvent('mouseenter', $event)"
+      @mouseover="emitEvent('mouseover', $event)"
+      @mouseout="emitEvent('mouseout', $event)"
+      @mousemove="emitEvent('mousemove', $event)"
+      @mousedown="emitEvent('mousedown', $event)"
+      @mouseup="emitEvent('mouseup', $event)"
+      @mousewheel="emitEvent('mousewheel', $event)"
+      @touchstart="emitEvent('touchstart', $event)"
+      @touchmove="emitEvent('touchmove', $event)"
+      @touchend="emitEvent('touchend', $event)"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <clipPath :id="clipPathId">
+          <path :d="getPoints"></path>
+        </clipPath>
+      </defs>
+      <path
+        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-epic-polygon"
+        :style="{
+          ...root.style['chart-row-bar-polygon'],
+          ...root.style['chart-row-epic-polygon'],
+          ...task.style['base'],
+          ...task.style['chart-row-bar-polygon']
+        }"
+        :d="getPoints"
+      ></path>
+      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
+    </svg>
+    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
+  </g>
+</template>
+
+<script>
+import ChartText from '../Text.vue';
+import ProgressBar from '../ProgressBar.vue';
+import Expander from '../../Expander.vue';
+import taskMixin from './Task.mixin.js';
+export default {
+  name: 'Epic',
+  components: {
+    ChartText,
+    ProgressBar,
+    Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [taskMixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__epic-clip-path-' + this.task.id;
+    },
+
+    /**
+     * Get points (same shape as project)
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const bottom = task.height - task.height / 4;
+      const corner = task.height / 6;
+      const smallCorner = task.height / 8;
+      return `M ${smallCorner},0
+                L ${task.width - smallCorner} 0
+                L ${task.width} ${smallCorner}
+                L ${task.width} ${bottom}
+                L ${task.width - corner} ${task.height}
+                L ${task.width - corner * 2} ${bottom}
+                L ${corner * 2} ${bottom}
+                L ${corner} ${task.height}
+                L 0 ${bottom}
+                L 0 ${smallCorner}
+                Z
+        `;
+    },
+
+    /**
+     * Should we display expander?
+     *
+     * @returns {boolean}
+     */
+    displayExpander() {
+      const expander = this.root.state.options.chart.expander;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
+    }
+  }
+};
+</script>

package/src/components/Chart/Row/Milestone.vue

@@ -0,0 +1,117 @@
+
+<template>
+  <g
+    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-milestone-wrapper"
+    :style="{
+      ...root.style['chart-row-bar-wrapper'],
+      ...root.style['chart-row-milestone-wrapper'],
+      ...task.style['chart-row-bar-wrapper']
+    }"
+  >
+    <foreignObject
+      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--milestone"
+      :style="{
+        ...root.style['chart-expander'],
+        ...root.style['chart-expander--milestone'],
+        ...task.style['chart-expander']
+      }"
+      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
+      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
+      :width="root.state.options.chart.expander.size"
+      :height="root.state.options.chart.expander.size"
+      v-if="displayExpander"
+    >
+      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
+    </foreignObject>
+    <svg
+      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-milestone"
+      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-milestone'], ...task.style['chart-row-bar'] }"
+      :x="task.x"
+      :y="task.y"
+      :width="task.width"
+      :height="task.height"
+      :viewBox="`0 0 ${task.width} ${task.height}`"
+      @click="emitEvent('click', $event)"
+      @mouseenter="emitEvent('mouseenter', $event)"
+      @mouseover="emitEvent('mouseover', $event)"
+      @mouseout="emitEvent('mouseout', $event)"
+      @mousemove="emitEvent('mousemove', $event)"
+      @mousedown="emitEvent('mousedown', $event)"
+      @mouseup="emitEvent('mouseup', $event)"
+      @mousewheel="emitEvent('mousewheel', $event)"
+      @touchstart="emitEvent('touchstart', $event)"
+      @touchmove="emitEvent('touchmove', $event)"
+      @touchend="emitEvent('touchend', $event)"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <clipPath :id="clipPathId">
+          <polygon :points="getPoints"></polygon>
+        </clipPath>
+      </defs>
+      <polygon
+        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-milestone-polygon"
+        :style="{
+          ...root.style['chart-row-bar-polygon'],
+          ...root.style['chart-row-milestone-polygon'],
+          ...task.style['base'],
+          ...task.style['chart-row-bar-polygon']
+        }"
+        :points="getPoints"
+      ></polygon>
+      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
+    </svg>
+    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
+  </g>
+</template>
+
+<script>
+import ChartText from '../Text.vue';
+import ProgressBar from '../ProgressBar.vue';
+import Expander from '../../Expander.vue';
+import taskMixin from './Task.mixin.js';
+export default {
+  name: 'Milestone',
+  components: {
+    ChartText,
+    ProgressBar,
+    Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [taskMixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__milestone-clip-path-' + this.task.id;
+    },
+
+    /**
+     * Get points
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const fifty = task.height / 2;
+      let offset = fifty;
+      if (task.width / 2 - offset < 0) {
+        offset = task.width / 2;
+      }
+      return `0,${fifty}
+        ${offset},0
+        ${task.width - offset},0
+        ${task.width},${fifty}
+        ${task.width - offset},${task.height}
+        ${offset},${task.height}`;
+    }
+  }
+};
+</script>

package/src/components/Chart/Row/Project.vue

@@ -0,0 +1,132 @@
+
+<template>
+  <g
+    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-project-wrapper"
+    :style="{
+      ...root.style['chart-row-bar-wrapper'],
+      ...root.style['chart-row-project-wrapper'],
+      ...task.style['chart-row-bar-wrapper']
+    }"
+  >
+    <foreignObject
+      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--project"
+      :style="{
+        ...root.style['chart-expander'],
+        ...root.style['chart-expander--project'],
+        ...task.style['chart-expander']
+      }"
+      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
+      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
+      :width="root.state.options.chart.expander.size"
+      :height="root.state.options.chart.expander.size"
+      v-if="displayExpander"
+    >
+      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
+    </foreignObject>
+    <svg
+      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-project"
+      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-project'], ...task.style['chart-row-bar'] }"
+      :x="task.x"
+      :y="task.y"
+      :width="task.width"
+      :height="task.height"
+      :viewBox="`0 0 ${task.width} ${task.height}`"
+      @click="emitEvent('click', $event)"
+      @mouseenter="emitEvent('mouseenter', $event)"
+      @mouseover="emitEvent('mouseover', $event)"
+      @mouseout="emitEvent('mouseout', $event)"
+      @mousemove="emitEvent('mousemove', $event)"
+      @mousedown="emitEvent('mousedown', $event)"
+      @mouseup="emitEvent('mouseup', $event)"
+      @mousewheel="emitEvent('mousewheel', $event)"
+      @touchstart="emitEvent('touchstart', $event)"
+      @touchmove="emitEvent('touchmove', $event)"
+      @touchend="emitEvent('touchend', $event)"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <clipPath :id="clipPathId">
+          <path :d="getPoints"></path>
+        </clipPath>
+      </defs>
+      <path
+        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-project-polygon"
+        :style="{
+          ...root.style['chart-row-bar-polygon'],
+          ...root.style['chart-row-project-polygon'],
+          ...task.style['base'],
+          ...task.style['chart-row-bar-polygon']
+        }"
+        :d="getPoints"
+      ></path>
+      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
+    </svg>
+    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
+  </g>
+</template>
+
+<script>
+import ChartText from '../Text.vue';
+import ProgressBar from '../ProgressBar.vue';
+import Expander from '../../Expander.vue';
+import taskMixin from './Task.mixin.js';
+export default {
+  name: 'Project',
+  components: {
+    ChartText,
+    ProgressBar,
+    Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [taskMixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__project-clip-path-' + this.task.id;
+    },
+
+    /**
+     * Get points
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const bottom = task.height - task.height / 4;
+      const corner = task.height / 6;
+      const smallCorner = task.height / 8;
+      return `M ${smallCorner},0
+                L ${task.width - smallCorner} 0
+                L ${task.width} ${smallCorner}
+                L ${task.width} ${bottom}
+                L ${task.width - corner} ${task.height}
+                L ${task.width - corner * 2} ${bottom}
+                L ${corner * 2} ${bottom}
+                L ${corner} ${task.height}
+                L 0 ${bottom}
+                L 0 ${smallCorner}
+                Z
+        `;
+    },
+
+    /**
+     * Should we display expander?
+     *
+     * @returns {boolean}
+     */
+    displayExpander() {
+      const expander = this.root.state.options.chart.expander;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
+    }
+  }
+};
+</script>

package/src/components/Chart/Row/Story.vue

@@ -0,0 +1,127 @@
+<template>
+  <g
+    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-story-wrapper"
+    :style="{
+      ...root.style['chart-row-bar-wrapper'],
+      ...root.style['chart-row-story-wrapper'],
+      ...task.style['chart-row-bar-wrapper']
+    }"
+  >
+    <foreignObject
+      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--story"
+      :style="{
+        ...root.style['chart-expander'],
+        ...root.style['chart-expander--story'],
+        ...task.style['chart-expander']
+      }"
+      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
+      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
+      :width="root.state.options.chart.expander.size"
+      :height="root.state.options.chart.expander.size"
+      v-if="displayExpander"
+    >
+      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
+    </foreignObject>
+    <svg
+      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-story"
+      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-story'], ...task.style['chart-row-bar'] }"
+      :x="task.x"
+      :y="task.y"
+      :width="task.width"
+      :height="task.height"
+      :viewBox="`0 0 ${task.width} ${task.height}`"
+      @click="emitEvent('click', $event)"
+      @mouseenter="emitEvent('mouseenter', $event)"
+      @mouseover="emitEvent('mouseover', $event)"
+      @mouseout="emitEvent('mouseout', $event)"
+      @mousemove="emitEvent('mousemove', $event)"
+      @mousedown="emitEvent('mousedown', $event)"
+      @mouseup="emitEvent('mouseup', $event)"
+      @mousewheel="emitEvent('mousewheel', $event)"
+      @touchstart="emitEvent('touchstart', $event)"
+      @touchmove="emitEvent('touchmove', $event)"
+      @touchend="emitEvent('touchend', $event)"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <clipPath :id="clipPathId">
+          <path :d="getPoints"></path>
+        </clipPath>
+      </defs>
+      <path
+        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-story-polygon"
+        :style="{
+          ...root.style['chart-row-bar-polygon'],
+          ...root.style['chart-row-story-polygon'],
+          ...task.style['base'],
+          ...task.style['chart-row-bar-polygon']
+        }"
+        :d="getPoints"
+      ></path>
+      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
+    </svg>
+    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
+  </g>
+</template>
+
+<script>
+import ChartText from '../Text.vue';
+import ProgressBar from '../ProgressBar.vue';
+import Expander from '../../Expander.vue';
+import taskMixin from './Task.mixin.js';
+export default {
+  name: 'Story',
+  components: {
+    ChartText,
+    ProgressBar,
+    Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [taskMixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__story-clip-path-' + this.task.id;
+    },
+
+    /**
+     * Get points (rounded rectangle for stories)
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      const corner = Math.min(task.height / 4, 8); // Rounded corners
+      return `M ${corner},0
+                L ${task.width - corner} 0
+                Q ${task.width} 0 ${task.width} ${corner}
+                L ${task.width} ${task.height - corner}
+                Q ${task.width} ${task.height} ${task.width - corner} ${task.height}
+                L ${corner} ${task.height}
+                Q 0 ${task.height} 0 ${task.height - corner}
+                L 0 ${corner}
+                Q 0 0 ${corner} 0
+                Z`;
+    },
+
+    /**
+     * Should we display expander?
+     *
+     * @returns {boolean}
+     */
+    displayExpander() {
+      const expander = this.root.state.options.chart.expander;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
+    }
+  }
+};
+</script>

package/src/components/Chart/Row/Subtask.vue

@@ -0,0 +1,117 @@
+<template>
+  <g
+    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-subtask-wrapper"
+    :style="{
+      ...root.style['chart-row-bar-wrapper'],
+      ...root.style['chart-row-subtask-wrapper'],
+      ...task.style['chart-row-bar-wrapper']
+    }"
+  >
+    <foreignObject
+      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--subtask"
+      :style="{
+        ...root.style['chart-expander'],
+        ...root.style['chart-expander--subtask'],
+        ...task.style['chart-expander']
+      }"
+      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
+      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
+      :width="root.state.options.chart.expander.size"
+      :height="root.state.options.chart.expander.size"
+      v-if="displayExpander"
+    >
+      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
+    </foreignObject>
+    <svg
+      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-subtask"
+      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-subtask'], ...task.style['chart-row-bar'] }"
+      :x="task.x"
+      :y="task.y"
+      :width="task.width"
+      :height="task.height"
+      :viewBox="`0 0 ${task.width} ${task.height}`"
+      @click="emitEvent('click', $event)"
+      @mouseenter="emitEvent('mouseenter', $event)"
+      @mouseover="emitEvent('mouseover', $event)"
+      @mouseout="emitEvent('mouseout', $event)"
+      @mousemove="emitEvent('mousemove', $event)"
+      @mousedown="emitEvent('mousedown', $event)"
+      @mouseup="emitEvent('mouseup', $event)"
+      @mousewheel="emitEvent('mousewheel', $event)"
+      @touchstart="emitEvent('touchstart', $event)"
+      @touchmove="emitEvent('touchmove', $event)"
+      @touchend="emitEvent('touchend', $event)"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <clipPath :id="clipPathId">
+          <polygon :points="getPoints"></polygon>
+        </clipPath>
+      </defs>
+      <polygon
+        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-subtask-polygon"
+        :style="{
+          ...root.style['chart-row-bar-polygon'],
+          ...root.style['chart-row-subtask-polygon'],
+          ...task.style['base'],
+          ...task.style['chart-row-bar-polygon']
+        }"
+        :points="getPoints"
+      ></polygon>
+      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
+    </svg>
+    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
+  </g>
+</template>
+
+<script>
+import ChartText from '../Text.vue';
+import ProgressBar from '../ProgressBar.vue';
+import Expander from '../../Expander.vue';
+import taskMixin from './Task.mixin.js';
+export default {
+  name: 'Subtask',
+  components: {
+    ChartText,
+    ProgressBar,
+    Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [taskMixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__subtask-clip-path-' + this.task.id;
+    },
+
+    /**
+     * Get points (simple rectangle for subtasks)
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
+    },
+
+    /**
+     * Should we display expander?
+     *
+     * @returns {boolean}
+     */
+    displayExpander() {
+      const expander = this.root.state.options.chart.expander;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,47 @@
+
+export default {
+  computed: {
+    /**
+     * Get view box
+     *
+     * @returns {string}
+     */
+    getViewBox() {
+      const task = this.task;
+      return `0 0 ${task.width} ${task.height}`;
+    },
+
+    /**
+     * Get group transform
+     *
+     * @returns {string}
+     */
+    getGroupTransform() {
+      return `translate(${this.task.x} ${this.task.y})`;
+    },
+
+    /**
+     * Should we display expander?
+     *
+     * @returns {boolean}
+     */
+    displayExpander() {
+      const expander = this.root.state.options.chart.expander;
+      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
+      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
+    }
+  },
+  methods: {
+    /**
+     * Emit event
+     *
+     * @param {string} eventName
+     * @param {Event} event
+     */
+    emitEvent(eventName, event) {
+      if (!this.root.state.options.scroll.scrolling) {
+        this.root.$emit(`chart-${this.task.type}-${eventName}`, { event, data: this.task });
+      }
+    }
+  }
+};