vue-chartkick - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

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

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

dist/vue-chartkick.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
@@ -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 @@ },

dist/vue-chartkick.min.js

@@ -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});

package.json

 {
   "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"
   }
 }

README.md

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

Package 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

  @vue/compiler-core@3.5.18
  (transitive)

• + Added

  @vue/compiler-dom@3.5.18
  (transitive)

• + Added

  @vue/compiler-sfc@3.5.18
  (transitive)

• + Added

  @vue/compiler-ssr@3.5.18
  (transitive)

• + Added

  @vue/reactivity@3.5.18
  (transitive)

• + Added

  @vue/runtime-core@3.5.18
  (transitive)

• + Added

  @vue/runtime-dom@3.5.18
  (transitive)

• + Added

  @vue/server-renderer@3.5.18
  (transitive)

• + Added

  @vue/shared@3.5.18
  (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)

• + Added

  vue@3.5.18
  (transitive)

• - Removed

  @vue/compiler-core@3.5.17
  (transitive)

• - Removed

  @vue/compiler-dom@3.5.17
  (transitive)

• - Removed

  @vue/compiler-sfc@3.5.17
  (transitive)

• - Removed

  @vue/compiler-ssr@3.5.17
  (transitive)

• - Removed

  @vue/reactivity@3.5.17
  (transitive)

• - Removed

  @vue/runtime-core@3.5.17
  (transitive)

• - Removed

  @vue/runtime-dom@3.5.17
  (transitive)

• - Removed

  @vue/server-renderer@3.5.17
  (transitive)

• - Removed

  @vue/shared@3.5.17
  (transitive)

• - Removed

  chartkick@3.2.1
  (transitive)

• - Removed

  vue@3.5.17
  (transitive)

• Updated

  chartkick@>=3.2.0