You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

vue-chartkick

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-chartkick - npm Package Compare versions

Comparing version

to
1.1.0

5

CHANGELOG.md

@@ -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 @@

19

dist/vue-chartkick.esm.js

@@ -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