vue-apexcharts - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

dist/vue-apexcharts.d.ts

@@ -5,12 +5,20 @@ import Vue, { Component, ComponentOptions } from 'vue';
 
-interface VueApexChartsComponent extends Vue {
-  // data
-  readonly chart?: ApexCharts;
-  // props
-  options?: ApexOptions;
+// this interface matches the exposed properties to enable straightforward
+// and strongly typed binding to the <apexchart> component properties
+// (see: https://apexcharts.com/docs/vue-charts/#props)
+export interface VueApexChartConfig {
   type?: 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'rangeBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'radar' | 'polarArea' | 'treemap' | 'boxPlot';
   series: any;
+  height?: string | number;
   width?: string | number;
-  height?: string | number;
-  // method
+  options?: ApexOptions;
+}
+
+export interface VueApexChartsComponent extends VueApexChartConfig, Vue {
+  // data
+  readonly chart?: ApexCharts;
+
+  // props (see: VueApexChartConfig)
+
+  // methods
   init(): Promise<void>;
@@ -17,0 +25,0 @@ refresh(): Promise<void>;

dist/vue-apexcharts.js

@@ -222,4 +222,4 @@ (function (global, factory) {
       },
-      dataURI: function dataURI() {
-        return this.chart.dataURI();
+      dataURI: function dataURI(options) {
+        return this.chart.dataURI(options);
       },
@@ -226,0 +226,0 @@ setLocale: function setLocale(localeName) {

example/package.json

@@ -17,5 +17,5 @@ {
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
-    "@vue/cli-plugin-eslint": "^3.0.5",
-    "@vue/cli-service": "^3.0.0-rc.12",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "vue-template-compiler": "^2.5.17"
@@ -22,0 +22,0 @@ },

package.json

 {
   "name": "vue-apexcharts",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "Vue.js wrapper for ApexCharts",
@@ -10,2 +10,6 @@ "main": "dist/vue-apexcharts.js",
   },
+  "repository": {	
+    "type": "git",
+    "url": "https://github.com/apexcharts/vue-apexcharts.git"
+  },
   "keywords": [
@@ -27,3 +31,4 @@ "Vue.js",
   "peerDependencies": {
-    "apexcharts": "^3.26.0"
+    "apexcharts": ">=4.0.0",
+    "vue": "^2.5.17"
   },
@@ -36,3 +41,3 @@ "devDependencies": {
     "@babel/preset-env": "^7.4.2",
-    "rollup": "^0.64.1",
+    "rollup": "^2.79.2",
     "rollup-plugin-babel": "^4.3.2",
@@ -39,0 +44,0 @@ "rollup-plugin-commonjs": "^9.1.8",

README.md

@@ -26,2 +26,3 @@ <p align="center"><img src="https://apexcharts.com/media/vue-apexcharts.png"></p>
 ```
+If you're looking for Vue 3.x.x compatibile component, check-out <a href="https://github.com/apexcharts/vue3-apexcharts">vue3-apexcharts</a>
 
@@ -28,0 +29,0 @@ ## Usage

src/ApexCharts.component.js

@@ -35,2 +35,9 @@ import ApexCharts from "apexcharts/dist/apexcharts.min";
   created() {
+    let watched = ["type", "width", "height"];
+    watched.forEach(prop => {
+      this.$watch(prop, () => {
+        this.refresh();
+      });
+    });
+
     this.$watch("options", options => {
@@ -51,10 +58,4 @@ if (!this.chart && options) {
     });
-    let watched = ["type", "width", "height"];
-    watched.forEach(prop => {
-      this.$watch(prop, () => {
-        this.refresh();
-      });
-    });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (!this.chart) {
@@ -189,4 +190,4 @@ return;
     },
-    dataURI() {
-      return this.chart.dataURI();
+    dataURI(options) {
+      return this.chart.dataURI(options);
     },
@@ -193,0 +194,0 @@ setLocale(localeName) {

typings/vue-apexcharts.d.ts

@@ -5,12 +5,20 @@ import Vue, { Component, ComponentOptions } from 'vue';
 
-interface VueApexChartsComponent extends Vue {
-  // data
-  readonly chart?: ApexCharts;
-  // props
-  options?: ApexOptions;
+// this interface matches the exposed properties to enable straightforward
+// and strongly typed binding to the <apexchart> component properties
+// (see: https://apexcharts.com/docs/vue-charts/#props)
+export interface VueApexChartConfig {
   type?: 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'rangeBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'radar' | 'polarArea' | 'treemap' | 'boxPlot';
   series: any;
+  height?: string | number;
   width?: string | number;
-  height?: string | number;
-  // method
+  options?: ApexOptions;
+}
+
+export interface VueApexChartsComponent extends VueApexChartConfig, Vue {
+  // data
+  readonly chart?: ApexCharts;
+
+  // props (see: VueApexChartConfig)
+
+  // methods
   init(): Promise<void>;
@@ -17,0 +25,0 @@ refresh(): Promise<void>;

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

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

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

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

460596

increased by704.42%

Number of package files

33

increased by6.45%

Lines of code

10135

increased by1508.73%

Number of lines in readme file

261

increased by0.38%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

No dependency changes