rename "timeaxisMode" to "precision"

2026-06-12 14:32:25 +03:00 · 2021-10-12 10:55:38 +03:00
parent 23166c0edd
commit e90a2ba13f
7 changed files with 9166 additions and 1915 deletions
@@ -1,31 +1,38 @@
 # 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.  
-Pass an array containing your bar objects to every row using the <code>bars</code> prop, while specifying the name of the properties in your bar objects that stand for the bar start and bar end time using the props <code>bar-start</code> and <code>bar-end</code>  
+Pass an array containing your bar objects to every row using the <code>bars</code> prop, while specifying the name of the properties in your bar objects that stand for the bar start and bar end time using the props <code>bar-start</code> and <code>bar-end</code>

 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:{
-    GGanttChart,
-    GGanttRow
-  },
+    components: {
+      GGanttChart,
+      GGanttRow
+    },

-  data(){
-    return {
-      myChartStart: "2020-03-01 00:00",
-      myChartEnd: "2020-03-03 00:00",
-      rows: [
-        {
-          label: "My row #1",
-          bars: [
-            {
-              myStart: "2020-03-01 12:10",
-              myEnd: "2020-03-01 16:35"
-            }
-          ]
-        },
-        {
-          label: "My row #2",
-          bars: [
-            {
-              myStart: "2020-03-02 01:00",
-              myEnd: "2020-03-02 12:00"
-            },
-            {
-              myStart: "2020-03-02 13:00",
-              myEnd: "2020-03-02 22:00"
-            }
-          ]
-        }
-      ]
+    data() {
+      return {
+        myChartStart: "2020-03-01 00:00",
+        myChartEnd: "2020-03-03 00:00",
+        rows: [
+          {
+            label: "My row #1",
+            bars: [
+              {
+                myStart: "2020-03-01 12:10",
+                myEnd: "2020-03-01 16:35"
+              }
+            ]
+          },
+          {
+            label: "My row #2",
+            bars: [
+              {
+                myStart: "2020-03-02 01:00",
+                myEnd: "2020-03-02 12:00"
+              },
+              {
+                myStart: "2020-03-02 13: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:
-      ```
-        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:
-      ```
-        vue serve src/Playground.vue
-      ```
+
+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
+   ```
+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
+   ```
+
 ## Dependencies
+
 [Moment.js](https://momentjs.com/)

 ## License
+
 [MIT](https://choosealicense.com/licenses/mit/)
@@ -84,11 +84,9 @@ export default {
      barEndBeforeDrag: null,
      timeUnit: this.getTimeUnit(),
      timeChildKey:
-        this.ganttChartProps.timeaxisMode === 'month_days'
-          ? 'hours'
-          : 'minutes',
+        this.ganttChartProps.precision === 'month' ? '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,
@@ -65,13 +65,10 @@ export default {
    pushOnOverlap: { type: Boolean },
    isMagnetic: { type: Boolean },
    snapBackOnOverlap: { type: Boolean },
-    minGapBetweenBars: {
-      type: Number,
-      default: 0,
-    },
+    minGapBetweenBars: { type: Number, default: 0 },
    defaultBarLength: { type: Number, default: 1 },
-    // ["month_days", "day_hours"]
-    timeaxisMode: { type: String, default: 'month_days' },
+    // ["month", "day"]
+    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'
-          ? 'YYYY-MM-DD HH'
-          : 'YYYY-MM-DD HH:mm',
+        this.precision === 'month' ? '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])
@@ -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')
        }
@@ -76,8 +76,8 @@ export default {
      childPointCount: null,
      timemarker: null,
      hourFontSize: '11px',
-      dayFormat: 'MM-DD', // ISO 8601
-      mode: this.ganttChartProps.timeaxisMode,
+      dayFormat: 'DD MMMM',
+      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)
      }
    },
@@ -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"