fix: remove inject in grid and timeaxis

src/GGanttChart.vue

@@ -11,6 +11,9 @@
       :timemarker-offset="timemarkerOffset"
       :theme-colors="themeColors"
       :locale="locale"
+      :precision="precision"
+      :time-format="timeFormat"
+      :time-count="timeCount"
     />
 
     <g-gantt-grid
@@ -19,6 +22,8 @@
       :chart-end="chartEnd"
       :row-label-width="rowLabelWidth"
       :highlighted-hours="highlightedHours"
+      :precision="precision"
+      :time-count="timeCount"
     />
 
     <div
@@ -54,7 +59,7 @@ export default {
   props: {
     chartStart: { type: String },
     chartEnd: { type: String },
-    hideTimeaxis: Boolean,
+    hideTimeaxis: { type: Boolean },
     rowLabelWidth: { type: String, default: '200px' },
     rowHeight: { type: Number, default: 40 },
     locale: { type: String, default: 'en' },
@@ -67,8 +72,7 @@ export default {
     snapBackOnOverlap: { type: Boolean },
     minGapBetweenBars: { type: Number, default: 0 },
     defaultBarLength: { type: Number, default: 1 },
-    // ["month", "day"]
-    precision: { type: String, default: 'month' },
+    precision: { type: String, default: 'month' }, // 'month', 'day'
     barStartKey: { type: String, default: 'start' }, // property name of the bar objects that represents the start datetime
     barEndKey: { type: String, default: 'end' }, // property name of the bar objects that represents the end datetime,
   },
@@ -77,13 +81,18 @@ export default {
     return {
       timemarkerOffset: 0,
       movedBarsInDrag: new Set(),
-      timeUnit: this.precision === 'month' ? 'days' : 'hours',
-      timeFormat:
-        this.precision === 'month' ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD HH:mm',
     }
   },
 
   computed: {
+    timeUnit() {
+      return this.precision === 'month' ? 'days' : 'hours'
+    },
+
+    timeFormat() {
+      return this.precision === 'month' ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD HH:mm'
+    },
+
     timeCount() {
       let momentChartStart = moment(this.chartStart)
       let momentChartEnd = moment(this.chartEnd)

src/GGanttGrid.vue

@@ -3,16 +3,19 @@
     class="g-grid-container"
     :style="{
       left: rowLabelWidth,
-      width: `${getTimeCount() * 30}px`,
+      width: `${timeCount * 30}px`,
     }"
   >
     <div
       v-for="(childPoint, index) in allChildPoints"
       :key="index"
-      :class="{
-        'g-grid-line': true,
-        'g-grid-line-highlighted': highlightedHours.includes(childPoint),
-      }"
+      :class="[
+        'g-grid-line',
+        {
+          'g-grid-line-highlighted':
+            precision === 'day' && highlightedHours.includes(childPoint),
+        },
+      ]"
     />
   </div>
 </template>
@@ -23,13 +26,13 @@ import moment from 'moment'
 export default {
   name: 'GGanttGrid',
 
-  inject: ['ganttChartProps', 'getTimeCount'],
-
   props: {
     chartStart: { type: String },
     chartEnd: { type: String },
-    rowLabelWidth: String,
+    rowLabelWidth: { type: String },
     highlightedHours: { type: Array, default: () => [] },
+    precision: { type: String },
+    timeCount: { type: Number },
   },
 
   computed: {
@@ -37,14 +40,16 @@ export default {
       let momentChartStart = moment(this.chartStart)
       let momentChartEnd = moment(this.chartEnd)
       let res = []
-      const precision = this.ganttChartProps.precision
       while (momentChartStart.isSameOrBefore(momentChartEnd)) {
-        if (precision === 'month') {
-          res.push(momentChartStart.date())
-          momentChartStart.add(1, 'day')
-        } else if (precision === 'day') {
-          res.push(momentChartStart.date())
-          momentChartStart.add(1, 'hour')
+        switch (this.precision) {
+          case 'day':
+            res.push(momentChartStart.date())
+            momentChartStart.add(1, 'hour')
+            break
+          case 'month':
+            res.push(momentChartStart.date())
+            momentChartStart.add(1, 'day')
+            break
         }
       }
       return res

src/GGanttTimeaxis.vue

@@ -3,9 +3,7 @@
     ref="g-timeaxis"
     class="g-timeaxis"
     :style="{
-      width: `${
-        getTimeCount() * 30 + parseInt(rowLabelWidth.replace('px', ''))
-      }px`,
+      width: `${timeCount * 30 + parseInt(rowLabelWidth.replace('px', ''))}px`,
     }"
   >
     <div
@@ -59,15 +57,16 @@ import moment from 'moment'
 export default {
   name: 'GGanttTimeaxis',
 
-  inject: ['ganttChartProps', 'getTimeUnit', 'getTimeFormat', 'getTimeCount'],
-
   props: {
-    chartStart: String,
-    chartEnd: String,
-    rowLabelWidth: String,
+    chartStart: { type: String },
+    chartEnd: { type: String },
+    rowLabelWidth: { type: String },
     timemarkerOffset: { type: Number, default: 0 },
-    locale: String,
-    themeColors: Object,
+    locale: { type: String },
+    themeColors: { type: Object },
+    precision: { type: String },
+    timeFormat: { type: String },
+    timeCount: { type: Number },
   },
 
   data() {
@@ -77,12 +76,19 @@ export default {
       timemarker: null,
       hourFontSize: '11px',
       dayFormat: 'DD MMMM',
-      precision: this.ganttChartProps.precision,
-      timeUnit: this.getTimeUnit(),
-      timeFormat: this.getTimeFormat(),
+      monthFormat: 'MMMM YYYY',
     }
   },
 
+  watch: {
+    chartStart() {
+      this.initAxis()
+    },
+    chartEnd() {
+      this.initAxis()
+    },
+  },
+
   mounted() {
     this.timemarker = this.$refs['g-timeaxis-marker']
     this.initAxis()
@@ -92,19 +98,27 @@ export default {
     window.addEventListener('dragover', (event) => this.moveTimemarker(event))
   },
 
+  destroyed() {
+    window.removeEventListener('resize', this.onWindowResize)
+  },
+
   methods: {
     initAxis() {
-      if (this.precision === 'month') {
-        this.initAxisMonthsAndDays()
-      } else if (this.precision === 'day') {
-        this.initAxisDaysAndHours()
+      switch (this.precision) {
+        case 'day':
+          this.initAxisDaysAndHours()
+          break
+        case 'month':
+          this.initAxisMonthsAndDays()
+          break
       }
     },
 
     initAxisMonthsAndDays() {
       let start = moment(this.chartStart)
       let end = moment(this.chartEnd)
-      this.childPointCount = Math.floor(end.diff(start, 'day', true))
+      this.childPointCount = Math.floor(end.diff(start, 'days', true))
+      this.axisPoints = []
       while (start.isBefore(end)) {
         let dayCountOfMonth = start.isSame(end, 'month')
           ? end.date() - 1
@@ -122,14 +136,14 @@ export default {
     initAxisDaysAndHours() {
       let start = moment(this.chartStart)
       let end = moment(this.chartEnd)
-      this.childPointCount = Math.floor(end.diff(start, 'hour', true))
+      this.childPointCount = Math.floor(end.diff(start, 'hours', true))
+      this.axisPoints = []
       while (start.isBefore(end)) {
         let hourCountOfDay = start.isSame(end, 'day')
           ? end.hour()
           : 24 - start.hour()
-
         let widthPercentage = (hourCountOfDay / this.childPointCount) * 100
-        let endHour = start.day() === end.day() ? end.hour() - 1 : 23 // -1 because the last hour is not included e.g if chartEnd=04:00 the last interval we display is between 03 and 04
+        let endHour = start.date() === end.date() ? end.hour() - 1 : 23 // -1 because the last hour is not included e.g if chartEnd=04:00 the last interval we display is between 03 and 04
         this.axisPoints.push(
           this.getAxisDayObject(start, widthPercentage, endHour)
         )
@@ -177,6 +191,7 @@ export default {
 
     moveTimemarker(event) {
       const chart = this.timemarker.closest('.g-gantt-chart')
+      if (!chart) return
       this.timemarker.style.left =
         chart.scrollLeft +
         event.clientX -
@@ -186,6 +201,7 @@ export default {
     },
 
     onWindowResize() {
+      if (!this.$refs['g-timeaxis']) return
       this.horizontalAxisContainer =
         this.$refs['g-timeaxis'].getBoundingClientRect()
       this.hourFontSize =
@@ -196,34 +212,28 @@ export default {
     },
 
     pointFormatted(point) {
-      if (this.precision === 'month') {
-        return this.monthFormatted(point)
-      } else if (this.precision === 'day') {
-        return this.dayFormatted(point)
+      switch (this.precision) {
+        case 'day':
+          return this.dayFormatted(point)
+        case 'month':
+          return this.monthFormatted(point)
       }
     },
 
     monthFormatted(point) {
       // do not display month text if the month is smaller than x%
-      return point.widthPercentage >= (1 / 32) * 100
-        ? moment().locale(this.locale).localeData().months(point.value)
-        : ''
+      // return point.widthPercentage >= (1 / 32) * 100
+      //   ? moment().locale(this.locale).localeData().months(point.value)
+      //   : ''
+      return moment(point.value).locale(this.locale).format(this.monthFormat)
     },
 
     dayFormatted(point) {
       // do not display day text if the day is smaller than 12%
-      return point.widthPercentage >= 12
-        ? moment(point.value).locale(this.locale).format(this.dayFormat)
-        : ''
-    },
-  },
-
-  watch: {
-    chartStart() {
-      this.initAxis()
-    },
-    chartEnd() {
-      this.initAxis()
+      // return point.widthPercentage >= 12
+      //   ? moment(point.value).locale(this.locale).format(this.dayFormat)
+      //   : ''
+      return moment(point.value).locale(this.locale).format(this.dayFormat)
     },
   },
 }

src/Playground.vue

@@ -8,7 +8,7 @@
       :hide-timeaxis="hideTimeaxis"
       :push-on-overlap="pushOnOverlap"
       snap-back-on-overlap
-      precision="day"
+      :precision="precision"
       :is-magnetic="isMagnetic"
       :highlighted-hours="highlightedHours"
       :row-label-width="rowLabelWidth"
@@ -46,7 +46,8 @@ export default {
   data() {
     return {
       chartStart: '2020-03-02 00:00',
-      chartEnd: '2020-03-05 10:00',
+      chartEnd: '2020-03-31 10:00',
+      precision: 'day',
       pushOnOverlap: true,
       isMagnetic: true,
       grid: true,