@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/graphs/circleNested/circleNested.js

@@ -1,278 +1,232 @@
-'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\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: 2;\n    //stroke-linecap: butt;\n    stroke-linecap: round;\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\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\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: 2;\n    //stroke-linecap: butt;\n    stroke-linecap: round;\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\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']);
-
-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 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) { (0, _defineProperty2["default"])(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 _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);
-
+var StyledCircleDonut = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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: 2;\n    //stroke-linecap: butt;\n    stroke-linecap: round;\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\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"])));
 var circleList = [{
-    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
+  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
 }, {
-    d: "M18 6.0633691856671295 a 11.93663081433287 11.93663081433287 0 0 1 0 23.87326162866574 a 11.93663081433287 11.93663081433287 0 0 1 0 -23.87326162866574",
-    c: 75
+  d: "M18 6.0633691856671295 a 11.93663081433287 11.93663081433287 0 0 1 0 23.87326162866574 a 11.93663081433287 11.93663081433287 0 0 1 0 -23.87326162866574",
+  c: 75
 }, {
-    d: "M18 10.042246123778087 a 7.957753876221913 7.957753876221913 0 0 1 0 15.915507752443826 a 7.957753876221913 7.957753876221913 0 0 1 0 -15.915507752443826",
-    c: 50
+  d: "M18 10.042246123778087 a 7.957753876221913 7.957753876221913 0 0 1 0 15.915507752443826 a 7.957753876221913 7.957753876221913 0 0 1 0 -15.915507752443826",
+  c: 50
 }, {
-    d: "M18 14.021123061889043 a 3.9788769381109566 3.9788769381109566 0 0 1 0 7.957753876221913 a 3.9788769381109566 3.9788769381109566 0 0 1 0 -7.957753876221913",
-    c: 25
+  d: "M18 14.021123061889043 a 3.9788769381109566 3.9788769381109566 0 0 1 0 7.957753876221913 a 3.9788769381109566 3.9788769381109566 0 0 1 0 -7.957753876221913",
+  c: 25
 }];
-
-var CircleNested = function (_Component) {
-    _inherits(CircleNested, _Component);
-
-    function CircleNested(props) {
-        _classCallCheck(this, CircleNested);
-
-        var _this = _possibleConstructorReturn(this, (CircleNested.__proto__ || Object.getPrototypeOf(CircleNested)).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) {
-            //console.log('onMouseOut ==', e.target.getAttribute('idx'));
-            _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 = [];
-            var valueArr = _this.props.data.data.values || [];
-
-            if (animate) {
-
-                var highestValue = 0;
-                if (_this.props.data.data && _this.props.data.data.total > 0) {
-                    var totalMatched = false;
-                    valueArr = valueArr.map(function (dataItem, idx) {
-                        if (idx === 0) {
-                            highestValue = dataItem.data;
-                        } else {
-                            highestValue = dataItem.data > highestValue ? dataItem.data : highestValue;
-                        }
-                        if (dataItem.data === _this.props.data.data.total) {
-                            totalMatched = true;
-                        }
-
-                        return _extends({}, dataItem, { mainIndex: idx });
-                    });
-
-                    // valueArr.sort((a,b)=>{
-                    //     return b.data-a.data
-                    // })
-
-                    highestValue = totalMatched ? _this.props.data.data.total : highestValue * 110 / 100;
-                }
-
-                percentDataArr = valueArr.map(function (item, idx) {
-                    return !highestValue > 0 ? 0 : item.data / highestValue * 100;
-                });
+var CircleNested = /*#__PURE__*/function (_Component) {
+  function CircleNested(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CircleNested);
+    _this = _callSuper(this, CircleNested, [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) {
+      //console.log('onMouseOut ==', e.target.getAttribute('idx'));
+      _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 = [];
+      var valueArr = _this.props.data.data.values || [];
+      if (animate) {
+        var highestValue = 0;
+        if (_this.props.data.data && _this.props.data.data.total > 0) {
+          var totalMatched = false;
+          valueArr = valueArr.map(function (dataItem, idx) {
+            if (idx === 0) {
+              highestValue = dataItem.data;
             } else {
-                percentDataArr = [0, 0, 0];
+              highestValue = dataItem.data > highestValue ? dataItem.data : highestValue;
             }
-
-            var graphTitleName = _this.props.data && _this.props.data.data && _this.props.data.data.name ? _this.props.data.data.name : new Date().getTime() + '';
-
-            return _react2.default.createElement(
-                StyledCircleDonut,
-                _extends({}, _this.props, { className: 'circle-donut',
-                    onClick: function onClick() {
-                        _this.setState({
-                            // percentDataArr : [ 100 , 75, 10]
-                        });
-                    }
-                }),
-                _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-nested-color' + idx, id: graphTitleName + 'gradient-nested-color' + idx,
-                                    x1: '0%', y1: '0%', x2: '53%', y2: '7%'
-                                    //x1="2.15968" y1="101.504" x2="46.8631" y2="106.505" gradientUnits="userSpaceOnUse"
-                                },
-                                _react2.default.createElement('stop', { offset: '0%', stopColor: item[1] }),
-                                _react2.default.createElement('stop', { offset: '100%', stopColor: item[0] })
-                            );
-                        }) : null
-                    ),
-                    _react2.default.createElement('circle', { className: 'placeholder-base', idx: -1, cx: '18', cy: '18', r: '15.9155', fill: 'transparent',
-                        onMouseOver: function onMouseOver(e) {
-                            _this.hightlightme(e);
-                        },
-                        onMouseOut: function onMouseOut(e) {
-                            _this.onMouseOut(e);
-                        },
-                        onMouseMove: function onMouseMove(e) {
-                            _this.onMouseMove(e);
-                        }
-                    }),
-                    valueArr.map(function (item, idx) {
-                        return percentDataArr[idx] > -1 && _react2.default.createElement(
-                            _react2.default.Fragment,
-                            { key: graphTitleName + 'circle-fragment' + idx },
-                            _react2.default.createElement('path', { className: 'circle base',
-                                idx: idx,
-                                key: graphTitleName + 'circle-base' + idx,
-                                strokeDasharray: circleList[idx].c + ", " + circleList[idx].c,
-                                d: circleList[idx].d,
-                                onMouseOver: function onMouseOver(e) {
-                                    _this.hightlightme(e);
-                                },
-                                onMouseOut: function onMouseOut(e) {
-                                    _this.onMouseOut(e);
-                                },
-                                onMouseMove: function onMouseMove(e) {
-                                    _this.onMouseMove(e);
-                                }
-                            }),
-                            _react2.default.createElement('path', { idx: idx,
-                                key: graphTitleName + 'circle-main' + idx,
-                                strokeDasharray: "" + circleList[idx].c * percentDataArr[idx] / 100 + ", " + circleList[idx].c
-                                //stroke={!percentDataArr[idx] >0 || !this.props.data.data.total > 0 ? "url(#"+'gradient-a-color'+idx +")": "url(#"+'gradient-a-color'+idx +")"}
-                                , stroke: "url(#" + graphTitleName + 'gradient-nested-color' + item.mainIndex + ")",
-
-                                className: percentDataArr[idx] == 0 || _this.props.data.data.total === 0 ? "circle main stroke-transparent" : "circle main",
-
-                                d: circleList[idx].d,
-                                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 && valueArr.map(function (item, idx) {
-                    return _react2.default.createElement(
-                        'div',
-                        { key: graphTitleName + 'display-info' + idx, className: activeInfo === idx ? "active display-info" : "display-info" },
-                        _react2.default.createElement(
-                            'span',
-                            { style: {
-                                    color: typeof item.mainIndex === 'number' ? graphColors[item.mainIndex][0] : graphColors[idx][0]
-                                } },
-                            item.data
-                        ),
-                        _react2.default.createElement(
-                            'div',
-                            null,
-                            item.name
-                        )
-                    );
-                })
-            );
-        };
-
-        _this.state = {
-            animate: false,
-            activeInfo: null
-        };
-        return _this;
-    }
-
-    return CircleNested;
+            if (dataItem.data === _this.props.data.data.total) {
+              totalMatched = true;
+            }
+            return _objectSpread(_objectSpread({}, dataItem), {}, {
+              mainIndex: idx
+            });
+          });
+
+          // valueArr.sort((a,b)=>{
+          //     return b.data-a.data
+          // })
+
+          highestValue = totalMatched ? _this.props.data.data.total : highestValue * 110 / 100;
+        }
+        percentDataArr = valueArr.map(function (item, idx) {
+          return !highestValue > 0 ? 0 : item.data / highestValue * 100;
+        });
+      } else {
+        percentDataArr = [0, 0, 0];
+      }
+      var graphTitleName = _this.props.data && _this.props.data.data && _this.props.data.data.name ? _this.props.data.data.name : new Date().getTime() + '';
+      return /*#__PURE__*/_react["default"].createElement(StyledCircleDonut, (0, _extends2["default"])({}, _this.props, {
+        className: "circle-donut",
+        onClick: function onClick() {
+          _this.setState({
+            // percentDataArr : [ 100 , 75, 10]
+          });
+        }
+      }), /*#__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-nested-color' + idx,
+          id: graphTitleName + 'gradient-nested-color' + idx,
+          x1: "0%",
+          y1: "0%",
+          x2: "53%",
+          y2: "7%"
+          //x1="2.15968" y1="101.504" x2="46.8631" y2="106.505" gradientUnits="userSpaceOnUse"
+        }, /*#__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("circle", {
+        className: "placeholder-base",
+        idx: -1,
+        cx: "18",
+        cy: "18",
+        r: "15.9155",
+        fill: "transparent",
+        onMouseOver: function onMouseOver(e) {
+          _this.hightlightme(e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          _this.onMouseOut(e);
+        },
+        onMouseMove: function onMouseMove(e) {
+          _this.onMouseMove(e);
+        }
+      }), valueArr.map(function (item, idx) {
+        return percentDataArr[idx] > -1 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          key: graphTitleName + 'circle-fragment' + idx
+        }, /*#__PURE__*/_react["default"].createElement("path", {
+          className: "circle base",
+          idx: idx,
+          key: graphTitleName + 'circle-base' + idx,
+          strokeDasharray: circleList[idx].c + ", " + circleList[idx].c,
+          d: circleList[idx].d,
+          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("path", {
+          idx: idx,
+          key: graphTitleName + 'circle-main' + idx,
+          strokeDasharray: "" + circleList[idx].c * percentDataArr[idx] / 100 + ", " + circleList[idx].c
+          //stroke={!percentDataArr[idx] >0 || !this.props.data.data.total > 0 ? "url(#"+'gradient-a-color'+idx +")": "url(#"+'gradient-a-color'+idx +")"}
+          ,
+          stroke: "url(#" + graphTitleName + 'gradient-nested-color' + item.mainIndex + ")",
+          className: percentDataArr[idx] == 0 || _this.props.data.data.total === 0 ? "circle main stroke-transparent" : "circle main",
+          d: circleList[idx].d,
+          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 && valueArr.map(function (item, idx) {
+        return /*#__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: typeof item.mainIndex === 'number' ? graphColors[item.mainIndex][0] : graphColors[idx][0]
+          }
+        }, item.data), /*#__PURE__*/_react["default"].createElement("div", null, item.name));
+      }));
+    });
+    _this.state = {
+      animate: false,
+      activeInfo: null
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(CircleNested, _Component);
+  return (0, _createClass2["default"])(CircleNested);
 }(_react.Component);
-
 CircleNested.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
 };
-
 CircleNested.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 = CircleNested;
+var _default = exports["default"] = CircleNested;