vue-chartjs - npm Package Compare versions

Comparing version 3.3.2 to 3.4.0

CHANGELOG.md

@@ -5,2 +5,15 @@ # Change Log
 
+<a name="3.4.0"></a>
+# [3.4.0](https://github.com/apertureless/vue-chartjs/compare/v3.3.2...v3.4.0) (2018-08-04)
+
+
+### Features
+
+* **events:** Add events to reactiveMixins ([#389](https://github.com/apertureless/vue-chartjs/issues/389)) ([67e8e4d](https://github.com/apertureless/vue-chartjs/commit/67e8e4d)), closes [#382](https://github.com/apertureless/vue-chartjs/issues/382)
+* **typescript:** Add basic typescript definitions ([184be5c](https://github.com/apertureless/vue-chartjs/commit/184be5c)), closes [#376](https://github.com/apertureless/vue-chartjs/issues/376)
+* **ux:** Add a wrapper around generateLegend ([#390](https://github.com/apertureless/vue-chartjs/issues/390)) ([fc646d8](https://github.com/apertureless/vue-chartjs/commit/fc646d8))
+* **ux:** Add fake render method with error message ([23ff90d](https://github.com/apertureless/vue-chartjs/commit/23ff90d)), closes [#380](https://github.com/apertureless/vue-chartjs/issues/380)
+
+
+
 <a name="3.3.2"></a>
@@ -7,0 +20,0 @@ ## [3.3.2](https://github.com/apertureless/vue-chartjs/compare/v3.3.1...v3.3.2) (2018-06-18)

dist/vue-chartjs.js

@@ -109,3 +109,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
   mixins: __WEBPACK_IMPORTED_MODULE_0__mixins_index_js__["a" /* default */],
-  generateChart: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["j" /* generateChart */]
+  generateChart: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["j" /* generateChart */],
+  render: function render() {
+    return console.error('[vue-chartjs]: This is not a vue component. It is the whole object containing all vue components. Please import the named export or access the components over the dot notation. For more info visit https://vue-chartjs.org/#/home?id=quick-start');
+  }
 };
@@ -154,2 +157,3 @@ /* harmony default export */ __webpack_exports__["default"] = (VueCharts);
         chart.data.labels = newData.labels;
+        this.$emit('labels:update');
       }
@@ -159,2 +163,3 @@
         chart.data.xLabels = newData.xLabels;
+        this.$emit('xlabels:update');
       }
@@ -164,11 +169,15 @@
         chart.data.yLabels = newData.yLabels;
+        this.$emit('ylabels:update');
       }
 
       chart.update();
+      this.$emit('chart:update');
     } else {
       if (chart) {
         chart.destroy();
+        this.$emit('chart:destroy');
       }
 
       this.renderChart(this.chartData, this.options);
+      this.$emit('chart:render');
     }
@@ -178,5 +187,8 @@ } else {
       this.$data._chart.destroy();
+
+      this.$emit('chart:destroy');
     }
 
     this.renderChart(this.chartData, this.options);
+    this.$emit('chart:render');
   }
@@ -280,2 +292,7 @@ }
       },
+      generateLegend: function generateLegend() {
+        if (this.$data._chart) {
+          return this.$data._chart.generateLegend();
+        }
+      },
       renderChart: function renderChart(data, options) {
@@ -282,0 +299,0 @@ if (this.$data._chart) this.$data._chart.destroy();

dist/vue-chartjs.min.js

@@ -1,2 +0,2 @@
-!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&&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&&this.$data._chart.destroy(),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 _}),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}),r.d(e,"generateChart",function(){return n});var _={Bar:h,HorizontalBar:d,Doughnut:l,Line:f,Pie:p,PolarArea:b,Radar:y,Bubble:g,Scatter:x,mixins:u,generateChart:n};e.default=_},function(e,r){e.exports=t}])});
+!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,this.$emit("labels:update")),t.hasOwnProperty("xLabels")&&(r.data.xLabels=t.xLabels,this.$emit("xlabels:update")),t.hasOwnProperty("yLabels")&&(r.data.yLabels=t.yLabels,this.$emit("ylabels:update")),r.update(),this.$emit("chart:update")):(r&&(r.destroy(),this.$emit("chart:destroy")),this.renderChart(this.chartData,this.options),this.$emit("chart:render"))}else this.$data._chart&&(this.$data._chart.destroy(),this.$emit("chart:destroy")),this.renderChart(this.chartData,this.options),this.$emit("chart:render")}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)},generateLegend:function(){if(this.$data._chart)return this.$data._chart.generateLegend()},renderChart:function(t,r){this.$data._chart&&this.$data._chart.destroy(),this.$data._chart=new h.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}},o={reactiveData:s,reactiveProp:i},u=r(1),h=r.n(u),c=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"),m=n("scatter-chart","scatter");r.d(e,"VueCharts",function(){return v}),r.d(e,"Bar",function(){return c}),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 m}),r.d(e,"mixins",function(){return o}),r.d(e,"generateChart",function(){return n});var v={Bar:c,HorizontalBar:d,Doughnut:l,Line:f,Pie:p,PolarArea:b,Radar:y,Bubble:g,Scatter:m,mixins:o,generateChart:n,render:function(){return console.error("[vue-chartjs]: This is not a vue component. It is the whole object containing all vue components. Please import the named export or access the components over the dot notation. For more info visit https://vue-chartjs.org/#/home?id=quick-start")}};e.default=v},function(e,r){e.exports=t}])});
 //# sourceMappingURL=vue-chartjs.min.js.map

es/BaseCharts.js

@@ -54,2 +54,7 @@ import Chart from 'chart.js';
       },
+      generateLegend: function generateLegend() {
+        if (this.$data._chart) {
+          return this.$data._chart.generateLegend();
+        }
+      },
       renderChart: function renderChart(data, options) {
@@ -56,0 +61,0 @@ if (this.$data._chart) this.$data._chart.destroy();

es/index.js

@@ -14,5 +14,8 @@ import mixins from './mixins/index.js';
   mixins: mixins,
-  generateChart: generateChart
+  generateChart: generateChart,
+  render: function render() {
+    return console.error('[vue-chartjs]: This is not a vue component. It is the whole object containing all vue components. Please import the named export or access the components over the dot notation. For more info visit https://vue-chartjs.org/#/home?id=quick-start');
+  }
 };
 export default VueCharts;
 export { VueCharts, Bar, HorizontalBar, Doughnut, Line, Pie, PolarArea, Radar, Bubble, Scatter, mixins, generateChart };

es/mixins/index.js

@@ -33,2 +33,3 @@ function dataHandler(newData, oldData) {
         chart.data.labels = newData.labels;
+        this.$emit('labels:update');
       }
@@ -38,2 +39,3 @@
         chart.data.xLabels = newData.xLabels;
+        this.$emit('xlabels:update');
       }
@@ -43,11 +45,15 @@
         chart.data.yLabels = newData.yLabels;
+        this.$emit('ylabels:update');
       }
 
       chart.update();
+      this.$emit('chart:update');
     } else {
       if (chart) {
         chart.destroy();
+        this.$emit('chart:destroy');
       }
 
       this.renderChart(this.chartData, this.options);
+      this.$emit('chart:render');
     }
@@ -57,5 +63,8 @@ } else {
       this.$data._chart.destroy();
+
+      this.$emit('chart:destroy');
     }
 
     this.renderChart(this.chartData, this.options);
+    this.$emit('chart:render');
   }
@@ -62,0 +71,0 @@ }

package.json

 {
   "name": "vue-chartjs",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
@@ -43,6 +43,8 @@ "author": "Jakub Juszczak <[e-mail]>",
   "jsnext:main": "es/index.js",
+  "typings": "types/index.d.ts",
   "files": [
     "src",
     "dist",
-    "es"
+    "es",
+    "types/*.d.ts"
   ],
@@ -49,0 +51,0 @@ "scripts": {

README.md

@@ -302,1 +302,2 @@ <div align="center">
 
+<a href="https://www.buymeacoffee.com/xcqjaytbl" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

src/BaseCharts.js

@@ -65,2 +65,7 @@ import Chart from 'chart.js'
       },
+      generateLegend () {
+        if (this.$data._chart) {
+          return this.$data._chart.generateLegend()
+        }
+      },
       renderChart (data, options) {
@@ -67,0 +72,0 @@ if (this.$data._chart) this.$data._chart.destroy()

src/index.js

@@ -27,3 +27,4 @@ import mixins from './mixins/index.js'
   mixins,
-  generateChart
+  generateChart,
+  render: () => console.error('[vue-chartjs]: This is not a vue component. It is the whole object containing all vue components. Please import the named export or access the components over the dot notation. For more info visit https://vue-chartjs.org/#/home?id=quick-start')
 }
@@ -30,0 +31,0 @@

src/mixins/index.js

@@ -45,15 +45,21 @@ function dataHandler (newData, oldData) {
         chart.data.labels = newData.labels
+        this.$emit('labels:update')
       }
       if (newData.hasOwnProperty('xLabels')) {
         chart.data.xLabels = newData.xLabels
+        this.$emit('xlabels:update')
       }
       if (newData.hasOwnProperty('yLabels')) {
         chart.data.yLabels = newData.yLabels
+        this.$emit('ylabels:update')
       }
       chart.update()
+      this.$emit('chart:update')
     } else {
       if (chart) {
         chart.destroy()
+        this.$emit('chart:destroy')
       }
       this.renderChart(this.chartData, this.options)
+      this.$emit('chart:render')
     }
@@ -63,4 +69,6 @@ } else {
       this.$data._chart.destroy()
+      this.$emit('chart:destroy')
     }
     this.renderChart(this.chartData, this.options)
+    this.$emit('chart:render')
   }
@@ -67,0 +75,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

172915

increased by4.69%

Number of package files

56

increased by3.7%

Lines of code

2192

increased by3.35%

Number of lines in readme file

303

increased by0.33%

No dependency changes