react-apexcharts - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/react-apexcharts.js

 import ApexCharts from 'apexcharts';
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
@@ -38,32 +39,31 @@ export default class Charts extends Component {
 
-  //Used to check the values being passed in to avoid unnecessary changes.
-  shouldComponentUpdate(nextProps) {
-    //Lazy object comparison
-    return !(JSON.stringify(nextProps.options) === JSON.stringify(this.props.options) && JSON.stringify(nextProps.series) === JSON.stringify(this.props.series));
-  }
 
-  componentWillUpdate(nextProps) {
-    const newOptions = {
-      chart: {
-        type: nextProps.type ? nextProps.type : 'line',
-        width: nextProps.width ? nextProps.width : '100%',
-        height: nextProps.height ? nextProps.height : 'auto'
-      },
-      series: nextProps.series
+  componentDidUpdate(prevProps) {
+    const props = this.props;
+    
+    if (JSON.stringify(prevProps.options) !== JSON.stringify(props.options) || JSON.stringify(prevProps.series) !== JSON.stringify(this.props.series)) {
+      const newOptions = {
+        chart: {
+          type: props.type ? props.type : 'line',
+          width: props.width ? props.width : '100%',
+          height: props.height ? props.height : 'auto'
+        },
+        series: props.series
+      }
+  
+      const config = ApexCharts.merge(props.options, newOptions);
+  
+      // series is not changed,but options are changed
+      if (JSON.stringify(props.series) === JSON.stringify(prevProps.series)) {
+        this.state.chart.updateOptions(config)
+      }
+      // options are not changed, just the series is changed
+      else if (JSON.stringify(props.options) === JSON.stringify(prevProps.options)) {
+        this.state.chart.updateSeries(props.series)
+  
+      // both maybe changed
+      } else {
+        this.state.chart.updateOptions(config)
+      }
     }
-
-    const config = ApexCharts.merge(nextProps.options, newOptions);
-
-    // series is not changed,but options are changed
-    if (JSON.stringify(nextProps.series) === JSON.stringify(this.props.series)) {
-      this.state.chart.updateOptions(config)
-    }
-    // options are not changed, just the series is changed
-    else if (JSON.stringify(nextProps.options) === JSON.stringify(this.props.options)) {
-      this.state.chart.updateSeries(nextProps.series)
-
-    // both maybe changed
-    } else {
-      this.state.chart.updateOptions(config)
-    }
   }
@@ -74,2 +74,10 @@
   }
+}
+
+Charts.PropTypes = {
+  type: PropTypes.string.isRequired,
+  width: PropTypes.any,
+  height: PropTypes.any,
+  series: PropTypes.array.isRequired,
+  options: PropTypes.object.isRequired
 }

package.json

 {
   "name": "react-apexcharts",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React.js wrapper for ApexCharts",
-  "main": "dist/vue-apexcharts.js",
+  "main": "dist/react-apexcharts.js",
   "scripts": {
+    "build": "gulp",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -29,3 +30,4 @@ },
   "peerDependencies": {
-    "react": ">=0.13"
+    "react": ">=0.13",
+    "prop-types": "^15.5.7"
   },
@@ -32,0 +34,0 @@ "devDependencies": {

src/react-apexcharts.jsx

 import ApexCharts from 'apexcharts';
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
@@ -38,32 +39,31 @@ export default class Charts extends Component {
 
-  //Used to check the values being passed in to avoid unnecessary changes.
-  shouldComponentUpdate(nextProps) {
-    //Lazy object comparison
-    return !(JSON.stringify(nextProps.options) === JSON.stringify(this.props.options) && JSON.stringify(nextProps.series) === JSON.stringify(this.props.series));
-  }
 
-  componentWillUpdate(nextProps) {
-    const newOptions = {
-      chart: {
-        type: nextProps.type ? nextProps.type : 'line',
-        width: nextProps.width ? nextProps.width : '100%',
-        height: nextProps.height ? nextProps.height : 'auto'
-      },
-      series: nextProps.series
+  componentDidUpdate(prevProps) {
+    const props = this.props;
+    
+    if (JSON.stringify(prevProps.options) !== JSON.stringify(props.options) || JSON.stringify(prevProps.series) !== JSON.stringify(this.props.series)) {
+      const newOptions = {
+        chart: {
+          type: props.type ? props.type : 'line',
+          width: props.width ? props.width : '100%',
+          height: props.height ? props.height : 'auto'
+        },
+        series: props.series
+      }
+  
+      const config = ApexCharts.merge(props.options, newOptions);
+  
+      // series is not changed,but options are changed
+      if (JSON.stringify(props.series) === JSON.stringify(prevProps.series)) {
+        this.state.chart.updateOptions(config)
+      }
+      // options are not changed, just the series is changed
+      else if (JSON.stringify(props.options) === JSON.stringify(prevProps.options)) {
+        this.state.chart.updateSeries(props.series)
+  
+      // both maybe changed
+      } else {
+        this.state.chart.updateOptions(config)
+      }
     }
-
-    const config = ApexCharts.merge(nextProps.options, newOptions);
-
-    // series is not changed,but options are changed
-    if (JSON.stringify(nextProps.series) === JSON.stringify(this.props.series)) {
-      this.state.chart.updateOptions(config)
-    }
-    // options are not changed, just the series is changed
-    else if (JSON.stringify(nextProps.options) === JSON.stringify(this.props.options)) {
-      this.state.chart.updateSeries(nextProps.series)
-
-    // both maybe changed
-    } else {
-      this.state.chart.updateOptions(config)
-    }
   }
@@ -74,2 +74,10 @@
   }
+}
+
+Charts.PropTypes = {
+  type: PropTypes.string.isRequired,
+  series: PropTypes.array.isRequired,
+  options: PropTypes.object.isRequired,
+  width: PropTypes.any,
+  height: PropTypes.any
 }

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

13681

increased by60.76%

Lines of code

162

increased by8%

Number of lines in readme file

121

increased by12000%

Worsened metrics

Dependency count

3

increased by50%

No dependency changes