tg-ganttchart 0.0.7 → 0.0.8

package/src/components/components/Calendar/Calendar.vue

@@ -0,0 +1,332 @@
+
+<template>
+  <div
+    class="gantt-elastic__calendar-wrapper"
+    :style="{ ...root.style['calendar-wrapper'], width: root.state.options.width + 'px' }"
+  >
+    <div class="gantt-elastic__calendar" :style="{ ...root.style['calendar'], width: root.state.options.width + 'px' }">
+      <calendar-row :items="dates.months" which="month" v-if="root.state.options.calendar.month.display"></calendar-row>
+      <calendar-row :items="dates.days" which="day" v-if="root.state.options.calendar.day.display"></calendar-row>
+      <calendar-row :items="dates.hours" which="hour" v-if="root.state.options.calendar.hour.display"></calendar-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+import CalendarRow from './CalendarRow.vue';
+
+export default {
+  name: 'Calendar',
+  components: {
+    CalendarRow
+  },
+  inject: ['root'],
+  data() {
+    return {};
+  },
+
+  methods: {
+    /**
+     * How many hours will fit?
+     *
+     * @returns {object}
+     */
+    howManyHoursFit(dayIndex) {
+      const stroke = 1;
+      const additionalSpace = stroke + 2;
+      let fullCellWidth = this.root.state.options.times.steps[dayIndex].width.px;
+      let formatNames = Object.keys(this.root.state.options.calendar.hour.format);
+      for (let hours = 24; hours > 1; hours = Math.ceil(hours / 2)) {
+        for (let formatName of formatNames) {
+          if (
+            (this.root.state.options.calendar.hour.maxWidths[formatName] + additionalSpace) * hours <= fullCellWidth &&
+            hours > 1
+          ) {
+            return {
+              count: hours,
+              type: formatName
+            };
+          }
+        }
+      }
+      return {
+        count: 0,
+        type: ''
+      };
+    },
+
+    /**
+     * How many days will fit?
+     *
+     * @returns {object}
+     */
+    howManyDaysFit() {
+      const stroke = 1;
+      const additionalSpace = stroke + 2;
+      let fullWidth = this.root.state.options.width;
+      let formatNames = Object.keys(this.root.state.options.calendar.day.format);
+      for (let days = this.root.state.options.times.steps.length; days > 1; days = Math.ceil(days / 2)) {
+        for (let formatName of formatNames) {
+          if (
+            (this.root.state.options.calendar.day.maxWidths[formatName] + additionalSpace) * days <= fullWidth &&
+            days > 1
+          ) {
+            return {
+              count: days,
+              type: formatName
+            };
+          }
+        }
+      }
+      return {
+        count: 0,
+        type: ''
+      };
+    },
+
+    /**
+     * How many months will fit?
+     *
+     * @returns {object}
+     */
+    howManyMonthsFit() {
+      const stroke = 1;
+      const additionalSpace = stroke + 2;
+      let fullWidth = this.root.state.options.width;
+      let formatNames = Object.keys(this.root.state.options.calendar.month.format);
+      let currentMonth = dayjs(this.root.state.options.times.firstTime);
+      let previousMonth = currentMonth.clone();
+      const lastTime = this.root.state.options.times.lastTime;
+      let monthsCount = this.root.monthsCount(
+        this.root.state.options.times.firstTime,
+        this.root.state.options.times.lastTime
+      );
+      if (monthsCount === 1) {
+        for (let formatName of formatNames) {
+          if (this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace <= fullWidth) {
+            return {
+              count: 1,
+              type: formatName
+            };
+          }
+        }
+      }
+      for (let months = monthsCount; months > 1; months = Math.ceil(months / 2)) {
+        for (let formatName of formatNames) {
+          if (
+            (this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace) * months <= fullWidth &&
+            months > 1
+          ) {
+            return {
+              count: months,
+              type: formatName
+            };
+          }
+        }
+      }
+      return {
+        count: 0,
+        type: formatNames[0]
+      };
+    },
+
+    /**
+     * Generate hours
+     *
+     * @returns {array}
+     */
+    generateHours() {
+      let allHours = [];
+      if (!this.root.state.options.calendar.hour.display) {
+        return allHours;
+      }
+      const steps = this.root.state.options.times.steps;
+      const localeName = this.root.state.options.locale.name;
+      for (let hourIndex = 0, len = steps.length; hourIndex < len; hourIndex++) {
+        const hoursCount = this.howManyHoursFit(hourIndex);
+        if (hoursCount.count === 0) {
+          continue;
+        }
+        const hours = { key: hourIndex + 'step', children: [] };
+        const hourStep = 24 / hoursCount.count;
+        const hourWidthPx = steps[hourIndex].width.px / hoursCount.count;
+        for (let i = 0, len = hoursCount.count; i < len; i++) {
+          const hour = i * hourStep;
+          let index = hourIndex;
+          if (hourIndex > 0) {
+            index = hourIndex - Math.floor(hourIndex / 24) * 24;
+          }
+          let textWidth = 0;
+          if (typeof this.root.state.options.calendar.hour.widths[index] !== 'undefined') {
+            textWidth = this.root.state.options.calendar.hour.widths[index][hoursCount.type];
+          }
+          let x = steps[hourIndex].offset.px + hourWidthPx * i;
+          hours.children.push({
+            index: hourIndex,
+            key: 'h' + i,
+            x,
+            y: this.root.state.options.calendar.day.height + this.root.state.options.calendar.month.height,
+            width: hourWidthPx,
+            textWidth,
+            height: this.root.state.options.calendar.hour.height,
+            label: this.root.state.options.calendar.hour.formatted[hoursCount.type][hour]
+          });
+        }
+        allHours.push(hours);
+      }
+      return allHours;
+    },
+
+    /**
+     * Generate days
+     *
+     * @returns {array}
+     */
+    generateDays() {
+      let days = [];
+      if (!this.root.state.options.calendar.day.display) {
+        return days;
+      }
+      const daysCount = this.howManyDaysFit();
+      if (daysCount.count === 0) {
+        return days;
+      }
+      const steps = this.root.state.options.times.steps;
+      const localeName = this.root.state.options.locale.name;
+      const dayStep = Math.ceil(steps.length / daysCount.count);
+      for (let dayIndex = 0, len = steps.length; dayIndex < len; dayIndex += dayStep) {
+        let dayWidthPx = 0;
+        // day could be shorter (daylight saving time) so join widths and divide
+        for (let currentStep = 0; currentStep < dayStep; currentStep++) {
+          if (typeof steps[dayIndex + currentStep] !== 'undefined') {
+            dayWidthPx += steps[dayIndex + currentStep].width.px;
+          }
+        }
+        const date = dayjs(steps[dayIndex].time);
+        let textWidth = 0;
+        if (typeof this.root.state.options.calendar.day.widths[dayIndex] !== 'undefined') {
+          textWidth = this.root.state.options.calendar.day.widths[dayIndex][daysCount.type];
+        }
+        let x = steps[dayIndex].offset.px;
+        days.push({
+          index: dayIndex,
+          key: steps[dayIndex].time + 'd',
+          x,
+          y: this.root.state.options.calendar.month.height,
+          width: dayWidthPx,
+          textWidth,
+          height: this.root.state.options.calendar.day.height,
+          label: this.root.state.options.calendar.day.format[daysCount.type](date.locale(localeName))
+        });
+      }
+      return days.map(item => ({
+        key: item.key,
+        children: [item]
+      }));
+    },
+
+    /**
+     * Generate months
+     *
+     * @returns {array}
+     */
+    generateMonths() {
+      let months = [];
+      if (!this.root.state.options.calendar.month.display) {
+        return months;
+      }
+      const monthsCount = this.howManyMonthsFit();
+      if (monthsCount.count === 0) {
+        return months;
+      }
+      const steps = this.root.state.options.times.steps;
+      const localeName = this.root.state.options.locale.name;
+      let formatNames = Object.keys(this.root.state.options.calendar.month.format);
+      let currentDate = dayjs(this.root.state.options.times.firstTime);
+      for (let monthIndex = 0; monthIndex < monthsCount.count; monthIndex++) {
+        let monthWidth = 0;
+        let monthOffset = Number.MAX_SAFE_INTEGER;
+        let finalDate = dayjs(currentDate)
+          .add(1, 'month')
+          .startOf('month');
+        if (finalDate.valueOf() > this.root.state.options.times.lastTime) {
+          finalDate = dayjs(this.root.state.options.times.lastTime);
+        }
+        // we must find first and last step to get the offsets / widths
+        for (let step = 0, len = this.root.state.options.times.steps.length; step < len; step++) {
+          let currentStep = this.root.state.options.times.steps[step];
+          if (currentStep.time >= currentDate.valueOf() && currentStep.time < finalDate.valueOf()) {
+            monthWidth += currentStep.width.px;
+            if (currentStep.offset.px < monthOffset) {
+              monthOffset = currentStep.offset.px;
+            }
+          }
+        }
+        let label = '';
+        let choosenFormatName;
+        for (let formatName of formatNames) {
+          if (this.root.state.options.calendar.month.maxWidths[formatName] + 2 <= monthWidth) {
+            label = this.root.state.options.calendar.month.format[formatName](currentDate.locale(localeName));
+            choosenFormatName = formatName;
+          }
+        }
+        let textWidth = 0;
+        if (typeof this.root.state.options.calendar.month.widths[monthIndex] !== 'undefined') {
+          textWidth = this.root.state.options.calendar.month.widths[monthIndex][choosenFormatName];
+        }
+        let x = monthOffset;
+        months.push({
+          index: monthIndex,
+          key: monthIndex + 'm',
+          x,
+          y: 0,
+          width: monthWidth,
+          textWidth,
+          choosenFormatName,
+          height: this.root.state.options.calendar.month.height,
+          label
+        });
+        currentDate = currentDate.add(1, 'month').startOf('month');
+        if (currentDate.valueOf() > this.root.state.options.times.lastTime) {
+          currentDate = dayjs(this.root.state.options.times.lastTime);
+        }
+      }
+      return months.map(item => ({
+        key: item.key,
+        children: [item]
+      }));
+    },
+
+    /**
+     * Sum all calendar rows height and return result
+     *
+     * @returns {int}
+     */
+    calculateCalendarDimensions({ hours, days, months }) {
+      let height = 0;
+      if (this.root.state.options.calendar.hour.display && hours.length > 0) {
+        height += this.root.state.options.calendar.hour.height;
+      }
+      if (this.root.state.options.calendar.day.display && days.length > 0) {
+        height += this.root.state.options.calendar.day.height;
+      }
+      if (this.root.state.options.calendar.month.display && months.length > 0) {
+        height += this.root.state.options.calendar.month.height;
+      }
+      this.root.state.options.calendar.height = height;
+    }
+  },
+
+  computed: {
+    dates() {
+      const hours = this.generateHours();
+      const days = this.generateDays();
+      const months = this.generateMonths();
+      const allDates = { hours, days, months };
+      this.calculateCalendarDimensions(allDates);
+      return allDates;
+    }
+  }
+};
+</script>

package/src/components/components/Calendar/CalendarRow.vue

@@ -0,0 +1,96 @@
+
+<template>
+  <div :class="'gantt-elastic__calendar-row gantt-elastic__calendar-row--' + which" :style="rowStyle">
+    <div
+      v-for="(item, itemIndex) in items"
+      :key="item.key"
+      :class="'gantt-elastic__calendar-row-rect gantt-elastic__calendar-row-rect--' + which"
+      :style="rectStyle"
+    >
+      <div
+        :class="'gantt-elastic__calendar-row-rect-child gantt-elastic__calendar-row-rect-child--' + which"
+        v-for="(child, childIndex) in item.children"
+        :key="child.key"
+        :style="rectChildStyle[itemIndex][childIndex]"
+      >
+        <div
+          :class="'gantt-elastic__calendar-row-text gantt-elastic__calendar-row-text--' + which"
+          :style="textStyle(child)"
+        >
+          {{ child.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CalendarRow',
+  inject: ['root'],
+  props: ['items', 'which'],
+  data() {
+    return {};
+  },
+  methods: {
+    /**
+     * Get x position
+     *
+     * @returns {number}
+     */
+    getTextX(item) {
+      let x = item.x + item.width / 2 - item.textWidth / 2;
+      if (this.which === 'month' && this.root.isInsideViewPort(item.x, item.width, 0)) {
+        let scrollWidth = this.root.state.options.scroll.chart.right - this.root.state.options.scroll.chart.left;
+        x = this.root.state.options.scroll.chart.left + scrollWidth / 2 - item.textWidth / 2 + 2;
+        if (x + item.textWidth + 2 > item.x + item.width) {
+          x = item.x + item.width - item.textWidth - 2;
+        } else if (x < item.x) {
+          x = item.x + 2;
+        }
+      }
+      return x - item.x;
+    }
+  },
+  computed: {
+    rowStyle() {
+      return { ...this.root.style['calendar-row'], ...this.root.style['calendar-row--' + this.which] };
+    },
+    rectStyle() {
+      return { ...this.root.style['calendar-row-rect'], ...this.root.style['calendar-row-rect--' + this.which] };
+    },
+    rectChildStyle() {
+      const basicStyle = {
+        ...this.root.style['calendar-row-rect-child'],
+        ...this.root.style['calendar-row-rect-child--' + this.which]
+      };
+      const style = [];
+      for (let item of this.items) {
+        const childrenStyle = [];
+        for (let child of item.children) {
+          childrenStyle.push({
+            ...basicStyle,
+            width: child.width + 'px',
+            height: child.height + 'px'
+          });
+        }
+        style.push(childrenStyle);
+      }
+      return style;
+    },
+    textStyle() {
+      const basicStyle = {
+        ...this.root.style['calendar-row-text'],
+        ...this.root.style['calendar-row-text--' + this.which]
+      };
+      return child => {
+        const style = { ...basicStyle };
+        if (this.which === 'month') {
+          style.left = this.getTextX(child) + 'px';
+        }
+        return style;
+      };
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,111 @@
+
+<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';
+export default {
+  name: 'Chart',
+  components: {
+    Grid,
+    DependencyLines,
+    Calendar,
+    Task,
+    Milestone,
+    Project,
+    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/components/Chart/DaysHighlight.vue

@@ -0,0 +1,71 @@
+
+
+<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 dayjs(day.time).format('YYYY-MM-DD');
+    }
+  },
+  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>