@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/graphs/circleNested/circleNested.story.js

@@ -1,119 +1,94 @@
-'use strict';
+"use strict";
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../../_helpers/story-helpers');
-
-var _components = require('../../../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('CircleNested').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'div',
-          { style: { width: '295px', height: '295px' } },
-          _react2.default.createElement(_components.CircleNested, {
-            data: {
-              graph_name: 'circle-nested',
-              graph_type: '',
-              data: {
-                from_date: 1609698600000,
-                to_date: 1610389799000,
-                name: 'Ingest',
-                total: 10,
-                values: [{
-                  name: 'Finished',
-                  value: 'ingested',
-                  index: 1,
-                  data: 3,
-                  processed: 66
-                }, {
-                  name: 'In Progress',
-                  value: 'started',
-                  index: 2,
-                  data: 5,
-                  inprogress: 7
-                }, {
-                  name: 'Failed',
-                  value: 'failed',
-                  index: 4,
-                  data: 2,
-                  pending: 17
-                }]
-              }
-            },
-            graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
-            graphPlaceholder: false,
-            valueSub: 'Assets'
-          })
-        )
-      )
-    )
-  );
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../../_helpers/story-helpers");
+var _components = require("../../../../components");
+(0, _react2.storiesOf)('CircleNested').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '295px',
+      height: '295px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_components.CircleNested, {
+    data: {
+      graph_name: 'circle-nested',
+      graph_type: '',
+      data: {
+        from_date: 1609698600000,
+        to_date: 1610389799000,
+        name: 'Ingest',
+        total: 10,
+        values: [{
+          name: 'Finished',
+          value: 'ingested',
+          index: 1,
+          data: 3,
+          processed: 66
+        }, {
+          name: 'In Progress',
+          value: 'started',
+          index: 2,
+          data: 5,
+          inprogress: 7
+        }, {
+          name: 'Failed',
+          value: 'failed',
+          index: 4,
+          data: 2,
+          pending: 17
+        }]
+      }
+    },
+    graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
+    graphPlaceholder: false,
+    valueSub: 'Assets'
+  })))));
 });
-
-(0, _react3.storiesOf)('CircleNested').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Tag', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'div',
-          { style: { width: '295px', height: '295px' } },
-          _react2.default.createElement(_components.CircleNested, {
-            data: {
-              graph_name: 'circle-nested',
-              graph_type: '',
-              data: {
-                from_date: 1609698600000,
-                to_date: 1610389799000,
-                name: 'Ingest',
-                total: 10,
-                values: [{
-                  name: 'Finished',
-                  value: 'ingested',
-                  index: 1,
-                  data: 3,
-                  processed: 66
-                }, {
-                  name: 'In Progress',
-                  value: 'started',
-                  index: 2,
-                  data: 5,
-                  inprogress: 7
-                }, {
-                  name: 'Failed',
-                  value: 'failed',
-                  index: 4,
-                  data: 2,
-                  pending: 17
-                }]
-              }
-            },
-            graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
-            graphPlaceholder: false,
-            valueSub: 'Asset'
-          })
-        )
-      )
-    )
-  );
+(0, _react2.storiesOf)('CircleNested').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Tag",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '295px',
+      height: '295px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_components.CircleNested, {
+    data: {
+      graph_name: 'circle-nested',
+      graph_type: '',
+      data: {
+        from_date: 1609698600000,
+        to_date: 1610389799000,
+        name: 'Ingest',
+        total: 10,
+        values: [{
+          name: 'Finished',
+          value: 'ingested',
+          index: 1,
+          data: 3,
+          processed: 66
+        }, {
+          name: 'In Progress',
+          value: 'started',
+          index: 2,
+          data: 5,
+          inprogress: 7
+        }, {
+          name: 'Failed',
+          value: 'failed',
+          index: 4,
+          data: 2,
+          pending: 17
+        }]
+      }
+    },
+    graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
+    graphPlaceholder: false,
+    valueSub: 'Asset'
+  })))));
 });

package/atoms/graphs/circleNested/index.js

@@ -1,13 +1,9 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _circleNested = require('./circleNested');
-
-var _circleNested2 = _interopRequireDefault(_circleNested);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _circleNested2.default;
+exports["default"] = void 0;
+var _circleNested = _interopRequireDefault(require("./circleNested"));
+var _default = exports["default"] = _circleNested["default"];

package/atoms/graphs/pieChart/index.js

@@ -1,13 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _pieChart = require("./pieChart");
-
-var _pieChart2 = _interopRequireDefault(_pieChart);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _pieChart2.default;
+exports["default"] = void 0;
+var _pieChart = _interopRequireDefault(require("./pieChart"));
+var _default = exports["default"] = _pieChart["default"];

package/atoms/graphs/pieChart/pieChart.js

@@ -1,204 +1,175 @@
-'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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n    stroke: ', ';\n    stroke-width: 0;\n'], ['\n    stroke: ', ';\n    stroke-width: 0;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    display: block;\n    margin: 10px auto;\n'], ['\n    display: block;\n    margin: 10px auto;\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _tokens = require('@desynova-digital/tokens');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-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; }
-
-var PieChart = function (_React$Component) {
-    _inherits(PieChart, _React$Component);
-
-    function PieChart(props) {
-        _classCallCheck(this, PieChart);
-
-        var _this = _possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, props));
-
-        _this.generateData = function (data) {
-
-            var sectors = [];
-            var l = (typeof _this.props.width == 'string' ? 100 : _this.props.width) / 2;
-            var totalItems = data.total !== 0 ? data.total : 10;
-            var a = 0; // Angle
-            var aRad = 0; // Angle in Rad
-            var z = 0; // Size z
-            var x = 0; // Side x
-            var y = 0; // Side y
-            var X = 0; // SVG X coordinate
-            var Y = 0; // SVG Y coordinate
-            var R = 0; // Rotation
-            var aCalc = 0;
-            var arcSweep = 0;
-
-            data.values.map(function (item, key) {
-                var percent = (data.total != 0 ? item.data : 10) / totalItems;
-                a = 360 * percent;
-                aCalc = a > 180 ? 360 - a : a;
-                aRad = aCalc * Math.PI / 180;
-                z = Math.sqrt(2 * l * l - 2 * l * l * Math.cos(aRad));
-                if (aCalc <= 90) {
-                    x = l * Math.sin(aRad);
-                } else {
-                    x = l * Math.sin((180 - aCalc) * Math.PI / 180);
-                }
-
-                y = Math.sqrt(z * z - x * x);
-                Y = y;
-
-                if (a <= 180) {
-                    X = l + x;
-                    arcSweep = 0;
-                } else {
-                    X = l - x;
-                    arcSweep = 1;
-                }
-
-                sectors.push({
-                    percentage: percent,
-                    label: item.name,
-                    arcSweep: arcSweep,
-                    value: item.value,
-                    L: l,
-                    X: X,
-                    Y: Y,
-                    R: R
-                });
-
-                R = R + a;
-            });
-
-            return sectors;
-        };
-
-        _this.componentDidMount = function () {
-            var dataObj = _this.generateData(_this.props.data);
-            _this.setState({ dataObj: dataObj });
-        };
-
-        _this.state = {
-            dataObj: null
-        };
-        return _this;
-    }
-
-    _createClass(PieChart, [{
-        key: 'getColors',
-        value: function getColors(idx) {
-            var arr = ["completed", "rejected", "pending", "failed"];
-            return arr[idx];
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject, _templateObject2;
+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 PieChart = /*#__PURE__*/function (_React$Component) {
+  function PieChart(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, PieChart);
+    _this = _callSuper(this, PieChart, [props]);
+    (0, _defineProperty2["default"])(_this, "generateData", function (data) {
+      var sectors = [];
+      var l = (typeof _this.props.width == 'string' ? 100 : _this.props.width) / 2;
+      var totalItems = data.total !== 0 ? data.total : 10;
+      var a = 0; // Angle
+      var aRad = 0; // Angle in Rad
+      var z = 0; // Size z
+      var x = 0; // Side x
+      var y = 0; // Side y
+      var X = 0; // SVG X coordinate
+      var Y = 0; // SVG Y coordinate
+      var R = 0; // Rotation
+      var aCalc = 0;
+      var arcSweep = 0;
+      data.values.map(function (item, key) {
+        var percent = (data.total != 0 ? item.data : 10) / totalItems;
+        a = 360 * percent;
+        aCalc = a > 180 ? 360 - a : a;
+        aRad = aCalc * Math.PI / 180;
+        z = Math.sqrt(2 * l * l - 2 * l * l * Math.cos(aRad));
+        if (aCalc <= 90) {
+          x = l * Math.sin(aRad);
+        } else {
+          x = l * Math.sin((180 - aCalc) * Math.PI / 180);
         }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this2 = this;
-
-            var width = typeof this.props.width == 'string' ? 100 : this.props.width;
-
-            return _react2.default.createElement(
-                _react2.default.Fragment,
-                null,
-                this.state.dataObj ? _react2.default.createElement(
-                    GraphSVG,
-                    _extends({}, typeof this.props.width == 'string' ? "" : { "width": width }, typeof this.props.width == 'string' ? "" : { "height": this.props.height }, {
-                        viewBox: '0 0 ' + width + ' ' + this.props.height
-                    }),
-                    this.state.dataObj.map(function (data, index) {
-                        return data.percentage !== 1 ? _react2.default.createElement(StyledPath, _extends({}, _this2.props, {
-                            key: index,
-                            fill: _tokens.colors[_this2.props.theme].graph[_this2.getColors(index)],
-                            d: 'M' + data.L + ', ' + data.L + ' L' + data.L + ',0 A' + data.L + ',' + data.L + ' 1 ' + data.arcSweep + ',1 ' + data.X + ', ' + data.Y + ' z',
-                            transform: 'rotate(' + data.R + ', ' + data.L + ',' + data.L + ')'
-                        })) : _react2.default.createElement(StyledPath, _extends({}, _this2.props, {
-                            key: index,
-                            fill: _tokens.colors[_this2.props.theme].graph[_this2.getColors(index)],
-                            d: " \
+        y = Math.sqrt(z * z - x * x);
+        Y = y;
+        if (a <= 180) {
+          X = l + x;
+          arcSweep = 0;
+        } else {
+          X = l - x;
+          arcSweep = 1;
+        }
+        sectors.push({
+          percentage: percent,
+          label: item.name,
+          arcSweep: arcSweep,
+          value: item.value,
+          L: l,
+          X: X,
+          Y: Y,
+          R: R
+        });
+        R = R + a;
+      });
+      return sectors;
+    });
+    (0, _defineProperty2["default"])(_this, "componentDidMount", function () {
+      var dataObj = _this.generateData(_this.props.data);
+      _this.setState({
+        dataObj: dataObj
+      });
+    });
+    _this.state = {
+      dataObj: null
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(PieChart, _React$Component);
+  return (0, _createClass2["default"])(PieChart, [{
+    key: "getColors",
+    value: function getColors(idx) {
+      var arr = ["completed", "rejected", "pending", "failed"];
+      return arr[idx];
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var width = typeof this.props.width == 'string' ? 100 : this.props.width;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.state.dataObj ? /*#__PURE__*/_react["default"].createElement(GraphSVG, (0, _extends2["default"])({}, typeof this.props.width == 'string' ? "" : {
+        "width": width
+      }, typeof this.props.width == 'string' ? "" : {
+        "height": this.props.height
+      }, {
+        viewBox: "0 0 ".concat(width, " ").concat(this.props.height)
+      }), this.state.dataObj.map(function (data, index) {
+        return data.percentage !== 1 ? /*#__PURE__*/_react["default"].createElement(StyledPath, (0, _extends2["default"])({}, _this2.props, {
+          key: index,
+          fill: _tokens.colors[_this2.props.theme].graph[_this2.getColors(index)],
+          d: "M".concat(data.L, ", ").concat(data.L, " L").concat(data.L, ",0 A").concat(data.L, ",").concat(data.L, " 1 ").concat(data.arcSweep, ",1 ").concat(data.X, ", ").concat(data.Y, " z"),
+          transform: "rotate(".concat(data.R, ", ").concat(data.L, ",").concat(data.L, ")")
+        })) : /*#__PURE__*/_react["default"].createElement(StyledPath, (0, _extends2["default"])({}, _this2.props, {
+          key: index,
+          fill: _tokens.colors[_this2.props.theme].graph[_this2.getColors(index)],
+          d: " \
                                         M " + width / 2 + ", " + width / 2 + " \
                                         m -" + width / 2 + ", 0   \
                                         a " + width / 2 + "," + width / 2 + " 0 1,0 " + width / 2 * 2 + ",0  \
                                         a " + width / 2 + "," + width / 2 + " 0 1,0 -" + width / 2 * 2 + ",0  \
-                                        ", transform: 'rotate(' + data.R + ', ' + data.L + ',' + data.L + ')' }));
-                    }),
-                    this.props.type === 'donut' || this.props.type === 'donutThin' ? _react2.default.createElement('circle', { cx: width / 2, cy: width / 2, r: width / 2 * (this.props.type === 'donutThin' ? 0.97 : 0.90), fill: _tokens.colors[this.props.theme].base }) : null
-                ) : null
-            );
-        }
-    }]);
-
-    return PieChart;
-}(_react2.default.Component);
-
-var StyledPath = _styledComponents2.default.path(_templateObject, function (props) {
-    return _tokens.colors[props.theme].base;
+                                        ",
+          transform: "rotate(".concat(data.R, ", ").concat(data.L, ",").concat(data.L, ")")
+        }));
+      }), this.props.type === 'donut' || this.props.type === 'donutThin' ? /*#__PURE__*/_react["default"].createElement("circle", {
+        cx: width / 2,
+        cy: width / 2,
+        r: width / 2 * (this.props.type === 'donutThin' ? 0.97 : 0.90),
+        fill: _tokens.colors[this.props.theme].base
+      }) : null) : null);
+    }
+  }]);
+}(_react["default"].Component);
+var StyledPath = _styledComponents["default"].path(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    stroke: ", ";\n    stroke-width: 0;\n"])), function (props) {
+  return _tokens.colors[props.theme].base;
 });
-
-var GraphSVG = _styledComponents2.default.svg(_templateObject2);
-
+var GraphSVG = _styledComponents["default"].svg(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: block;\n    margin: 10px auto;\n"])));
 PieChart.propTypes = {
-    /** Graph Data */
-    data: _propTypes2.default.object.isRequired,
-    /** Graph size */
-    // width: PropTypes.number,
-    height: _propTypes2.default.number,
-    colorType: _propTypes2.default.oneOf(['gradient', 'normal']),
-    theme: _propTypes2.default.oneOf(['light', 'dark']),
-    type: _propTypes2.default.oneOf(['pie', 'donut', 'donutThin'])
+  /** Graph Data */
+  data: _propTypes["default"].object.isRequired,
+  /** Graph size */
+  // width: PropTypes.number,
+  height: _propTypes["default"].number,
+  colorType: _propTypes["default"].oneOf(['gradient', 'normal']),
+  theme: _propTypes["default"].oneOf(['light', 'dark']),
+  type: _propTypes["default"].oneOf(['pie', 'donut', 'donutThin'])
 };
-
 PieChart.defaultProps = {
-    data: {
-        "name": "Archieve",
-        "total": 0,
-        "values": [{
-            "name": "Archieved",
-            "value": "archieved",
-            "data": 0,
-            "index": 1
-        }, {
-            "name": "InProcess",
-            "value": "inprocess",
-            "data": 0,
-            "index": 2
-        }, {
-            "name": "Pending",
-            "value": "pending",
-            "data": 0,
-            "index": 3
-        }]
-    },
-    theme: 'light',
-    width: 400,
-    height: 400,
-    colorType: 'normal',
-    type: 'donut'
+  data: {
+    "name": "Archieve",
+    "total": 0,
+    "values": [{
+      "name": "Archieved",
+      "value": "archieved",
+      "data": 0,
+      "index": 1
+    }, {
+      "name": "InProcess",
+      "value": "inprocess",
+      "data": 0,
+      "index": 2
+    }, {
+      "name": "Pending",
+      "value": "pending",
+      "data": 0,
+      "index": 3
+    }]
+  },
+  theme: 'light',
+  width: 400,
+  height: 400,
+  colorType: 'normal',
+  type: 'donut'
 };
-
-exports.default = PieChart;
+var _default = exports["default"] = PieChart;