From 0e97eee15ff5b3b30a9aef030a28c52bd8dd7dea Mon Sep 17 00:00:00 2001
From: Sergey Solodyagin <solodyagin@gmail.com>
Date: Wed, 13 Oct 2021 21:51:08 +0300
Subject: [PATCH] chore: now "rowLabelWidth" is number feat: added prop
 "gridSize"

---
 .prettierrc                  |  19 ----
 .prettierrc.js               |  19 ++++
 package-lock.json            |   4 +-
 package.json                 |  57 ++++++------
 src/GGanttBar.vue            |  15 ++--
 src/GGanttChart.vue          |  11 ++-
 src/GGanttGrid.vue           |  42 ++++-----
 src/GGanttRow.vue            |  51 +++++------
 src/GGanttTimeaxis.vue       |  35 ++++----
 src/GanttasticThemeColors.js | 165 +++++++++++++++++------------------
 src/Playground.vue           |  34 ++++----
 11 files changed, 222 insertions(+), 230 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 .prettierrc.js

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 3f29e9c..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-    // "arrowParens": "always",
-    "bracketSpacing": true,
-    // "embeddedLanguageFormatting": "auto",
-    // "htmlWhitespaceSensitivity": "css",
-    // "insertPragma": false,
-    // "jsxBracketSameLine": false,
-    // "jsxSingleQuote": false,
-    // "printWidth": 80,
-    // "proseWrap": "preserve",
-    // "quoteProps": "as-needed",
-    // "requirePragma": false,
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false,
-    "vueIndentScriptAndStyle": true
-  }
\ No newline at end of file
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..b803251
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,19 @@
+module.exports = {
+  arrowParens: 'always',
+  bracketSpacing: true,
+  // "embeddedLanguageFormatting": "auto",
+  // "htmlWhitespaceSensitivity": "css",
+  // "insertPragma": false,
+  // "jsxBracketSameLine": false,
+  // "jsxSingleQuote": false,
+  // "printWidth": 80,
+  // "proseWrap": "preserve",
+  // "quoteProps": "as-needed",
+  // "requirePragma": false,
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: false,
+  vueIndentScriptAndStyle: true,
+}
diff --git a/package-lock.json b/package-lock.json
index e16f114..9cbf298 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@tenrok/vue-ganttastic",
-  "version": "0.10.2",
+  "version": "0.10.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@tenrok/vue-ganttastic",
-      "version": "0.10.2",
+      "version": "0.10.6",
       "license": "MIT",
       "dependencies": {
         "vue": "^2.6.14"
diff --git a/package.json b/package.json
index a2d1f0e..9da25ef 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,26 @@
 {
   "name": "@tenrok/vue-ganttastic",
-  "version": "0.10.2",
+  "version": "0.10.6",
   "description": "A simple and customizable Gantt chart component for Vue.js",
+  "keywords": [
+    "gantt",
+    "chart",
+    "bar",
+    "diagram",
+    "vue",
+    "vuejs",
+    "ganttastic"
+  ],
+  "homepage": "https://github.com/tenrok/vue-ganttastic#readme",
+  "bugs": {
+    "url": "https://github.com/tenrok/vue-ganttastic/issues"
+  },
+  "license": "MIT",
   "author": {
     "name": "Marko Zunic",
     "email": "marko.zunic06@gmail.com",
     "url": "https://github.com/InfectoOne/vue-ganttastic"
   },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tenrok/vue-ganttastic.git"
-  },
   "contributors": [
     {
       "name": "Yicone Wong",
@@ -22,23 +31,22 @@
       "url": "https://github.com/solodyagin"
     }
   ],
-  "main": "./dist/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "bili"
-  },
   "files": [
     "dist/*"
   ],
-  "keywords": [
-    "gantt",
-    "chart",
-    "bar",
-    "diagram",
-    "vue",
-    "vuejs",
-    "ganttastic"
-  ],
+  "main": "./dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tenrok/vue-ganttastic.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "bili --plugin.vue",
+    "serve": "vue serve ./src/Playground.vue"
+  },
+  "dependencies": {
+    "vue": "^2.6.14"
+  },
   "devDependencies": {
     "bili": "^4.10.0",
     "rollup-plugin-vue": "^5.1.9",
@@ -46,12 +54,5 @@
   },
   "peerDependencies": {
     "moment": "^2.26.0"
-  },
-  "dependencies": {
-    "vue": "^2.6.14"
-  },
-  "bugs": {
-    "url": "https://github.com/tenrok/vue-ganttastic/issues"
-  },
-  "homepage": "https://github.com/tenrok/vue-ganttastic#readme"
+  }
 }
diff --git a/src/GGanttBar.vue b/src/GGanttBar.vue
index d3b3e43..d59571e 100644
--- a/src/GGanttBar.vue
+++ b/src/GGanttBar.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <div
-      :class="['g-gantt-bar', { 'g-gantt-bar-immobile': barConfig.immobile }]"
       ref="g-gantt-bar"
+      :class="['g-gantt-bar', { 'g-gantt-bar-immobile': barConfig.immobile }]"
       :style="barStyle"
       @mouseenter.stop="onMouseenter($event)"
       @mouseleave.stop="onMouseleave($event)"
@@ -35,9 +35,7 @@
               this.barStyle.background || this.barStyle.backgroundColor,
           }"
         />
-        {{ barStartText }}
-        -
-        {{ barEndText }}
+        {{ barStartText }} - {{ barEndText }}
       </div>
     </transition>
   </div>
@@ -75,11 +73,9 @@ export default {
       dragLimitLeft: null,
       dragLimitRight: null,
       isDragging: false,
-      isMainBarOfDrag: false, // is this the bar that was clicked on when starting to drag
-      // or is it dragged along some other bar from the same bundle
+      isMainBarOfDrag: false, // is this the bar that was clicked on when starting to drag or is it dragged along some other bar from the same bundle
       cursorOffsetX: 0,
-      mousemoveCallback: null, // gets initialized when starting to drag
-      // possible values: drag, dragByHandleLeft, dragByHandleRight,
+      mousemoveCallback: null, // gets initialized when starting to drag, possible values: drag, dragByHandleLeft, dragByHandleRight,
       barStartBeforeDrag: null,
       barEndBeforeDrag: null,
       timeUnit: this.getTimeUnit(),
@@ -102,6 +98,7 @@ export default {
         this.bar[this.barStartKey] = value.format(this.timeFormat)
       },
     },
+
     barEndMoment: {
       get() {
         return moment(this.bar[this.barEndKey])
@@ -110,6 +107,7 @@ export default {
         this.bar[this.barEndKey] = value.format(this.timeFormat)
       },
     },
+
     barStartText: {
       get() {
         return moment(this.barStartMoment).format(this.timeChildFormat)
@@ -210,6 +208,7 @@ export default {
       if (e.button === 2) {
         return
       }
+
       if (!this.barConfig.immobile && !this.barConfig.isShadow) {
         this.setDragLimitsOfGanttBar(this)
         // initialize the dragging on next mousemove event:
diff --git a/src/GGanttChart.vue b/src/GGanttChart.vue
index addb2c4..1cac833 100644
--- a/src/GGanttChart.vue
+++ b/src/GGanttChart.vue
@@ -14,6 +14,7 @@
       :precision="precision"
       :time-format="timeFormat"
       :time-count="timeCount"
+      :grid-size="gridSize"
     />
 
     <g-gantt-grid
@@ -24,15 +25,12 @@
       :highlighted-hours="highlightedHours"
       :precision="precision"
       :time-count="timeCount"
+      :grid-size="gridSize"
     />
 
     <div
       class="g-gantt-rows-container"
-      :style="{
-        width: `${
-          timeCount * 30 + parseInt(rowLabelWidth.replace('px', ''))
-        }px`,
-      }"
+      :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
     >
       <slot />
       <!-- the g-gantt-row components go here -->
@@ -60,11 +58,12 @@ export default {
     chartStart: { type: String },
     chartEnd: { type: String },
     hideTimeaxis: { type: Boolean },
-    rowLabelWidth: { type: String, default: '200px' },
+    rowLabelWidth: { type: Number, default: 200 },
     rowHeight: { type: Number, default: 40 },
     locale: { type: String, default: 'en' },
     theme: { type: String },
     grid: { type: Boolean },
+    gridSize: { type: Number, default: 30 },
     highlightedHours: { type: Array, default: () => [] },
     width: { type: String, default: '100%' }, // the total width of the entire ganttastic component in %
     pushOnOverlap: { type: Boolean },
diff --git a/src/GGanttGrid.vue b/src/GGanttGrid.vue
index 3f93ca8..4652c72 100644
--- a/src/GGanttGrid.vue
+++ b/src/GGanttGrid.vue
@@ -1,21 +1,20 @@
 <template>
   <div
     class="g-grid-container"
-    :style="{
-      left: rowLabelWidth,
-      width: `${timeCount * 30}px`,
-    }"
+    :style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }"
   >
     <div
       v-for="(childPoint, index) in allChildPoints"
       :key="index"
       :class="[
         'g-grid-line',
+        { 'g-grid-line-last': index === allChildPoints.length - 1 },
         {
           'g-grid-line-highlighted':
             precision === 'day' && highlightedHours.includes(childPoint),
         },
       ]"
+      :style="{ width: `${gridSize}px` }"
     />
   </div>
 </template>
@@ -29,26 +28,27 @@ export default {
   props: {
     chartStart: { type: String },
     chartEnd: { type: String },
-    rowLabelWidth: { type: String },
+    rowLabelWidth: { type: Number },
     highlightedHours: { type: Array, default: () => [] },
     precision: { type: String },
     timeCount: { type: Number },
+    gridSize: { type: Number },
   },
 
   computed: {
     allChildPoints() {
-      let momentChartStart = moment(this.chartStart)
-      let momentChartEnd = moment(this.chartEnd)
+      let start = moment(this.chartStart)
+      let end = moment(this.chartEnd)
       let res = []
-      while (momentChartStart.isSameOrBefore(momentChartEnd)) {
+      while (start.isBefore(end)) {
         switch (this.precision) {
           case 'day':
-            res.push(momentChartStart.date())
-            momentChartStart.add(1, 'hour')
+            res.push(start.hour())
+            start.add(1, 'hour')
             break
           case 'month':
-            res.push(momentChartStart.date())
-            momentChartStart.add(1, 'day')
+            res.push(start.date())
+            start.add(1, 'day').hour(23)
             break
         }
       }
@@ -62,21 +62,23 @@ export default {
 .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;
+  overflow: hidden;
 }
 
 .g-grid-line {
-  width: 1px;
   height: 100%;
-  background: #eaeaea;
+  border: 1px solid transparent;
+  border-left: 1px solid #eaeaea;
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.g-grid-line-last {
+  border-right: 1px solid #eaeaea;
 }
 
 .g-grid-line-highlighted {
-  background: #90caf9;
-  box-shadow: 0px 0px 0px 1px #90caf9;
+  background: #dcefff;
 }
 </style>
diff --git a/src/GGanttRow.vue b/src/GGanttRow.vue
index 91b3928..da1eabe 100644
--- a/src/GGanttRow.vue
+++ b/src/GGanttRow.vue
@@ -6,14 +6,13 @@
     v-on="$listeners"
   >
     <div class="g-gantt-row-label" :style="rowLabelStyle">
-      <slot name="label">
-        {{ label }}
-      </slot>
+      <span :title="label">
+        <slot name="label">{{ label }}</slot>
+      </span>
     </div>
     <div
       class="g-gantt-row-bars-container"
       ref="barContainer"
-      :style="barsContainerStyle"
       @dragover="onDragover($event)"
       @dragleave="onDragleave($event)"
       @drop="onDrop($event)"
@@ -51,11 +50,10 @@ export default {
   props: {
     label: { type: String, default: 'Row' },
     bars: { type: Array, default: () => [] },
-    highlightOnHover: Boolean,
+    highlightOnHover: { type: Boolean },
   },
 
   inject: [
-    'ganttChartProps',
     'getThemeColors',
     'getTimeCount',
     'getChartStart',
@@ -76,20 +74,12 @@ export default {
   computed: {
     rowLabelStyle() {
       return {
-        width: this.ganttChartProps.rowLabelWidth,
-        height: this.ganttChartProps.rowHeight,
+        width: `${this.$parent.rowLabelWidth}px`,
+        // height: `${this.$parent.rowHeight}px`,
         background: this.$parent.themeColors.ternary,
         color: this.$parent.themeColors.text,
       }
     },
-
-    barsContainerStyle() {
-      return {
-        width: `${
-          100 /*- this.ganttChartProps.rowLabelWidth.replace('%', '')*/
-        }%`,
-      }
-    },
   },
 
   mounted() {
@@ -124,8 +114,8 @@ export default {
       )
       let bar = this.bars.find((bar) =>
         time.isBetween(
-          bar[this.ganttChartProps.barStartKey],
-          bar[this.ganttChartProps.barEndKey]
+          bar[this.$parent.barStartKey],
+          bar[this.$parent.barEndKey]
         )
       )
       this.$emit('drop', { event: e, bar, time: time.format(this.timeFormat) })
@@ -142,16 +132,16 @@ export default {
         this.timeUnit
       )
       let bar = {}
-      bar[this.ganttChartProps.barStartKey] = time.format()
-      bar[this.ganttChartProps.barEndKey] = time
+      bar[this.$parent.barStartKey] = time.format()
+      bar[this.$parent.barEndKey] = time
         .add(this.getDefaultBarLength(), this.timeUnit)
         .format()
 
       bar.ganttBarConfig = { handles: true }
       this.bars.push(bar)
       this.bars.sort((first, second) =>
-        moment(first[this.ganttChartProps.barStartKey]).diff(
-          second[this.ganttChartProps.barStartKey]
+        moment(first[this.$parent.barStartKey]).diff(
+          second[this.$parent.barStartKey]
         )
       )
     },
@@ -176,7 +166,7 @@ export default {
   },
 
   watch: {
-    'ganttChartProps.rowLabelWidth': function () {
+    '$parent.rowLabelWidth': function () {
       this.barContainer = this.$refs.barContainer.getBoundingClientRect()
     },
   },
@@ -193,23 +183,28 @@ export default {
 
 .g-gantt-row > .g-gantt-row-label {
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
   align-items: center;
-  /* width: 20%; */
   background: #e8e8e8;
   color: #424242;
   font-size: 0.9em;
   z-index: 3;
-  overflow: hidden;
   font-weight: bold;
   left: 0;
   position: sticky;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.g-gantt-row > .g-gantt-row-label > * {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .g-gantt-row > .g-gantt-row-bars-container {
   position: relative;
-  border-top: 1px solid #eaeaea;
-  /* width: 70%; */
+  /* border-top: 1px solid #eaeaea; */
   border-bottom: 1px solid #eaeaea;
   flex: 1;
 }
diff --git a/src/GGanttTimeaxis.vue b/src/GGanttTimeaxis.vue
index d43916e..2f2a49c 100644
--- a/src/GGanttTimeaxis.vue
+++ b/src/GGanttTimeaxis.vue
@@ -2,13 +2,14 @@
   <div
     ref="g-timeaxis"
     class="g-timeaxis"
-    :style="{
-      width: `${timeCount * 30 + parseInt(rowLabelWidth.replace('px', ''))}px`,
-    }"
+    :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
   >
     <div
       class="g-timeaxis-empty-space"
-      :style="{ minWidth: rowLabelWidth, background: themeColors.secondary }"
+      :style="{
+        minWidth: `${rowLabelWidth}px`,
+        background: themeColors.secondary,
+      }"
     />
     <div class="g-timeaxis-days">
       <div
@@ -30,7 +31,7 @@
             :key="childPoint.fullDatetime"
             class="g-timeaxis-hour"
             :style="{
-              width: '30px',
+              width: `${gridSize}px`,
               background:
                 index % 2 === 0 ? themeColors.primary : themeColors.secondary,
               color: themeColors.text,
@@ -60,13 +61,14 @@ export default {
   props: {
     chartStart: { type: String },
     chartEnd: { type: String },
-    rowLabelWidth: { type: String },
+    rowLabelWidth: { type: Number },
     timemarkerOffset: { type: Number, default: 0 },
     locale: { type: String },
     themeColors: { type: Object },
     precision: { type: String },
     timeFormat: { type: String },
     timeCount: { type: Number },
+    gridSize: { type: Number },
   },
 
   data() {
@@ -192,12 +194,14 @@ export default {
     moveTimemarker(event) {
       const chart = this.timemarker.closest('.g-gantt-chart')
       if (!chart) return
-      this.timemarker.style.left =
+      let pos =
         chart.scrollLeft +
         event.clientX -
         this.timemarkerOffset -
-        this.horizontalAxisContainer.left +
-        'px'
+        this.horizontalAxisContainer.left
+      if (pos > this.horizontalAxisContainer.width)
+        pos = this.horizontalAxisContainer.width
+      this.timemarker.style.left = `${pos}px`
     },
 
     onWindowResize() {
@@ -222,10 +226,9 @@ export default {
 
     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 moment(point.value).locale(this.locale).format(this.monthFormat)
+      return point.widthPercentage >= (3 / 32) * 100
+        ? moment(point.value).locale(this.locale).format(this.monthFormat)
+        : ''
     },
 
     dayFormatted(point) {
@@ -260,7 +263,6 @@ export default {
 }
 
 .g-timeaxis > .g-timeaxis-empty-space {
-  /* width: 20%; this has to be as wide as .ganttRowTitle in VGanttastic.css */
   min-height: 100%;
   background: #f5f5f5;
   z-index: 5;
@@ -270,7 +272,6 @@ export default {
 
 .g-timeaxis > .g-timeaxis-days {
   position: relative;
-  /* width: 80%; */
   height: 100%;
 }
 
@@ -308,7 +309,6 @@ export default {
   align-items: flex-start;
   flex-direction: column;
   opacity: 0.5;
-  /* width: 100%; */
 }
 
 .g-timeaxis-hour-pin {
@@ -324,5 +324,4 @@ export default {
   width: 3px;
   background: black;
 }
-</style>
-
+</style>
\ No newline at end of file
diff --git a/src/GanttasticThemeColors.js b/src/GanttasticThemeColors.js
index 85e0eb4..bb98429 100644
--- a/src/GanttasticThemeColors.js
+++ b/src/GanttasticThemeColors.js
@@ -1,103 +1,102 @@
 export default {
-
-  "default": {
-    primary: "#eeeeee",
-    secondary: "#E0E0E0",
-    ternary: "#F5F5F5",
-    hoverHighlight: "rgba(204, 216, 219, 0.5)",
-    text: "#404040",
-    background: "white"
-  },
-  
-  "creamy": {
-    primary:"#ffe8d9", 
-    secondary: "#fcdcc5", 
-    ternary:"#fff6f0", 
-    hoverHighlight: "rgba(230, 221, 202, 0.5)", 
-    text: "#542d05", 
-    background: "white"
+  default: {
+    primary: '#eeeeee',
+    secondary: '#E0E0E0',
+    ternary: '#F5F5F5',
+    hoverHighlight: 'rgba(204, 216, 219, 0.5)',
+    text: '#404040',
+    background: 'white'
   },
 
-  "crimson":{
-    primary:"#a82039", 
-    secondary: "#c41238", 
-    ternary:"#db4f56", 
-    hoverHighlight: "rgba(196, 141, 141, 0.5)", 
-    text: "white", 
-    background: "white"
+  creamy: {
+    primary: '#ffe8d9',
+    secondary: '#fcdcc5',
+    ternary: '#fff6f0',
+    hoverHighlight: 'rgba(230, 221, 202, 0.5)',
+    text: '#542d05',
+    background: 'white'
   },
 
-  "dark": {
-    primary:"#404040", 
-    secondary: "#303030", 
-    ternary:"#353535", 
-    hoverHighlight: "rgba(159, 160, 161, 0.5)", 
-    text: "white", 
-    background: "#525252", 
-    toast: "#1f1f1f"
+  crimson: {
+    primary: '#a82039',
+    secondary: '#c41238',
+    ternary: '#db4f56',
+    hoverHighlight: 'rgba(196, 141, 141, 0.5)',
+    text: 'white',
+    background: 'white'
   },
 
-  "flare": {
-    primary:"#e08a38", 
-    secondary: "#e67912", 
-    ternary:"#5e5145", 
-    hoverHighlight: "rgba(196, 141, 141, 0.5)", 
-    text: "white", 
-    background: "white"
+  dark: {
+    primary: '#404040',
+    secondary: '#303030',
+    ternary: '#353535',
+    hoverHighlight: 'rgba(159, 160, 161, 0.5)',
+    text: 'white',
+    background: '#525252',
+    toast: '#1f1f1f'
   },
 
-  "fuchsia": {
-    primary:"#de1d5a", 
-    secondary: "#b50b41", 
-    ternary:"#ff7da6", 
-    hoverHighlight: "rgba(196, 141, 141, 0.5)", 
-    text: "white", 
-    background: "white"
+  flare: {
+    primary: '#e08a38',
+    secondary: '#e67912',
+    ternary: '#5e5145',
+    hoverHighlight: 'rgba(196, 141, 141, 0.5)',
+    text: 'white',
+    background: 'white'
   },
 
-  "grove": {
-    primary:"#3d9960", 
-    secondary: "#288542", 
-    ternary:"#72b585", 
-    hoverHighlight: "rgba(160, 219, 171, 0.5)", 
-    text: "white", 
-    background: "white"
+  fuchsia: {
+    primary: '#de1d5a',
+    secondary: '#b50b41',
+    ternary: '#ff7da6',
+    hoverHighlight: 'rgba(196, 141, 141, 0.5)',
+    text: 'white',
+    background: 'white'
   },
 
-  "material-blue": {
-    primary:"#0D47A1", 
-    secondary: "#1565C0", 
-    ternary:"#42a5f5", 
-    hoverHighlight: "rgba(110, 165, 196, 0.5)", 
-    text: "white", 
-    background: "white"
+  grove: {
+    primary: '#3d9960',
+    secondary: '#288542',
+    ternary: '#72b585',
+    hoverHighlight: 'rgba(160, 219, 171, 0.5)',
+    text: 'white',
+    background: 'white'
   },
 
-  "sky": {
-    primary:"#b5e3ff", 
-    secondary: "#a1d6f7", 
-    ternary:"#d6f7ff", 
-    hoverHighlight: "rgba(193, 202, 214, 0.5)", 
-    text: "#022c47", 
-    background: "white"
+  'material-blue': {
+    primary: '#0D47A1',
+    secondary: '#1565C0',
+    ternary: '#42a5f5',
+    hoverHighlight: 'rgba(110, 165, 196, 0.5)',
+    text: 'white',
+    background: 'white'
   },
 
-  "slumber":{
-    primary:"#2c2e36", 
-    secondary: "#2f3447", 
-    ternary:"#35394d", 
-    hoverHighlight: "rgba(179, 162, 127, 0.5)", 
-    text: "#ffe0b3", 
-    background: "#38383b", 
-    toast:"#1f1f1f"
+  sky: {
+    primary: '#b5e3ff',
+    secondary: '#a1d6f7',
+    ternary: '#d6f7ff',
+    hoverHighlight: 'rgba(193, 202, 214, 0.5)',
+    text: '#022c47',
+    background: 'white'
   },
 
-  "vue": {
-    primary:"#258a5d", 
-    secondary: "#41B883", 
-    ternary:"#35495E", 
-    hoverHighlight: "rgba(160, 219, 171, 0.5)", 
-    text: "white", 
-    background: "white"
+  slumber: {
+    primary: '#2c2e36',
+    secondary: '#2f3447',
+    ternary: '#35394d',
+    hoverHighlight: 'rgba(179, 162, 127, 0.5)',
+    text: '#ffe0b3',
+    background: '#38383b',
+    toast: '#1f1f1f'
+  },
+
+  vue: {
+    primary: '#258a5d',
+    secondary: '#41B883',
+    ternary: '#35495E',
+    hoverHighlight: 'rgba(160, 219, 171, 0.5)',
+    text: 'white',
+    background: 'white'
   }
-}
\ No newline at end of file
+}
diff --git a/src/Playground.vue b/src/Playground.vue
index 7364394..470d42a 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -5,6 +5,7 @@
       :chart-start="chartStart"
       :chart-end="chartEnd"
       :grid="grid"
+      :grid-size="gridSize"
       :hide-timeaxis="hideTimeaxis"
       :push-on-overlap="pushOnOverlap"
       snap-back-on-overlap
@@ -18,18 +19,17 @@
       barEndKey="myEnd"
       @dragend-bar="onDragend($event)"
     >
-      <template v-for="row in rowList">
-        <g-gantt-row
-          :key="row.label"
-          :label="row.label"
-          :bars="row.barList"
-          :highlight-on-hover="highlightOnHover"
-        >
-          <template #bar-label="{ bar }">
-            <span>{{ bar.label }}</span>
-          </template>
-        </g-gantt-row>
-      </template>
+      <g-gantt-row
+        v-for="row in rowList"
+        :key="row.label"
+        :label="row.label"
+        :bars="row.barList"
+        :highlight-on-hover="highlightOnHover"
+      >
+        <template #bar-label="{ bar }">
+          <span>{{ bar.label }}</span>
+        </template>
+      </g-gantt-row>
     </g-gantt-chart>
   </div>
 </template>
@@ -46,15 +46,16 @@ export default {
   data() {
     return {
       chartStart: '2020-03-02 00:00',
-      chartEnd: '2020-03-31 10:00',
+      chartEnd: '2020-03-10 10:00',
       precision: 'day',
       pushOnOverlap: true,
       isMagnetic: true,
       grid: true,
+      gridSize: 50,
       rowHeight: 40,
-      rowLabelWidth: '200px',
+      rowLabelWidth: 200,
       hideTimeaxis: false,
-      highlightOnHover: false,
+      highlightOnHover: true,
       hours: [...Array(24).keys()],
       highlightedHours: [10, 12],
       showContextmenu: false,
@@ -220,6 +221,3 @@ export default {
   },
 }
 </script>
-
-<style>
-</style>
\ No newline at end of file