tg-ganttchart 0.0.8 → 0.0.10

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

@@ -1,112 +0,0 @@
-
-<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

@@ -1,164 +0,0 @@
-
-<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

@@ -1,110 +0,0 @@
-
-<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

@@ -1,117 +0,0 @@
-
-<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

@@ -1,131 +0,0 @@
-
-<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

@@ -1,46 +0,0 @@
-
-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 });
-      }
-    }
-  }
-};