vue-apexcharts - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/vue-apexcharts.js

@@ -32,46 +32,49 @@ (function (global, factory) {
     },
-    data() {
+    data: function data() {
       return {
         chart: null
-      }
+      };
     },
-    mounted() {
+    mounted: function mounted() {
       this.init();
     },
-    created () {
-      this.$watch('options', options => {
-        if (!this.chart && options) {
-          this.init();
+    created: function created() {
+      var _this = this;
+
+      this.$watch('options', function (options) {
+        if (!_this.chart && options) {
+          _this.init();
         } else {
-          this.chart.updateOptions(this.options, true);
+          _this.chart.updateOptions(_this.options, true);
         }
       });
-
-      this.$watch('series', series => {
-        if (!this.chart && series) {
-          this.init();
+      this.$watch('series', function (series) {
+        if (!_this.chart && series) {
+          _this.init();
         } else {
-          this.chart.updateSeries(this.series, true);
+          _this.chart.updateSeries(_this.series, true);
         }
-      }, { deep: true });
-
-      let watched = ['type', 'width', 'height'];
-      watched.forEach(prop => {
-        this.$watch(prop, () => {
-          this.refresh();
+      }, {
+        deep: true
+      });
+      var watched = ['type', 'width', 'height'];
+      watched.forEach(function (prop) {
+        _this.$watch(prop, function () {
+          _this.refresh();
         });
       });
     },
-    beforeDestroy() {
+    beforeDestroy: function beforeDestroy() {
       if (!this.chart) {
-        return
+        return;
       }
+
       this.destroy();
     },
-    render(createElement) {
-  		return createElement('div');		
-  	},
+    render: function render(createElement) {
+      return createElement('div');
+    },
     methods: {
-      init() {
-        const newOptions = {
+      init: function init() {
+        var newOptions = {
           chart: {
@@ -84,18 +87,17 @@ type: this.type,
         };
-
-        const config = ApexCharts.merge(this.options, newOptions);
+        var config = ApexCharts.merge(this.options, newOptions);
         this.chart = new ApexCharts(this.$el, config);
         this.chart.render();
       },
-      refresh() {
+      refresh: function refresh() {
         this.destroy();
         this.init();
       },
-      destroy() {
+      destroy: function destroy() {
         this.chart.destroy();
       },
-      updateSeries() {
+      updateSeries: function updateSeries() {
         this.$emit('updateSeries');
       },
-      updateOptions() {
+      updateOptions: function updateOptions() {
         this.$emit('updateOptions');
@@ -106,14 +108,13 @@ }
 
-  const VueApexCharts = ApexChartsComponent;
+  var VueApexCharts = ApexChartsComponent;
 
   VueApexCharts.install = function (Vue) {
-      //adding a global method or property
-      Vue.ApexCharts = ApexCharts;
-    
-      // add the instance method
-      Object.defineProperty(Vue.prototype, '$apexcharts', {
-          get: function get() {
-              return ApexCharts
-          }
-      });
+    //adding a global method or property
+    Vue.ApexCharts = ApexCharts; // add the instance method
+
+    Object.defineProperty(Vue.prototype, '$apexcharts', {
+      get: function get() {
+        return ApexCharts;
+      }
+    });
   };
@@ -120,0 +121,0 @@

example/package.json

@@ -11,2 +11,4 @@ {
   "dependencies": {
+    "apexcharts": "^1.5.6",
+    "vue-apexcharts": "^1.1.1",
     "vue": "^2.5.17"
@@ -13,0 +15,0 @@ },

package.json

 {
   "name": "vue-apexcharts",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Vue.js wrapper for ApexCharts",
   "main": "dist/vue-apexcharts.js",
   "scripts": {
-    "bundle": "rollup src/index.js -f umd -n VueApexCharts -g apexcharts:ApexCharts -o dist/vue-apexcharts.js",
+    "bundle": "rollup -c",
     "build": "npm run bundle"
@@ -25,14 +25,20 @@ },
   "license": "MIT",
-  "dependencies": {
-    "apexcharts": "^1.4.2"
-  },
   "peerDependencies": {
-    "vue": ">=1.0.0"
+    "apexcharts": "^1.4.12"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
     "rollup": "^0.64.1",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.1.8",
+    "rollup-plugin-eslint": "^5.0.0",
     "rollup-plugin-istanbul": "^2.0.1",
-    "uglify-js": "^3.4.6",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "uglify-js": "^3.4.9",
     "vue": "^2.5.17"
   }
 }

README.md

@@ -5,3 +5,3 @@ <p align="center"><img src="https://apexcharts.com/media/vue-apexcharts.png"></p>
   <a href="https://github.com/apexcharts/vue-apexcharts/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="License"></a>
-  <a href="https://travis-ci.com/apexcharts/vue-apexcharts.js"><img src="https://api.travis-ci.com/apexcharts/vue-apexcharts.js.svg?branch=master" alt="build" /></a>
+  <a href="https://travis-ci.com/apexcharts/vue-apexcharts"><img src="https://api.travis-ci.com/apexcharts/vue-apexcharts.svg?branch=master" alt="build" /></a>
   <a href="https://www.npmjs.com/package/vue-apexcharts"><img src="https://img.shields.io/npm/v/vue-apexcharts.svg" alt="ver"></a>
@@ -22,4 +22,7 @@ </p>
 ##### Installing via npm
-[![NPM](https://nodei.co/npm/vue-apexcharts.png?mini=true)](https://npmjs.org/package/vue-apexcharts)
 
+```bash
+npm install vue-apexcharts apexcharts
+```
+
 ## Usage
@@ -33,3 +36,3 @@ ```js
 To create a basic bar chart with minimal configuration, write as follows:
-```html
+```vue
 <template>
@@ -67,2 +70,3 @@ <div>
 ```
+
 This will render the following chart
@@ -72,6 +76,7 @@ <p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/"><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p>
 ### How do I update the chart?
+
 Simple! Just change the `series` or any `option` and it will automatically re-render the chart. Have a look at the below example to see this in action
 <p align="center"><a href="#"><img src="https://apexcharts.com/media/vue-chart-updation.gif"></a></p>
 
-```html
+```vue
 <template>
@@ -84,3 +89,3 @@ <div class="app">
    </div>
-   
+
 </template>
@@ -132,2 +137,3 @@ ```
 ## Props
+
 - __series__ - `Array` (required)
@@ -167,2 +173,3 @@ The series is an array which accepts object in the following format
 ## How to call methods of ApexCharts programatically?
+
 Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on `this.$apexcharts` global variable directly
@@ -197,2 +204,3 @@
 ## Running the examples
+
 Basic Examples are included to show how to get started using ApexCharts with Vue easily.
@@ -208,2 +216,3 @@
 ## Development
+
 #### Install dependencies
@@ -216,2 +225,3 @@
 #### Bundling
+
 ```bash
@@ -222,2 +232,3 @@ npm run build
 ## License
+
 Vue-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.

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

39930

increased by6.16%

Dependency count

1

decreased by-50%

Number of package files

22

increased by10%

Lines of code

243

increased by10.45%

Number of lines in readme file

223

increased by5.19%

Worsened metrics

Dev dependency count

13

increased by225%

Dependency changes

• - Removedapexcharts@^1.4.2

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/parser@7.26.2(transitive)

• - Removed@babel/types@7.26.0(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@vue/compiler-core@3.5.13(transitive)

• - Removed@vue/compiler-dom@3.5.13(transitive)

• - Removed@vue/compiler-sfc@3.5.13(transitive)

• - Removed@vue/compiler-ssr@3.5.13(transitive)

• - Removed@vue/reactivity@3.5.13(transitive)

• - Removed@vue/runtime-core@3.5.13(transitive)

• - Removed@vue/runtime-dom@3.5.13(transitive)

• - Removed@vue/server-renderer@3.5.13(transitive)

• - Removed@vue/shared@3.5.13(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedentities@4.5.0(transitive)

• - Removedestree-walker@2.0.2(transitive)

• - Removedmagic-string@0.30.14(transitive)

• - Removednanoid@3.3.8(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedpostcss@8.4.49(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedvue@3.5.13(transitive)