You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
vue-chartkick
Advanced tools
vue-chartkick - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
@@ -0,1 +1,6 @@ | ||
| ## 1.1.0 (2021-04-05) | ||
| - Added `loading` option | ||
| - Prefer `empty` over `messages: {empty: ...}` | ||
| ## 1.0.0 (2021-02-15) | ||
@@ -2,0 +7,0 @@ |
@@ -1,6 +0,6 @@ | ||
| /* | ||
| /*! | ||
| * Vue Chartkick | ||
| * Create beautiful JavaScript charts with one line of Vue | ||
| * https://github.com/ankane/vue-chartkick | ||
| * v1.0.0 | ||
| * v1.1.0 | ||
| * MIT License | ||
@@ -16,4 +16,4 @@ */ | ||
| var chartProps = [ | ||
| "adapter", "bytes", "code", "colors", "curve", "dataset", "decimal", "discrete", "donut", "download", "label", | ||
| "legend", "library", "max", "messages", "min", "points", "precision", "prefix", "refresh", | ||
| "adapter", "bytes", "code", "colors", "curve", "dataset", "decimal", "discrete", "donut", "download", "empty", "label", | ||
| "legend", "library", "loading", "max", "messages", "min", "points", "precision", "prefix", "refresh", | ||
| "round", "stacked", "suffix", "thousands", "title", "xmax", "xmin", "xtitle", "ytitle", "zeros" | ||
@@ -24,2 +24,11 @@ ]; | ||
| render: function() { | ||
| // check if undefined so works with empty string | ||
| var loading = this.chartOptions.loading !== undefined ? this.chartOptions.loading : "Loading..."; | ||
| // h() accepts VNodes, | ||
| // but limit to string since it may be used by Chartkick.js | ||
| if (typeof loading !== "string") { | ||
| throw new Error("loading must be a string"); | ||
| } | ||
| return h( | ||
@@ -31,3 +40,3 @@ "div", | ||
| }, | ||
| ["Loading..."] | ||
| [loading] | ||
| ) | ||
@@ -34,0 +43,0 @@ }, |
@@ -1,6 +0,6 @@ | ||
| /* | ||
| /*! | ||
| * Vue Chartkick | ||
| * Create beautiful JavaScript charts with one line of Vue | ||
| * https://github.com/ankane/vue-chartkick | ||
| * v1.0.0 | ||
| * v1.1.0 | ||
| * MIT License | ||
@@ -21,4 +21,4 @@ */ | ||
| var chartProps = [ | ||
| "adapter", "bytes", "code", "colors", "curve", "dataset", "decimal", "discrete", "donut", "download", "label", | ||
| "legend", "library", "max", "messages", "min", "points", "precision", "prefix", "refresh", | ||
| "adapter", "bytes", "code", "colors", "curve", "dataset", "decimal", "discrete", "donut", "download", "empty", "label", | ||
| "legend", "library", "loading", "max", "messages", "min", "points", "precision", "prefix", "refresh", | ||
| "round", "stacked", "suffix", "thousands", "title", "xmax", "xmin", "xtitle", "ytitle", "zeros" | ||
@@ -29,2 +29,11 @@ ]; | ||
| render: function() { | ||
| // check if undefined so works with empty string | ||
| var loading = this.chartOptions.loading !== undefined ? this.chartOptions.loading : "Loading..."; | ||
| // h() accepts VNodes, | ||
| // but limit to string since it may be used by Chartkick.js | ||
| if (typeof loading !== "string") { | ||
| throw new Error("loading must be a string"); | ||
| } | ||
| return vue.h( | ||
@@ -36,3 +45,3 @@ "div", | ||
| }, | ||
| ["Loading..."] | ||
| [loading] | ||
| ) | ||
@@ -39,0 +48,0 @@ }, |
@@ -1,1 +0,2 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chartkick"),require("vue")):"function"==typeof define&&define.amd?define(["chartkick","vue"],e):(t=t||self).VueChartkick=e(t.Chartkick,t.Vue)}(this,function(a,i){"use strict";a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a;function r(t,e,a){var r=["adapter","bytes","code","colors","curve","dataset","decimal","discrete","donut","download","label","legend","library","max","messages","min","points","precision","prefix","refresh","round","stacked","suffix","thousands","title","xmax","xmin","xtitle","ytitle","zeros"];t.component(e,{props:["data","id","width","height"].concat(r),render:function(){return i.h("div",{id:this.chartId,style:this.chartStyle},["Loading..."])},data:function(){return{chartId:null}},computed:{chartStyle:function(){return this.data,this.chartOptions,{height:this.height||"300px",lineHeight:this.height||"300px",width:this.width||"100%",textAlign:"center",color:"#999",fontSize:"14px",fontFamily:"'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif"}},chartOptions:function(){for(var t={},e=r,a=0;a<e.length;a++){var i=e[a];void 0!==this[i]&&(t[i]=this[i])}return t}},created:function(){this.chartId=this.chartId||this.id||"chart-"+h++},mounted:function(){this.updateChart()},updated:function(){this.updateChart()},beforeUnmount:function(){this.chart&&this.chart.destroy()},methods:{updateChart:function(){null!==this.data?this.chart?this.chart.updateData(this.data,this.chartOptions):this.chart=new a(this.chartId,this.data,this.chartOptions):this.chart&&(this.chart.destroy(),this.chart=null,this.$el.innerText="Loading...")}}})}var h=1;return a.install=function(t,e){e&&e.adapter&&a.addAdapter(e.adapter),r(t,"line-chart",a.LineChart),r(t,"pie-chart",a.PieChart),r(t,"column-chart",a.ColumnChart),r(t,"bar-chart",a.BarChart),r(t,"area-chart",a.AreaChart),r(t,"scatter-chart",a.ScatterChart),r(t,"geo-chart",a.GeoChart),r(t,"timeline",a.Timeline)},a}); | ||
| /*! Vue Chartkick v1.1.0 | MIT License */ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chartkick"),require("vue")):"function"==typeof define&&define.amd?define(["chartkick","vue"],e):(t=t||self).VueChartkick=e(t.Chartkick,t.Vue)}(this,function(i,a){"use strict";i=i&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i;function r(t,e,i){var r=["adapter","bytes","code","colors","curve","dataset","decimal","discrete","donut","download","empty","label","legend","library","loading","max","messages","min","points","precision","prefix","refresh","round","stacked","suffix","thousands","title","xmax","xmin","xtitle","ytitle","zeros"];t.component(e,{props:["data","id","width","height"].concat(r),render:function(){var t=void 0!==this.chartOptions.loading?this.chartOptions.loading:"Loading...";if("string"!=typeof t)throw new Error("loading must be a string");return a.h("div",{id:this.chartId,style:this.chartStyle},[t])},data:function(){return{chartId:null}},computed:{chartStyle:function(){return this.data,this.chartOptions,{height:this.height||"300px",lineHeight:this.height||"300px",width:this.width||"100%",textAlign:"center",color:"#999",fontSize:"14px",fontFamily:"'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif"}},chartOptions:function(){for(var t={},e=r,i=0;i<e.length;i++){var a=e[i];void 0!==this[a]&&(t[a]=this[a])}return t}},created:function(){this.chartId=this.chartId||this.id||"chart-"+h++},mounted:function(){this.updateChart()},updated:function(){this.updateChart()},beforeUnmount:function(){this.chart&&this.chart.destroy()},methods:{updateChart:function(){null!==this.data?this.chart?this.chart.updateData(this.data,this.chartOptions):this.chart=new i(this.chartId,this.data,this.chartOptions):this.chart&&(this.chart.destroy(),this.chart=null,this.$el.innerText="Loading...")}}})}var h=1;return i.install=function(t,e){e&&e.adapter&&i.addAdapter(e.adapter),r(t,"line-chart",i.LineChart),r(t,"pie-chart",i.PieChart),r(t,"column-chart",i.ColumnChart),r(t,"bar-chart",i.BarChart),r(t,"area-chart",i.AreaChart),r(t,"scatter-chart",i.ScatterChart),r(t,"geo-chart",i.GeoChart),r(t,"timeline",i.Timeline)},i}); |
| { | ||
| "name": "vue-chartkick", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "Create beautiful JavaScript charts with one line of Vue", | ||
@@ -34,4 +34,4 @@ "main": "dist/vue-chartkick.js", | ||
| "dependencies": { | ||
| "chartkick": "^3.2.0" | ||
| "chartkick": ">=3.2.0" | ||
| } | ||
| } |
@@ -22,6 +22,6 @@ # Vue Chartkick | ||
| ```javascript | ||
| import Chartkick from 'vue-chartkick' | ||
| import Chart from 'chart.js' | ||
| import VueChartkick from 'vue-chartkick' | ||
| import 'chartkick/chart.js' | ||
| app.use(Chartkick.use(Chart)) | ||
| app.use(VueChartkick) | ||
| ``` | ||
@@ -36,3 +36,3 @@ | ||
| ```vue | ||
| <line-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></line-chart> | ||
| <line-chart :data="{'2021-01-01': 11, '2021-01-02': 6}"></line-chart> | ||
| ``` | ||
@@ -61,3 +61,3 @@ | ||
| ```vue | ||
| <area-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></area-chart> | ||
| <area-chart :data="{'2021-01-01': 11, '2021-01-02': 6}"></area-chart> | ||
| ``` | ||
@@ -87,4 +87,4 @@ | ||
| data = [ | ||
| {name: 'Workout', data: {'2017-01-01': 3, '2017-01-02': 4}}, | ||
| {name: 'Call parents', data: {'2017-01-01': 5, '2017-01-02': 3}} | ||
| {name: 'Workout', data: {'2021-01-01': 3, '2021-01-02': 4}}, | ||
| {name: 'Call parents', data: {'2021-01-01': 5, '2021-01-02': 3}} | ||
| ]; | ||
@@ -123,3 +123,3 @@ | ||
| ```vue | ||
| <line-chart xmin="2018-01-01" xmax="2019-01-01"></line-chart> | ||
| <line-chart xmin="2021-01-01" xmax="2022-01-01"></line-chart> | ||
| ``` | ||
@@ -229,8 +229,14 @@ | ||
| Show a message when data is empty | ||
| Specify the message when the chart is loading | ||
| ```vue | ||
| <line-chart :messages="{empty: 'No data'}"></line-chart> | ||
| <line-chart loading="Loading..."></line-chart> | ||
| ``` | ||
| Specify the message when data is empty | ||
| ```vue | ||
| <line-chart empty="No data"></line-chart> | ||
| ``` | ||
| Refresh data from a remote source every `n` seconds | ||
@@ -302,3 +308,3 @@ | ||
| ```vue | ||
| <line-chart :data="[[new Date(), 5], ['2017-01-01 00:00:00 UTC', 7]]"></line-chart> | ||
| <line-chart :data="[[new Date(), 5], ['2021-01-01 00:00:00 UTC', 7]]"></line-chart> | ||
| ``` | ||
@@ -365,6 +371,6 @@ | ||
| ```javascript | ||
| import Chartkick from 'vue-chartkick' | ||
| import Chart from 'chart.js' | ||
| import VueChartkick from 'vue-chartkick' | ||
| import 'chartkick/chart.js' | ||
| app.use(Chartkick.use(Chart)) | ||
| app.use(VueChartkick) | ||
| ``` | ||
@@ -383,5 +389,5 @@ | ||
| ```javascript | ||
| import Chartkick from 'vue-chartkick' | ||
| import VueChartkick from 'vue-chartkick' | ||
| app.use(Chartkick) | ||
| app.use(VueChartkick) | ||
| ``` | ||
@@ -412,6 +418,6 @@ | ||
| ```javascript | ||
| import Chartkick from 'vue-chartkick' | ||
| import Highcharts from 'highcharts' | ||
| import VueChartkick from 'vue-chartkick' | ||
| import 'chartkick/highcharts' | ||
| app.use(Chartkick.use(Highcharts)) | ||
| app.use(VueChartkick) | ||
| ``` | ||
@@ -424,5 +430,6 @@ | ||
| ```html | ||
| <script src="https://unpkg.com/chart.js@2.9.3/dist/Chart.bundle.js"></script> | ||
| <script src="https://unpkg.com/chartkick@3.2.1/dist/chartkick.js"></script> | ||
| <script src="https://unpkg.com/vue-chartkick@1.0.0"></script> | ||
| <script src="https://unpkg.com/chart.js@3.0.2/dist/chart.js"></script> | ||
| <script src="https://unpkg.com/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.js"></script> | ||
| <script src="https://unpkg.com/chartkick@4.0.0/dist/chartkick.js"></script> | ||
| <script src="https://unpkg.com/vue-chartkick@1.1.0"></script> | ||
| ``` | ||
@@ -485,3 +492,3 @@ | ||
| Finally, Vue Chartkick no longer uses custom logic to see if a re-render is necessary. See [the docs](#reactivity) for more details. | ||
| Finally, Vue Chartkick no longer uses custom logic to see if a re-render is necessary. See the [reactivity docs](#reactivity) for more details. | ||
@@ -488,0 +495,0 @@ ## Contributing |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
23065
5.71%- Lines of code
239
7.17%- Number of lines in readme file
500
1.42%- Number of medium supply chain risk alerts
0
-100%Dependency changes
+ Added
@kurkle/color@0.3.4(transitive)+ Added
chart.js@4.5.0(transitive)+ Added
chartjs-adapter-date-fns@3.0.0(transitive)+ Added
chartkick@5.0.1(transitive)+ Added
date-fns@4.1.0(transitive)- Removed
chartkick@3.2.1(transitive)Updated
chartkick@>=3.2.0