vue-apexcharts - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

dist/vue-apexcharts.js

@@ -12,5 +12,7 @@ (function (global, factory) {
       options: {
-        type: Object,
-        required: true
+        type: Object
       },
+      yaxis: {
+        type: Array
+      },
       type: {
@@ -51,2 +53,13 @@ type: String,
       });
+      this.$watch('yaxis', function (yaxis) {
+        if (!_this.chart && yaxis) {
+          _this.init();
+        } else {
+          _this.chart.updateOptions({
+            yaxis: _this.yaxis
+          }, true);
+        }
+      }, {
+        deep: true
+      });
       this.$watch('series', function (series) {
@@ -86,3 +99,4 @@ if (!_this.chart && series) {
           },
-          series: this.series
+          series: this.series,
+          yaxis: this.yaxis
         };
@@ -89,0 +103,0 @@ var config = ApexCharts.merge(this.options, newOptions);

package.json

 {
   "name": "vue-apexcharts",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Vue.js wrapper for ApexCharts",
@@ -5,0 +5,0 @@ "main": "dist/vue-apexcharts.js",

README.md

@@ -132,35 +132,12 @@ <p align="center"><img src="https://apexcharts.com/media/vue-apexcharts.png"></p>
 
-- __series__ - `Array` (required)
-The series is an array which accepts object in the following format
-series: [{
-  name: 'visitors'
-  data: [23, 44, 56, 75, 56]
-}]
-The `data` property inside series accepts a variation of formats. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website.
+| Prop        | Type           | Description  |
+| ------------- |-------------| -----|
+| **series***| Array | The series is an array which accepts object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. |
+| **type*** | String  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`  |
+| **width** | Number/String  | Possible values for width can be `100%` or `400px` or 400 |
+| **height** | Number/String | Possible values for width can be `100%` or `300px` or 300 |
+| **yaxis** | Array | The yaxis should be an array even if it includes 1 object [Read why](#why-yaxis-as-an-additional-prop) |
+| **options** | Object | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |
 
-- __type__ - `String` (required)
-chart type, possible values :
-    - `line`
-    - `area`
-    - `bar`
-    - `pie`
-    - `donut`
-    - `scatter`
-    - `bubble`
-    - `heatmap`
-    - `radialBar`
 
-- __width__ -  `Number` || `String`
-
-  Possible values for width can be `100%` or `400px` or just 400
-
-- __height__ -  `Number` || `String`
-
-  Possible values for width can be `100%` or `300px` or just 300
-
-- __options__ - `Object`
-
-  Charts's configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/)
-
-
 ## How to call methods of ApexCharts programatically?
@@ -207,2 +184,7 @@
 
+## FAQ
+
+### Why yaxis as an additional prop?
+The `:options` property doesn't have the deep watcher set to true, and hence yaxis configuration go unnoticed on updates as yaxis is treated as an Array in ApexCharts (even in a single axis chart).
+
 ## Development
@@ -209,0 +191,0 @@

src/ApexCharts.component.js

@@ -6,5 +6,7 @@ import ApexCharts from 'apexcharts'
     options: {
-      type: Object,
-      required: true
+      type: Object
     },
+    yaxis: {
+      type: Array
+    },
     type: {
@@ -43,2 +45,10 @@ type: String,
     })
+    
+    this.$watch('yaxis', yaxis => {
+      if (!this.chart && yaxis) {
+        this.init()
+      } else {
+        this.chart.updateOptions({ yaxis: this.yaxis }, true);
+      }
+    }, { deep: true })
 
@@ -77,3 +87,4 @@ this.$watch('series', series => {
         },
-        series: this.series
+        series: this.series,
+        yaxis: this.yaxis
       }
@@ -99,2 +110,2 @@
   }
-}
+}

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

Total package byte prevSize

40697

increased by1.92%

Lines of code

268

increased by10.29%

Worsened metrics

Number of lines in readme file

205

decreased by-8.07%

No dependency changes