tg-ganttchart 0.0.8 → 0.0.10

package/src/components/Chart/Chart.vue

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

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

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

@@ -1,205 +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;
-      
-      // 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

@@ -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>