tg-ganttchart 0.0.4 → 0.0.6

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

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

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

@@ -1,111 +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';
-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

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