rename "timeaxisMode" to "precision"

README.md

@@ -1,23 +1,29 @@
 # vue-ganttastic
+
 <img src="https://user-images.githubusercontent.com/28678851/77186503-45358300-6ad3-11ea-9392-7f670eb1ca8c.png" width="600"/>
 
 A simple and easy-to-use Gantt chart component for Vue.js
 
 ## Homepage
+
 [Homepage of the project](https://infectoone.github.io/vue-ganttastic-homepage/#/docs)
 
 ## Installation
+
 You can install and use Vue-Ganttastic in your project using <kbd>npm</kbd>:
+
 ```
 npm install vue-ganttastic
 ```
 
 [Moment.js](https://momentjs.com/) is a peer-dependency of Vue-Ganttastic. In order for Vue-Ganttastic to work correctly, you need to install it in your project:
+
 ```
 npm install moment
 ```
 
 ## Basic Usage
+
 Import the components <code>GGanttChart</code> and <code>GGanttRow</code>.  
 Use <code>g-gantt-chart</code> in your template, pass the desired chart start and chart end time as props (<code>chart-start</code> and <code>chart-end</code>) and add <code>g-gantt-row</code>s
 to the default template slot.  
@@ -26,6 +32,7 @@ Pass an array containing your bar objects to every row using the <code>bars</cod
 For more detailed information, such as how to style the bars or additional configuration options, please refer to the [docs](https://infectoone.github.io/vue-ganttastic-homepage/#/docs) on the project's homepage (coming soon).
 
 The following code showcases a simple usage example in a .vue SFC (Single File Component)
+
 ```html
 <template>
   ...
@@ -33,6 +40,9 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
   <g-gantt-chart
     :chart-start="myChartStart"
     :chart-end="myChartEnd"
+    precision="day"
+    :is-magnetic="true"
+    locale="en"
   >
     <g-gantt-row
       v-for="row in rows"
@@ -49,72 +59,76 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
 
 <script>
 
-import {GGanttChart, GGanttRow} from 'vue-ganttastic'
+  import {GGanttChart, GGanttRow} from 'vue-ganttastic'
 
-export default {
+  export default {
 
-  ...
+    ...
 
-  components:{
+    components: {
-    GGanttChart,
+      GGanttChart,
-    GGanttRow
+      GGanttRow
-  },
+    },
 
-  data(){
+    data() {
-    return {
+      return {
-      myChartStart: "2020-03-01 00:00",
+        myChartStart: "2020-03-01 00:00",
-      myChartEnd: "2020-03-03 00:00",
+        myChartEnd: "2020-03-03 00:00",
-      rows: [
+        rows: [
-        {
+          {
-          label: "My row #1",
+            label: "My row #1",
-          bars: [
+            bars: [
-            {
+              {
-              myStart: "2020-03-01 12:10",
+                myStart: "2020-03-01 12:10",
-              myEnd: "2020-03-01 16:35"
+                myEnd: "2020-03-01 16:35"
-            }
+              }
-          ]
+            ]
-        },
+          },
-        {
+          {
-          label: "My row #2",
+            label: "My row #2",
-          bars: [
+            bars: [
-            {
+              {
-              myStart: "2020-03-02 01:00",
+                myStart: "2020-03-02 01:00",
-              myEnd: "2020-03-02 12:00"
+                myEnd: "2020-03-02 12:00"
-            },
+              },
-            {
+              {
-              myStart: "2020-03-02 13:00",
+                myStart: "2020-03-02 13:00",
-              myEnd: "2020-03-02 22:00"
+                myEnd: "2020-03-02 22:00"
-            }
+              }
-          ]
+            ]
-        }
+          }
-      ]
+        ]
+      }
     }
+
+    ...
+
   }
-
-  ...
-
-}
 </script>
-
 ```
 
 ## Contributing
+
 Pull requests are warmly welcomed, while every major change or proposal ought to be discussed in an issue first. As the project is still new, I will gladly accept suggestions, proposals, contributions etc.
 
 ### Contributing - How to run the project
-  1. Clone the project
+
-  2. Install the Vue CLI service, if you don't already have it installed:
+1. Clone the project
-      ```
+2. Install the Vue CLI service, if you don't already have it installed:
-        npm install -g @vue/cli
+   ```
-        npm install -g @vue/cli-service-global
+     npm install -g @vue/cli
-      ```
+     npm install -g @vue/cli-service-global
-  3. <code>Playground.vue</code> is a dedicated Vue SFC where all    Vue-Ganttastic features can be
+   ```
-     played around with and tested out. Get it running using:
+3. <code>Playground.vue</code> is a dedicated Vue SFC where all Vue-Ganttastic features can be
-      ```
+   played around with and tested out. Get it running using:
-        vue serve src/Playground.vue
+   ```
-      ```
+     vue serve src/Playground.vue
+   ```
+
 ## Dependencies
+
 [Moment.js](https://momentjs.com/)
 
 ## License
+
 [MIT](https://choosealicense.com/licenses/mit/)

src/GGanttBar.vue

@@ -84,11 +84,9 @@ export default {
       barEndBeforeDrag: null,
       timeUnit: this.getTimeUnit(),
       timeChildKey:
-        this.ganttChartProps.timeaxisMode === 'month_days'
+        this.ganttChartProps.precision === 'month' ? 'hours' : 'minutes',
-          ? 'hours'
-          : 'minutes',
       timeChildFormat:
-        this.ganttChartProps.timeaxisMode === 'month_days' ? 'MM-DD' : 'HH:mm',
+        this.ganttChartProps.precision === 'month' ? 'MM-DD' : 'HH:mm',
       timeFormat: this.getTimeFormat(),
       barStartKey: this.ganttChartProps.barStartKey,
       barEndKey: this.ganttChartProps.barEndKey,

src/GGanttChart.vue

@@ -65,13 +65,10 @@ export default {
     pushOnOverlap: { type: Boolean },
     isMagnetic: { type: Boolean },
     snapBackOnOverlap: { type: Boolean },
-    minGapBetweenBars: {
+    minGapBetweenBars: { type: Number, default: 0 },
-      type: Number,
-      default: 0,
-    },
     defaultBarLength: { type: Number, default: 1 },
-    // ["month_days", "day_hours"]
+    // ["month", "day"]
-    timeaxisMode: { type: String, default: 'month_days' },
+    precision: { type: String, default: 'month' },
     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,
   },
@@ -80,11 +77,9 @@ export default {
     return {
       timemarkerOffset: 0,
       movedBarsInDrag: new Set(),
-      timeUnit: this.timeaxisMode === 'month_days' ? 'days' : 'hours',
+      timeUnit: this.precision === 'month' ? 'days' : 'hours',
       timeFormat:
-        this.timeaxisMode === 'month_days'
+        this.precision === 'month' ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD HH:mm',
-          ? 'YYYY-MM-DD HH'
-          : 'YYYY-MM-DD HH:mm',
     }
   },
 
@@ -198,7 +193,7 @@ export default {
         let { left, right /*, move*/ } = action
 
         movedBars.forEach((bar) => {
-          if (this.timeaxisMode === 'month_days') {
+          if (this.precision === 'month') {
             if (left && bar == ganttBar.bar) {
               if (moment(bar[this.barStartKey]).hours() < 12) {
                 bar[this.barStartKey] = moment(bar[this.barStartKey])

src/GGanttGrid.vue

@@ -37,12 +37,12 @@ export default {
       let momentChartStart = moment(this.chartStart)
       let momentChartEnd = moment(this.chartEnd)
       let res = []
-      const timeaxisMode = this.ganttChartProps.timeaxisMode
+      const precision = this.ganttChartProps.precision
       while (momentChartStart.isSameOrBefore(momentChartEnd)) {
-        if (timeaxisMode === 'month_days') {
+        if (precision === 'month') {
           res.push(momentChartStart.date())
           momentChartStart.add(1, 'day')
-        } else if (timeaxisMode === 'day_hours') {
+        } else if (precision === 'day') {
           res.push(momentChartStart.date())
           momentChartStart.add(1, 'hour')
         }

src/GGanttTimeaxis.vue

@@ -76,8 +76,8 @@ export default {
       childPointCount: null,
       timemarker: null,
       hourFontSize: '11px',
-      dayFormat: 'MM-DD', // ISO 8601
+      dayFormat: 'DD MMMM',
-      mode: this.ganttChartProps.timeaxisMode,
+      precision: this.ganttChartProps.precision,
       timeUnit: this.getTimeUnit(),
       timeFormat: this.getTimeFormat(),
     }
@@ -94,9 +94,9 @@ export default {
 
   methods: {
     initAxis() {
-      if (this.mode === 'month_days') {
+      if (this.precision === 'month') {
         this.initAxisMonthsAndDays()
-      } else if (this.mode === 'day_hours') {
+      } else if (this.precision === 'day') {
         this.initAxisDaysAndHours()
       }
     },
@@ -196,9 +196,9 @@ export default {
     },
 
     pointFormatted(point) {
-      if (this.mode === 'month_days') {
+      if (this.precision === 'month') {
         return this.monthFormatted(point)
-      } else if (this.mode === 'day_hours') {
+      } else if (this.precision === 'day') {
         return this.dayFormatted(point)
       }
     },

src/Playground.vue

@@ -8,7 +8,7 @@
       :hide-timeaxis="hideTimeaxis"
       :push-on-overlap="pushOnOverlap"
       snap-back-on-overlap
-      timeaxisMode="day_hours"
+      precision="day"
       :is-magnetic="isMagnetic"
       :highlighted-hours="highlightedHours"
       :row-label-width="rowLabelWidth"