vue-chartkick
Advanced tools
Comparing version
@@ -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 |
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
23065
5.71%239
7.17%500
1.42%0
-100%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
Updated