tg-ganttchart 0.0.7 → 0.0.8

package/src/components/Calendar/Calendar.vue

@@ -0,0 +1,559 @@
+<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' }">
+      <!-- Quarterly View -->
+      <calendar-row :items="dates.quarters" which="quarter" v-if="viewMode === 'quarter'"></calendar-row>
+
+      <!-- Monthly View -->
+      <calendar-row :items="dates.months" which="month" v-if="viewMode === 'month'"></calendar-row>
+
+      <!-- Weekly View -->
+      <calendar-row :items="dates.weeks" which="week" v-if="viewMode === 'week'"></calendar-row>
+
+      <!-- Daily View
+      <calendar-row :items="dates.days" which="day" v-if="viewMode === 'day' || viewMode === 'week'"></calendar-row> -->
+
+      <!-- Hourly View -->
+      <calendar-row :items="dates.days" which="day" v-if="viewMode === 'day'"></calendar-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+import isoWeek from 'dayjs/plugin/weekOfYear';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import CalendarRow from './CalendarRow.vue';
+
+// Extend dayjs with required plugins
+dayjs.extend(isoWeek);
+dayjs.extend(quarterOfYear);
+
+export default {
+  name: 'Calendar',
+  components: {
+    CalendarRow
+  },
+  inject: ['root'],
+  data() {
+    return {
+      dayjsInstance: dayjs // Store dayjs instance for consistent usage
+    };
+  },
+
+  computed: {
+    viewMode() {
+      return this.root.state.options.calendar.viewMode || 'day';
+    },
+
+    dates() {
+      const days = this.generateDays();
+      const weeks = this.generateWeeks();
+      const months = this.generateMonths();
+      const quarters = this.generateQuarters()
+      const allDates = { days, weeks, months, quarters };
+      this.calculateCalendarDimensions(allDates);
+      return allDates;
+    }
+  },
+
+  methods: {
+  
+    calculateCalendarDimensions({ days, weeks, months, quarters }) {
+      let height = 0;
+      if (this.viewMode === 'quarter' && quarters.length > 0) {
+        height += this.root.state.options.calendar.quarter?.height || 30;
+      }
+
+      // Add month height if visible
+      if ((this.viewMode === 'month') && months.length > 0) {
+        height += this.root.state.options.calendar.month.height || 25;
+      }
+
+      // Add week height if visible
+      if (this.viewMode === 'week' && weeks.length > 0) {
+        height += this.root.state.options.calendar.week?.height || 25;
+      }
+
+      // Add day height if visible
+      if ((this.viewMode === 'day') && days.length > 0) {
+        height += this.root.state.options.calendar.day.height;
+      }
+
+      this.root.state.options.calendar.height = height;
+    },
+
+    generateDays() {
+      let days = [];
+      if (!(this.viewMode === 'day' || this.viewMode === 'week')) {
+        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;
+
+        // Calculate total width for this day group
+        for (let currentStep = 0; currentStep < dayStep; currentStep++) {
+          if (typeof steps[dayIndex + currentStep] !== 'undefined') {
+            dayWidthPx += steps[dayIndex + currentStep].width.px;
+          }
+        }
+
+        const date = this.dayjsInstance(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];
+        }
+
+        // Use exact step offset for perfect alignment with grid lines
+        let x = Math.round(steps[dayIndex].offset.px); // Round to ensure exact pixel alignment
+        days.push({
+          index: dayIndex,
+          key: steps[dayIndex].time + 'd',
+          x,
+          y: this.getYPosition('day'),
+          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]
+      }));
+    },
+
+    generateWeeks() {
+      let weeks = [];
+      if (this.viewMode !== 'week') {
+        return weeks;
+      }
+
+      const steps = this.root.state.options.times.steps;
+
+      let currentWeek = null;
+      let weekStartX = 0;
+      let weekWidth = 0;
+      let weekStartDate = null;
+      let weekEndDate = null;
+
+      for (let i = 0; i < steps.length; i++) {
+        try {
+          const stepDate = this.dayjsInstance(steps[i].time);
+          const weekNumber = stepDate.week();
+          const year = stepDate.year();
+          const weekKey = `${year}-W${weekNumber}`;
+
+          if (weekKey !== currentWeek) {
+            // Save previous week
+            if (currentWeek !== null) {
+              // Format the label as "Month Day-Day"
+              const startMonth = weekStartDate.format('MMMM');
+              const startDay = weekStartDate.date();
+              const endDay = weekEndDate.date();
+              let label = `${startMonth} ${startDay}`;
+              
+              // If the week spans multiple months, show both months
+              if (weekStartDate.month() !== weekEndDate.month()) {
+                const endMonth = weekEndDate.format('MMMM');
+                label = `${startMonth} ${startDay} - ${endMonth} ${endDay}`;
+              } else if (startDay !== endDay) {
+                label = `${startMonth} ${startDay}-${endDay}`;
+              }
+              
+              weeks.push({
+                key: currentWeek,
+                x: weekStartX, // Use exact step offset for perfect alignment
+                y: this.getYPosition('week'),
+                width: weekWidth,
+                textWidth: 50,
+                height: this.root.state.options.calendar.week?.height || 25,
+                label: label
+              });
+            }
+
+            // Start new week - use exact step offset
+            currentWeek = weekKey;
+            weekStartX = Math.round(steps[i].offset.px); // Round to ensure exact pixel alignment
+            weekWidth = steps[i].width.px;
+            weekStartDate = stepDate.clone().startOf('week');
+            weekEndDate = stepDate.clone().endOf('week');
+          } else {
+            // Same week, accumulate width and update end date
+            weekWidth += steps[i].width.px;
+            weekEndDate = stepDate.clone().endOf('week');
+          }
+        } catch (error) {
+          console.error('Error processing week:', error);
+          continue;
+        }
+      }
+
+      // Add the last week
+      if (currentWeek !== null) {
+        // Format the label as "Month Day-Day"
+        const startMonth = weekStartDate.format('MMMM');
+        const startDay = weekStartDate.date();
+        const endDay = weekEndDate.date();
+        let label = `${startMonth} ${startDay}`;
+        
+        // If the week spans multiple months, show both months
+        if (weekStartDate.month() !== weekEndDate.month()) {
+          const endMonth = weekEndDate.format('MMMM');
+          label = `${startMonth} ${startDay} - ${endMonth} ${endDay}`;
+        } else if (startDay !== endDay) {
+          label = `${startMonth} ${startDay}-${endDay}`;
+        }
+        
+        weeks.push({
+          key: currentWeek,
+          x: weekStartX, // Use exact step offset for perfect alignment
+          y: this.getYPosition('week'),
+          width: weekWidth,
+          textWidth: 60,
+          height: this.root.state.options.calendar.week?.height || 25,
+          label: label
+        });
+      }
+
+      return weeks.map(week => ({
+        key: week.key,
+        children: [week]
+      }));
+    },
+
+    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];
+        }
+        // Use exact step offset for perfect alignment with grid lines
+        let x = Math.round(monthOffset); // Round to ensure exact pixel alignment
+        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]
+      }));
+    },
+
+
+    generateQuarters() {
+      let quarters = [];
+      if (this.viewMode !== 'quarter') {
+        return quarters;
+      }
+
+      const steps = this.root.state.options.times.steps;
+      
+      // Debug: Log quarter generation info
+      console.log('Quarter Generation Debug:', {
+        stepsCount: steps.length,
+        firstStepTime: this.dayjsInstance(steps[0]?.time).format('YYYY-MM-DD'),
+        lastStepTime: this.dayjsInstance(steps[steps.length - 1]?.time).format('YYYY-MM-DD'),
+        firstStepQuarter: this.dayjsInstance(steps[0]?.time).quarter(),
+        lastStepQuarter: this.dayjsInstance(steps[steps.length - 1]?.time).quarter()
+      });
+
+      let currentQuarter = null;
+      let quarterStartX = 0;
+      let quarterWidth = 0;
+      let quarterStartDate = null;
+      let quarterEndDate = null;
+
+      for (let i = 0; i < steps.length; i++) {
+        try {
+          // Use UTC to avoid locale/timezone issues
+          const stepDate = this.dayjsInstance(steps[i].time);
+          const quarter = stepDate.quarter();
+          const year = stepDate.year();
+          const quarterKey = `Q${quarter}-${year}`;
+
+          console.log(`Step ${i}:`, {
+            time: stepDate.format('YYYY-MM-DD'),
+            quarter: quarter,
+            year: year,
+            quarterKey: quarterKey,
+            currentQuarter: currentQuarter
+          });
+
+          if (quarterKey !== currentQuarter) {
+            // Save previous quarter
+            if (currentQuarter !== null) {
+              // Format the label as "Month – Month 'Year"
+              const startMonth = quarterStartDate.format('MMMM');
+              const endMonth = quarterEndDate.format('MMMM');
+              const shortYear = quarterEndDate.format("YY");
+              const label = `${startMonth} – ${endMonth} '${shortYear}`;
+              
+              
+              quarters.push({
+                key: currentQuarter,
+                x: quarterStartX, // Use exact step offset for perfect alignment
+                y: this.getYPosition('quarter'),
+                width: quarterWidth,
+                textWidth: 50,
+                height: this.root.state.options.calendar.quarter?.height || 30,
+                label: label
+              });
+            }
+
+            // Start new quarter
+            currentQuarter = quarterKey;
+            quarterStartX = Math.round(steps[i].offset.px); // Round to ensure exact pixel alignment
+            quarterWidth = steps[i].width.px;
+            quarterStartDate = stepDate.clone().startOf('quarter');
+            quarterEndDate = stepDate.clone().endOf('quarter');
+          } else {
+            // Same quarter, accumulate width and update end date
+            quarterWidth += steps[i].width.px;
+            quarterEndDate = stepDate.clone().endOf('quarter');
+          }
+        } catch (error) {
+          console.error('Error processing quarter:', error);
+          continue;
+        }
+      }
+
+      // Add the last quarter
+      if (currentQuarter !== null) {
+        // Format the label as "Month – Month 'Year"
+        const startMonth = quarterStartDate.format('MMMM');
+        const endMonth = quarterEndDate.format('MMMM');
+        const shortYear = quarterEndDate.format("YY");
+        const label = `${startMonth} – ${endMonth} '${shortYear}`;
+        
+        
+        quarters.push({
+          key: currentQuarter,
+          x: quarterStartX, // Use exact step offset for perfect alignment
+          y: this.getYPosition('quarter'),
+          width: quarterWidth,
+          textWidth: 60,
+          height: this.root.state.options.calendar.quarter?.height || 30,
+          label: label
+        });
+      }
+
+
+      return quarters.map(quarter => ({
+        key: quarter.key,
+        children: [quarter]
+      }));
+    },
+
+    getYPosition(type) {
+      let y = 0;
+      switch (type) {
+        case 'quarter':
+          return 0;
+        case 'month':
+          // Put month row below quarter if in quarterly view
+          return this.viewMode === 'quarter'
+            ? (this.root.state.options.calendar.quarter?.height || 30)
+            : 0;
+        case 'week':
+          // Put week row below month and quarter if applicable
+
+          if (this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.quarter?.height || 30;
+          }
+          if (this.viewMode === 'month' || this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.month.height;
+          }
+          return y;
+        case 'day':
+          // Put day below week if applicable
+          y = 0;
+          if (this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.quarter?.height || 30;
+          }
+          if (this.viewMode === 'month' || this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.month.height;
+          }
+          if (this.viewMode === 'week') {
+            y += this.root.state.options.calendar.week?.height || 25;
+          }
+          return y;
+        case 'hour':
+          // Put hour row below day if applicable
+          y = 0;
+          if (this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.quarter?.height || 30;
+          }
+          if (this.viewMode === 'month' || this.viewMode === 'quarter') {
+            y += this.root.state.options.calendar.month.height;
+          }
+          if (this.viewMode === 'week') {
+            y += this.root.state.options.calendar.week?.height || 25;
+          }
+          if (this.viewMode === 'day') {
+            y += this.root.state.options.calendar.day.height;
+          }
+          return y;
+        default:
+          return 0;
+      }
+    },
+
+    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: ''
+      };
+    },
+
+    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: ''
+      };
+    },
+
+
+    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]
+      };
+
+    },
+
+
+  }
+};
+</script>

package/src/components/Calendar/CalendarRow.vue

@@ -0,0 +1,112 @@
+<template>
+  <section>
+    <!-- <div>
+      {{ items }}
+    </div> -->
+
+    <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>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'CalendarRow',
+  inject: ['root'],
+  props: ['items', 'which'],
+  data() {
+    return {};
+  },
+  methods: {
+    /**
+     * Get x position
+     *
+     * @returns {number}
+     */
+    getTextX(item) {
+      // Calculate center position within the item
+      let x = item.width / 2 - item.textWidth / 2;
+      
+      // Add padding to avoid overlap with grid lines
+      const gridLineWidth = this.root.style['grid-line-vertical']['stroke-width'] || 1;
+      const padding = Math.max(gridLineWidth / 2 + 2, 4); // At least 4px padding
+      
+      // For month view, use perfect centering with bounds checking
+      if (this.which === 'month') {
+        // Perfect center calculation
+        x = (item.width - item.textWidth) / 2;
+        
+        // Ensure text stays within bounds with padding
+        if (x < padding) {
+          x = padding;
+        } else if (x + item.textWidth + padding > item.width) {
+          x = item.width - item.textWidth - padding;
+        }
+      } else {
+        // For other view types, ensure text stays within bounds
+        if (x + item.textWidth + padding > item.width) {
+          x = item.width - item.textWidth - padding;
+        } else if (x < padding) {
+          x = padding;
+        }
+      }
+      
+      return x;
+    }
+  },
+  computed: {
+    rowStyle() {
+      return { 
+        ...this.root.style['calendar-row'], 
+        ...this.root.style['calendar-row--' + this.which],
+        position: 'relative' // Ensure relative positioning for absolute children
+      };
+    },
+    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',
+            left: child.x + 'px', // Use exact x position for perfect alignment
+            position: 'absolute' // Ensure absolute positioning
+          });
+        }
+        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 };
+        // Remove left positioning for month view - let CSS handle centering
+        return style;
+      };
+    }
+  }
+};
+</script>