react-apexcharts - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

package.json

 {
   "name": "react-apexcharts",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "React.js wrapper for ApexCharts",
   "main": "dist/react-apexcharts.min.js",
   "scripts": {
-    "build": "gulp"
+    "build": "gulp",
+    "test": "jest"
   },
@@ -26,11 +27,14 @@ "keywords": [
   "dependencies": {
-    "apexcharts": "^1.3.16"
+    "apexcharts": "^1.4.2",
+    "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "react": ">=0.13",
-    "prop-types": "^15.5.7"
+    "react": ">=0.13"
   },
   "devDependencies": {
+    "babel-jest": "^23.4.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "gulp": "^3.9.1",
@@ -41,4 +45,7 @@ "gulp-babel": "^6.1.2",
     "gulp-uglify": "^3.0.0",
-    "react": "^15.3.1"
+    "jest": "^23.5.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
+    "react-test-renderer": "^16.4.2"
   }
 }

src/react-apexcharts.jsx

@@ -9,2 +9,3 @@ import ApexCharts from 'apexcharts';
     this.chartRef = React.createRef();
+    this.chart = null
   }
@@ -21,2 +22,7 @@
   componentDidMount() {
+    this.chart = new ApexCharts(this.chartRef.current, this.getConfig());
+    this.chart.render();
+  }
+
+  getConfig() {
     const { type, height, width, series, options } = this.props;
@@ -32,31 +38,20 @@ const newOptions = {
 
-    const config = ApexCharts.merge(options, newOptions);
-    this.chart = new ApexCharts(this.chartRef.current, config);
-    this.chart.render();
+    return ApexCharts.merge(options, newOptions);
   }
 
   componentDidUpdate(prevProps) {
+    if (!this.chart) return null;
     const { options, type, width, height, series } = this.props;
+    const prevOptions = JSON.stringify(prevProps.options)
+    const prevSeries = JSON.stringify(prevProps.series)
+    const currentOptions = JSON.stringify(options)
+    const currentSeries = JSON.stringify(series)
 
-    if (
-      JSON.stringify(prevProps.options) !== JSON.stringify(options) ||
-      JSON.stringify(prevProps.series) !== JSON.stringify(series)
-    ) {
-      const newOptions = {
-        chart: {
-          type,
-          width,
-          height
-        },
-        series
-      };
-
-      const config = ApexCharts.merge(options, newOptions);
-
+    if (prevOptions !== currentOptions || prevSeries !== currentSeries) {
       // series is not changed,but options are changed
-      if (JSON.stringify(series) === JSON.stringify(prevProps.series)) {
-        this.chart.updateOptions(config);
+      if (prevSeries !== currentSeries) {
+        this.chart.updateOptions(this.getConfig());
       }
       // options are not changed, just the series is changed
-      else if (JSON.stringify(options) === JSON.stringify(prevProps.options)) {
+      else if (prevOptions !== currentOptions) {
         this.chart.updateSeries(series);
@@ -66,3 +61,3 @@
       } else {
-        this.chart.updateOptions(config);
+        this.chart.updateOptions(this.getConfig());
       }
@@ -73,3 +68,3 @@ }
   componentWillUnmount() {
-    this.chart.destroy();
+    if (this.chart && typeof this.chart.destroy === 'function') this.chart.destroy();
   }
@@ -76,0 +71,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

16159

increased by6.82%

Number of package files

10

increased by42.86%

Lines of code

197

increased by13.87%

Worsened metrics

Dev dependency count

14

increased by75%

Dependency changes

• + Addedprop-types@^15.5.7

• Updatedapexcharts@^1.4.2