From fee32b57dfbe90a4929dcc2c7f5f8c073b937c32 Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Tue, 20 Dec 2016 14:33:47 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=94=A5=20Remove=20vue=20standalone=20?= =?UTF-8?q?alias=20from=20webpack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/webpack.base.conf.js | 1 - 1 file changed, 1 deletion(-) diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index beea8c4..b8d628e 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -16,7 +16,6 @@ module.exports = { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], alias: { - 'vue': 'vue/dist/vue.common.js', 'src': path.resolve(__dirname, '../src'), 'mixins': path.resolve(__dirname, '../src/mixins'), 'BaseCharts': path.resolve(__dirname, '../src/BaseCharts') From e4ba9ea5a31e14ea67a96654d646c4010eb1c780 Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Tue, 20 Dec 2016 14:34:05 +0100 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9E=95=20Add=20dependency:=20template-co?= =?UTF-8?q?mpiler?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 53ea26c..21f867d 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "vue-html-loader": "^1.2.3", "vue-loader": "^10.0.2", "vue-style-loader": "^1.0.0", + "vue-template-compiler": "^2.1.6", "webpack": "^1.13.2", "webpack-dev-middleware": "^1.4.0", "webpack-hot-middleware": "^2.6.0", From bb21a40506ca4d23f3a432062796cccf8e3f2a1d Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Tue, 20 Dec 2016 14:36:35 +0100 Subject: [PATCH 3/4] Rewrite template option to render function --- src/BaseCharts/Bar.js | 23 +++++++++++++++++------ src/BaseCharts/Bubble.js | 22 +++++++++++++++++----- src/BaseCharts/Doughnut.js | 22 +++++++++++++++++----- src/BaseCharts/Line.js | 22 +++++++++++++++++----- src/BaseCharts/Pie.js | 22 +++++++++++++++++----- src/BaseCharts/PolarArea.js | 22 +++++++++++++++++----- src/BaseCharts/Radar.js | 22 +++++++++++++++++----- yarn.lock | 13 ++++++++++++- 8 files changed, 131 insertions(+), 37 deletions(-) diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js index af14b76..edccfe7 100644 --- a/src/BaseCharts/Bar.js +++ b/src/BaseCharts/Bar.js @@ -3,11 +3,23 @@ import Chart from 'chart.js' import { mergeOptions } from '../helpers/options' export default Vue.extend({ - template: ` -
- -
- `, + render: function (createElement) { + return createElement( + 'div', + [ + createElement( + 'canvas', { + attrs: { + id: this.chartId, + width: this.width, + height: this.height + }, + ref: 'canvas' + } + ) + ] + ) + }, props: { chartId: { @@ -51,7 +63,6 @@ export default Vue.extend({ methods: { renderChart (data, options, type) { let chartOptions = mergeOptions(this.defaultOptions, options) - this._chart = new Chart( this.$refs.canvas.getContext('2d'), { type: type || 'bar', diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js index 8c24769..83e998b 100644 --- a/src/BaseCharts/Bubble.js +++ b/src/BaseCharts/Bubble.js @@ -3,11 +3,23 @@ import Chart from 'chart.js' import { mergeOptions } from '../helpers/options' export default Vue.extend({ - template: ` -
- -
- `, + render: function (createElement) { + return createElement( + 'div', + [ + createElement( + 'canvas', { + attrs: { + id: this.chartId, + width: this.width, + height: this.height + }, + ref: 'canvas' + } + ) + ] + ) + }, props: { chartId: { diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js index 32df382..4254893 100644 --- a/src/BaseCharts/Doughnut.js +++ b/src/BaseCharts/Doughnut.js @@ -3,11 +3,23 @@ import Chart from 'chart.js' import { mergeOptions } from '../helpers/options' export default Vue.extend({ - template: ` -
- -
- `, + render: function (createElement) { + return createElement( + 'div', + [ + createElement( + 'canvas', { + attrs: { + id: this.chartId, + width: this.width, + height: this.height + }, + ref: 'canvas' + } + ) + ] + ) + }, props: { chartId: { diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js index 2371973..84a51ae 100644 --- a/src/BaseCharts/Line.js +++ b/src/BaseCharts/Line.js @@ -3,11 +3,23 @@ import Chart from 'chart.js' import { mergeOptions } from '../helpers/options' export default Vue.extend({ - template: ` -
- -
- `, + render: function (createElement) { + return createElement( + 'div', + [ + createElement( + 'canvas', { + attrs: { + id: this.chartId, + width: this.width, + height: this.height + }, + ref: 'canvas' + } + ) + ] + ) + }, props: { chartId: { diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js index cc292d3..abfab4e 100644 --- a/src/BaseCharts/Pie.js +++ b/src/BaseCharts/Pie.js @@ -3,11 +3,23 @@ import Chart from 'chart.js' import { mergeOptions } from '../helpers/options' export default Vue.extend({ - template: ` -
- -
- `, + render: function (createElement) { + return createElement( + 'div', + [ + createElement( + 'canvas', { + attrs: { + id: this.chartId, + width: this.width, + height: this.height + }, + ref: 'canvas' + } + ) + ] + ) + }, props: { chartId: { diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js index e8a7d62..9bbd688 100644 --- a/src/BaseCharts/PolarArea.js +++ b/src/BaseCharts/PolarArea.js @@ -3,11 +3,23 @@ import Chart from 'chart.js' import { mergeOptions } from '../helpers/options' export default Vue.extend({ - template: ` -
- -
- `, + render: function (createElement) { + return createElement( + 'div', + [ + createElement( + 'canvas', { + attrs: { + id: this.chartId, + width: this.width, + height: this.height + }, + ref: 'canvas' + } + ) + ] + ) + }, props: { chartId: { diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js index 962de04..1b23ec4 100644 --- a/src/BaseCharts/Radar.js +++ b/src/BaseCharts/Radar.js @@ -3,11 +3,23 @@ import Chart from 'chart.js' import { mergeOptions } from '../helpers/options' export default Vue.extend({ - template: ` -
- -
- `, + render: function (createElement) { + return createElement( + 'div', + [ + createElement( + 'canvas', { + attrs: { + id: this.chartId, + width: this.width, + height: this.height + }, + ref: 'canvas' + } + ) + ] + ) + }, props: { chartId: { diff --git a/yarn.lock b/yarn.lock index a402511..00ceac5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1535,6 +1535,10 @@ dateformat@^1.0.6: get-stdin "^4.0.1" meow "^3.3.0" +de-indent@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" + debug@0.7.4: version "0.7.4" resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39" @@ -2527,7 +2531,7 @@ hawk@~3.1.3: hoek "2.x.x" sntp "1.x.x" -he@1.1.x: +he@1.1.x, he@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7" @@ -5501,6 +5505,13 @@ vue-style-loader@^1.0.0: dependencies: loader-utils "^0.2.7" +vue-template-compiler@^2.1.6: + version "2.1.6" + resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.6.tgz#f96f968652fc1e861bb0052f61993ba1fdc18ad3" + dependencies: + de-indent "^1.0.2" + he "^1.1.0" + vue-template-es2015-compiler@^1.2.2: version "1.4.0" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198" From 482048b7467ff5ca0e4426d36bc565f14c2e19c5 Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Tue, 20 Dec 2016 18:26:49 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=E2=9C=85=20=20=F0=9F=90=9B=20Fix=20=20test?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/unit/specs/Bar.spec.js | 16 ++++++++++++++-- test/unit/specs/Bubble.spec.js | 16 ++++++++++++++-- test/unit/specs/Doughnut.spec.js | 16 ++++++++++++++-- test/unit/specs/Line.spec.js | 16 ++++++++++++++-- test/unit/specs/Pie.spec.js | 16 ++++++++++++++-- test/unit/specs/PolarArea.spec.js | 16 ++++++++++++++-- test/unit/specs/Radar.spec.js | 16 ++++++++++++++-- 7 files changed, 98 insertions(+), 14 deletions(-) diff --git a/test/unit/specs/Bar.spec.js b/test/unit/specs/Bar.spec.js index b76f108..715d91e 100644 --- a/test/unit/specs/Bar.spec.js +++ b/test/unit/specs/Bar.spec.js @@ -10,7 +10,11 @@ describe('BarChart', () => { it('should render a canvas', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + BarChart + ) + }, components: { BarChart } }).$mount(el) @@ -22,7 +26,15 @@ describe('BarChart', () => { it('should change id based on prop', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + BarChart, { + props: { + chartId: 'barchartprop' + } + } + ) + }, components: { BarChart } }).$mount(el) diff --git a/test/unit/specs/Bubble.spec.js b/test/unit/specs/Bubble.spec.js index 22b9f8a..749fc89 100644 --- a/test/unit/specs/Bubble.spec.js +++ b/test/unit/specs/Bubble.spec.js @@ -10,7 +10,11 @@ describe('BubbleChart', () => { it('should render a canvas', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + BubbleChart + ) + }, components: { BubbleChart } }).$mount(el) @@ -22,7 +26,15 @@ describe('BubbleChart', () => { it('should change id based on prop', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + BubbleChart, { + props: { + chartId: 'bubblechartprop' + } + } + ) + }, components: { BubbleChart } }).$mount(el) diff --git a/test/unit/specs/Doughnut.spec.js b/test/unit/specs/Doughnut.spec.js index 6da7071..37931a8 100644 --- a/test/unit/specs/Doughnut.spec.js +++ b/test/unit/specs/Doughnut.spec.js @@ -10,7 +10,11 @@ describe('DoughnutChart', () => { it('should render a canvas', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + DoughnutChart + ) + }, components: { DoughnutChart } }).$mount(el) @@ -22,7 +26,15 @@ describe('DoughnutChart', () => { it('should change id based on prop', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + DoughnutChart, { + props: { + chartId: 'doughnutchartprop' + } + } + ) + }, components: { DoughnutChart } }).$mount(el) diff --git a/test/unit/specs/Line.spec.js b/test/unit/specs/Line.spec.js index ce99cdf..a4edb28 100644 --- a/test/unit/specs/Line.spec.js +++ b/test/unit/specs/Line.spec.js @@ -10,7 +10,11 @@ describe('LineChart', () => { it('should render a canvas', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + LineChart + ) + }, components: { LineChart } }).$mount(el) @@ -22,7 +26,15 @@ describe('LineChart', () => { it('should change id based on prop', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + LineChart, { + props: { + chartId: 'linechartprop' + } + } + ) + }, components: { LineChart } }).$mount(el) diff --git a/test/unit/specs/Pie.spec.js b/test/unit/specs/Pie.spec.js index 097fad4..3707cbc 100644 --- a/test/unit/specs/Pie.spec.js +++ b/test/unit/specs/Pie.spec.js @@ -10,7 +10,11 @@ describe('PieChart', () => { it('should render a canvas', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + PieChart + ) + }, components: { PieChart } }).$mount(el) @@ -22,7 +26,15 @@ describe('PieChart', () => { it('should change id based on prop', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + PieChart, { + props: { + chartId: 'piechartprop' + } + } + ) + }, components: { PieChart } }).$mount(el) diff --git a/test/unit/specs/PolarArea.spec.js b/test/unit/specs/PolarArea.spec.js index 921c5a9..b2e563d 100644 --- a/test/unit/specs/PolarArea.spec.js +++ b/test/unit/specs/PolarArea.spec.js @@ -10,7 +10,11 @@ describe('PolarChart', () => { it('should render a canvas', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + PolarChart + ) + }, components: { PolarChart } }).$mount(el) @@ -22,7 +26,15 @@ describe('PolarChart', () => { it('should change id based on prop', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + PolarChart, { + props: { + chartId: 'polarchartprop' + } + } + ) + }, components: { PolarChart } }).$mount(el) diff --git a/test/unit/specs/Radar.spec.js b/test/unit/specs/Radar.spec.js index a05a24f..8e58577 100644 --- a/test/unit/specs/Radar.spec.js +++ b/test/unit/specs/Radar.spec.js @@ -10,7 +10,11 @@ describe('RadarChart', () => { it('should render a canvas', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + RadarChart + ) + }, components: { RadarChart } }).$mount(el) @@ -22,7 +26,15 @@ describe('RadarChart', () => { it('should change id based on prop', () => { const vm = new Vue({ - template: '', + render: function (createElement) { + return createElement( + RadarChart, { + props: { + chartId: 'rodarchartprop' + } + } + ) + }, components: { RadarChart } }).$mount(el)