tg-ganttchart 0.0.7 → 0.0.8

package/src/components/Chart/Chart.vue

@@ -0,0 +1,117 @@
+
+<template>
+  <div class="gantt-elastic__chart" :style="{ ...root.style['chart'] }" ref="chart">
+    <div
+      class="gantt-elastic__chart-calendar-container"
+      ref="chartCalendarContainer"
+      :style="{
+        ...root.style['chart-calendar-container'],
+        height: root.state.options.calendar.height + 'px',
+        'margin-bottom': root.state.options.calendar.gap + 'px'
+      }"
+    >
+      <calendar></calendar>
+    </div>
+    <div
+      class="gantt-elastic__chart-graph-container"
+      ref="chartGraphContainer"
+      :style="{
+        ...root.style['chart-graph-container'],
+        height: root.state.options.height - root.state.options.calendar.height + 'px'
+      }"
+    >
+      <div
+        :style="{
+          ...root.style['chart-area'],
+          width: root.state.options.width + 'px',
+          height: root.state.options.rowsHeight + 'px'
+        }"
+      >
+        <div
+          class="gantt-elastic__chart-graph"
+          ref="chartGraph"
+          :style="{ ...root.style['chart-graph'], height: '100%' }"
+        >
+          <svg
+            class="gantt-elastic__chart-graph-svg"
+            :style="{ ...root.style['chart-graph-svg'] }"
+            ref="chartGraphSvg"
+            x="0"
+            y="0"
+            :width="root.state.options.width + 'px'"
+            :height="root.state.options.allVisibleTasksHeight + 'px'"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <days-highlight></days-highlight>
+            <grid></grid>
+            <dependency-lines :tasks="root.visibleTasks"></dependency-lines>
+            <g
+              class="gantt-elastic__chart-row-wrapper"
+              :style="{ ...root.style['chart-row-wrapper'] }"
+              v-for="task in root.visibleTasks"
+              :task="task"
+              :key="task.id"
+            >
+              <component :task="task" :is="task.type"></component>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Grid from './Grid.vue';
+import DaysHighlight from './DaysHighlight.vue';
+import Calendar from '../Calendar/Calendar.vue';
+import DependencyLines from './DependencyLines.vue';
+import Task from './Row/Task.vue';
+import Milestone from './Row/Milestone.vue';
+import Project from './Row/Project.vue';
+import Epic from './Row/Epic.vue';
+import Subtask from './Row/Subtask.vue';
+import Story from './Row/Story.vue';
+export default {
+  name: 'Chart',
+  components: {
+    Grid,
+    DependencyLines,
+    Calendar,
+    task: Task,
+    milestone: Milestone,
+    project: Project,
+    epic: Epic,
+    subtask: Subtask,
+    story: Story,
+    DaysHighlight
+  },
+  inject: ['root'],
+  data() {
+    return {
+      moving: false
+    };
+  },
+  /**
+   * Mounted
+   */
+  mounted() {
+    this.root.state.refs.chart = this.$refs.chart;
+    this.root.state.refs.chartCalendarContainer = this.$refs.chartCalendarContainer;
+    this.root.state.refs.chartGraphContainer = this.$refs.chartGraphContainer;
+    this.root.state.refs.chartGraph = this.$refs.chartGraph;
+    this.root.state.refs.chartGraphSvg = this.$refs.chartGraphSvg;
+  },
+
+  computed: {
+    /**
+     * Get view box
+     *
+     * @returns {string}
+     */
+    getViewBox() {
+      return `0 0 ${this.root.state.options.width} ${this.root.state.options.allVisibleTasksHeight}`;
+    }
+  }
+};
+</script>

package/src/components/Chart/DaysHighlight.vue

@@ -0,0 +1,60 @@
+<template>
+  <g class="gantt-elastic__chart-days-highlight-container" :style="{ ...root.style['chart-days-highlight-container'] }"
+    v-if="showWorkingDays">
+    <rect class="gantt-elastic__chart-days-highlight-rect" v-for="day in workingDays" :key="getKey(day)"
+      :x="day.offset.px" y="0" :width="day.width.px" height="100%"
+      :style="{ ...root.style['chart-days-highlight-rect'] }"></rect>
+  </g>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+export default {
+  name: 'DaysHighlight',
+  inject: ['root'],
+  data() {
+    return {};
+  },
+  methods: {
+    /**
+     * Get key
+     *
+     * @param {object} day
+     * @returns {string} key ideintifier for loop
+     */
+    getKey(day) {
+      // Return the full date-time format
+      return dayjs(day.time).format('YYYY-MM-DD HH:mm');
+    }
+  },
+  computed: {
+    /**
+     * Get working days
+     *
+     * @returns {array}
+     */
+    workingDays() {
+      return this.root.state.options.times.steps.filter(step => {
+        return this.root.state.options.calendar.workingDays.indexOf(dayjs(step.time).day()) === -1;
+      });
+    },
+
+    /**
+     * Show working days?
+     *
+     * @returns {bool}
+     */
+    showWorkingDays() {
+      const calendar = this.root.state.options.calendar;
+      if (
+        typeof calendar.workingDays !== 'undefined' &&
+        Array.isArray(calendar.workingDays) &&
+        calendar.workingDays.length
+      ) {
+        return true;
+      }
+      return false;
+    }
+  }
+};
+</script>

package/src/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/Chart/Grid.vue

@@ -0,0 +1,205 @@
+
+<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;
+      
+      // Add grid lines for all steps (remove viewport check to ensure all borders are drawn)
+      state.options.times.steps.forEach((step, index) => {
+        // Only generate grid lines for steps with valid coordinates
+        if (step.offset && typeof step.offset.px === 'number' && !isNaN(step.offset.px)) {
+          const line = {
+            key: step.time,
+            x1: Math.round(step.offset.px), // Round to ensure exact pixel alignment
+            y1: 0,
+            x2: Math.round(step.offset.px), // Round to ensure exact pixel alignment
+            y2:
+              state.tasks.length * (state.options.row.height + state.options.chart.grid.horizontal.gap * 2) +
+              this.root.style['grid-line-vertical']['stroke-width']
+          };
+          lines.push(line);
+          
+          // Debug: Log grid lines for quarter view
+          if (state.options.times.stepDuration === 'quarter') {
+            console.log(`Grid Line ${index}:`, {
+              x: line.x1,
+              time: new Date(step.time).toISOString().split('T')[0],
+              quarter: new Date(step.time).getMonth() < 3 ? 1 : new Date(step.time).getMonth() < 6 ? 2 : new Date(step.time).getMonth() < 9 ? 3 : 4,
+              stepWidth: step.width?.px || 0,
+              stepOffset: step.offset?.px || 0,
+              hasValidX: line.x1 >= 0 && !isNaN(line.x1)
+            });
+          }
+        } else {
+          // Debug: Log steps that are being skipped
+          if (state.options.times.stepDuration === 'quarter') {
+            console.log(`Skipped Grid Line ${index}:`, {
+              time: new Date(step.time).toISOString().split('T')[0],
+              offset: step.offset,
+              hasValidOffset: !!(step.offset && typeof step.offset.px === 'number' && !isNaN(step.offset.px))
+            });
+          }
+        }
+      });
+      
+      // Add final grid line at the end of the chart area to eliminate empty space
+      const lastStep = state.options.times.steps[state.options.times.steps.length - 1];
+      if (lastStep) {
+        const finalX = Math.round(lastStep.offset.px + lastStep.width.px);
+        lines.push({
+          key: 'final-line',
+          x1: finalX,
+          y1: 0,
+          x2: finalX,
+          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/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>