From 5258ab1a0f167cfa192a34f0bb7f33621d9cd5dd Mon Sep 17 00:00:00 2001 From: Jakub Date: Sun, 21 Aug 2016 14:04:34 +0200 Subject: [PATCH] Feature/merge options #5 (#6) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ➕ Add dependency lodash * ✨ Add helper function to merge chartOptions * Change Charts to merge options * And renamed options data to defaultOptions --- package.json | 23 ++++++++++++----------- src/BaseCharts/Bar.js | 9 ++++++--- src/BaseCharts/Doughnut.js | 9 ++++++--- src/BaseCharts/Line.js | 9 ++++++--- src/BaseCharts/Pie.js | 9 ++++++--- src/BaseCharts/PolarArea.js | 9 ++++++--- src/BaseCharts/Radar.js | 9 ++++++--- src/helpers/options.js | 5 +++++ 8 files changed, 53 insertions(+), 29 deletions(-) create mode 100644 src/helpers/options.js diff --git a/package.json b/package.json index 5e3a65d..1b79404 100644 --- a/package.json +++ b/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", + "nightwatch": "^0.8.18", + "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", - "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", - "shelljs": "^0.6.0", "url-loader": "^0.5.7", "vue-hot-reload-api": "^1.2.0", "vue-html-loader": "^1.0.0", diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js index 33e70f4..c2e056c 100644 --- a/src/BaseCharts/Bar.js +++ b/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() diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js index ab4d087..e2ab7a3 100644 --- a/src/BaseCharts/Doughnut.js +++ b/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() diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js index c45b24f..d091c87 100644 --- a/src/BaseCharts/Line.js +++ b/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() diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js index 9941cc1..39e6c56 100644 --- a/src/BaseCharts/Pie.js +++ b/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() diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js index a51197a..3636527 100644 --- a/src/BaseCharts/PolarArea.js +++ b/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() diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js index f446477..fa2a4d0 100644 --- a/src/BaseCharts/Radar.js +++ b/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() diff --git a/src/helpers/options.js b/src/helpers/options.js new file mode 100644 index 0000000..8175c2c --- /dev/null +++ b/src/helpers/options.js @@ -0,0 +1,5 @@ +import merge from 'lodash/fp/merge' + +export function mergeOptions (obj, src) { + return merge(obj, src) +}