react-apexcharts 1.3.7 → 1.4.0

package/README.md

@@ -41,12 +41,12 @@ class App extends Component {
           id: 'apexchart-example'
         },
         xaxis: {
-          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
+          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
         }
       },
       series: [{
         name: 'series-1',
-        data: [30, 40, 45, 50, 49, 60, 70, 91]
+        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
       }]
     }
   }
@@ -63,7 +63,7 @@ This will render the following chart
 
 ### How do I update the chart?
 Simple! Just change the `series` or any `option` and it will automatically re-render the chart.
-<p align="center"><a href="#"><img src="https://apexcharts.com/media/react-chart-updation.gif"></a></p>
+<p align="center"><a href="https://codesandbox.io/s/mzzq3yqjqj"><img src="https://apexcharts.com/media/react-chart-updation.gif"></a></p>
 
 View this example on <a href="https://codesandbox.io/s/mzzq3yqjqj">codesandbox</a>
 
@@ -102,7 +102,7 @@ this.setState({
 | **height** | Number/String | Possible values for width can be `100%` or `300px` or 300 |
 | **options** | Object | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |
 
-## How to call methods of ApexCharts programatically?
+## How to call methods of ApexCharts programmatically?
 Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on `ApexCharts` global variable directly
 
 Example

package/dist/react-apexcharts.d.ts

@@ -1,17 +1,32 @@
 /// <reference types="react"/>
-
+import { ApexOptions } from 'apexcharts';
+import React from 'react';
 /**
  * Basic type definitions from https://apexcharts.com/docs/react-charts/#props
  */
 declare module "react-apexcharts" {
-    interface Props {
-        type?: "line" | "area" | "bar" | "histogram" | "pie" | "donut" | "rangeBar" |
-            "radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "radar" | "polarArea",
-        series?: Array<any>,
-        width?: string | number,
-        height?: string | number,
-        options?: object
-    }
-
-    export default class ReactApexChart extends React.Component<Props> {}
+  export interface Props {
+    type?: "line"
+    | "area"
+    | "bar"
+    | "histogram"
+    | "pie"
+    | "donut"
+    | "radialBar"
+    | "scatter"
+    | "bubble"
+    | "heatmap"
+    | "treemap"
+    | "boxPlot"
+    | "candlestick"
+    | "radar"
+    | "polarArea"
+    | "rangeBar",
+    series?: ApexOptions['series'],
+    width?: string | number,
+    height?: string | number,
+    options?: ApexOptions,
+    [key: string]: any,
+  }
+  export default class ReactApexChart extends React.Component<Props> {}    
 }

package/dist/react-apexcharts.iife.min.js

@@ -1 +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};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,[]);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:t,height:e,width:r,series:i,options:s}=this.props,n={chart:{type:t,height:e,width:r},series:i};return this.extend(s,n)}isObject(t){return t&&"object"==typeof t&&!Array.isArray(t)&&null!=t}extend(t,e){"function"!=typeof Object.assign&&(Object.assign=function(t){if(void 0===t||null===t)throw new TypeError("Cannot convert undefined or null to object");let e=Object(t);for(let t=1;t<arguments.length;t++){let r=arguments[t];if(void 0!==r&&null!==r)for(let t in r)r.hasOwnProperty(t)&&(e[t]=r[t])}return e});let r=Object.assign({},t);return this.isObject(t)&&this.isObject(e)&&Object.keys(e).forEach(i=>{this.isObject(e[i])&&i in t?r[i]=this.extend(t[i],e[i]):Object.assign(r,{[i]:e[i]})}),r}componentDidUpdate(t){if(!this.chart)return null;const{options:e,series:r,height:i,width:s}=this.props,n=JSON.stringify(t.options),h=JSON.stringify(t.series),o=JSON.stringify(e),a=JSON.stringify(r);n===o&&h===a&&i===t.height&&s===t.width||(h===a?this.chart.updateOptions(this.getConfig()):n===o&&i===t.height&&s===t.width?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","height","width","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:t,height:e,width:r,series:i,options:s}=this.props,n={chart:{type:t,height:e,width:r},series:i};return this.extend(s,n)}isObject(t){return t&&"object"==typeof t&&!Array.isArray(t)&&null!=t}extend(t,e){"function"!=typeof Object.assign&&(Object.assign=function(t){if(void 0===t||null===t)throw new TypeError("Cannot convert undefined or null to object");let e=Object(t);for(let t=1;t<arguments.length;t++){let r=arguments[t];if(void 0!==r&&null!==r)for(let t in r)r.hasOwnProperty(t)&&(e[t]=r[t])}return e});let r=Object.assign({},t);return this.isObject(t)&&this.isObject(e)&&Object.keys(e).forEach(i=>{this.isObject(e[i])&&i in t?r[i]=this.extend(t[i],e[i]):Object.assign(r,{[i]:e[i]})}),r}componentDidUpdate(t){if(!this.chart)return null;const{options:e,series:r,height:i,width:s}=this.props,n=JSON.stringify(t.options),h=JSON.stringify(t.series),o=JSON.stringify(e),a=JSON.stringify(r);n===o&&h===a&&i===t.height&&s===t.width||(h===a?this.chart.updateOptions(this.getConfig()):n===o&&i===t.height&&s===t.width?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);

package/dist/react-apexcharts.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_createClass=function(){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}(),_apexcharts=require("apexcharts/dist/apexcharts.common"),_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 _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _objectWithoutProperties(e,t){var r={};for(var n in e)0<=t.indexOf(n)||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);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(){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=_objectWithoutProperties(this.props,[]);return _react2.default.createElement("div",_extends({ref:_react2.default.createRef?this.chartRef:this.setRef},e))}},{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,n=e.width,o=e.series,i=e.options,a={chart:{type:t,height:r,width:n},series:o};return this.extend(i,a)}},{key:"isObject",value:function(e){return e&&"object"===(void 0===e?"undefined":_typeof(e))&&!Array.isArray(e)&&null!=e}},{key:"extend",value:function(t,r){var n=this;"function"!=typeof Object.assign&&(Object.assign=function(e){if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(var t=Object(e),r=1;r<arguments.length;r++){var n=arguments[r];if(null!=n)for(var o in n)n.hasOwnProperty(o)&&(t[o]=n[o])}return t});var o=Object.assign({},t);return this.isObject(t)&&this.isObject(r)&&Object.keys(r).forEach(function(e){n.isObject(r[e])&&e in t?o[e]=n.extend(t[e],r[e]):Object.assign(o,_defineProperty({},e,r[e]))}),o}},{key:"componentDidUpdate",value:function(e){if(!this.chart)return null;var t=this.props,r=t.options,n=t.series,o=t.height,i=t.width,a=JSON.stringify(e.options),s=JSON.stringify(e.series),c=JSON.stringify(r),u=JSON.stringify(n);a===c&&s===u&&o===e.height&&i===e.width||(s!==u&&a===c&&o===e.height&&i===e.width?this.chart.updateSeries(n):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 _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_createClass=function(){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}(),_apexcharts=require("apexcharts/dist/apexcharts.common"),_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 _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _objectWithoutProperties(e,t){var r={};for(var n in e)0<=t.indexOf(n)||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);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(){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.height,e.width,e.series,e.options,_objectWithoutProperties(e,["type","height","width","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,n=e.width,o=e.series,i=e.options,a={chart:{type:t,height:r,width:n},series:o};return this.extend(i,a)}},{key:"isObject",value:function(e){return e&&"object"===(void 0===e?"undefined":_typeof(e))&&!Array.isArray(e)&&null!=e}},{key:"extend",value:function(t,r){var n=this;"function"!=typeof Object.assign&&(Object.assign=function(e){if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(var t=Object(e),r=1;r<arguments.length;r++){var n=arguments[r];if(null!=n)for(var o in n)n.hasOwnProperty(o)&&(t[o]=n[o])}return t});var o=Object.assign({},t);return this.isObject(t)&&this.isObject(r)&&Object.keys(r).forEach(function(e){n.isObject(r[e])&&e in t?o[e]=n.extend(t[e],r[e]):Object.assign(o,_defineProperty({},e,r[e]))}),o}},{key:"componentDidUpdate",value:function(e){if(!this.chart)return null;var t=this.props,r=t.options,n=t.series,o=t.height,i=t.width,a=JSON.stringify(e.options),s=JSON.stringify(e.series),c=JSON.stringify(r),u=JSON.stringify(n);a===c&&s===u&&o===e.height&&i===e.width||(s===u?this.chart.updateOptions(this.getConfig()):a===c&&o===e.height&&i===e.width?this.chart.updateSeries(n):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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-apexcharts",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "React.js wrapper for ApexCharts",
   "main": "dist/react-apexcharts.min.js",
   "types": "types/react-apexcharts.d.ts",

package/src/react-apexcharts.jsx

@@ -16,7 +16,7 @@ export default class Charts extends Component {
   }
 
   render () {
-    const { ...props } = this.props
+    const { type, height, width, series, options, ...props } = this.props
     return React.createElement('div', {
       ref: React.createRef
         ? this.chartRef

package/types/react-apexcharts.d.ts

@@ -1,17 +1,32 @@
 /// <reference types="react"/>
-
+import { ApexOptions } from 'apexcharts';
+import React from 'react';
 /**
  * Basic type definitions from https://apexcharts.com/docs/react-charts/#props
  */
 declare module "react-apexcharts" {
-    interface Props {
-        type?: "line" | "area" | "bar" | "histogram" | "pie" | "donut" | "rangeBar" |
-            "radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "radar" | "polarArea",
-        series?: Array<any>,
-        width?: string | number,
-        height?: string | number,
-        options?: object
-    }
-
-    export default class ReactApexChart extends React.Component<Props> {}
+  export interface Props {
+    type?: "line"
+    | "area"
+    | "bar"
+    | "histogram"
+    | "pie"
+    | "donut"
+    | "radialBar"
+    | "scatter"
+    | "bubble"
+    | "heatmap"
+    | "treemap"
+    | "boxPlot"
+    | "candlestick"
+    | "radar"
+    | "polarArea"
+    | "rangeBar",
+    series?: ApexOptions['series'],
+    width?: string | number,
+    height?: string | number,
+    options?: ApexOptions,
+    [key: string]: any,
+  }
+  export default class ReactApexChart extends React.Component<Props> {}    
 }