react-apexcharts - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/react-apexcharts.js

@@ -15,4 +15,8 @@ import ApexCharts from 'apexcharts';
   render() {
+    const { type, width, height, series, options, ...props } = this.props
     return (
-      React.createElement("div", {ref: this.chartRef})
+      React.createElement("div", {
+        ref: this.chartRef,
+        ...props
+      })
     );
@@ -19,0 +23,0 @@ }

dist/react-apexcharts.min.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function i(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,r){return t&&i(e.prototype,t),r&&i(e,r),e}}(),_apexcharts=require("apexcharts"),_apexcharts2=_interopRequireDefault(_apexcharts),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var Charts=function(e){function r(e){_classCallCheck(this,r);var t=_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.chartRef=_react2.default.createRef(),t.state={chart:null},t}return _inherits(r,_react.Component),_createClass(r,[{key:"render",value:function(){return _react2.default.createElement("div",{ref:this.chartRef})}},{key:"componentDidMount",value:function(){var e=this,t={chart:{type:this.props.type?this.props.type:"line",height:this.props.height?this.props.height:"auto",width:this.props.width?this.props.width:"100%"},series:this.props.series},r=_apexcharts2.default.merge(this.props.options,t),i=new _apexcharts2.default(this.chartRef.current,r);i.render().then(function(){e.setState({chart:i})})}},{key:"componentDidUpdate",value:function(e){var t=this.props;if(JSON.stringify(e.options)!==JSON.stringify(t.options)||JSON.stringify(e.series)!==JSON.stringify(this.props.series)){var r={chart:{type:t.type?t.type:"line",width:t.width?t.width:"100%",height:t.height?t.height:"auto"},series:t.series},i=_apexcharts2.default.merge(t.options,r);JSON.stringify(t.series)===JSON.stringify(e.series)?this.state.chart.updateOptions(i):JSON.stringify(t.options)===JSON.stringify(e.options)?this.state.chart.updateSeries(t.series):this.state.chart.updateOptions(i)}}},{key:"componentWillUnmount",value:function(){this.state.chart.destroy()}}]),r}();(exports.default=Charts).propTypes={type:_propTypes2.default.string.isRequired,width:_propTypes2.default.any,height:_propTypes2.default.any,series:_propTypes2.default.array.isRequired,options:_propTypes2.default.object.isRequired};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},_createClass=function(){function i(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,r){return t&&i(e.prototype,t),r&&i(e,r),e}}(),_apexcharts=require("apexcharts"),_apexcharts2=_interopRequireDefault(_apexcharts),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _objectWithoutProperties(e,t){var r={};for(var i in e)0<=t.indexOf(i)||Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i]);return r}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var Charts=function(e){function r(e){_classCallCheck(this,r);var t=_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.chartRef=_react2.default.createRef(),t.state={chart:null},t}return _inherits(r,_react.Component),_createClass(r,[{key:"render",value:function(){var e=this.props,t=(e.type,e.width,e.height,e.series,e.options,_objectWithoutProperties(e,["type","width","height","series","options"]));return _react2.default.createElement("div",_extends({ref:this.chartRef},t))}},{key:"componentDidMount",value:function(){var e=this,t={chart:{type:this.props.type?this.props.type:"line",height:this.props.height?this.props.height:"auto",width:this.props.width?this.props.width:"100%"},series:this.props.series},r=_apexcharts2.default.merge(this.props.options,t),i=new _apexcharts2.default(this.chartRef.current,r);i.render().then(function(){e.setState({chart:i})})}},{key:"componentDidUpdate",value:function(e){var t=this.props;if(JSON.stringify(e.options)!==JSON.stringify(t.options)||JSON.stringify(e.series)!==JSON.stringify(this.props.series)){var r={chart:{type:t.type?t.type:"line",width:t.width?t.width:"100%",height:t.height?t.height:"auto"},series:t.series},i=_apexcharts2.default.merge(t.options,r);JSON.stringify(t.series)===JSON.stringify(e.series)?this.state.chart.updateOptions(i):JSON.stringify(t.options)===JSON.stringify(e.options)?this.state.chart.updateSeries(t.series):this.state.chart.updateOptions(i)}}},{key:"componentWillUnmount",value:function(){this.state.chart.destroy()}}]),r}();(exports.default=Charts).propTypes={type:_propTypes2.default.string.isRequired,width:_propTypes2.default.any,height:_propTypes2.default.any,series:_propTypes2.default.array.isRequired,options:_propTypes2.default.object.isRequired};

gulpfile.js

@@ -22,3 +22,4 @@ var gulp = require('gulp');
     .pipe(babel({
-      presets: ['es2015']
+      presets: ['es2015'],
+      plugins: ['transform-object-rest-spread']
     }))
@@ -25,0 +26,0 @@ .pipe(concat('react-apexcharts.min.js'))

package.json

 {
   "name": "react-apexcharts",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React.js wrapper for ApexCharts",
@@ -26,3 +26,3 @@ "main": "dist/react-apexcharts.min.js",
   "dependencies": {
-    "apexcharts": "^1.2.0"
+    "apexcharts": "^1.3.12"
   },
@@ -34,2 +34,3 @@ "peerDependencies": {
   "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
@@ -36,0 +37,0 @@ "gulp": "^3.9.1",

README.md

@@ -101,7 +101,7 @@ <p align="center"><img src="https://apexcharts.com/media/react-apexcharts.png"></p>
 ## 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
+Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on `ApexCharts` global variable directly
 
 Example
 ```js
-this.$apexcharts.exec('reactchart-example', 'updateSeries', [{
+Apexcharts.exec('reactchart-example', 'updateSeries', [{
   data: [40, 55, 65, 11, 23, 44, 54, 33]
@@ -154,3 +154,12 @@ }])
 
+## Issues
+Recently, some users faced an issue while bundling their app along with React-ApexCharts.
+```bash
+Failed to minify the code from this file:
+./node_modules/react-apexcharts/dist/react-apexcharts.js
+```
+If you get such an error, please get the latest version of React-ApexCharts >= 1.0.4 and try to compile your app again.
+
+
 ## License
 React-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.

src/react-apexcharts.jsx

@@ -15,4 +15,8 @@ import ApexCharts from 'apexcharts';
   render() {
+    const { type, width, height, series, options, ...props } = this.props
     return (
-      React.createElement("div", {ref: this.chartRef})
+      React.createElement("div", {
+        ref: this.chartRef,
+        ...props
+      })
     );
@@ -19,0 +23,0 @@ }

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

15860

increased by7.53%

Lines of code

171

increased by5.56%

Number of lines in readme file

164

increased by5.81%

Worsened metrics

Dev dependency count

8

increased by14.29%

Dependency changes

• Updatedapexcharts@^1.3.12