Feature/merge options #5 (#6)

* ➕ Add dependency lodash

* ✨ Add helper function to merge chartOptions

* Change Charts to merge options

* And renamed options data to defaultOptions

Author: apertureless

package.json

@@ -34,13 +34,16 @@
     "babel-plugin-transform-runtime": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-2": "^6.0.0",
+    "chai": "^3.5.0",
+    "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
+    "cross-spawn": "^2.1.5",
     "css-loader": "^0.23.0",
     "eslint": "^2.10.2",
+    "eslint-config-standard": "^5.1.0",
     "eslint-friendly-formatter": "^2.0.5",
     "eslint-loader": "^1.3.0",
     "eslint-plugin-html": "^1.3.0",
-    "eslint-config-standard": "^5.1.0",
     "eslint-plugin-promise": "^1.0.8",
     "eslint-plugin-standard": "^1.3.2",
     "eventsource-polyfill": "^0.9.6",
@@ -50,6 +53,8 @@
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.12.0",
+    "inject-loader": "^2.0.1",
+    "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
     "karma": "^0.13.15",
     "karma-coverage": "^0.5.5",
@@ -59,20 +64,16 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.24",
     "karma-webpack": "^1.7.0",
+    "lodash": "^4.15.0",
     "lolex": "^1.4.0",
     "mocha": "^2.4.5",
-    "chai": "^3.5.0",
-    "sinon": "^1.17.3",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^2.0.1",
-    "isparta-loader": "^2.0.0",
-    "phantomjs-prebuilt": "^2.1.3",
-    "chromedriver": "^2.21.2",
-    "cross-spawn": "^2.1.5",
     "nightwatch": "^0.8.18",
-    "selenium-server": "2.53.0",
     "ora": "^0.2.0",
+    "phantomjs-prebuilt": "^2.1.3",
+    "selenium-server": "2.53.0",
     "shelljs": "^0.6.0",
+    "sinon": "^1.17.3",
+    "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^1.2.0",
     "vue-html-loader": "^1.0.0",

src/BaseCharts/Bar.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
   template: `
@@ -21,7 +22,7 @@ export default Vue.extend({
 
   data () {
     return {
-      options: {
+      defaultOptions: {
         scales: {
           yAxes: [{
             ticks: {
@@ -44,12 +45,14 @@ export default Vue.extend({
   },
 
   methods: {
-    render (data, options = this.options) {
+    render (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
       this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
-          options: options
+          options: chartOptions
         }
       )
       this._chart.generateLegend()

src/BaseCharts/Doughnut.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
   template: `
@@ -21,18 +22,20 @@ export default Vue.extend({
 
   data () {
     return {
-      options: {
+      defaultOptions: {
       }
     }
   },
 
   methods: {
-    render (data, options = this.options) {
+    render (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
       this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
-          options: options
+          options: chartOptions
         }
       )
       this._chart.generateLegend()

src/BaseCharts/Line.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
   template: `
@@ -21,7 +22,7 @@ export default Vue.extend({
 
   data () {
     return {
-      options: {
+      defaultOptions: {
         scales: {
           yAxes: [{
             ticks: {
@@ -42,12 +43,14 @@ export default Vue.extend({
   },
 
   methods: {
-    render (data, options = this.options) {
+    render (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
       this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'line',
           data: data,
-          options: options
+          options: chartOptions
         }
       )
       this._chart.generateLegend()

src/BaseCharts/Pie.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
   template: `
@@ -21,18 +22,20 @@ export default Vue.extend({
 
   data () {
     return {
-      options: {
+      defaultOptions: {
       }
     }
   },
 
   methods: {
-    render (data, options = this.options) {
+    render (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
       this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
-          options: options
+          options: chartOptions
         }
       )
       this._chart.generateLegend()

src/BaseCharts/PolarArea.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
   template: `
@@ -21,18 +22,20 @@ export default Vue.extend({
 
   data () {
     return {
-      options: {
+      defaultOptions: {
       }
     }
   },
 
   methods: {
-    render (data, options = this.options) {
+    render (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
       this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
-          options: options
+          options: chartOptions
         }
       )
       this._chart.generateLegend()

src/BaseCharts/Radar.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
   template: `
@@ -21,18 +22,20 @@ export default Vue.extend({
 
   data () {
     return {
-      options: {
+      defaultOptions: {
       }
     }
   },
 
   methods: {
-    render (data, options = this.options) {
+    render (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
       this._chart = new Chart(
         this.$els.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
-          options: options
+          options: chartOptions
         }
       )
       this._chart.generateLegend()

src/helpers/options.js

@@ -0,0 +1,5 @@
+import merge from 'lodash/fp/merge'
+
+export function mergeOptions (obj, src) {
+  return merge(obj, src)
+}