@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/graphs/circleDonut/circleDonut.js

@@ -1,242 +1,190 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _templateObject = _taggedTemplateLiteral(['\n\n// code reference \n// https://codepen.io/sergiopedercini/pen/aWawra\n// https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705\n\nposition: relative;\n.circular-chart {\n    display: block;\n    margin: 0px auto;\n    max-width: 200px;\n    max-height: 250px;\n  }\n  \n  .circle {\n    fill: none;\n    stroke-width: ', ' ;\n    stroke-linecap: ', ' ;\n\n    &.base{\n        stroke: #121D29;\n    }\n    \n    &.main{\n        //animation: progress 1s ease-out forwards;\n       transition: all 1s ease;\n       opacity:1;\n       &.stroke-transparent{\n        opacity:0;\n       }\n    }\n\n  }\n  \n  @keyframes progress {\n    0% {\n      stroke-dasharray: 0 100;\n    }\n  }\n\n\n  .display-info {\n    color: #fff;\n    width: auto;\n    display: inline-block; \n    text-align: center;\n    position: absolute;\n    top: 75px;\n    left: 150px;\n    font-size: 30px;\n    font-family: \'SFUIText-Medium\';\n    transform: translate(-50%, 0px );\n    opacity: 0;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%,-50%);\n    & > div{\n        font-size: 10px;\n        font-family: \'SFUIText-Regular\';\n        margin-top: 5px;\n        }\n    }\n\n    .active.display-info {\n        opacity: 1;\n        display: inline-block;\n    }\n'], ['\n\n// code reference \n// https://codepen.io/sergiopedercini/pen/aWawra\n// https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705\n\nposition: relative;\n.circular-chart {\n    display: block;\n    margin: 0px auto;\n    max-width: 200px;\n    max-height: 250px;\n  }\n  \n  .circle {\n    fill: none;\n    stroke-width: ', ' ;\n    stroke-linecap: ', ' ;\n\n    &.base{\n        stroke: #121D29;\n    }\n    \n    &.main{\n        //animation: progress 1s ease-out forwards;\n       transition: all 1s ease;\n       opacity:1;\n       &.stroke-transparent{\n        opacity:0;\n       }\n    }\n\n  }\n  \n  @keyframes progress {\n    0% {\n      stroke-dasharray: 0 100;\n    }\n  }\n\n\n  .display-info {\n    color: #fff;\n    width: auto;\n    display: inline-block; \n    text-align: center;\n    position: absolute;\n    top: 75px;\n    left: 150px;\n    font-size: 30px;\n    font-family: \'SFUIText-Medium\';\n    transform: translate(-50%, 0px );\n    opacity: 0;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%,-50%);\n    & > div{\n        font-size: 10px;\n        font-family: \'SFUIText-Regular\';\n        margin-top: 5px;\n        }\n    }\n\n    .active.display-info {\n        opacity: 1;\n        display: inline-block;\n    }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var propTypes = {};
-
-var StyledCircleDonut = _styledComponents2.default.div(_templateObject, function (props) {
-    return props.data.graph_type === 'donutThin' ? '0.8' : props.data.graph_type === 'donutThick' ? '7.5' : '2.5';
+var StyledCircleDonut = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n\n// code reference \n// https://codepen.io/sergiopedercini/pen/aWawra\n// https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705\n\nposition: relative;\n.circular-chart {\n    display: block;\n    margin: 0px auto;\n    max-width: 200px;\n    max-height: 250px;\n  }\n  \n  .circle {\n    fill: none;\n    stroke-width: ", " ;\n    stroke-linecap: ", " ;\n\n    &.base{\n        stroke: #121D29;\n    }\n    \n    &.main{\n        //animation: progress 1s ease-out forwards;\n       transition: all 1s ease;\n       opacity:1;\n       &.stroke-transparent{\n        opacity:0;\n       }\n    }\n\n  }\n  \n  @keyframes progress {\n    0% {\n      stroke-dasharray: 0 100;\n    }\n  }\n\n\n  .display-info {\n    color: #fff;\n    width: auto;\n    display: inline-block; \n    text-align: center;\n    position: absolute;\n    top: 75px;\n    left: 150px;\n    font-size: 30px;\n    font-family: 'SFUIText-Medium';\n    transform: translate(-50%, 0px );\n    opacity: 0;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%,-50%);\n    & > div{\n        font-size: 10px;\n        font-family: 'SFUIText-Regular';\n        margin-top: 5px;\n        }\n    }\n\n    .active.display-info {\n        opacity: 1;\n        display: inline-block;\n    }\n"])), function (props) {
+  return props.data.graph_type === 'donutThin' ? '0.8' : props.data.graph_type === 'donutThick' ? '7.5' : '2.5';
 }, function (props) {
-    return props.data.graph_type === 'donutThin' || props.data.graph_type === 'donutThick' ? 'butt' : 'round';
+  return props.data.graph_type === 'donutThin' || props.data.graph_type === 'donutThick' ? 'butt' : 'round';
 });
-
 var circleList = {
-    donutDefault: {
-        d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831",
-        c: 100
-    },
-
-    donutThin: {
-        d: "M18 2.0845  a 15.9155 15.9155 0 0 1 0 31.831  a 15.9155 15.9155 0 0 1 0 -31.831",
-        c: 100
-    },
-    donutThick: {
-        d: "M18 4.949283642996061 a 13.050716357003939 13.050716357003939 0 0 1 0 26.101432714007878 a 13.050716357003939 13.050716357003939 0 0 1 0 -26.101432714007878",
-        c: 82.0330743
-    }
+  donutDefault: {
+    d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831",
+    c: 100
+  },
+  donutThin: {
+    d: "M18 2.0845  a 15.9155 15.9155 0 0 1 0 31.831  a 15.9155 15.9155 0 0 1 0 -31.831",
+    c: 100
+  },
+  donutThick: {
+    d: "M18 4.949283642996061 a 13.050716357003939 13.050716357003939 0 0 1 0 26.101432714007878 a 13.050716357003939 13.050716357003939 0 0 1 0 -26.101432714007878",
+    c: 82.0330743
+  }
 };
-
-var CircleDonut = function (_Component) {
-    _inherits(CircleDonut, _Component);
-
-    function CircleDonut(props) {
-        _classCallCheck(this, CircleDonut);
-
-        var _this = _possibleConstructorReturn(this, (CircleDonut.__proto__ || Object.getPrototypeOf(CircleDonut)).call(this, props));
-
-        _this.componentDidMount = function () {
-            setTimeout(function () {
-
-                _this.setState({
-                    animate: true
-                });
-            }, 1000);
-        };
-
-        _this.hightlightme = function (e) {
-            _this.setState({
-                activeInfo: parseInt(e.target.getAttribute('idx'))
-            });
-        };
-
-        _this.onMouseOut = function (e) {
-            _this.setState({
-                activeInfo: null
-            });
-        };
-
-        _this.onMouseMove = function (e) {
-            //console.log('onMouseMove >>>', e.target.getAttribute('idx'));
-        };
-
-        _this.render = function () {
-            var graphColors = _this.props.graphColors;
-            var _this$state = _this.state,
-                animate = _this$state.animate,
-                activeInfo = _this$state.activeInfo;
-
-
-            var percentDataArr = [];
-
-            if (animate) {
-                percentDataArr = _this.props.data.data.values.map(function (item, idx) {
-                    return !_this.props.data.data.total > 0 ? 0 : item.data / _this.props.data.data.total * 100;
-                });
-
-                percentDataArr = _this.props.data.data.values.map(function (item, idx) {
-
-                    var perValue = 0;
-                    for (var i = 0; i <= idx; i++) {
-                        perValue = perValue + percentDataArr[i];
-                    }
-                    return perValue;
-                });
-            } else {
-                percentDataArr = [0, 0, 0];
-            }
-
-            var pathD = _this.props.data.graph_type && _this.props.data.graph_type != '' ? circleList[_this.props.data.graph_type].d : circleList['donutDefault'].d;
-            var circleCircumference = _this.props.data.graph_type && _this.props.data.graph_type != '' ? circleList[_this.props.data.graph_type].c : circleList['donutDefault'].c;
-            var graphTitleName = _this.props.data && _this.props.data.data && _this.props.data.data.name ? _this.props.data.data.name : new Date().getTime() + '';
-            graphTitleName = graphTitleName.replaceAll(" ", '');
-
-            return _react2.default.createElement(
-                StyledCircleDonut,
-                _extends({}, _this.props, { className: 'circle-donut',
-                    onClick: function onClick() {}
-                }),
-                _react2.default.createElement(
-                    'svg',
-                    { viewBox: '0 0 36 36', className: 'circular-chart' },
-                    _react2.default.createElement(
-                        'defs',
-                        null,
-                        graphColors ? graphColors.map(function (item, idx) {
-                            return _react2.default.createElement(
-                                'linearGradient',
-                                { key: graphTitleName + 'gradient-color' + idx, id: 'gradient-color' + graphTitleName + idx, x1: '0%', y1: '0%', x2: '53%', y2: '7%' },
-                                _react2.default.createElement('stop', { offset: '0%', stopColor: item[1] }),
-                                _react2.default.createElement('stop', { offset: '100%', stopColor: item[0] })
-                            );
-                        }) : null
-                    ),
-                    _react2.default.createElement('path', { className: 'circle base'
-                        //stroke-dasharray="100, 100"
-                        , strokeDasharray: circleCircumference + ", " + circleCircumference,
-                        d: pathD
-
-                    }),
-                    _this.props.data.data.values.map(function (item, idx) {
-
-                        idx = _this.props.data.data.values.length - 1 - idx;
-                        return percentDataArr[idx] > -1 && _react2.default.createElement('path', { idx: idx,
-                            key: graphTitleName + 'path' + idx,
-                            className: percentDataArr[idx] == 0 || _this.props.data.data.total === 0 ? "circle main stroke-transparent" : "circle main"
-                            //stroke-dasharray={""+ percentDataArr[idx] +", 100"}
-                            //stroke={!percentDataArr[idx] >0 || !this.props.data.data.total > 0 ? "transparent" : ""+graphColors[idx][0]} //"url(#gradient-color"+idx +")"
-                            , stroke: "url(#gradient-color" + graphTitleName + idx + ")",
-                            strokeDasharray: "" + circleCircumference * percentDataArr[idx] / 100 + ", " + circleCircumference,
-
-                            d: pathD,
-
-                            onMouseOver: function onMouseOver(e) {
-                                _this.hightlightme(e);
-                            },
-                            onMouseOut: function onMouseOut(e) {
-                                _this.onMouseOut(e);
-                            },
-                            onMouseMove: function onMouseMove(e) {
-                                _this.onMouseMove(e);
-                            }
-                        });
-                    })
-                ),
-                _react2.default.createElement(
-                    'div',
-                    { className: activeInfo === null ? "active display-info" : "display-info" },
-                    _react2.default.createElement(
-                        'span',
-                        { style: {
-                                color: '#FFF'
-                            } },
-                        _this.props.data.data.total
-                    ),
-                    _react2.default.createElement(
-                        'div',
-                        null,
-                        _this.props.valueSub
-                    )
-                ),
-                _this.props.data.data.total > 0 && _this.props.data.data.values.map(function (item, idx) {
-                    return percentDataArr[idx] > 0 && _react2.default.createElement(
-                        'div',
-                        { key: graphTitleName + 'display-info' + idx, className: activeInfo === idx ? "active display-info" : "display-info" },
-                        _react2.default.createElement(
-                            'span',
-                            { style: {
-                                    color: graphColors[idx][0]
-                                } },
-                            item.data
-                        ),
-                        _react2.default.createElement(
-                            'div',
-                            null,
-                            item.name
-                        )
-                    );
-                })
-            );
-        };
-
-        _this.state = {
-            animate: false,
-            activeInfo: null
-        };
-        return _this;
-    }
-
-    return CircleDonut;
+var CircleDonut = /*#__PURE__*/function (_Component) {
+  function CircleDonut(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CircleDonut);
+    _this = _callSuper(this, CircleDonut, [props]);
+    (0, _defineProperty2["default"])(_this, "componentDidMount", function () {
+      setTimeout(function () {
+        _this.setState({
+          animate: true
+        });
+      }, 1000);
+    });
+    (0, _defineProperty2["default"])(_this, "hightlightme", function (e) {
+      _this.setState({
+        activeInfo: parseInt(e.target.getAttribute('idx'))
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseOut", function (e) {
+      _this.setState({
+        activeInfo: null
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseMove", function (e) {
+      //console.log('onMouseMove >>>', e.target.getAttribute('idx'));
+    });
+    (0, _defineProperty2["default"])(_this, "render", function () {
+      var graphColors = _this.props.graphColors;
+      var _this$state = _this.state,
+        animate = _this$state.animate,
+        activeInfo = _this$state.activeInfo;
+      var percentDataArr = [];
+      if (animate) {
+        percentDataArr = _this.props.data.data.values.map(function (item, idx) {
+          return !_this.props.data.data.total > 0 ? 0 : item.data / _this.props.data.data.total * 100;
+        });
+        percentDataArr = _this.props.data.data.values.map(function (item, idx) {
+          var perValue = 0;
+          for (var i = 0; i <= idx; i++) {
+            perValue = perValue + percentDataArr[i];
+          }
+          return perValue;
+        });
+      } else {
+        percentDataArr = [0, 0, 0];
+      }
+      var pathD = _this.props.data.graph_type && _this.props.data.graph_type != '' ? circleList[_this.props.data.graph_type].d : circleList['donutDefault'].d;
+      var circleCircumference = _this.props.data.graph_type && _this.props.data.graph_type != '' ? circleList[_this.props.data.graph_type].c : circleList['donutDefault'].c;
+      var graphTitleName = _this.props.data && _this.props.data.data && _this.props.data.data.name ? _this.props.data.data.name : new Date().getTime() + '';
+      graphTitleName = graphTitleName.replaceAll(" ", '');
+      return /*#__PURE__*/_react["default"].createElement(StyledCircleDonut, (0, _extends2["default"])({}, _this.props, {
+        className: "circle-donut",
+        onClick: function onClick() {}
+      }), /*#__PURE__*/_react["default"].createElement("svg", {
+        viewBox: "0 0 36 36",
+        className: "circular-chart"
+      }, /*#__PURE__*/_react["default"].createElement("defs", null, graphColors ? graphColors.map(function (item, idx) {
+        return /*#__PURE__*/_react["default"].createElement("linearGradient", {
+          key: graphTitleName + 'gradient-color' + idx,
+          id: 'gradient-color' + graphTitleName + idx,
+          x1: "0%",
+          y1: "0%",
+          x2: "53%",
+          y2: "7%"
+        }, /*#__PURE__*/_react["default"].createElement("stop", {
+          offset: "0%",
+          stopColor: item[1]
+        }), /*#__PURE__*/_react["default"].createElement("stop", {
+          offset: "100%",
+          stopColor: item[0]
+        }));
+      }) : null), /*#__PURE__*/_react["default"].createElement("path", {
+        className: "circle base"
+        //stroke-dasharray="100, 100"
+        ,
+        strokeDasharray: circleCircumference + ", " + circleCircumference,
+        d: pathD
+      }), _this.props.data.data.values.map(function (item, idx) {
+        idx = _this.props.data.data.values.length - 1 - idx;
+        return percentDataArr[idx] > -1 && /*#__PURE__*/_react["default"].createElement("path", {
+          idx: idx,
+          key: graphTitleName + 'path' + idx,
+          className: percentDataArr[idx] == 0 || _this.props.data.data.total === 0 ? "circle main stroke-transparent" : "circle main"
+          //stroke-dasharray={""+ percentDataArr[idx] +", 100"}
+          //stroke={!percentDataArr[idx] >0 || !this.props.data.data.total > 0 ? "transparent" : ""+graphColors[idx][0]} //"url(#gradient-color"+idx +")"
+          ,
+          stroke: "url(#gradient-color" + graphTitleName + idx + ")",
+          strokeDasharray: "" + circleCircumference * percentDataArr[idx] / 100 + ", " + circleCircumference,
+          d: pathD,
+          onMouseOver: function onMouseOver(e) {
+            _this.hightlightme(e);
+          },
+          onMouseOut: function onMouseOut(e) {
+            _this.onMouseOut(e);
+          },
+          onMouseMove: function onMouseMove(e) {
+            _this.onMouseMove(e);
+          }
+        });
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: activeInfo === null ? "active display-info" : "display-info"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          color: '#FFF'
+        }
+      }, _this.props.data.data.total), /*#__PURE__*/_react["default"].createElement("div", null, _this.props.valueSub)), _this.props.data.data.total > 0 && _this.props.data.data.values.map(function (item, idx) {
+        return percentDataArr[idx] > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+          key: graphTitleName + 'display-info' + idx,
+          className: activeInfo === idx ? "active display-info" : "display-info"
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          style: {
+            color: graphColors[idx][0]
+          }
+        }, item.data), /*#__PURE__*/_react["default"].createElement("div", null, item.name));
+      }));
+    });
+    _this.state = {
+      animate: false,
+      activeInfo: null
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(CircleDonut, _Component);
+  return (0, _createClass2["default"])(CircleDonut);
 }(_react.Component);
-
 CircleDonut.propTypes = {
-    data: _propTypes2.default.shape({
-        graph_name: _propTypes2.default.string,
-        graph_type: _propTypes2.default.string,
-        data: _propTypes2.default.shape({
-            total: _propTypes2.default.number.isRequired,
-            name: _propTypes2.default.string,
-            values: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-                data: _propTypes2.default.number.isRequired
-            }).isRequired)
-        })
-    }).isRequired,
-    theme: _propTypes2.default.oneOf(['light', 'dark']),
-    graphColors: _propTypes2.default.array,
-    graphPlaceholder: _propTypes2.default.bool,
-    valueSub: _propTypes2.default.string
+  data: _propTypes["default"].shape({
+    graph_name: _propTypes["default"].string,
+    graph_type: _propTypes["default"].string,
+    data: _propTypes["default"].shape({
+      total: _propTypes["default"].number.isRequired,
+      name: _propTypes["default"].string,
+      values: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+        data: _propTypes["default"].number.isRequired
+      }).isRequired)
+    })
+  }).isRequired,
+  theme: _propTypes["default"].oneOf(['light', 'dark']),
+  graphColors: _propTypes["default"].array,
+  graphPlaceholder: _propTypes["default"].bool,
+  valueSub: _propTypes["default"].string
 };
-
 CircleDonut.defaultProps = {
-    theme: 'light',
-    graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']]
+  theme: 'light',
+  graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']]
 };
-
-exports.default = CircleDonut;
+var _default = exports["default"] = CircleDonut;