KevinMidboe/vue-chartjs
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-chartjs.git synced 2025-10-29 09:50:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #303 from west-soft-development/refactor-identical-code

Browse Source 
Refactor identical code
This commit is contained in:
Jakub
2018-02-02 15:34:06 +01:00
committed by GitHub
parent b80b07efd8 4297872885
commit 71b50df77a
24 changed files with 237 additions and 1378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

748
dist/vue-chartjs.js vendored
View File

@@ -12,7 +12,7 @@
exports["VueChartJs"] = factory(require("chart.js"));
else
root["VueChartJs"] = factory(root["Chart"]);
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_4__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@@ -75,644 +75,22 @@ return /******/ (function(modules) { // webpackBootstrap
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// EXTERNAL MODULE: external {"root":"Chart","commonjs":"chart.js","commonjs2":"chart.js","amd":"chart.js"}
var external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js__ = __webpack_require__(0);
var external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default = /*#__PURE__*/__webpack_require__.n(external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js__);
// CONCATENATED MODULE: ./src/BaseCharts/Bar.js
/* harmony default export */ var Bar = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'bar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'bar',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// CONCATENATED MODULE: ./src/BaseCharts/HorizontalBar.js
/* harmony default export */ var HorizontalBar = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'horizontalbar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'horizontalBar',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// CONCATENATED MODULE: ./src/BaseCharts/Doughnut.js
/* harmony default export */ var Doughnut = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'doughnut-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'doughnut',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// CONCATENATED MODULE: ./src/BaseCharts/Line.js
/* harmony default export */ var Line = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'line-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'line',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// CONCATENATED MODULE: ./src/BaseCharts/Pie.js
/* harmony default export */ var Pie = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'pie-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'pie',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// CONCATENATED MODULE: ./src/BaseCharts/PolarArea.js
/* harmony default export */ var PolarArea = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'polar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'polarArea',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// CONCATENATED MODULE: ./src/BaseCharts/Radar.js
/* harmony default export */ var Radar = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'radar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'radar',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// CONCATENATED MODULE: ./src/BaseCharts/Bubble.js
/* harmony default export */ var Bubble = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'bubble-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'bubble',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// CONCATENATED MODULE: ./src/BaseCharts/Scatter.js
/* harmony default export */ var Scatter = ({
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: 'scatter-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: 'scatter',
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
});
// EXTERNAL MODULE: ./src/mixins/reactiveData.js
var reactiveData = __webpack_require__(2);
var reactiveData = __webpack_require__(1);
var reactiveData_default = /*#__PURE__*/__webpack_require__.n(reactiveData);
// EXTERNAL MODULE: ./src/mixins/reactiveProp.js
var reactiveProp = __webpack_require__(3);
var reactiveProp = __webpack_require__(2);
var reactiveProp_default = /*#__PURE__*/__webpack_require__.n(reactiveProp);
// CONCATENATED MODULE: ./src/mixins/index.js
@@ -723,9 +101,105 @@ var reactiveProp_default = /*#__PURE__*/__webpack_require__.n(reactiveProp);
reactiveProp: reactiveProp_default.a
});
// EXTERNAL MODULE: ./package.json
var package_0 = __webpack_require__(4);
var package_0 = __webpack_require__(3);
var package_default = /*#__PURE__*/__webpack_require__.n(package_0);
// EXTERNAL MODULE: external {"root":"Chart","commonjs":"chart.js","commonjs2":"chart.js","amd":"chart.js"}
var external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js__ = __webpack_require__(4);
var external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default = /*#__PURE__*/__webpack_require__.n(external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js__);
// CONCATENATED MODULE: ./src/BaseCharts.js
function generateChart(chartId, chartType) {
return {
render: function render(createElement) {
return createElement('div', {
style: this.styles,
class: this.cssClasses
}, [createElement('canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
})]);
},
props: {
chartId: {
default: chartId,
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
_chart: null,
_plugins: this.plugins
};
},
methods: {
addPlugin: function addPlugin(plugin) {
this.$data._plugins.push(plugin);
},
renderChart: function renderChart(data, options) {
this.$data._chart = new external___root___Chart___commonjs___chart_js___commonjs2___chart_js___amd___chart_js___default.a(this.$refs.canvas.getContext('2d'), {
type: chartType,
data: data,
options: options,
plugins: this.$data._plugins
});
}
},
beforeDestroy: function beforeDestroy() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
}
};
}
var Bar = generateChart('bar-chart', 'bar');
var HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar');
var Doughnut = generateChart('doughnut-chart', 'doughnut');
var Line = generateChart('line-chart', 'line');
var Pie = generateChart('pie-chart', 'pie');
var PolarArea = generateChart('polar-chart', 'polarArea');
var Radar = generateChart('radar-chart', 'radar');
var Bubble = generateChart('bubble-chart', 'bubble');
var Scatter = generateChart('scatter-chart', 'scatter');
/* harmony default export */ var BaseCharts = ({
Bar: Bar,
HorizontalBar: HorizontalBar,
Doughnut: Doughnut,
Line: Line,
Pie: Pie,
PolarArea: PolarArea,
Radar: Radar,
Bubble: Bubble,
Scatter: Scatter
});
// CONCATENATED MODULE: ./src/index.js
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueCharts", function() { return VueCharts; });
/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "Bar", function() { return Bar; });
@@ -741,14 +215,6 @@ var package_default = /*#__PURE__*/__webpack_require__.n(package_0);
var VueCharts = {
version: package_default.a.version,
Bar: Bar,
@@ -766,7 +232,7 @@ var VueCharts = {
/***/ }),
/* 2 */
/* 1 */
/***/ (function(module, exports) {
module.exports = {
@@ -837,7 +303,7 @@ module.exports = {
};
/***/ }),
/* 3 */
/* 2 */
/***/ (function(module, exports) {
module.exports = {
@@ -908,11 +374,17 @@ module.exports = {
};
/***/ }),
/* 4 */
/* 3 */
/***/ (function(module, exports) {
module.exports = {"name":"vue-chartjs","version":"3.1.0","description":"Vue.js wrapper for chart.js for creating beautiful charts.","author":"Jakub Juszczak <jakub@posteo.de>","homepage":"http://vue-chartjs.org","license":"MIT","contributors":[{"name":"Thorsten Lünborg","web":"https://github.com/LinusBorg"},{"name":"Juan Carlos Alonso","web":"https://github.com/jcalonso"}],"maintainers":[{"name":"Jakub Juszczak","email":"jakub@posteo.de","web":"http://www.jakubjuszczak.de"}],"repository":{"type":"git","url":"git+ssh://git@github.com:apertureless/vue-chartjs.git"},"bugs":{"url":"https://github.com/apertureless/vue-chartjs/issues"},"keywords":["ChartJs","Vue","Visualisation","Wrapper","Charts"],"main":"dist/vue-chartjs.js","unpkg":"dist/vue-chartjs.min.js","module":"es/index.js","jsnext:main":"es/index.js","files":["src","dist","es"],"scripts":{"dev":"node build/dev-server.js","build":"yarn run release && yarn run build:es","build:es":"cross-env BABEL_ENV=es babel src --out-dir es","unit":"karma start test/unit/karma.conf.js --single-run","e2e":"node test/e2e/runner.js","test":"npm run unit","lint":"eslint --ext .js,.vue src test/unit/specs test/e2e/specs","release":"webpack --progress --hide-modules --config ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.min.js","prepublishOnly":"yarn run lint && yarn run test && yarn run build"},"dependencies":{},"peerDependencies":{"chart.js":"2.7.x"},"devDependencies":{"@babel/cli":"^7.0.0-beta.31","@babel/core":"^7.0.0-beta.31","@babel/preset-env":"^7.0.0-beta.31","@babel/preset-stage-2":"^7.0.0-beta.31","babel-loader":"8.0.0-beta.0","chai":"^3.5.0","chart.js":"2.7.0","chromedriver":"^2.28.0","connect-history-api-fallback":"^1.1.0","cross-env":"^5.1.1","cross-spawn":"^5.1.0","css-loader":"^0.28.0","eslint":"^3.19.0","eslint-config-standard":"^10.2.1","eslint-friendly-formatter":"^2.0.7","eslint-loader":"^1.7.1","eslint-plugin-html":"^2.0.1","eslint-plugin-import":"^2.2.0","eslint-plugin-node":"^4.2.2","eslint-plugin-promise":"^3.5.0","eslint-plugin-standard":"^3.0.1","eventsource-polyfill":"^0.9.6","express":"^4.15.2","extract-text-webpack-plugin":"^3.0.1","file-loader":"^0.10.1","friendly-errors-webpack-plugin":"^1.6.1","function-bind":"^1.0.2","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.4","inject-loader":"^3.0.0","isparta":"^4.0.0","jasmine-core":"^2.5.2","json-loader":"^0.5.4","karma":"^1.5.0","karma-coverage":"^1.1.1","karma-jasmine":"^1.0.2","karma-mocha":"^1.2.0","karma-phantomjs-launcher":"^1.0.4","karma-phantomjs-shim":"^1.4.0","karma-sinon-chai":"^1.2.0","karma-sourcemap-loader":"^0.3.7","karma-spec-reporter":"0.0.30","karma-webpack":"2","lolex":"^1.6.0","mocha":"^3.1.0","opn":"^5.1.0","ora":"^1.2.0","phantomjs-prebuilt":"^2.1.13","portfinder":"^1.0.13","selenium-server":"^3.3.1","shelljs":"^0.7.7","sinon":"^2.1.0","sinon-chai":"^2.9.0","url-loader":"^0.5.8","vue":"2.5.2","vue-hot-reload-api":"2.1.0","vue-html-loader":"^1.2.4","vue-loader":"^13.3.0","vue-style-loader":"3.0.1","vue-template-compiler":"2.5.2","webpack":"^3.7.1","webpack-dev-middleware":"^1.10.1","webpack-hot-middleware":"^2.17.1","webpack-merge":"^4.1.0"},"engines":{"node":">=6.9.0","npm":">= 3.0.0"},"browserify":{"transform":["babelify"]},"greenkeeper":{"ignore":["extract-text-webpack-plugin","karma-webpack","webpack","webpack-merge"]}}
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
/***/ })
/******/ ]);
});

2
dist/vue-chartjs.min.js vendored
View File

File diff suppressed because one or more lines are too long

104
src/BaseCharts.js Normal file
View File

@@ -0,0 +1,104 @@
import Chart from 'chart.js'
function generateChart (chartId, chartType) {
return {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: chartId,
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: chartType,
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}
}
export const Bar = generateChart('bar-chart', 'bar')
export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
export const Doughnut = generateChart('doughnut-chart', 'doughnut')
export const Line = generateChart('line-chart', 'line')
export const Pie = generateChart('pie-chart', 'pie')
export const PolarArea = generateChart('polar-chart', 'polarArea')
export const Radar = generateChart('radar-chart', 'radar')
export const Bubble = generateChart('bubble-chart', 'bubble')
export const Scatter = generateChart('scatter-chart', 'scatter')
export default {
Bar,
HorizontalBar,
Doughnut,
Line,
Pie,
PolarArea,
Radar,
Bubble,
Scatter
}

78
src/BaseCharts/Bar.js
View File

@@ -1,78 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'bar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'bar',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Bubble.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'bubble-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'bubble',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

81
src/BaseCharts/Doughnut.js
View File

@@ -1,81 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'doughnut-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'doughnut',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/HorizontalBar.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'horizontalbar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'horizontalBar',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Line.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'line-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'line',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Pie.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'pie-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'pie',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/PolarArea.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'polar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'polarArea',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Radar.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'radar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'radar',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Scatter.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'scatter-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'scatter',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

2
src/examples/BarExample.js
View File

@@ -1,4 +1,4 @@
import Bar from '../BaseCharts/Bar'
import { Bar } from '../BaseCharts'
export default {
extends: Bar,

2
src/examples/BubbleExample.js
View File

@@ -1,4 +1,4 @@
import Bubble from '../BaseCharts/Bubble'
import { Bubble } from '../BaseCharts'
export default {
extends: Bubble,

2
src/examples/DoughnutExample.js
View File

@@ -1,4 +1,4 @@
import Doughnut from '../BaseCharts/Doughnut'
import { Doughnut } from '../BaseCharts'
export default {
extends: Doughnut,

2
src/examples/HorizontalBarExample.js
View File

@@ -1,4 +1,4 @@
import HorizontalBar from '../BaseCharts/HorizontalBar'
import { HorizontalBar } from '../BaseCharts'
export default {
extends: HorizontalBar,

2
src/examples/LineExample.js
View File

@@ -1,4 +1,4 @@
import Line from '../BaseCharts/Line'
import { Line } from '../BaseCharts'
export default {
extends: Line,

2
src/examples/PieExample.js
View File

@@ -1,4 +1,4 @@
import Pie from '../BaseCharts/Pie'
import { Pie } from '../BaseCharts'
export default {
extends: Pie,

2
src/examples/PolarAreaExample.js
View File

@@ -1,4 +1,4 @@
import PolarArea from '../BaseCharts/PolarArea'
import { PolarArea } from '../BaseCharts'
export default {
extends: PolarArea,

2
src/examples/RadarExample.js
View File

@@ -1,4 +1,4 @@
import Radar from '../BaseCharts/Radar'
import { Radar } from '../BaseCharts'
export default {
extends: Radar,

2
src/examples/ReactiveExample.js
View File

@@ -1,4 +1,4 @@
import Bar from '../BaseCharts/Bar'
import { Bar } from '../BaseCharts'
import reactiveData from '../mixins/reactiveData'
export default {

2
src/examples/ReactivePropExample.js
View File

@@ -1,4 +1,4 @@
import Bar from '../BaseCharts/Bar'
import { Bar } from '../BaseCharts'
import reactiveProp from '../mixins/reactiveProp'
export default {

2
src/examples/ScatterExample.js
View File

@@ -1,4 +1,4 @@
import Scatter from '../BaseCharts/Scatter'
import { Scatter } from '../BaseCharts'
export default {
extends: Scatter,

20
src/index.js
View File

@@ -1,14 +1,16 @@
import Bar from './BaseCharts/Bar'
import HorizontalBar from './BaseCharts/HorizontalBar'
import Doughnut from './BaseCharts/Doughnut'
import Line from './BaseCharts/Line'
import Pie from './BaseCharts/Pie'
import PolarArea from './BaseCharts/PolarArea'
import Radar from './BaseCharts/Radar'
import Bubble from './BaseCharts/Bubble'
import Scatter from './BaseCharts/Scatter'
import mixins from './mixins/index.js'
import npmCfg from '../package.json'
import {
Bar,
HorizontalBar,
Doughnut,
Line,
Pie,
PolarArea,
Radar,
Bubble,
Scatter
} from './BaseCharts'
const VueCharts = {
version: npmCfg.version,