vue-chartjs - npm Package Compare versions

Comparing version 3.4.0 to 3.4.1

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+## [3.4.1](https://github.com/apertureless/vue-chartjs/compare/v3.4.0...v3.4.1) (2019-03-18)
+
+
+### Bug Fixes
+
+* **reactive-mixins:** Add prop type and default value ([8762521](https://github.com/apertureless/vue-chartjs/commit/8762521))
+* Update peerDependencies ([5b19efc](https://github.com/apertureless/vue-chartjs/commit/5b19efc)), closes [#489](https://github.com/apertureless/vue-chartjs/issues/489)
+
+
+
 <a name="3.4.0"></a>
@@ -7,0 +17,0 @@ # [3.4.0](https://github.com/apertureless/vue-chartjs/compare/v3.3.2...v3.4.0) (2018-08-04)

dist/vue-chartjs.js

@@ -205,3 +205,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
     chartData: {
-      required: true
+      type: Object,
+      required: true,
+      default: function _default() {}
     }
@@ -208,0 +210,0 @@ },

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,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}])});
+!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 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:{type:Object,required:!0,default:function(){}}},watch:{chartData:a}},o={reactiveData:s,reactiveProp:i},u=r(1),c=r.n(u),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"),m=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 m}),r.d(e,"mixins",function(){return o}),r.d(e,"generateChart",function(){return n});var v={Bar:h,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/mixins/index.js

@@ -82,3 +82,5 @@ function dataHandler(newData, oldData) {
     chartData: {
-      required: true
+      type: Object,
+      required: true,
+      default: function _default() {}
     }
@@ -85,0 +87,0 @@ },

package.json

 {
   "name": "vue-chartjs",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
@@ -59,6 +59,8 @@ "author": "Jakub Juszczak <[e-mail]>",
     "release": "cross-env NODE_ENV=production 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"
+    "prepublishOnly": "yarn run lint && yarn run test && yarn run build",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
   },
   "peerDependencies": {
-    "chart.js": "2.7.x"
+    "chart.js": "2.8.x"
   },
@@ -72,3 +74,3 @@ "devDependencies": {
     "chai": "^3.5.0",
-    "chart.js": "2.7.2",
+    "chart.js": "^2.8.0",
     "chromedriver": "^2.28.0",
@@ -121,8 +123,9 @@ "connect-history-api-fallback": "^1.1.0",
     "url-loader": "^0.5.8",
-    "vue": "2.5.16",
-    "vue-hot-reload-api": "2.3.0",
+    "vue": "2.5.17",
+    "vue-hot-reload-api": "2.3.1",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^14.2.1",
-    "vue-style-loader": "4.0.2",
-    "vue-template-compiler": "2.5.16",
+    "vue-style-loader": "4.1.2",
+    "vue-template-compiler": "2.5.17",
+    "vuepress": "^0.14.4",
     "webpack": "^3.7.1",
@@ -129,0 +132,0 @@ "webpack-dev-middleware": "^1.10.1",

README.md

@@ -109,2 +109,29 @@ <div align="center">
 
+or in TypeScript
+
+```ts
+// CommitChart.ts
+import { Bar } from 'vue-chartjs';
+import { Component } from 'vue-property-decorator';
+
+@Component({
+    extends: Bar, // this is important to add the functionality to your component
+})
+export default class CommitChart extends Vue<Bar> {
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    })
+  }
+}
+```
+
 Then simply import and use your own extended component and use it like a normal vue component
@@ -163,3 +190,3 @@
 **It is important that you pass your options in a local variable named `options`!**
-The reason is that if the mixin re-renders the chart it calls `this.renderChart(this.chartData, this.options`)` so don't pass in the options object directly or it will be ignored.
+The reason is that if the mixin re-renders the chart it calls `this.renderChart(this.chartData, this.options)` so don't pass in the options object directly or it will be ignored.
 
@@ -202,3 +229,3 @@ More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
 ```javascript
-// Load speperate modules
+// Load separate modules
 import { Line, mixins } from 'vue-chartjs'
@@ -217,3 +244,3 @@
 ```javascript
-// Load speperate modules with destructure assign
+// Load separate modules with destructure assign
 import { Line, mixins } from 'vue-chartjs'
@@ -220,0 +247,0 @@ const { reactiveProp } = mixins

src/mixins/index.js

@@ -90,3 +90,5 @@ function dataHandler (newData, oldData) {
     chartData: {
-      required: true
+      type: Object,
+      required: true,
+      default: () => {}
     }
@@ -93,0 +95,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

330

increased by8.91%

Worsened metrics

Total package byte prevSize

149904

decreased by-13.31%

Dev dependency count

65

increased by1.56%

Number of package files

43

decreased by-23.21%

Lines of code

1485

decreased by-32.25%

No dependency changes