react-apexcharts - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/react-apexcharts.iife.min.js

@@ -1,1 +0,1 @@
-var ReactApexChart=function(t,e,r){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var i="default"in e?e.default:e;r=r&&r.hasOwnProperty("default")?r.default:r;var s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(t[i]=r[i])}return t};class n extends e.Component{constructor(t){super(t),i.createRef?this.chartRef=i.createRef():this.setRef=(t=>this.chartRef=t),this.chart=null}render(){const t=function(t,e){var r={};for(var i in t)e.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(t,i)&&(r[i]=t[i]);return r}(this.props,["type","width","height","series","options"]);return i.createElement("div",s({ref:i.createRef?this.chartRef:this.setRef},t))}componentDidMount(){const e=i.createRef?this.chartRef.current:this.chartRef;this.chart=new t(e,this.getConfig()),this.chart.render()}getConfig(){const{type:e,height:r,width:i,series:s,options:n}=this.props,h={chart:{type:e,height:r,width:i},series:s};return t.merge(n,h)}componentDidUpdate(t){if(!this.chart)return null;const{options:e,series:r}=this.props,i=JSON.stringify(t.options),s=JSON.stringify(t.series),n=JSON.stringify(e),h=JSON.stringify(r);i===n&&s===h||(s===h?this.chart.updateOptions(this.getConfig()):i===n?this.chart.updateSeries(r):this.chart.updateOptions(this.getConfig()))}componentWillUnmount(){this.chart&&"function"==typeof this.chart.destroy&&this.chart.destroy()}}return n.propTypes={type:r.string.isRequired,width:r.any,height:r.any,series:r.array.isRequired,options:r.object.isRequired},n.defaultProps={type:"line",width:"100%",height:"auto"},n}(ApexCharts,React,PropTypes);
+var ReactApexChart=function(t,e,r){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var i="default"in e?e.default:e;r=r&&r.hasOwnProperty("default")?r.default:r;var s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(t[i]=r[i])}return t};window.ApexCharts=t;class n extends e.Component{constructor(t){super(t),i.createRef?this.chartRef=i.createRef():this.setRef=(t=>this.chartRef=t),this.chart=null}render(){const t=function(t,e){var r={};for(var i in t)e.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(t,i)&&(r[i]=t[i]);return r}(this.props,["type","width","height","series","options"]);return i.createElement("div",s({ref:i.createRef?this.chartRef:this.setRef},t))}componentDidMount(){const e=i.createRef?this.chartRef.current:this.chartRef;this.chart=new t(e,this.getConfig()),this.chart.render()}getConfig(){const{type:e,height:r,width:i,series:s,options:n}=this.props,h={chart:{type:e,height:r,width:i},series:s};return t.merge(n,h)}componentDidUpdate(t){if(!this.chart)return null;const{options:e,series:r}=this.props,i=JSON.stringify(t.options),s=JSON.stringify(t.series),n=JSON.stringify(e),h=JSON.stringify(r);i===n&&s===h||(s===h?this.chart.updateOptions(this.getConfig()):i===n?this.chart.updateSeries(r):this.chart.updateOptions(this.getConfig()))}componentWillUnmount(){this.chart&&"function"==typeof this.chart.destroy&&this.chart.destroy()}}return n.propTypes={type:r.string.isRequired,width:r.any,height:r.any,series:r.array.isRequired,options:r.object.isRequired},n.defaultProps={type:"line",width:"100%",height:"auto"},n}(ApexCharts,React,PropTypes);

dist/react-apexcharts.js

@@ -5,2 +5,4 @@ import ApexCharts from 'apexcharts';
 
+window.ApexCharts = ApexCharts;
+
 export default class Charts extends Component {
@@ -7,0 +9,0 @@ constructor(props) {

dist/react-apexcharts.min.js

@@ -1,1 +0,1 @@
-"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 _react2.default.createRef?t.chartRef=_react2.default.createRef():t.setRef=function(e){return t.chartRef=e},t.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:_react2.default.createRef?this.chartRef:this.setRef},t))}},{key:"componentDidMount",value:function(){var e=_react2.default.createRef?this.chartRef.current:this.chartRef;this.chart=new _apexcharts2.default(e,this.getConfig()),this.chart.render()}},{key:"getConfig",value:function(){var e=this.props,t=e.type,r=e.height,i=e.width,n=e.series,o=e.options,a={chart:{type:t,height:r,width:i},series:n};return _apexcharts2.default.merge(o,a)}},{key:"componentDidUpdate",value:function(e){if(!this.chart)return null;var t=this.props,r=t.options,i=t.series,n=JSON.stringify(e.options),o=JSON.stringify(e.series),a=JSON.stringify(r),s=JSON.stringify(i);n===a&&o===s||(o===s?this.chart.updateOptions(this.getConfig()):n===a?this.chart.updateSeries(i):this.chart.updateOptions(this.getConfig()))}},{key:"componentWillUnmount",value:function(){this.chart&&"function"==typeof this.chart.destroy&&this.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},Charts.defaultProps={type:"line",width:"100%",height:"auto"};
+"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)}window.ApexCharts=_apexcharts2.default;var Charts=function(e){function r(e){_classCallCheck(this,r);var t=_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return _react2.default.createRef?t.chartRef=_react2.default.createRef():t.setRef=function(e){return t.chartRef=e},t.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:_react2.default.createRef?this.chartRef:this.setRef},t))}},{key:"componentDidMount",value:function(){var e=_react2.default.createRef?this.chartRef.current:this.chartRef;this.chart=new _apexcharts2.default(e,this.getConfig()),this.chart.render()}},{key:"getConfig",value:function(){var e=this.props,t=e.type,r=e.height,i=e.width,n=e.series,o=e.options,a={chart:{type:t,height:r,width:i},series:n};return _apexcharts2.default.merge(o,a)}},{key:"componentDidUpdate",value:function(e){if(!this.chart)return null;var t=this.props,r=t.options,i=t.series,n=JSON.stringify(e.options),o=JSON.stringify(e.series),a=JSON.stringify(r),s=JSON.stringify(i);n===a&&o===s||(o===s?this.chart.updateOptions(this.getConfig()):n===a?this.chart.updateSeries(i):this.chart.updateOptions(this.getConfig()))}},{key:"componentWillUnmount",value:function(){this.chart&&"function"==typeof this.chart.destroy&&this.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},Charts.defaultProps={type:"line",width:"100%",height:"auto"};

package.json

 {
   "name": "react-apexcharts",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React.js wrapper for ApexCharts",
@@ -5,0 +5,0 @@ "main": "dist/react-apexcharts.min.js",

README.md

@@ -70,2 +70,27 @@ <p align="center"><img src="https://apexcharts.com/media/react-apexcharts.png"></p>
 
+
+**Important:** While updating the options, make sure to update the outermost property even when you need to update the nested property.
+
+✅ Do this
+```javascript
+this.setState({
+  options: {
+    ...this.state.options,
+    xaxis: {
+      ...this.state.options.xaxis, {
+        categories: ['X1', 'X2', 'X3']
+      }
+    }
+  }
+})
+```
+
+❌ Not this
+```javascript
+this.setState({
+  options.xaxis.categories: ['X1', 'X2', 'X3']
+})
+```
+
+
 ## Props
@@ -72,0 +97,0 @@

src/react-apexcharts.jsx

@@ -5,2 +5,4 @@ import ApexCharts from 'apexcharts';
 
+window.ApexCharts = ApexCharts;
+
 export default class Charts extends Component {
@@ -7,0 +9,0 @@ constructor(props) {

No alert changes

Improved metrics

Total package byte prevSize

19477

increased by2.95%

Lines of code

242

increased by0.83%

Number of lines in readme file

165

increased by17.86%

No dependency changes