From 1e1ec86bfa76fb8aade83d8e58c291cbe287f3dd Mon Sep 17 00:00:00 2001
From: yicone <yicone@gmail.com>
Date: Tue, 2 Feb 2021 11:54:10 +0800
Subject: [PATCH] feat: add timeaxis mode: [month_days, day_hours]

---
 src/GGanttChart.vue    |   7 +-
 src/GGanttGrid.vue     |  77 ++++----
 src/GGanttRow.vue      |   2 +
 src/GGanttTimeaxis.vue | 406 ++++++++++++++++++++++-------------------
 4 files changed, 266 insertions(+), 226 deletions(-)

diff --git a/src/GGanttChart.vue b/src/GGanttChart.vue
index c0c6ed1..bb6cc27 100644
--- a/src/GGanttChart.vue
+++ b/src/GGanttChart.vue
@@ -62,7 +62,9 @@ export default {
       type: Number,
       default: 0
     },
-    defaultBarLength: { type: Number, default: 1 }
+    defaultBarLength: { type: Number, default: 1 },
+    // ["month_days", "day_hours"]
+    timeaxisMode: {type: String, default: "month_days"}
   },
 
   data(){
@@ -297,7 +299,8 @@ export default {
       shouldSnapBackOnOverlap: () => this.snapBackOnOverlap,
       snapBackBundle: (ganttBar) => this.snapBackBundle(ganttBar),
       getMinGapBetweenBars: () => this.minGapBetweenBars,
-      getDefaultBarLength: () => this.defaultBarLength
+      getDefaultBarLength: () => this.defaultBarLength,
+      getTimeaxisMode:() => this.timeaxisMode
     }
   }
 }
diff --git a/src/GGanttGrid.vue b/src/GGanttGrid.vue
index a536956..aa21c32 100644
--- a/src/GGanttGrid.vue
+++ b/src/GGanttGrid.vue
@@ -1,17 +1,17 @@
 <template>
-  <div 
+  <div
     class="g-grid-container"
     :style="{
       left: rowLabelWidth,
-      width: `${100-(this.rowLabelWidth).replace('%','')}%`
+      width: `${100 - this.rowLabelWidth.replace('%', '')}%`,
     }"
   >
-    <div 
-      v-for="(hour,index) in allHours"
+    <div
+      v-for="(hour, index) in allHours"
       :key="index"
       :class="{
         'g-grid-line': true,
-        'g-grid-line-highlighted': highlightedHours.includes(hour)
+        'g-grid-line-highlighted': highlightedHours.includes(hour),
       }"
     />
   </div>
@@ -21,52 +21,57 @@
 import moment from 'moment'
 
 export default {
+  name: 'GGanttGrid',
+
+  inject: ['getTimeaxisMode'],
 
-  name: "GGanttGrid",
-  
   props: {
-    chartStart: {type: String},
-    chartEnd: {type: String},
+    chartStart: { type: String },
+    chartEnd: { type: String },
     rowLabelWidth: String,
-    highlightedHours: {type: Array, default: () => []}
+    highlightedHours: { type: Array, default: () => [] },
   },
 
   computed: {
-    allHours(){
+    allHours() {
       let momentChartStart = moment(this.chartStart)
       let momentChartEnd = moment(this.chartEnd)
       let res = []
-      while(momentChartStart.isSameOrBefore(momentChartEnd)){
-        res.push(momentChartStart.date())
-        momentChartStart.add(1,"day")
+      const timeaxisMode = this.getTimeaxisMode()
+      while (momentChartStart.isSameOrBefore(momentChartEnd)) {
+        if (timeaxisMode === 'month_days') {
+          res.push(momentChartStart.date())
+          momentChartStart.add(1, 'day')
+        } else if (timeaxisMode === 'day_hours') {
+          res.push(momentChartStart.date())
+          momentChartStart.add(1, 'hour')
+        }
       }
       return res
-    }
-
-  }
-  
+    },
+  },
 }
 </script>
 
 <style scoped>
-  .g-grid-container{
-    position: absolute;
-    top: 0;
-    left: 30%; /* must correspond to width of row title */
-    width: 70%;
-    height: calc(100% - 23px);
-    display: flex;
-    justify-content: space-between;
-  }
+.g-grid-container {
+  position: absolute;
+  top: 0;
+  left: 30%; /* must correspond to width of row title */
+  width: 70%;
+  height: calc(100% - 23px);
+  display: flex;
+  justify-content: space-between;
+}
 
-  .g-grid-line{
-    width: 1px;
-    height: 100%;
-    background: #eaeaea;
-  }
+.g-grid-line {
+  width: 1px;
+  height: 100%;
+  background: #eaeaea;
+}
 
-  .g-grid-line-highlighted{
-    background: #90CAF9;
-    box-shadow: 0px 0px 0px 1px #90CAF9;
-  }
+.g-grid-line-highlighted {
+  background: #90caf9;
+  box-shadow: 0px 0px 0px 1px #90caf9;
+}
 </style>
diff --git a/src/GGanttRow.vue b/src/GGanttRow.vue
index 820ca93..5694aa1 100644
--- a/src/GGanttRow.vue
+++ b/src/GGanttRow.vue
@@ -109,7 +109,9 @@ export default {
     onDragover(e) {
       e.preventDefault()   // enables dropping content on row
       if(this.highlightOnHover){
+        console.log({backgroundColor: this.$refs["g-gantt-row"].style.backgroundColor })
         this.$refs["g-gantt-row"].style.backgroundColor = this.getThemeColors().hoverHighlight
+        console.log({backgroundColor: this.$refs["g-gantt-row"].style.backgroundColor })
       }
     },
 
diff --git a/src/GGanttTimeaxis.vue b/src/GGanttTimeaxis.vue
index 567cca9..258a197 100644
--- a/src/GGanttTimeaxis.vue
+++ b/src/GGanttTimeaxis.vue
@@ -1,61 +1,51 @@
 <template>
   <div id="g-timeaxis">
-
     <div
       class="g-timeaxis-empty-space"
-      :style="{width: rowLabelWidth, background: themeColors.secondary}"
+      :style="{ width: rowLabelWidth, background: themeColors.secondary }"
     />
-    <div 
+    <div
       class="g-timeaxis-days"
-      :style="{width: `${100-rowLabelWidth.replace('%','')}%`}"
+      :style="{ width: `${100 - rowLabelWidth.replace('%', '')}%` }"
     >
-      <div 
-          v-for="(month, index) in axisMonths"
-          :key="month.text"
-          class="g-timeaxis-day"
-          :style="{
-            width: month.widthPercentage+'%', 
-            background: index%2===0 ? themeColors.primary : themeColors.secondary,
-            color: themeColors.text
-          }"
+      <div
+        v-for="(point, index) in axisPoints"
+        :key="point.text"
+        class="g-timeaxis-day"
+        :style="{
+          width: point.widthPercentage + '%',
+          background:
+            index % 2 === 0 ? themeColors.primary : themeColors.secondary,
+          color: themeColors.text,
+        }"
+      >
+        <div>{{ pointFormatted(point) }}</div>
+        <div
+          :style="{ background: themeColors.ternary, color: themeColors.text }"
         >
-        <div> {{monthFormatted(month)}} </div>
-        <div :style="{background: themeColors.ternary, color: themeColors.text}">
-          <div 
-            v-for="(day, index) in month.ganttDays"
-            :key="day.fullDatetime"
+          <div
+            v-for="(childPoint, index) in point.ganttDays"
+            :key="childPoint.fullDatetime"
             class="g-timeaxis-hour"
             :style="{
-              width: day.widthPercentage+'%', 
-              background: index%2===0 ? themeColors.primary : themeColors.secondary,
-              color: themeColors.text
+              width: childPoint.widthPercentage + '%',
+              background:
+                index % 2 === 0 ? themeColors.primary : themeColors.secondary,
+              color: themeColors.text,
             }"
           >
-            <span :style="{fontSize: hourFontSize}">{{day.text}}</span>
-            <div 
+            <span :style="{ fontSize: hourFontSize }">{{
+              childPoint.text
+            }}</span>
+            <div
               class="g-timeaxis-hour-pin"
-              :style="{background: themeColors.text}"
+              :style="{ background: themeColors.text }"
             />
-            <!-- <div> {{dayFormatted(day)}} </div>
-            <div :style="{background: themeColors.ternary, color: themeColors.text}">
-              <div 
-                v-for="hour in day.ganttHours"
-                :key="hour.fullDatetime"
-                class="g-timeaxis-hour" 
-              >
-                <span :style="{fontSize: hourFontSize}">{{hour.text}}</span>
-                <div 
-                  class="g-timeaxis-hour-pin"
-                  :style="{background: themeColors.text}"
-                />
-              </div>
-            </div> -->
           </div>
         </div>
       </div>
     </div>
-    <div id="g-timeaxis-marker"/>
-    
+    <div id="g-timeaxis-marker" />
   </div>
 </template>
 
@@ -63,219 +53,259 @@
 import moment from 'moment'
 
 export default {
+  name: 'GGanttTimeaxis',
 
-  name:"GGanttTimeaxis",
+  inject: ['getTimeaxisMode'],
 
   props: {
     chartStart: String,
     chartEnd: String,
     rowLabelWidth: String,
-    timemarkerOffset: {type: Number, default: 0},
+    timemarkerOffset: { type: Number, default: 0 },
     locale: String,
-    themeColors: Object
+    themeColors: Object,
   },
 
-  data(){
+  data() {
     return {
-      axisMonths: [],
-      axisDays: [],
-      dayCount: null,
-      hourCount: null,
+      axisPoints: [],
+      childPointCount: null,
       timemarker: null,
-      hourFontSize: "11px",
-      monthFormat: "M月",
-      dayFormat: "MM-DD"
+      hourFontSize: '11px',
+      monthFormat: 'M月',
+      dayFormat: 'MM-DD',
+      mode: this.getTimeaxisMode(),
     }
   },
 
-  mounted(){
-    this.timemarker = document.querySelector("#g-timeaxis-marker")
-    this.initAxisMonthsAndDays()
-    // this.initAxisDaysAndHours()
+  mounted() {
+    this.timemarker = document.querySelector('#g-timeaxis-marker')
+    this.initAxis()
     this.onWindowResize()
     window.addEventListener('resize', this.onWindowResize)
-    window.addEventListener("mousemove", (event) => this.moveTimemarker(event))
-    window.addEventListener("dragover", (event) => this.moveTimemarker(event))
+    window.addEventListener('mousemove', (event) => this.moveTimemarker(event))
+    window.addEventListener('dragover', (event) => this.moveTimemarker(event))
   },
 
   methods: {
-    initAxisMonthsAndDays(){
-      this.axisMonths = []
-      let start = moment(this.chartStart)
-      let end = moment(this.chartEnd)
-      this.dayCount = Math.floor(end.diff(start, "day", true))
-      while(start.isBefore(end)){
-        let dayCountOfMonth = start.format("MM.YYYY")==end.format("MM.YYYY") ? end.date() : (start.daysInMonth() - start.date() + 1)
-        let widthPercentage = dayCountOfMonth/this.dayCount*100
-        console.log({start, startDay: start.date(), end, endDay: end.date(), dayCountOfMonth, dayCount: this.dayCount, widthPercentage})
-        let endDay = start.month()===end.month() ? end.date() : end.daysInMonth()
-        this.axisMonths.push(this.getAxisMonthObject(start, widthPercentage, endDay))
-        start.add(1,"month").date(1).hour(0)
-      }
-      console.log(this.axisMonths)
-    },
-
-    initAxisDaysAndHours(){
-      this.axisDays = []
-      let start = moment(this.chartStart)
-      let end = moment(this.chartEnd)
-      this.hourCount = Math.floor(end.diff(start, "hour", true))
-      while(start.isBefore(end)){
-        let hourCountOfDay = start.format("DD.MM.YYYY")==end.format("DD.MM.YYYY") ? end.hour() : 24-start.hour()
-        console.log({start, hourCountOfDay, hourCount: this.hourCount})
-        let widthPercentage = hourCountOfDay/this.hourCount*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
-        this.axisDays.push(this.getAxisDayObject(start, widthPercentage, endHour))
-        start.add(1,"day").hour(0)
+    initAxis() {
+      if (this.mode === 'month_days') {
+        this.initAxisMonthsAndDays()
+      } else if (this.mode === 'day_hours') {
+        this.initAxisDaysAndHours()
       }
     },
 
-    getAxisMonthObject(datetime, widthPercentage, endDay){
+    initAxisMonthsAndDays() {
+      let start = moment(this.chartStart)
+      let end = moment(this.chartEnd)
+      this.childPointCount = Math.floor(end.diff(start, 'day', true))
+      while (start.isBefore(end)) {
+        let dayCountOfMonth =
+          start.isSame(end, 'day')
+            ? end.date()
+            : start.daysInMonth() - start.date() + 1
+        let widthPercentage = (dayCountOfMonth / this.childPointCount) * 100
+        let endDay =
+          start.month() === end.month() ? end.date() : end.daysInMonth()
+        this.axisPoints.push(
+          this.getAxisMonthObject(start, widthPercentage, endDay)
+        )
+        start.add(1, 'month').date(1).hour(0)
+      }
+    },
+
+    initAxisDaysAndHours() {
+      let start = moment(this.chartStart)
+      let end = moment(this.chartEnd)
+      this.childPointCount = Math.floor(end.diff(start, 'hour', true))
+      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
+        this.axisPoints.push(
+          this.getAxisDayObject(start, widthPercentage, endHour)
+        )
+        start.add(1, 'day').hour(0)
+      }
+    },
+
+    getAxisMonthObject(datetime, widthPercentage, endDay) {
       let datetimeMoment = moment(datetime)
       let axisMonthObject = {
-        widthPercentage : widthPercentage,
-        value : datetime.format("YYYY-MM"),
-        ganttDays : []
+        widthPercentage: widthPercentage,
+        value: datetime.format('YYYY-MM'),
+        ganttDays: [],
       }
       let startDay = datetimeMoment.date()
-      for(let i=0; i <=(endDay-startDay); i++) {
-        let day ={
-          text: datetimeMoment.format("D日"),
-          fullDatetime: datetimeMoment.format("YYYY-MM-DD")
+      for (let i = 0; i <= endDay - startDay; i++) {
+        let day = {
+          text: datetimeMoment.format('D日'),
+          fullDatetime: datetimeMoment.format('YYYY-MM-DD'),
         }
         axisMonthObject.ganttDays.push(day)
-        datetimeMoment.add(1,"day")
+        datetimeMoment.add(1, 'day')
       }
       return axisMonthObject
     },
 
-    getAxisDayObject(datetime, widthPercentage, endHour){
+    getAxisDayObject(datetime, widthPercentage, endHour) {
       let datetimeMoment = moment(datetime)
       let axisDayObject = {
-        widthPercentage : widthPercentage,
-        value : datetime.format("YYYY-MM-DD"),
-        ganttHours : []
+        widthPercentage: widthPercentage,
+        value: datetime.format('YYYY-MM-DD'),
+        ganttHours: [],
       }
       let startHour = datetimeMoment.hour()
-      for(let i=0; i <=(endHour-startHour); i++) {
-        let hour ={
-          text: datetimeMoment.format("HH"),
-          fullDatetime: datetimeMoment.format("DD.MM.YYYY HH:mm")
+      for (let i = 0; i <= endHour - startHour; i++) {
+        let hour = {
+          text: datetimeMoment.format('HH'),
+          fullDatetime: datetimeMoment.format('DD.MM.YYYY HH:mm'),
         }
         axisDayObject.ganttHours.push(hour)
-        datetimeMoment.add(1,"hour")
+        datetimeMoment.add(1, 'hour')
       }
       return axisDayObject
     },
 
-    moveTimemarker(event){
-      this.timemarker.style.left = (event.clientX - this.timemarkerOffset - this.horizontalAxisContainer.left)+"px"
+    moveTimemarker(event) {
+      this.timemarker.style.left =
+        event.clientX -
+        this.timemarkerOffset -
+        this.horizontalAxisContainer.left +
+        'px'
     },
 
-    onWindowResize(){
-      this.horizontalAxisContainer = document.querySelector("#g-timeaxis").getBoundingClientRect()
-      this.hourFontSize = Math.min(9.5, 0.75*(this.horizontalAxisContainer.width/this.hourCount))+"px"
+    onWindowResize() {
+      this.horizontalAxisContainer = document
+        .querySelector('#g-timeaxis')
+        .getBoundingClientRect()
+      this.hourFontSize =
+        Math.min(
+          9.5,
+          0.75 * (this.horizontalAxisContainer.width / this.childPointCount)
+        ) + 'px'
     },
 
-    monthFormatted(month){  // do not display month text if the month is smaller than x%
-      return month.widthPercentage>=1/32*100 ? moment(month.value).locale(this.locale).format(this.monthFormat) : ""
+    pointFormatted(point){
+      if (this.mode === 'month_days') {
+        return this.monthFormatted(point)
+      } else if (this.mode === 'day_hours') {
+        return this.dayFormatted(point)
+      }
     },
 
-    dayFormatted(day){  // do not display day text if the day is smaller than 12%
-      return day.widthPercentage>=12 ? moment(day.value).locale(this.locale).format(this.dayFormat) : ""
-    }
+    monthFormatted(month) {
+      // do not display month text if the month is smaller than x%
+      return month.widthPercentage >= (1 / 32) * 100
+        ? moment(month.value).locale(this.locale).format(this.monthFormat)
+        : ''
+    },
 
+    dayFormatted(day) {
+      // do not display day text if the day is smaller than 12%
+      return day.widthPercentage >= 12
+        ? moment(day.value).locale(this.locale).format(this.dayFormat)
+        : ''
+    },
   },
 
   watch: {
-    chartStart(){
-      this.initAxisMonthsAndDays()
-      // this.initAxisDaysAndHours()
+    chartStart() {
+      this.initAxis()
     },
-    chartEnd(){
-      this.initAxisMonthsAndDays()
-      // this.initAxisDaysAndHours()
-    }
-  }
+    chartEnd() {
+      this.initAxis()
+    },
+  },
 }
 </script>
 
 <style scoped>
-  #g-timeaxis, .g-timeaxis-days, .g-timeaxis-day, .g-timeaxis-day > div {
-    display: flex;
-    overflow: hidden;
-  }
+#g-timeaxis,
+.g-timeaxis-days,
+.g-timeaxis-day,
+.g-timeaxis-day > div {
+  display: flex;
+  overflow: hidden;
+}
 
-  #g-timeaxis {
-    position: sticky;
-    top:0;
-    width: 100%;
-    height: 8%;
-    min-height: 75px;
-    background: white;
-    z-index: 4;
-    box-shadow: 0px 1px 3px 2px rgba(50,50,50, 0.5);
-  }
+#g-timeaxis {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  height: 8%;
+  min-height: 75px;
+  background: white;
+  z-index: 4;
+  box-shadow: 0px 1px 3px 2px rgba(50, 50, 50, 0.5);
+}
 
-  #g-timeaxis > .g-timeaxis-empty-space {
-    width: 20%;    /* this has to be as wide as .ganttRowTitle in VGanttastic.css */
-    height: 100%;
-    background: #F5F5F5;
-  }
+#g-timeaxis > .g-timeaxis-empty-space {
+  width: 20%; /* this has to be as wide as .ganttRowTitle in VGanttastic.css */
+  height: 100%;
+  background: #f5f5f5;
+}
 
-  #g-timeaxis > .g-timeaxis-days {
-    position: relative;
-    width: 80%;
-    height: 100%,
-  }
+#g-timeaxis > .g-timeaxis-days {
+  position: relative;
+  width: 80%;
+  height: 100%;
+}
 
-  .g-timeaxis-day {
-    height: 100%;
-    flex-direction: column;
-    background: #E0E0E0;
-  }
+.g-timeaxis-day {
+  height: 100%;
+  flex-direction: column;
+  background: #e0e0e0;
+}
 
-  .g-timeaxis-day:nth-child(odd) {
-    background: #E8E8E8;
-  }
+.g-timeaxis-day:nth-child(odd) {
+  background: #e8e8e8;
+}
 
-  .g-timeaxis-day > div:nth-child(1) { /* day text */
-    height: 50%;
-    justify-content: space-around;
-    font-weight: bold;
-    align-items: center;
-  }
+.g-timeaxis-day > div:nth-child(1) {
+  /* day text */
+  height: 50%;
+  justify-content: space-around;
+  font-weight: bold;
+  align-items: center;
+}
 
-  .g-timeaxis-day > div:nth-child(2) { /* hours of a day */
-    align-items: flex-end;
-    height: 50%;
-    justify-content: space-between;
-    background:#F5F5F5;
-    padding-top:2px;
-    color: #212121;
-  }
-  
-  .g-timeaxis-hour {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-direction: column;
-    opacity: 0.5;
-    width: 100%;
-  }
+.g-timeaxis-day > div:nth-child(2) {
+  /* hours of a day */
+  align-items: flex-end;
+  height: 50%;
+  justify-content: space-between;
+  background: #f5f5f5;
+  padding-top: 2px;
+  color: #212121;
+}
 
-  .g-timeaxis-hour-pin {
-    width: 1px;
-    height: 8px;
-  }
+.g-timeaxis-hour {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+  opacity: 0.5;
+  width: 100%;
+}
 
-  #g-timeaxis-marker {
-    position: absolute;
-    top:0;
-    left:0;
-    height: 100%;
-    width: 3px;
-    background: black;
-  }
+.g-timeaxis-hour-pin {
+  width: 1px;
+  height: 8px;
+}
+
+#g-timeaxis-marker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 3px;
+  background: black;
+}
 </style>