@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/graphs/barGraph/barGraph.js

@@ -1,14 +1,14 @@
 '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; };
 
 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    display: inline-block;\n    vertical-align: middle;\n    line-height: 1;\n    border-radius: ', ';\n'], ['\n    display: inline-block;\n    vertical-align: middle;\n    line-height: 1;\n    border-radius: ', ';\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n  border-radius: ', ';\n'], ['\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n  border-radius: ', ';\n']);
 
 var _react = require('react');
 
@@ -35,148 +35,161 @@ 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 BarGraph = function (_React$Component) {
-    _inherits(BarGraph, _React$Component);
-
-    function BarGraph(props) {
-        _classCallCheck(this, BarGraph);
-
-        var _this = _possibleConstructorReturn(this, (BarGraph.__proto__ || Object.getPrototypeOf(BarGraph)).call(this, props));
-
-        _initialiseProps.call(_this);
-
-        _this.getFilteredData = _this.getFilteredData.bind(_this);
-
-        return _this;
+  _inherits(BarGraph, _React$Component);
+
+  function BarGraph(props) {
+    _classCallCheck(this, BarGraph);
+
+    var _this = _possibleConstructorReturn(this, (BarGraph.__proto__ || Object.getPrototypeOf(BarGraph)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    _this.getFilteredData = _this.getFilteredData.bind(_this);
+    return _this;
+  }
+
+  _createClass(BarGraph, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {}
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var data = this.props.data;
+      var filteredData = this.getFilteredData(data);
+      return _react2.default.createElement(
+        _react2.default.Fragment,
+        null,
+        _react2.default.createElement(
+          GraphSVG,
+          _extends({}, this.props, {
+            width: this.props.width,
+            height: this.props.height
+            // viewBox={`0 0 ${this.props.width} ${this.props.height}`}
+            , preserveAspectRatio: 'none'
+          }),
+          this.props.colorType === 'gradient' ? _react2.default.createElement('defs', null) : null,
+          _react2.default.createElement(
+            'g',
+            {
+              transform: this.props.type === 'vertical' ? 'scale(1,-1) translate(0,-' + this.props.height + ')' : 'scale(1)'
+            },
+            filteredData.map(function (data, index) {
+              var item = filteredData[filteredData.length - index - 1];
+              var attrName = _this2.props.type === 'vertical' ? 'height' : 'width';
+
+              return _react2.default.createElement(
+                'rect',
+                {
+                  x: '0',
+                  y: '0',
+                  fill: _tokens.colors[_this2.props.theme].graph[item.value],
+                  width: item.width,
+                  height: item.height,
+                  key: index
+                },
+                _react2.default.createElement('animate', {
+                  attributeName: attrName,
+                  from: '0',
+                  to: item.percentLength + '%',
+                  dur: '0.5s',
+                  fill: 'freeze'
+                })
+              );
+            })
+          )
+        )
+      );
     }
+  }]);
 
-    _createClass(BarGraph, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {}
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this2 = this;
-
-            var data = this.props.data;
-            var filteredData = this.getFilteredData(data);
-            return _react2.default.createElement(
-                _react2.default.Fragment,
-                null,
-                _react2.default.createElement(
-                    GraphSVG,
-                    _extends({}, this.props, {
-                        width: this.props.width,
-                        height: this.props.height
-                        // viewBox={`0 0 ${this.props.width} ${this.props.height}`}
-                        , preserveAspectRatio: 'none'
-                    }),
-                    this.props.colorType === 'gradient' ? _react2.default.createElement('defs', null) : null,
-                    _react2.default.createElement(
-                        'g',
-                        { transform: this.props.type === 'vertical' ? 'scale(1,-1) translate(0,-' + this.props.height + ')' : "scale(1)" },
-                        filteredData.map(function (data, index) {
-                            var item = filteredData[filteredData.length - index - 1];
-                            var attrName = _this2.props.type === 'vertical' ? 'height' : 'width';
-
-                            return _react2.default.createElement(
-                                'rect',
-                                { x: '0', y: '0', fill: _tokens.colors[_this2.props.theme].graph[item.value], width: item.width, height: item.height, key: index },
-                                _react2.default.createElement('animate', { attributeName: attrName, from: '0', to: item.percentLength + '%', dur: '0.5s', fill: 'freeze' })
-                            );
-                        })
-                    )
-                )
-            );
-        }
-    }]);
-
-    return BarGraph;
+  return BarGraph;
 }(_react2.default.Component);
 
 var _initialiseProps = function _initialiseProps() {
-    var _this3 = this;
-
-    this.getFilteredData = function (dataObj) {
-
-        var props = _this3.props;
-        var total_val = dataObj.total;
-        var total_length = props.type === 'vertical' ? props.height : props.width;
-        var valueObjs = dataObj.values;
-        valueObjs.sort(function (a, b) {
-            var keyA = a.index,
-                keyB = b.index;
-
-            if (keyA < keyB) return -1;
-            if (keyA > keyB) return 1;
-            return 0;
-        });
-        var filteredData = [];
-        var length_sum = 0;
-        var percentSum = 0;
-        valueObjs.forEach(function (valueObj) {
-            var value = valueObj.data;
-            var percent2 = value / total_val * 100 + percentSum;
-            var percent = value / total_val;
-            var length = (typeof total_length === 'string' ? 100 : total_length) * percent + length_sum;
-
-            var data = {};
-            data.name = valueObj.name;
-            data.value = valueObj.value;
-            data.width = props.type === 'vertical' ? props.width : length;
-            data.height = props.type === 'vertical' ? length : props.height;
-            data.length = length;
-            data.percentLength = percent2;
-            data.index = valueObj.index;
-            filteredData.push(data);
-            length_sum = length;
-            percentSum = percent2;
-        });
-
-        return filteredData;
-    };
+  var _this3 = this;
+
+  this.getFilteredData = function (dataObj) {
+    var props = _this3.props;
+    var total_val = dataObj.total;
+    var total_length = props.type === 'vertical' ? props.height : props.width;
+    var valueObjs = dataObj.values;
+    valueObjs.sort(function (a, b) {
+      var keyA = a.index,
+          keyB = b.index;
+
+      if (keyA < keyB) return -1;
+      if (keyA > keyB) return 1;
+      return 0;
+    });
+    var filteredData = [];
+    var length_sum = 0;
+    var percentSum = 0;
+    valueObjs.forEach(function (valueObj) {
+      var value = valueObj.data;
+      var percent2 = value / total_val * 100 + percentSum;
+      var percent = value / total_val;
+      var length = (typeof total_length === 'string' ? 100 : total_length) * percent + length_sum;
+
+      var data = {};
+      data.name = valueObj.name;
+      data.value = valueObj.value;
+      data.width = props.type === 'vertical' ? props.width : length;
+      data.height = props.type === 'vertical' ? length : props.height;
+      data.length = length;
+      data.percentLength = percent2;
+      data.index = valueObj.index;
+      filteredData.push(data);
+      length_sum = length;
+      percentSum = percent2;
+    });
+
+    return filteredData;
+  };
 };
 
 var GraphSVG = _styledComponents2.default.svg(_templateObject, function (props) {
-    return props.type === 'vertical' ? '0' : '5px';
+  return props.type === 'vertical' ? '0' : '5px';
 });
 
 BarGraph.propTypes = {
-    /** Graph Data */
-    data: _propTypes2.default.object.isRequired,
-    /** Graph size */
-    //width: PropTypes.number || PropTypes.string,
-    height: _propTypes2.default.number,
-    colorType: _propTypes2.default.oneOf(['gradient', 'normal']),
-    type: _propTypes2.default.oneOf(['vertical', 'horizontal']),
-    theme: _propTypes2.default.oneOf(['light', 'dark'])
+  /** Graph Data */
+  data: _propTypes2.default.object.isRequired,
+  /** Graph size */
+  //width: PropTypes.number || PropTypes.string,
+  height: _propTypes2.default.number,
+  colorType: _propTypes2.default.oneOf(['gradient', 'normal']),
+  type: _propTypes2.default.oneOf(['vertical', 'horizontal']),
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 BarGraph.defaultProps = {
-    data: {
-        "name": "Archieve",
-        "total": 223,
-        "values": [{
-            "name": "Completed",
-            "value": "completed",
-            "data": 120,
-            "index": 1
-        }, {
-            "name": "Rejected",
-            "value": "rejected",
-            "data": 33,
-            "index": 2
-        }, {
-            "name": "Pending",
-            "value": "pending",
-            "data": 70,
-            "index": 3
-        }]
-    },
-    width: '100%',
-    height: 400,
-    colorType: 'normal',
-    type: 'vertical',
-    theme: 'light'
+  data: {
+    name: 'Archieve',
+    total: 223,
+    values: [{
+      name: 'Completed',
+      value: 'completed',
+      data: 120,
+      index: 1
+    }, {
+      name: 'Rejected',
+      value: 'rejected',
+      data: 33,
+      index: 2
+    }, {
+      name: 'Pending',
+      value: 'pending',
+      data: 70,
+      index: 3
+    }]
+  },
+  width: '100%',
+  height: 400,
+  colorType: 'normal',
+  type: 'vertical',
+  theme: 'light'
 };
 
 exports.default = BarGraph;

package/atoms/graphs/barGraph/barGraph.story.js

@@ -12,46 +12,80 @@ var _components = require('../../../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('BarGraph').add('BarGraph', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.BarGraph, { width: 50, height: 235, type: 'vertical' })
-        ),
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.BarGraph, { width: '50%', height: 12, type: 'horizontal' })
-        ),
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.BarGraph, { width: 360, height: 12, type: 'horizontal', colorType: 'gradient' })
-        )
-    );
+(0, _react3.storiesOf)('BarGraph').add('light theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, { width: 50, height: 235, type: 'vertical' })
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, { width: '50%', height: 12, type: 'horizontal' })
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, { width: 360, height: 12, type: 'horizontal', colorType: 'gradient' })
+    )
+  );
 });
 
-(0, _react3.storiesOf)('BarGraph').add('BarGraph dark theme', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Tag', background: 'dark' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.BarGraph, { theme: 'dark', width: 50, height: 235, type: 'vertical' })
-        ),
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.BarGraph, { theme: 'dark', width: '100%', height: 12, type: 'horizontal' })
-        ),
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.BarGraph, { theme: 'dark', width: '360', height: 12, type: 'horizontal', colorType: 'gradient' })
-        )
-    );
+(0, _react3.storiesOf)('BarGraph').add('dark theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Tag', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, { theme: 'dark', width: 50, height: 235, type: 'vertical' })
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, { theme: 'dark', width: '100%', height: 12, type: 'horizontal' })
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, {
+        theme: 'dark',
+        width: '360',
+        height: 12,
+        type: 'horizontal',
+        colorType: 'gradient'
+      })
+    )
+  );
+});
+
+(0, _react3.storiesOf)('BarGraph').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Tag', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, { theme: 'nexc', width: 50, height: 235, type: 'vertical' })
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, { theme: 'nexc', width: '100%', height: 12, type: 'horizontal' })
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.BarGraph, {
+        theme: 'nexc',
+        width: '360',
+        height: 12,
+        type: 'horizontal',
+        colorType: 'gradient'
+      })
+    )
+  );
 });