@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/graphs/circleGraph/circleGraph.js

@@ -1,7 +1,7 @@
 'use strict';
 
 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; };
@@ -9,8 +9,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 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    0% {\n        stroke-dasharray: 0, 5000;\n    }\n'], ['\n    0% {\n        stroke-dasharray: 0, 5000;\n    }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    fill: none;\n    stroke-width: 2.8;\n    stroke-linecap: round;\n    animation: ', ' 1s ease-out forwards;\n'], ['\n    fill: none;\n    stroke-width: 2.8;\n    stroke-linecap: round;\n    animation: ', ' 1s ease-out forwards;\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n    display: block;\n    margin: 10px auto;\n'], ['\n    display: block;\n    margin: 10px auto;\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  fill: none;\n  stroke-width: 2.8;\n  stroke-linecap: round;\n  animation: ', ' 1s ease-out forwards;\n'], ['\n  fill: none;\n  stroke-width: 2.8;\n  stroke-linecap: round;\n  animation: ', ' 1s ease-out forwards;\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  display: block;\n  margin: 10px auto;\n'], ['\n  display: block;\n  margin: 10px auto;\n']);
 
 var _react = require('react');
 
@@ -37,70 +37,74 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 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 CircleGraph = function (_React$Component) {
-    _inherits(CircleGraph, _React$Component);
-
-    function CircleGraph(props) {
-        _classCallCheck(this, CircleGraph);
-
-        var _this = _possibleConstructorReturn(this, (CircleGraph.__proto__ || Object.getPrototypeOf(CircleGraph)).call(this, props));
-
-        _this.generateData = function (data) {
-            var width = typeof _this.props.width == 'string' ? 100 : _this.props.width;
-            var height = _this.props.height;
-            var diameter = width - 5;
-            var radius = diameter / 2;
-            var circumference = radius * 2 * Math.PI;
-            var x = width / 2;
-            var y = (width - diameter) / 2;
-            var dataPercent = data.completed / data.total * 100;
-            var percent = circumference * dataPercent / 100;
-            var dataObj = {
-                x: x, y: y, radius: radius, diameter: diameter, percent: percent, circumference: circumference
-            };
-
-            return dataObj;
-        };
-
-        _this.componentDidMount = function () {
-            var dataObj = _this.generateData(_this.props.data);
-            _this.setState({ dataObj: dataObj });
-        };
-
-        _this.state = {
-            dataObj: null
-        };
-        return _this;
+  _inherits(CircleGraph, _React$Component);
+
+  function CircleGraph(props) {
+    _classCallCheck(this, CircleGraph);
+
+    var _this = _possibleConstructorReturn(this, (CircleGraph.__proto__ || Object.getPrototypeOf(CircleGraph)).call(this, props));
+
+    _this.generateData = function (data) {
+      var width = typeof _this.props.width == 'string' ? 100 : _this.props.width;
+      var height = _this.props.height;
+      var diameter = width - 5;
+      var radius = diameter / 2;
+      var circumference = radius * 2 * Math.PI;
+      var x = width / 2;
+      var y = (width - diameter) / 2;
+      var dataPercent = data.completed / data.total * 100;
+      var percent = circumference * dataPercent / 100;
+      var dataObj = {
+        x: x,
+        y: y,
+        radius: radius,
+        diameter: diameter,
+        percent: percent,
+        circumference: circumference
+      };
+
+      return dataObj;
+    };
+
+    _this.componentDidMount = function () {
+      var dataObj = _this.generateData(_this.props.data);
+      _this.setState({ dataObj: dataObj });
+    };
+
+    _this.state = {
+      dataObj: null
+    };
+    return _this;
+  }
+
+  _createClass(CircleGraph, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        _react2.default.Fragment,
+        null,
+        this.state.dataObj ? _react2.default.createElement(
+          GraphSVG,
+          _extends({}, typeof this.props.width == 'string' ? '' : { width: this.props.width }, typeof this.props.width == 'string' ? '' : { height: this.props.height }, {
+            viewBox: '0 0 ' + (typeof this.props.width == 'string' ? '100' : this.props.width) + ' ' + this.props.height,
+            preserveAspectRatio: 'xMinYMin meet'
+          }),
+          _react2.default.createElement(StyledPath, {
+            stroke: _tokens.colors[this.props.theme].graph.pending,
+            d: 'M' + this.state.dataObj.x + ' ' + this.state.dataObj.y + '\n                                a ' + this.state.dataObj.radius + ' ' + this.state.dataObj.radius + ' 0 0 1 0 ' + this.state.dataObj.diameter + '\n                                a ' + this.state.dataObj.radius + ' ' + this.state.dataObj.radius + ' 0 0 1 0 -' + this.state.dataObj.diameter,
+            strokeDasharray: this.state.dataObj.circumference + ', ' + this.state.dataObj.circumference
+          }),
+          _react2.default.createElement(StyledPath, {
+            stroke: _tokens.colors[this.props.theme].graph.completed,
+            d: 'M' + this.state.dataObj.x + ' ' + this.state.dataObj.y + '\n                                a ' + this.state.dataObj.radius + ' ' + this.state.dataObj.radius + ' 0 0 1 0 ' + this.state.dataObj.diameter + '\n                                a ' + this.state.dataObj.radius + ' ' + this.state.dataObj.radius + ' 0 0 1 0 -' + this.state.dataObj.diameter,
+            strokeDasharray: this.state.dataObj.percent + ', ' + this.state.dataObj.circumference
+          })
+        ) : null
+      );
     }
+  }]);
 
-    _createClass(CircleGraph, [{
-        key: 'render',
-        value: function render() {
-
-            return _react2.default.createElement(
-                _react2.default.Fragment,
-                null,
-                this.state.dataObj ? _react2.default.createElement(
-                    GraphSVG,
-                    _extends({}, typeof this.props.width == 'string' ? "" : { "width": this.props.width }, typeof this.props.width == 'string' ? "" : { "height": this.props.height }, {
-                        viewBox: '0 0 ' + (typeof this.props.width == 'string' ? "100" : this.props.width) + ' ' + this.props.height,
-                        preserveAspectRatio: 'xMinYMin meet'
-                    }),
-                    _react2.default.createElement(StyledPath, {
-                        stroke: _tokens.colors[this.props.theme].graph.pending,
-                        d: 'M' + this.state.dataObj.x + ' ' + this.state.dataObj.y + '\n                                a ' + this.state.dataObj.radius + ' ' + this.state.dataObj.radius + ' 0 0 1 0 ' + this.state.dataObj.diameter + '\n                                a ' + this.state.dataObj.radius + ' ' + this.state.dataObj.radius + ' 0 0 1 0 -' + this.state.dataObj.diameter,
-                        strokeDasharray: this.state.dataObj.circumference + ', ' + this.state.dataObj.circumference
-                    }),
-                    _react2.default.createElement(StyledPath, {
-                        stroke: _tokens.colors[this.props.theme].graph.completed,
-                        d: 'M' + this.state.dataObj.x + ' ' + this.state.dataObj.y + '\n                                a ' + this.state.dataObj.radius + ' ' + this.state.dataObj.radius + ' 0 0 1 0 ' + this.state.dataObj.diameter + '\n                                a ' + this.state.dataObj.radius + ' ' + this.state.dataObj.radius + ' 0 0 1 0 -' + this.state.dataObj.diameter,
-                        strokeDasharray: this.state.dataObj.percent + ', ' + this.state.dataObj.circumference
-                    })
-                ) : null
-            );
-        }
-    }]);
-
-    return CircleGraph;
+  return CircleGraph;
 }(_react2.default.Component);
 
 var progress = (0, _styledComponents.keyframes)(_templateObject);
@@ -110,24 +114,24 @@ var StyledPath = _styledComponents2.default.path(_templateObject2, progress);
 var GraphSVG = _styledComponents2.default.svg(_templateObject3);
 
 CircleGraph.propTypes = {
-    /** Graph Data */
-    data: _propTypes2.default.object.isRequired,
-    /** Graph size */
-    theme: _propTypes2.default.oneOf(['light', 'dark']),
-    //width: PropTypes.number || PropTypes.string,
-    height: _propTypes2.default.number,
-    colorType: _propTypes2.default.oneOf(['gradient', 'normal'])
+  /** Graph Data */
+  data: _propTypes2.default.object.isRequired,
+  /** Graph size */
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
+  //width: PropTypes.number || PropTypes.string,
+  height: _propTypes2.default.number,
+  colorType: _propTypes2.default.oneOf(['gradient', 'normal'])
 };
 
 CircleGraph.defaultProps = {
-    data: {
-        "total": 100,
-        "completed": 50
-    },
-    width: 400,
-    height: 400,
-    theme: 'light',
-    colorType: 'normal'
+  data: {
+    total: 100,
+    completed: 50
+  },
+  width: 400,
+  height: 400,
+  theme: 'light',
+  colorType: 'normal'
 };
 
 exports.default = CircleGraph;

package/atoms/graphs/circleGraph/circleGraph.story.js

@@ -12,34 +12,46 @@ var _components = require('../../../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('CircleGraph').add('CircleGraph Light Theme', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances' },
+(0, _react3.storiesOf)('CircleGraph').add('light theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances' },
+    _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(
+        'div',
+        null,
         _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement(
-                    'div',
-                    { style: { "width": "400px" } },
-                    _react2.default.createElement(_components.CircleGraph, { width: "100%", height: 300 })
-                )
-            )
+          'div',
+          { style: { width: '400px' } },
+          _react2.default.createElement(_components.CircleGraph, { width: '100%', height: 300 })
         )
-    );
+      )
+    )
+  );
 });
 
-(0, _react3.storiesOf)('CircleGraph').add('CircleGraph Dark Theme', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Tag', background: 'dark' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.CircleGraph, { theme: 'dark', width: 300, height: 300 })
-        )
-    );
+(0, _react3.storiesOf)('CircleGraph').add('dark theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Tag', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CircleGraph, { theme: 'dark', width: 300, height: 300 })
+    )
+  );
+});
+
+(0, _react3.storiesOf)('CircleGraph').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Tag', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CircleGraph, { theme: 'nexc', width: 300, height: 300 })
+    )
+  );
 });

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

@@ -12,113 +12,108 @@ var _components = require('../../../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('CircleNested').add('CircleNested', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances' },
+(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(
-            _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'
-                    })
-                )
-            )
+          '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'
+          })
         )
-    );
+      )
+    )
+  );
 });
 
-(0, _react3.storiesOf)('CircleNested').add('CircleNested dark theme', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Tag', background: 'dark' },
+(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(
-            _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'
-                    })
-                )
-            )
+          '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'
+          })
         )
-    );
+      )
+    )
+  );
 });