react-apexcharts 1.4.0 → 1.4.2

package/.github/workflows/stale.yml

@@ -0,0 +1,20 @@
+name: Mark stale issues and pull requests
+on:
+  schedule:
+  - cron: '21 14 * * *'
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+    - uses: actions/stale@v9
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
+        stale-pr-message: 'This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
+        stale-issue-label: 'no-issue-activity'
+        stale-pr-label: 'no-pr-activity'
+        exempt-issue-labels: 'bug,high-priority'
+        operations-per-run: 100

package/README.md

@@ -96,11 +96,11 @@ this.setState({
 
 | Prop        | Type           | Description  |
 | ------------- |-------------| -----|
-| **series** | Array | The series is an array which accepts object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. |
-| **type** | String  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`  |
-| **width** | Number/String  | Possible values for width can be `100%` or `400px` or 400 |
-| **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/) |
+| **series** | `Array` | The series is a set of data. To know more about the format of the data, checkout [Series docs](https://apexcharts.com/docs/series/) on the website. |
+| **type** | `String`  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar` |
+| **width** | `Number or String`  | Possible values for width can be `100%`, `400px` or `400` (by default is `100%`) |
+| **height** | `Number or String` | Possible values for height can be `100%`, `300px` or `300` (by default is `auto`) |
+| **options** | `Object` | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |
 
 ## 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

package/dist/react-apexcharts.d.ts

@@ -1,32 +1,33 @@
 /// <reference types="react"/>
-import { ApexOptions } from 'apexcharts';
-import React from 'react';
+import { ApexOptions } from "apexcharts";
+import React from "react";
 /**
  * Basic type definitions from https://apexcharts.com/docs/react-charts/#props
  */
 declare module "react-apexcharts" {
   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,
+    type?:
+      | "line"
+      | "area"
+      | "bar"
+      | "pie"
+      | "donut"
+      | "radialBar"
+      | "scatter"
+      | "bubble"
+      | "heatmap"
+      | "candlestick"
+      | "boxPlot"
+      | "radar"
+      | "polarArea"
+      | "rangeBar"
+      | "rangeArea"
+      | "treemap";
+    series?: ApexOptions["series"];
+    width?: string | number;
+    height?: string | number;
+    options?: ApexOptions;
+    [key: string]: any;
   }
-  export default class ReactApexChart extends React.Component<Props> {}    
+  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,["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);
+var ReactApexChart=function(e,r,t){"use strict";function n(e,r,t){return(r=function(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==typeof r?r:r+""}(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(){return i=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},i.apply(null,arguments)}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){n(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e){return c="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},c(e)}var f=["type","width","height","series","options"];function s(t){var o=t.type,a=void 0===o?"line":o,p=t.width,y=void 0===p?"100%":p,l=t.height,b=void 0===l?"auto":l,O=t.series,v=t.options,g=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(r.includes(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.includes(t)||{}.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(t,f),h=e.useRef(null),d=e.useRef(null);e.useEffect((function(){var e=h.current;return d.current=new r(e,P()),d.current.render(),function(){d.current&&"function"==typeof d.current.destroy&&d.current.destroy()}}),[]),e.useEffect((function(){var e=JSON.stringify(d.current.options),r=JSON.stringify(d.current.series),t=JSON.stringify(v),n=JSON.stringify(O);e===t&&r===n&&b===d.current.height&&y===d.current.width||(r===n?d.current.updateOptions(P()):d.current.updateSeries(O))}),[v,O,b,y]);var m,j,w,P=function(){return E(v,{chart:{type:a,height:b,width:y},series:O})},S=function(e){return e&&"object"===c(e)&&!Array.isArray(e)},E=function(e,r){var t=u({},e);return S(e)&&S(r)&&Object.keys(r).forEach((function(i){S(r[i])&&i in e?t[i]=E(e[i],r[i]):Object.assign(t,n({},i,r[i]))})),t},R=(m=g,j=Object.keys(s.propTypes),w=u({},m),j.forEach((function(e){delete w[e]})),w);return React.createElement("div",i({ref:h},R))}return s.propTypes={type:t.string.isRequired,series:t.array.isRequired,options:t.object.isRequired,width:t.oneOfType([t.string,t.number]),height:t.oneOfType([t.string,t.number])},s}(React,ApexCharts,PropTypes);

package/dist/react-apexcharts.js

@@ -1,139 +1,107 @@
-import ApexCharts from 'apexcharts/dist/apexcharts.common'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+"use strict";
 
-window.ApexCharts = ApexCharts
-
-export default class Charts extends Component {
-  constructor (props) {
-    super(props)
-    if (React.createRef) {
-      this.chartRef = React.createRef()
-    } else {
-      this.setRef = el => this.chartRef = el
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Charts;
+var _apexcharts = _interopRequireDefault(require("apexcharts"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _excluded = ["type", "width", "height", "series", "options"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function omit(obj, keysToRemove) {
+  var newObj = _objectSpread({}, obj);
+  keysToRemove.forEach(function (key) {
+    delete newObj[key];
+  });
+  return newObj;
+}
+function Charts(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "line" : _ref$type,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "100%" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
+    series = _ref.series,
+    options = _ref.options,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var chartRef = (0, _react.useRef)(null);
+  var chart = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var current = chartRef.current;
+    chart.current = new _apexcharts["default"](current, getConfig());
+    chart.current.render();
+    return function () {
+      if (chart.current && typeof chart.current.destroy === "function") {
+        chart.current.destroy();
+      }
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var prevOptions = JSON.stringify(chart.current.options);
+    var prevSeries = JSON.stringify(chart.current.series);
+    var currentOptions = JSON.stringify(options);
+    var currentSeries = JSON.stringify(series);
+    if (prevOptions !== currentOptions || prevSeries !== currentSeries || height !== chart.current.height || width !== chart.current.width) {
+      if (prevSeries === currentSeries) {
+        chart.current.updateOptions(getConfig());
+      } else {
+        chart.current.updateSeries(series);
+      }
     }
-    this.chart = null
-  }
-
-  render () {
-    const { ...props } = this.props
-    return React.createElement('div', {
-      ref: React.createRef
-        ? this.chartRef
-        : this.setRef,
-      ...props
-    })
-  }
-
-  componentDidMount () {
-    const current = React.createRef ? this.chartRef.current : this.chartRef
-    this.chart = new ApexCharts(current, this.getConfig())
-    this.chart.render()
-  }
-
-  getConfig () {
-    const { type, height, width, series, options } = this.props
-    const newOptions = {
+  }, [options, series, height, width]);
+  var getConfig = function getConfig() {
+    var newOptions = {
       chart: {
-        type,
-        height,
-        width
+        type: type,
+        height: height,
+        width: width
       },
-      series
-    }
-
-    return this.extend(options, newOptions)
-  }
-
-  isObject(item) {
-    return (
-      item && typeof item === 'object' && !Array.isArray(item) && item != null
-    )
-  }
-
-  extend (target, source) {
-    if (typeof Object.assign !== 'function') {
-      (function () {
-        Object.assign = function (target) {
-          // We must check against these specific cases.
-          if (target === undefined || target === null) {
-            throw new TypeError('Cannot convert undefined or null to object')
-          }
-
-          let output = Object(target)
-          for (let index = 1; index < arguments.length; index++) {
-            let source = arguments[index]
-            if (source !== undefined && source !== null) {
-              for (let nextKey in source) {
-                if (source.hasOwnProperty(nextKey)) {
-                  output[nextKey] = source[nextKey]
-                }
-              }
-            }
-          }
-          return output
-        }
-      })()
-    }
-
-    let output = Object.assign({}, target)
-    if (this.isObject(target) && this.isObject(source)) {
-      Object.keys(source).forEach((key) => {
-        if (this.isObject(source[key])) {
+      series: series
+    };
+    return _extend(options, newOptions);
+  };
+  var isObject = function isObject(item) {
+    return item && _typeof(item) === "object" && !Array.isArray(item);
+  };
+  var _extend = function extend(target, source) {
+    var output = _objectSpread({}, target);
+    if (isObject(target) && isObject(source)) {
+      Object.keys(source).forEach(function (key) {
+        if (isObject(source[key])) {
           if (!(key in target)) {
-            Object.assign(output, {
-              [key]: source[key]
-            })
+            Object.assign(output, _defineProperty({}, key, source[key]));
           } else {
-            output[key] = this.extend(target[key], source[key])
+            output[key] = _extend(target[key], source[key]);
           }
         } else {
-          Object.assign(output, {
-            [key]: source[key]
-          })
+          Object.assign(output, _defineProperty({}, key, source[key]));
         }
-      })
+      });
     }
-    return output
-  }
-
-  componentDidUpdate (prevProps) {
-    if (!this.chart) return null
-    const { options, 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 (prevOptions !== currentOptions || prevSeries !== currentSeries) {
-      if (prevSeries === currentSeries) {
-        // series is not changed,but options are changed
-        this.chart.updateOptions(this.getConfig())
-      } else if (prevOptions === currentOptions) {
-        // options are not changed, just the series is changed
-        this.chart.updateSeries(series)
-      } else {
-        // both might be changed
-        this.chart.updateOptions(this.getConfig())
-      }
-    }
-  }
-
-  componentWillUnmount () {
-    if (this.chart && typeof this.chart.destroy === 'function') this.chart.destroy()
-  }
+    return output;
+  };
+  var rest = omit(restProps, Object.keys(Charts.propTypes));
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    ref: chartRef
+  }, rest));
 }
-
 Charts.propTypes = {
-  type: PropTypes.string.isRequired,
-  width: PropTypes.any,
-  height: PropTypes.any,
-  series: PropTypes.array.isRequired,
-  options: PropTypes.object.isRequired
-}
-
-Charts.defaultProps = {
-  type: 'line',
-  width: '100%',
-  height: 'auto'
-}
+  type: _propTypes["default"].string.isRequired,
+  series: _propTypes["default"].array.isRequired,
+  options: _propTypes["default"].object.isRequired,
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+};

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=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"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=Charts;var _react=require("react"),_apexcharts=_interopRequireDefault(require("apexcharts")),_propTypes=_interopRequireDefault(require("prop-types")),_excluded=["type","width","height","series","options"];function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return(_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r,n=arguments[t];for(r in n)!{}.hasOwnProperty.call(n,r)||(e[r]=n[r])}return e}).apply(null,arguments)}function _typeof(e){return(_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})(e)}function _objectWithoutProperties(e,t){if(null==e)return{};var r,n=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols)for(var o=Object.getOwnPropertySymbols(e),i=0;i<o.length;i++)r=o[i],t.includes(r)||{}.propertyIsEnumerable.call(e,r)&&(n[r]=e[r]);return n}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,n={};for(r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function ownKeys(t,e){var r,n=Object.keys(t);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(t),e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)),n}function _objectSpread(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(r),!0).forEach(function(e){_defineProperty(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}function _defineProperty(e,t,r){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0===r)return("string"===t?String:Number)(e);r=r.call(e,t||"default");if("object"!=_typeof(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}function omit(e,t){var r=_objectSpread({},e);return t.forEach(function(e){delete r[e]}),r}function Charts(e){function o(e){return e&&"object"===_typeof(e)&&!Array.isArray(e)}var t=e.type,r=void 0===t?"line":t,t=e.width,i=void 0===t?"100%":t,t=e.height,u=void 0===t?"auto":t,p=e.series,c=e.options,t=_objectWithoutProperties(e,_excluded),n=(0,_react.useRef)(null),s=(0,_react.useRef)(null),f=((0,_react.useEffect)(function(){var e=n.current;return s.current=new _apexcharts.default(e,f()),s.current.render(),function(){s.current&&"function"==typeof s.current.destroy&&s.current.destroy()}},[]),(0,_react.useEffect)(function(){var e=JSON.stringify(s.current.options),t=JSON.stringify(s.current.series),r=JSON.stringify(c),n=JSON.stringify(p);e===r&&t===n&&u===s.current.height&&i===s.current.width||(t===n?s.current.updateOptions(f()):s.current.updateSeries(p))},[c,p,u,i]),function(){return a(c,{chart:{type:r,height:u,width:i},series:p})}),a=function(t,r){var n=_objectSpread({},t);return o(t)&&o(r)&&Object.keys(r).forEach(function(e){o(r[e])&&e in t?n[e]=a(t[e],r[e]):Object.assign(n,_defineProperty({},e,r[e]))}),n},e=omit(t,Object.keys(Charts.propTypes));return React.createElement("div",_extends({ref:n},e))}Charts.propTypes={type:_propTypes.default.string.isRequired,series:_propTypes.default.array.isRequired,options:_propTypes.default.object.isRequired,width:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number]),height:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number])};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-apexcharts",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "React.js wrapper for ApexCharts",
   "main": "dist/react-apexcharts.min.js",
   "types": "types/react-apexcharts.d.ts",
@@ -26,36 +26,35 @@
   },
   "license": "MIT",
   "dependencies": {
-    "prop-types": "^15.5.7"
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "apexcharts": "^3.18.0",
+    "apexcharts": "^3.41.0",
     "react": ">=0.13"
   },
   "devDependencies": {
-    "@types/react": "^16.8.8",
-    "babel-core": "^6.26.3",
-    "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",
-    "babel-preset-stage-3": "^6.24.1",
-    "concurrently": "^4.1.0",
-    "eslint": "^5.14.1",
-    "eslint-plugin-react": "^7.12.4",
-    "gulp": "^4.0.2",
-    "gulp-babel": "^6.1.2",
+    "@babel/core": "^7.25.8",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@types/react": "^18.3.11",
+    "concurrently": "^9.0.1",
+    "eslint": "^9.12.0",
+    "eslint-plugin-react": "^7.37.1",
+    "gulp": "^5.0.0",
+    "gulp-babel": "^8.0.0",
     "gulp-concat": "^2.6.1",
-    "gulp-react": "^3.1.0",
-    "gulp-uglify": "^3.0.0",
-    "jest": "^25.1.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-test-renderer": "^16.6.3",
-    "rollup": "1.27.14",
-    "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-postcss": "^2.0.6",
-    "rollup-plugin-uglify": "^3.0.0"
+    "gulp-react": "^4.0.0",
+    "gulp-uglify": "^3.0.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
+    "rollup": "4.24.0",
+    "rollup-plugin-postcss": "^4.0.2"
   }
 }

package/types/react-apexcharts.d.ts

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

package/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets":[
-      "react",
-      "stage-3"
-  ]
-}

package/.eslintrc.js

@@ -1,24 +0,0 @@
-module.exports = {
-  root: true,
-  parserOptions: {
-      ecmaVersion: 2018,
-      parser: 'babel-eslint',
-      sourceType: 'module'
-  },
-  env: {
-      browser: true,
-      es6: true,
-      node: true
-  },
-  extends: [
-      "eslint:recommended",
-      "plugin:react/recommended"
-  ],
-  globals: {
-      "ApexCharts": true
-  },
-  rules: {
-      // Remove this when prettier 2.0 is out
-      'space-before-function-paren': 0 // Do not clash with Prettier
-  }
-};

package/.travis.yml

@@ -1,8 +0,0 @@
-language: node_js
-node_js:
-  - "stable"
-cache:
-  directories:
-  - node_modules
-script:
-  - npm run build

package/.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-  // Temporary until prettier and eslint are correctly setup
-  "editor.formatOnSave": false
-}

package/gulpfile.js

@@ -1,46 +0,0 @@
-const { src, dest, parallel } = require('gulp');
-const react = require('gulp-react');
-const concat = require('gulp-concat');
-const uglify = require('gulp-uglify');
-const babel = require('gulp-babel');
-
-function dev() {
-  return (
-    src(['./src/react-apexcharts.jsx'])
-      .pipe(react({
-        es6module: true
-      }))
-      .pipe(concat('react-apexcharts.js'))
-      .pipe(dest('./dist/'))
-  );
-}
-
-function prod() {
-  return (
-    src(['./src/react-apexcharts.jsx'])
-      .pipe(react({
-        es6module: true
-      }))
-      .pipe(babel({
-        presets: ['es2015', 'react'],
-        plugins: ['transform-object-rest-spread']
-      }))
-      .pipe(concat('react-apexcharts.min.js'))
-      .pipe(uglify())
-      .pipe(dest('./dist/'))
-  );
-}
-
-function types() {
-  return (
-    src(['./types/react-apexcharts.d.ts'])
-      .pipe(dest('./dist/'))
-  );
-}
-
-const prodBuild = parallel(prod, types);
-const devBuild = parallel(dev, types);
-
-exports.build = prodBuild;
-exports.devBuild = devBuild;
-exports.default = prodBuild;

package/jest.config.js

@@ -1,11 +0,0 @@
-// For a detailed explanation regarding each configuration property, visit:
-// https://jestjs.io/docs/en/configuration.html
-
-module.exports = {
-  clearMocks: true,
-  testEnvironment: "jest-environment-jsdom",
-  testPathIgnorePatterns: [
-    "/node_modules/",
-    "/example/"
-  ],
-};

package/rollup.config.js

@@ -1,29 +0,0 @@
-import babel from 'rollup-plugin-babel';
-import resolve from 'rollup-plugin-node-resolve';
-import uglify from 'rollup-plugin-uglify'
-
-let pluginOptions = [
-  resolve({
-    browser: true
-  }),
-  babel({
-    exclude: 'node_modules/**'
-  }),
-  uglify()
-];
-
-module.exports = {
-  input: './src/react-apexcharts.jsx',
-  output: [{
-    name: 'ReactApexChart', 
-    file: 'dist/react-apexcharts.iife.min.js',
-    format: 'iife',
-    globals: {
-      react: "React",
-      apexcharts: "ApexCharts",
-      'prop-types': "PropTypes"
-    }
-  }],
-  external: ['react', 'apexcharts', 'prop-types'],
-  plugins: pluginOptions
-}

package/src/react-apexcharts.jsx

@@ -1,148 +0,0 @@
-import ApexCharts from 'apexcharts/dist/apexcharts.common'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-window.ApexCharts = ApexCharts
-
-export default class Charts extends Component {
-  constructor (props) {
-    super(props)
-    if (React.createRef) {
-      this.chartRef = React.createRef()
-    } else {
-      this.setRef = el => this.chartRef = el
-    }
-    this.chart = null
-  }
-
-  render () {
-    const { type, height, width, series, options, ...props } = this.props
-    return React.createElement('div', {
-      ref: React.createRef
-        ? this.chartRef
-        : this.setRef,
-      ...props
-    })
-  }
-
-  componentDidMount () {
-    const current = React.createRef ? this.chartRef.current : this.chartRef
-    this.chart = new ApexCharts(current, this.getConfig())
-    this.chart.render()
-  }
-
-  getConfig () {
-    const { type, height, width, series, options } = this.props
-    const newOptions = {
-      chart: {
-        type,
-        height,
-        width
-      },
-      series
-    }
-
-    return this.extend(options, newOptions)
-  }
-
-  isObject(item) {
-    return (
-      item && typeof item === 'object' && !Array.isArray(item) && item != null
-    )
-  }
-
-  extend (target, source) {
-    if (typeof Object.assign !== 'function') {
-      (function () {
-        Object.assign = function (target) {
-          // We must check against these specific cases.
-          if (target === undefined || target === null) {
-            throw new TypeError('Cannot convert undefined or null to object')
-          }
-
-          let output = Object(target)
-          for (let index = 1; index < arguments.length; index++) {
-            let source = arguments[index]
-            if (source !== undefined && source !== null) {
-              for (let nextKey in source) {
-                if (source.hasOwnProperty(nextKey)) {
-                  output[nextKey] = source[nextKey]
-                }
-              }
-            }
-          }
-          return output
-        }
-      })()
-    }
-
-    let output = Object.assign({}, target)
-    if (this.isObject(target) && this.isObject(source)) {
-      Object.keys(source).forEach((key) => {
-        if (this.isObject(source[key])) {
-          if (!(key in target)) {
-            Object.assign(output, {
-              [key]: source[key]
-            })
-          } else {
-            output[key] = this.extend(target[key], source[key])
-          }
-        } else {
-          Object.assign(output, {
-            [key]: source[key]
-          })
-        }
-      })
-    }
-    return output
-  }
-
-  componentDidUpdate (prevProps) {
-    if (!this.chart) return null
-    const { options, series, height, width } = 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 (
-      prevOptions !== currentOptions ||
-      prevSeries !== currentSeries ||
-      height !== prevProps.height ||
-      width !== prevProps.width
-    ) {
-      if (prevSeries === currentSeries) {
-        // series has not changed, but options or size have changed
-        this.chart.updateOptions(this.getConfig())
-      } else if (
-        prevOptions === currentOptions &&
-        height === prevProps.height &&
-        width === prevProps.width
-      ) {
-        // options or size have not changed, just the series has changed
-        this.chart.updateSeries(series)
-      } else {
-        // both might be changed
-        this.chart.updateOptions(this.getConfig())
-      }
-    }
-  }
-
-  componentWillUnmount () {
-    if (this.chart && typeof this.chart.destroy === 'function') this.chart.destroy()
-  }
-}
-
-Charts.propTypes = {
-  type: PropTypes.string.isRequired,
-  width: PropTypes.any,
-  height: PropTypes.any,
-  series: PropTypes.array.isRequired,
-  options: PropTypes.object.isRequired
-}
-
-Charts.defaultProps = {
-  type: 'line',
-  width: '100%',
-  height: 'auto'
-}

package/src/react-apexcharts.test.js

@@ -1,20 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import Chart from './react-apexcharts.jsx'
-
-const props = {
-  options: {
-    xaxis: {
-      categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    }
-  },
-  series: [{
-    data: [30, 40, 25, 50, 49, 21, 70, 51]
-  }],
-}
-
-it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(<Chart {...props}/>, div)
-  ReactDOM.unmountComponentAtNode(div);
-})