diff --git a/.eslintrc.js b/.eslintrc.js index af096009..dcb2c453 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,5 +15,8 @@ module.exports = { 'arrow-parens': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 + }, + "globals": { + "LIB_VERSION": true } } diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 15f60334..1b383605 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -1,8 +1,10 @@ 'use strict' +const webpack = require('webpack') const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') +const npmCfg = require('../package.json') function resolve (dir) { return path.join(__dirname, '..', dir) @@ -72,5 +74,10 @@ module.exports = { } } ] - } + }, + plugins: [ + new webpack.DefinePlugin({ + LIB_VERSION: JSON.stringify(npmCfg.version) + }) + ] } diff --git a/dist/vue-chartjs.js b/dist/vue-chartjs.js index 00c03747..ecda41c3 100644 --- a/dist/vue-chartjs.js +++ b/dist/vue-chartjs.js @@ -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_4__) { +})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -85,27 +85,89 @@ return /******/ (function(modules) { // webpackBootstrap "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); -// EXTERNAL MODULE: ./src/mixins/reactiveData.js -var reactiveData = __webpack_require__(1); -var reactiveData_default = /*#__PURE__*/__webpack_require__.n(reactiveData); +// CONCATENATED MODULE: ./src/mixins/index.js +function dataHandler(newData, oldData) { + if (oldData) { + var chart = this.$data._chart; + var newDatasetLabels = newData.datasets.map(function (dataset) { + return dataset.label; + }); + var oldDatasetLabels = oldData.datasets.map(function (dataset) { + return dataset.label; + }); + var oldLabels = JSON.stringify(oldDatasetLabels); + var newLabels = JSON.stringify(newDatasetLabels); + + if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) { + newData.datasets.forEach(function (dataset, i) { + var oldDatasetKeys = Object.keys(oldData.datasets[i]); + var newDatasetKeys = Object.keys(dataset); + var deletionKeys = oldDatasetKeys.filter(function (key) { + return key !== '_meta' && newDatasetKeys.indexOf(key) === -1; + }); + deletionKeys.forEach(function (deletionKey) { + delete chart.data.datasets[i][deletionKey]; + }); -// EXTERNAL MODULE: ./src/mixins/reactiveProp.js -var reactiveProp = __webpack_require__(2); -var reactiveProp_default = /*#__PURE__*/__webpack_require__.n(reactiveProp); + for (var attribute in dataset) { + if (dataset.hasOwnProperty(attribute)) { + chart.data.datasets[i][attribute] = dataset[attribute]; + } + } + }); -// CONCATENATED MODULE: ./src/mixins/index.js + if (newData.hasOwnProperty('labels')) { + chart.data.labels = newData.labels; + } + + if (newData.hasOwnProperty('xLabels')) { + chart.data.xLabels = newData.xLabels; + } + + if (newData.hasOwnProperty('yLabels')) { + chart.data.yLabels = newData.yLabels; + } + chart.update(); + } else { + chart.destroy(); + this.renderChart(this.chartData, this.options); + } + } else { + if (this.$data._chart) { + this.$data._chart.destroy(); + } + + this.renderChart(this.chartData, this.options); + } +} +var reactiveData = { + data: function data() { + return { + chartData: null + }; + }, + watch: { + 'chartData': dataHandler + } +}; +var reactiveProp = { + props: { + chartData: { + required: true + } + }, + watch: { + 'chartData': dataHandler + } +}; /* harmony default export */ var mixins = ({ - reactiveData: reactiveData_default.a, - reactiveProp: reactiveProp_default.a + reactiveData: reactiveData, + reactiveProp: reactiveProp }); -// EXTERNAL MODULE: ./package.json -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__ = __webpack_require__(1); 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 @@ -214,9 +276,8 @@ var Scatter = generateChart('scatter-chart', 'scatter'); /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "mixins", function() { return mixins; }); - var VueCharts = { - version: package_default.a.version, + version: LIB_VERSION, Bar: Bar, HorizontalBar: HorizontalBar, Doughnut: Doughnut, @@ -235,155 +296,7 @@ var VueCharts = { /* 1 */ /***/ (function(module, exports) { -module.exports = { - data: function data() { - return { - chartData: null - }; - }, - watch: { - 'chartData': { - handler: function handler(newData, oldData) { - if (oldData) { - var chart = this.$data._chart; - var newDatasetLabels = newData.datasets.map(function (dataset) { - return dataset.label; - }); - var oldDatasetLabels = oldData.datasets.map(function (dataset) { - return dataset.label; - }); - var oldLabels = JSON.stringify(oldDatasetLabels); - var newLabels = JSON.stringify(newDatasetLabels); - - if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) { - newData.datasets.forEach(function (dataset, i) { - var oldDatasetKeys = Object.keys(oldData.datasets[i]); - var newDatasetKeys = Object.keys(dataset); - var deletionKeys = oldDatasetKeys.filter(function (key) { - return key !== '_meta' && newDatasetKeys.indexOf(key) === -1; - }); - deletionKeys.forEach(function (deletionKey) { - delete chart.data.datasets[i][deletionKey]; - }); - - for (var attribute in dataset) { - if (dataset.hasOwnProperty(attribute)) { - chart.data.datasets[i][attribute] = dataset[attribute]; - } - } - }); - - if (newData.hasOwnProperty('labels')) { - chart.data.labels = newData.labels; - } - - if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels; - } - - if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels; - } - - chart.update(); - } else { - chart.destroy(); - this.renderChart(this.chartData, this.options); - } - } else { - if (this.$data._chart) { - this.$data._chart.destroy(); - } - - this.renderChart(this.chartData, this.options); - } - } - } - } -}; - -/***/ }), -/* 2 */ -/***/ (function(module, exports) { - -module.exports = { - props: { - chartData: { - required: true - } - }, - watch: { - 'chartData': { - handler: function handler(newData, oldData) { - if (oldData) { - var chart = this.$data._chart; - var newDatasetLabels = newData.datasets.map(function (dataset) { - return dataset.label; - }); - var oldDatasetLabels = oldData.datasets.map(function (dataset) { - return dataset.label; - }); - var oldLabels = JSON.stringify(oldDatasetLabels); - var newLabels = JSON.stringify(newDatasetLabels); - - if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) { - newData.datasets.forEach(function (dataset, i) { - var oldDatasetKeys = Object.keys(oldData.datasets[i]); - var newDatasetKeys = Object.keys(dataset); - var deletionKeys = oldDatasetKeys.filter(function (key) { - return key !== '_meta' && newDatasetKeys.indexOf(key) === -1; - }); - deletionKeys.forEach(function (deletionKey) { - delete chart.data.datasets[i][deletionKey]; - }); - - for (var attribute in dataset) { - if (dataset.hasOwnProperty(attribute)) { - chart.data.datasets[i][attribute] = dataset[attribute]; - } - } - }); - - if (newData.hasOwnProperty('labels')) { - chart.data.labels = newData.labels; - } - - if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels; - } - - if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels; - } - - chart.update(); - } else { - chart.destroy(); - this.renderChart(this.chartData, this.options); - } - } else { - if (this.$data._chart) { - this.$data._chart.destroy(); - } - - this.renderChart(this.chartData, this.options); - } - } - } - } -}; - -/***/ }), -/* 3 */ -/***/ (function(module, exports) { - -module.exports = {"name":"vue-chartjs","version":"3.1.1","description":"Vue.js wrapper for chart.js for creating beautiful charts.","author":"Jakub Juszczak ","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__; +module.exports = __WEBPACK_EXTERNAL_MODULE_1__; /***/ }) /******/ ]); diff --git a/dist/vue-chartjs.min.js b/dist/vue-chartjs.min.js index 89b7a86a..0fc1105e 100644 --- a/dist/vue-chartjs.min.js +++ b/dist/vue-chartjs.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("chart.js")):"function"==typeof define&&define.amd?define("VueChartJs",["chart.js"],t):"object"==typeof exports?exports.VueChartJs=t(require("chart.js")):e.VueChartJs=t(e.Chart)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(a[r])return a[r].exports;var s=a[r]={i:r,l:!1,exports:{}};return e[r].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var a={};return t.m=e,t.c=a,t.d=function(e,a,r){t.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(a,"a",a),a},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,a){"use strict";function r(e,t){return{render:function(e){return e("div",{style:this.styles,class:this.cssClasses},[e("canvas",{attrs:{id:this.chartId,width:this.width,height:this.height},ref:"canvas"})])},props:{chartId:{default:e,type:String},width:{default:400,type:Number},height:{default:400,type:Number},cssClasses:{type:String,default:""},styles:{type:Object},plugins:{type:Array,default:function(){return[]}}},data:function(){return{_chart:null,_plugins:this.plugins}},methods:{addPlugin:function(e){this.$data._plugins.push(e)},renderChart:function(e,a){this.$data._chart=new h.a(this.$refs.canvas.getContext("2d"),{type:t,data:e,options:a,plugins:this.$data._plugins})}},beforeDestroy:function(){this.$data._chart&&this.$data._chart.destroy()}}}Object.defineProperty(t,"__esModule",{value:!0});var s=a(1),n=a.n(s),i=a(2),o=a.n(i),u={reactiveData:n.a,reactiveProp:o.a},l=a(3),c=a.n(l),d=a(4),h=a.n(d),p=r("bar-chart","bar"),b=r("horizontalbar-chart","horizontalBar"),f=r("doughnut-chart","doughnut"),m=r("line-chart","line"),y=r("pie-chart","pie"),g=r("polar-chart","polarArea"),j=r("radar-chart","radar"),v=r("bubble-chart","bubble"),k=r("scatter-chart","scatter");a.d(t,"VueCharts",function(){return w}),a.d(t,"Bar",function(){return p}),a.d(t,"HorizontalBar",function(){return b}),a.d(t,"Doughnut",function(){return f}),a.d(t,"Line",function(){return m}),a.d(t,"Pie",function(){return y}),a.d(t,"PolarArea",function(){return g}),a.d(t,"Radar",function(){return j}),a.d(t,"Bubble",function(){return v}),a.d(t,"Scatter",function(){return k}),a.d(t,"mixins",function(){return u});var w={version:c.a.version,Bar:p,HorizontalBar:b,Doughnut:f,Line:m,Pie:y,PolarArea:g,Radar:j,Bubble:v,Scatter:k,mixins:u};t.default=w},function(e,t){e.exports={data:function(){return{chartData:null}},watch:{chartData:{handler:function(e,t){if(t){var a=this.$data._chart,r=e.datasets.map(function(e){return e.label}),s=t.datasets.map(function(e){return e.label}),n=JSON.stringify(s);JSON.stringify(r)===n&&t.datasets.length===e.datasets.length?(e.datasets.forEach(function(e,r){var s=Object.keys(t.datasets[r]),n=Object.keys(e);s.filter(function(e){return"_meta"!==e&&-1===n.indexOf(e)}).forEach(function(e){delete a.data.datasets[r][e]});for(var i in e)e.hasOwnProperty(i)&&(a.data.datasets[r][i]=e[i])}),e.hasOwnProperty("labels")&&(a.data.labels=e.labels),e.hasOwnProperty("xLabels")&&(a.data.xLabels=e.xLabels),e.hasOwnProperty("yLabels")&&(a.data.yLabels=e.yLabels),a.update()):(a.destroy(),this.renderChart(this.chartData,this.options))}else this.$data._chart&&this.$data._chart.destroy(),this.renderChart(this.chartData,this.options)}}}}},function(e,t){e.exports={props:{chartData:{required:!0}},watch:{chartData:{handler:function(e,t){if(t){var a=this.$data._chart,r=e.datasets.map(function(e){return e.label}),s=t.datasets.map(function(e){return e.label}),n=JSON.stringify(s);JSON.stringify(r)===n&&t.datasets.length===e.datasets.length?(e.datasets.forEach(function(e,r){var s=Object.keys(t.datasets[r]),n=Object.keys(e);s.filter(function(e){return"_meta"!==e&&-1===n.indexOf(e)}).forEach(function(e){delete a.data.datasets[r][e]});for(var i in e)e.hasOwnProperty(i)&&(a.data.datasets[r][i]=e[i])}),e.hasOwnProperty("labels")&&(a.data.labels=e.labels),e.hasOwnProperty("xLabels")&&(a.data.xLabels=e.xLabels),e.hasOwnProperty("yLabels")&&(a.data.yLabels=e.yLabels),a.update()):(a.destroy(),this.renderChart(this.chartData,this.options))}else this.$data._chart&&this.$data._chart.destroy(),this.renderChart(this.chartData,this.options)}}}}},function(e,t){e.exports={name:"vue-chartjs",version:"3.1.1",description:"Vue.js wrapper for chart.js for creating beautiful charts.",author:"Jakub Juszczak ",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"]}}},function(t,a){t.exports=e}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define("VueChartJs",["chart.js"],e):"object"==typeof exports?exports.VueChartJs=e(require("chart.js")):t.VueChartJs=e(t.Chart)}("undefined"!=typeof self?self:this,function(t){return function(t){function e(a){if(r[a])return r[a].exports;var n=r[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,a){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:a})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,r){"use strict";function a(t,e){if(e){var r=this.$data._chart,a=t.datasets.map(function(t){return t.label}),n=e.datasets.map(function(t){return t.label}),s=JSON.stringify(n);JSON.stringify(a)===s&&e.datasets.length===t.datasets.length?(t.datasets.forEach(function(t,a){var n=Object.keys(e.datasets[a]),s=Object.keys(t);n.filter(function(t){return"_meta"!==t&&-1===s.indexOf(t)}).forEach(function(t){delete r.data.datasets[a][t]});for(var i in t)t.hasOwnProperty(i)&&(r.data.datasets[a][i]=t[i])}),t.hasOwnProperty("labels")&&(r.data.labels=t.labels),t.hasOwnProperty("xLabels")&&(r.data.xLabels=t.xLabels),t.hasOwnProperty("yLabels")&&(r.data.yLabels=t.yLabels),r.update()):(r.destroy(),this.renderChart(this.chartData,this.options))}else this.$data._chart&&this.$data._chart.destroy(),this.renderChart(this.chartData,this.options)}function n(t,e){return{render:function(t){return t("div",{style:this.styles,class:this.cssClasses},[t("canvas",{attrs:{id:this.chartId,width:this.width,height:this.height},ref:"canvas"})])},props:{chartId:{default:t,type:String},width:{default:400,type:Number},height:{default:400,type:Number},cssClasses:{type:String,default:""},styles:{type:Object},plugins:{type:Array,default:function(){return[]}}},data:function(){return{_chart:null,_plugins:this.plugins}},methods:{addPlugin:function(t){this.$data._plugins.push(t)},renderChart:function(t,r){this.$data._chart=new c.a(this.$refs.canvas.getContext("2d"),{type:e,data:t,options:r,plugins:this.$data._plugins})}},beforeDestroy:function(){this.$data._chart&&this.$data._chart.destroy()}}}Object.defineProperty(e,"__esModule",{value:!0});var s={data:function(){return{chartData:null}},watch:{chartData:a}},i={props:{chartData:{required:!0}},watch:{chartData:a}},u={reactiveData:s,reactiveProp:i},o=r(1),c=r.n(o),h=n("bar-chart","bar"),d=n("horizontalbar-chart","horizontalBar"),l=n("doughnut-chart","doughnut"),f=n("line-chart","line"),p=n("pie-chart","pie"),b=n("polar-chart","polarArea"),y=n("radar-chart","radar"),g=n("bubble-chart","bubble"),x=n("scatter-chart","scatter");r.d(e,"VueCharts",function(){return v}),r.d(e,"Bar",function(){return h}),r.d(e,"HorizontalBar",function(){return d}),r.d(e,"Doughnut",function(){return l}),r.d(e,"Line",function(){return f}),r.d(e,"Pie",function(){return p}),r.d(e,"PolarArea",function(){return b}),r.d(e,"Radar",function(){return y}),r.d(e,"Bubble",function(){return g}),r.d(e,"Scatter",function(){return x}),r.d(e,"mixins",function(){return u});var v={version:LIB_VERSION,Bar:h,HorizontalBar:d,Doughnut:l,Line:f,Pie:p,PolarArea:b,Radar:y,Bubble:g,Scatter:x,mixins:u};e.default=v},function(e,r){e.exports=t}])}); \ No newline at end of file diff --git a/src/examples/ReactiveExample.js b/src/examples/ReactiveExample.js index 283484a7..1a2a32c6 100644 --- a/src/examples/ReactiveExample.js +++ b/src/examples/ReactiveExample.js @@ -1,5 +1,5 @@ import { Bar } from '../BaseCharts' -import reactiveData from '../mixins/reactiveData' +import { reactiveData } from '../mixins' export default { extends: Bar, diff --git a/src/examples/ReactivePropExample.js b/src/examples/ReactivePropExample.js index 8fa055a0..11de700b 100644 --- a/src/examples/ReactivePropExample.js +++ b/src/examples/ReactivePropExample.js @@ -1,5 +1,5 @@ import { Bar } from '../BaseCharts' -import reactiveProp from '../mixins/reactiveProp' +import { reactiveProp } from '../mixins' export default { extends: Bar, diff --git a/src/index.js b/src/index.js index 65376ca1..f03fa1e0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import mixins from './mixins/index.js' -import npmCfg from '../package.json' + import { Bar, HorizontalBar, @@ -13,7 +13,7 @@ import { } from './BaseCharts' const VueCharts = { - version: npmCfg.version, + version: LIB_VERSION, Bar, HorizontalBar, Doughnut, diff --git a/src/mixins/index.js b/src/mixins/index.js index eb03191c..8555d523 100644 --- a/src/mixins/index.js +++ b/src/mixins/index.js @@ -1,5 +1,89 @@ -import reactiveData from './reactiveData.js' -import reactiveProp from './reactiveProp.js' +function dataHandler (newData, oldData) { + if (oldData) { + let chart = this.$data._chart + + // Get new and old DataSet Labels + let newDatasetLabels = newData.datasets.map((dataset) => { + return dataset.label + }) + + let oldDatasetLabels = oldData.datasets.map((dataset) => { + return dataset.label + }) + + // Stringify 'em for easier compare + const oldLabels = JSON.stringify(oldDatasetLabels) + const newLabels = JSON.stringify(newDatasetLabels) + + // Check if Labels are equal and if dataset length is equal + if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) { + newData.datasets.forEach((dataset, i) => { + // Get new and old dataset keys + const oldDatasetKeys = Object.keys(oldData.datasets[i]) + const newDatasetKeys = Object.keys(dataset) + + // Get keys that aren't present in the new data + const deletionKeys = oldDatasetKeys.filter((key) => { + return key !== '_meta' && newDatasetKeys.indexOf(key) === -1 + }) + + // Remove outdated key-value pairs + deletionKeys.forEach((deletionKey) => { + delete chart.data.datasets[i][deletionKey] + }) + + // Update attributes individually to avoid re-rendering the entire chart + for (const attribute in dataset) { + if (dataset.hasOwnProperty(attribute)) { + chart.data.datasets[i][attribute] = dataset[attribute] + } + } + }) + + if (newData.hasOwnProperty('labels')) { + chart.data.labels = newData.labels + } + if (newData.hasOwnProperty('xLabels')) { + chart.data.xLabels = newData.xLabels + } + if (newData.hasOwnProperty('yLabels')) { + chart.data.yLabels = newData.yLabels + } + chart.update() + } else { + chart.destroy() + this.renderChart(this.chartData, this.options) + } + } else { + if (this.$data._chart) { + this.$data._chart.destroy() + } + this.renderChart(this.chartData, this.options) + } +} + +export const reactiveData = { + data () { + return { + chartData: null + } + }, + + watch: { + 'chartData': dataHandler + } +} + +export const reactiveProp = { + props: { + chartData: { + required: true + } + }, + watch: { + 'chartData': dataHandler + } +} export default { reactiveData, diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js deleted file mode 100644 index 4774c3a6..00000000 --- a/src/mixins/reactiveData.js +++ /dev/null @@ -1,74 +0,0 @@ -module.exports = { - data () { - return { - chartData: null - } - }, - watch: { - 'chartData': { - handler (newData, oldData) { - if (oldData) { - let chart = this.$data._chart - - // Get new and old DataSet Labels - let newDatasetLabels = newData.datasets.map((dataset) => { - return dataset.label - }) - - let oldDatasetLabels = oldData.datasets.map((dataset) => { - return dataset.label - }) - - // Stringify 'em for easier compare - const oldLabels = JSON.stringify(oldDatasetLabels) - const newLabels = JSON.stringify(newDatasetLabels) - - // Check if Labels are equal and if dataset length is equal - if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) { - newData.datasets.forEach((dataset, i) => { - // Get new and old dataset keys - const oldDatasetKeys = Object.keys(oldData.datasets[i]) - const newDatasetKeys = Object.keys(dataset) - - // Get keys that aren't present in the new data - const deletionKeys = oldDatasetKeys.filter((key) => { - return key !== '_meta' && newDatasetKeys.indexOf(key) === -1 - }) - - // Remove outdated key-value pairs - deletionKeys.forEach((deletionKey) => { - delete chart.data.datasets[i][deletionKey] - }) - - // Update attributes individually to avoid re-rendering the entire chart - for (const attribute in dataset) { - if (dataset.hasOwnProperty(attribute)) { - chart.data.datasets[i][attribute] = dataset[attribute] - } - } - }) - - if (newData.hasOwnProperty('labels')) { - chart.data.labels = newData.labels - } - if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels - } - if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels - } - chart.update() - } else { - chart.destroy() - this.renderChart(this.chartData, this.options) - } - } else { - if (this.$data._chart) { - this.$data._chart.destroy() - } - this.renderChart(this.chartData, this.options) - } - } - } - } -} diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js deleted file mode 100644 index 8fd3c286..00000000 --- a/src/mixins/reactiveProp.js +++ /dev/null @@ -1,74 +0,0 @@ -module.exports = { - props: { - chartData: { - required: true - } - }, - watch: { - 'chartData': { - handler (newData, oldData) { - if (oldData) { - let chart = this.$data._chart - - // Get new and old DataSet Labels - let newDatasetLabels = newData.datasets.map((dataset) => { - return dataset.label - }) - - let oldDatasetLabels = oldData.datasets.map((dataset) => { - return dataset.label - }) - - // Stringify 'em for easier compare - const oldLabels = JSON.stringify(oldDatasetLabels) - const newLabels = JSON.stringify(newDatasetLabels) - - // Check if Labels are equal and if dataset length is equal - if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) { - newData.datasets.forEach((dataset, i) => { - // Get new and old dataset keys - const oldDatasetKeys = Object.keys(oldData.datasets[i]) - const newDatasetKeys = Object.keys(dataset) - - // Get keys that aren't present in the new data - const deletionKeys = oldDatasetKeys.filter((key) => { - return key !== '_meta' && newDatasetKeys.indexOf(key) === -1 - }) - - // Remove outdated key-value pairs - deletionKeys.forEach((deletionKey) => { - delete chart.data.datasets[i][deletionKey] - }) - - // Update attributes individually to avoid re-rendering the entire chart - for (const attribute in dataset) { - if (dataset.hasOwnProperty(attribute)) { - chart.data.datasets[i][attribute] = dataset[attribute] - } - } - }) - - if (newData.hasOwnProperty('labels')) { - chart.data.labels = newData.labels - } - if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels - } - if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels - } - chart.update() - } else { - chart.destroy() - this.renderChart(this.chartData, this.options) - } - } else { - if (this.$data._chart) { - this.$data._chart.destroy() - } - this.renderChart(this.chartData, this.options) - } - } - } - } -}