tg-ganttchart 0.0.3 → 0.0.4

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

@@ -0,0 +1,112 @@
+
+<template>
+  <svg
+    x="0"
+    y="0"
+    width="100%"
+    height="100%"
+    class="gantt-elastic__chart-dependency-lines-container"
+    :style="{ ...root.style['chart-dependency-lines-container'] }"
+  >
+    <g v-for="task in dependencyTasks" :key="task.id" :task="task">
+      <path
+        class="gantt-elastic__chart-dependency-lines-path"
+        :style="{ ...root.style['chart-dependency-lines-path'], ...task.style['chart-dependency-lines-path'], ...task.style['chart-dependency-lines-path-' + dependencyLine.task_id] }"
+        v-for="dependencyLine in task.dependencyLines"
+        :key="dependencyLine.id"
+        :task="task"
+        :d="dependencyLine.points"
+      ></path>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'DependencyLines',
+  inject: ['root'],
+  props: ['tasks'],
+  data() {
+    return {};
+  },
+  methods: {
+    /**
+     * Get path points
+     *
+     * @param {any} fromTaskId
+     * @param {any} toTaskId
+     * @returns {string}
+     */
+    getPoints(fromTaskId, toTaskId) {
+      const fromTask = this.root.getTask(fromTaskId);
+      const toTask = this.root.getTask(toTaskId);
+      if (
+        fromTask === null ||
+        toTask === null ||
+        !this.root.isTaskVisible(toTask) ||
+        !this.root.isTaskVisible(fromTask)
+      ) {
+        return null;
+      }
+      const startX = fromTask.x + fromTask.width;
+      const startY = fromTask.y + fromTask.height / 2;
+      const stopX = toTask.x;
+      const stopY = toTask.y + toTask.height / 2;
+      const distanceX = stopX - startX;
+      let distanceY;
+      let yMultiplier = 1;
+      if (stopY >= startY) {
+        distanceY = stopY - startY;
+      } else {
+        distanceY = startY - stopY;
+        yMultiplier = -1;
+      }
+      const offset = 10;
+      const roundness = 4;
+      const isBefore = distanceX <= offset + roundness;
+      let points = `M ${startX} ${startY}
+          L ${startX + offset},${startY} `;
+      if (isBefore) {
+        points += `Q ${startX + offset + roundness},${startY} ${startX + offset + roundness},${startY +
+          roundness * yMultiplier}
+            L ${startX + offset + roundness},${startY + (distanceY * yMultiplier) / 2 - roundness * yMultiplier}
+            Q ${startX + offset + roundness},${startY + (distanceY * yMultiplier) / 2} ${startX + offset},${startY +
+          (distanceY * yMultiplier) / 2}
+            L ${startX - offset + distanceX},${startY + (distanceY * yMultiplier) / 2}
+            Q ${startX - offset + distanceX - roundness},${startY + (distanceY * yMultiplier) / 2} ${startX -
+          offset +
+          distanceX -
+          roundness},${startY + (distanceY * yMultiplier) / 2 + roundness * yMultiplier}
+            L ${startX - offset + distanceX - roundness},${stopY - roundness * yMultiplier}
+            Q ${startX - offset + distanceX - roundness},${stopY} ${startX - offset + distanceX},${stopY}
+            L ${stopX},${stopY}`;
+      } else {
+        points += `L ${startX + distanceX / 2 - roundness},${startY}
+            Q ${startX + distanceX / 2},${startY} ${startX + distanceX / 2},${startY + roundness * yMultiplier}
+            L ${startX + distanceX / 2},${stopY - roundness * yMultiplier}
+            Q ${startX + distanceX / 2},${stopY} ${startX + distanceX / 2 + roundness},${stopY}
+            L ${stopX},${stopY}`;
+      }
+      return points;
+    }
+  },
+  computed: {
+    /**
+     * Get tasks which are dependent on other tasks
+     *
+     * @returns {array}
+     */
+    dependencyTasks() {
+      return this.tasks
+        .filter(task => typeof task.dependentOn !== 'undefined')
+        .map(task => {
+          task.dependencyLines = task.dependentOn.map(id => {
+            return { points: this.getPoints(id, task.id), task_id: id };
+          });
+          return task;
+        })
+        .filter(task => task.dependencyLines.points !== null);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,164 @@
+
+<template>
+  <svg
+    class="gantt-elastic__grid-lines-wrapper"
+    :style="{ ...root.style['grid-lines-wrapper'] }"
+    ref="chart"
+    x="0"
+    y="0"
+    :width="root.state.options.width"
+    :height="root.state.options.allVisibleTasksHeight"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g class="gantt-elastic__grid-lines" :style="{ ...root.style['grid-lines'] }">
+      <line
+        class="gantt-elastic__grid-line-horizontal"
+        :style="{ ...root.style['grid-line-horizontal'] }"
+        v-for="line in horizontalLines"
+        :key="line.key"
+        :x1="line.x1"
+        :y1="line.y1"
+        :x2="line.x2"
+        :y2="line.y2"
+      ></line>
+      <line
+        class="gantt-elastic__grid-line-vertical"
+        :style="{ ...root.style['grid-line-vertical'] }"
+        v-for="line in verticalLines"
+        :key="line.key"
+        :x1="line.x1"
+        :y1="line.y1"
+        :x2="line.x2"
+        :y2="line.y2"
+      ></line>
+      <line
+        class="gantt-elastic__grid-line-time"
+        :style="{ ...root.style['grid-line-time'] }"
+        :x1="timeLinePosition.x"
+        :y1="timeLinePosition.y1"
+        :x2="timeLinePosition.x"
+        :y2="timeLinePosition.y2"
+      ></line>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Grid',
+  inject: ['root'],
+  data() {
+    return {};
+  },
+  /**
+   * Created
+   */
+  created() {
+    this.root.$on('recenterPosition', this.recenterPosition);
+  },
+
+  /**
+   * Mounted
+   */
+  mounted() {
+    this.$nextTick(() => {
+      this.$nextTick(() => {
+        // because of stupid slider :/
+        this.root.scrollToTime(this.timeLinePosition.time);
+      });
+    });
+  },
+
+  methods: {
+    /**
+     * Recenter position - go to current time line
+     */
+    recenterPosition() {
+      this.root.scrollToTime(this.timeLinePosition.time);
+    }
+  },
+
+  computed: {
+    /**
+     * Generate vertical lines of the grid
+     *
+     * @returns {array}
+     */
+    verticalLines() {
+      let lines = [];
+      const state = this.root.state;
+      state.options.times.steps.forEach(step => {
+        if (this.root.isInsideViewPort(step.offset.px, 1)) {
+          lines.push({
+            key: step.time,
+            x1: step.offset.px,
+            y1: 0,
+            x2: step.offset.px,
+            y2:
+              state.tasks.length * (state.options.row.height + state.options.chart.grid.horizontal.gap * 2) +
+              this.root.style['grid-line-vertical']['stroke-width']
+          });
+        }
+      });
+      return lines;
+    },
+
+    /**
+     * Generate horizontal lines of the grid
+     *
+     * @returns {array}
+     */
+    horizontalLines() {
+      let lines = [];
+      const state = this.root.state.options;
+      let tasks = this.root.visibleTasks;
+      for (let index = 0, len = tasks.length; index <= len; index++) {
+        const y =
+          index * (state.row.height + state.chart.grid.horizontal.gap * 2) +
+          this.root.style['grid-line-vertical']['stroke-width'] / 2;
+        lines.push({
+          key: 'hl' + index,
+          x1: 0,
+          y1: y,
+          x2: '100%',
+          y2: y
+        });
+      }
+      return lines;
+    },
+
+    /**
+     * Check if specified line is inside viewport (visible)
+     *
+     * @returns {function}
+     */
+    inViewPort() {
+      return line => {
+        const state = this.root.state.options;
+        return line.x1 >= state.scroll.chart.left && line.x1 <= state.scroll.chart.right;
+      };
+    },
+
+    /**
+     * Get current time line position
+     *
+     * @returns {object}
+     */
+    timeLinePosition() {
+      const d = new Date();
+      const current = d.getTime();
+      const currentOffset = this.root.timeToPixelOffsetX(current);
+      const timeLine = {
+        x: 0,
+        y1: 0,
+        y2: '100%',
+        dateTime: '',
+        time: current
+      };
+      timeLine.x = currentOffset;
+      timeLine.dateTime = d.toLocaleDateString();
+      return timeLine;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,110 @@
+
+<template>
+  <g
+    class="gantt-elastic__chart-row-progress-bar-wrapper"
+    :style="{ ...root.style['chart-row-progress-bar-wrapper'], ...task.style['chart-row-progress-bar-wrapper'] }"
+  >
+    <defs>
+      <pattern
+        id="diagonalHatch"
+        :width="root.state.options.chart.progress.width"
+        :height="root.state.options.chart.progress.width"
+        patternTransform="rotate(45 0 0)"
+        patternUnits="userSpaceOnUse"
+      >
+        <line
+          class="chart-row-progress-bar-line"
+          :style="{ ...root.style['chart-row-progress-bar-line'], ...task.style['chart-row-progress-bar-line'] }"
+          x1="0"
+          y1="0"
+          x2="0"
+          :y2="root.state.options.chart.progress.width"
+        />
+      </pattern>
+    </defs>
+    <rect
+      v-if="root.state.options.chart.progress.bar"
+      class="gantt-elastic__chart-row-progress-bar-solid"
+      :style="{ ...root.style['chart-row-progress-bar-solid'], ...task.style['chart-row-progress-bar-solid'] }"
+      x="0"
+      y="0"
+      :width="getProgressWidth"
+    ></rect>
+    <g v-if="root.state.options.chart.progress.pattern">
+      <rect
+        class="gantt-elastic__chart-row-progress-bar-pattern"
+        :style="{ ...root.style['chart-row-progress-bar-pattern'], ...task.style['chart-row-progress-bar-pattern'] }"
+        :x="getProgressWidth"
+        y="0"
+        :width="100 - task.progress + '%'"
+        height="100%"
+      ></rect>
+      <path
+        class="gantt-elastic__chart-row-progress-bar-outline"
+        :style="{
+          ...root.style['chart-row-progress-bar-outline'],
+          ...task.style['base'],
+          ...task.style['chart-row-progress-bar-outline']
+        }"
+        :d="getLinePoints"
+      ></path>
+    </g>
+  </g>
+</template>
+
+<script>
+export default {
+  name: 'ProgressBar',
+  inject: ['root'],
+  props: ['task'],
+  data() {
+    return {};
+  },
+
+  computed: {
+    /**
+     * Get progress width
+     *
+     * @returns {string}
+     */
+    getProgressWidth() {
+      return this.task.progress + '%';
+    },
+
+    /**
+     * Get line points
+     *
+     * @returns {string}
+     */
+    getLinePoints() {
+      const start = (this.task.width / 100) * this.task.progress;
+      return `M ${start} 0 L ${start} ${this.task.height}`;
+    },
+
+    /**
+     * Get solid style
+     *
+     * @returns {object}
+     */
+    getSolidStyle() {
+      return Object.assign({}, this.root.state.options.chart.progress.styles.bar.solid, this.task.progressBarStyle.bar);
+    },
+
+    /**
+     * Get line style
+     *
+     * @returns {object}
+     */
+    getLineStyle() {
+      return Object.assign(
+        {},
+        {
+          stroke: this.root.state.options.row.styles.bar.stroke + 'a0',
+          'stroke-width': this.root.state.options.row.styles.bar['stroke-width'] / 2
+        },
+        this.task.style
+      );
+    }
+  }
+};
+</script>

package/src/components/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/components/Chart/Row/Project.vue

@@ -0,0 +1,131 @@
+
+<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;
+      return expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,46 @@
+
+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;
+      return expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display);
+    }
+  },
+  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 });
+      }
+    }
+  }
+};