sag_components 1.0.34 → 1.0.36

package/dist/stories/Button.style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n"])), function (props) {
+  return props.width;
+});
+exports.DropdownContainer = DropdownContainer;

package/dist/stories/Dropdown.style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n"])), function (props) {
+  return props.width;
+});
+exports.DropdownContainer = DropdownContainer;

package/dist/stories/OneColumnContainer.style.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContainer = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; \n  display: flex;\n  position: relative;\n  border-radius: 10px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+exports.StyledContainer = StyledContainer;
+var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  align-items: center;\n  display: flex;\n  visibility: ", ";\n  text-align: center;\n  justify-content: center;\n  background: rgba(16, 16, 16, .6);\n"])), function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+}, function (props) {
+  return props.clicked ? 'visible' : 'hidden';
+});
+exports.InfoTextContainer = InfoTextContainer;
+var InfoTextLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  text-align: center;\n  color: white;\n  margin: 10px;\n  justify-content: center;\n"])));
+exports.InfoTextLabel = InfoTextLabel;
+var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 15px;\n  height: 15px;\n  position: absolute;\n  margin-top:10px;\n  margin-right:10px;\n  top: 0;\n  right: 0;\n"])));
+exports.IconContainer = IconContainer;

package/dist/stories/SegmentedButton.style.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentLabel = exports.Segment = exports.ControlsInput = exports.ControlsContainer = exports.Controls = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  font: ", "; \n  margin: 100px 0 25px;\n  --highlight-width: auto;\n  --highlight-x-pos: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"])), function (props) {
+  var _props$fontSize;
+  return (_props$fontSize = props.fontSize) === null || _props$fontSize === void 0 ? void 0 : _props$fontSize.toString().concat("", "px Lato, sans-serif");
+});
+exports.ControlsContainer = ControlsContainer;
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  justify-content: space-between;  \n  background: ", ";\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  border-radius:  ", "; //12px\n  // max-width: 500px; //use this to limit max lenght of the control \n  padding: 6px;  \n  margin: auto;\n  overflow: hidden;\n  position: relative;\n  &.controls::before {\n    content: \"\";\n    background:  ", "; /* #3a9df9;  #5465ff;*/\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n    border-radius:  ", "; //12px\n    width: var(--highlight-width);\n    transform: translateX(var(--highlight-x-pos));\n    position: absolute;\n    top: 6px;\n    bottom: 6px;\n    left: 0;\n    z-index: 0;\n  }\n  &.controls.ready::before {\n    transition: transform 0.3s ease, width 0.3s ease;\n  }\n"])), function (props) {
+  return props.backgroundColor;
+}, function (props) {
+  return props.controlRadius.toString().concat("", "px");
+}, function (props) {
+  return props.selectedSegmentColor;
+}, function (props) {
+  return props.segmentRadius.toString().concat("", "px");
+});
+exports.Controls = Controls;
+var ControlsInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  opacity: 0;\n  margin: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  cursor: pointer;\n  height: 100%;\n"])));
+exports.ControlsInput = ControlsInput;
+var Segment = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 100%; uncomment for each segment to have matching width */  \n  min-width: ", ";  //120px;\n  position: relative;\n  text-align: center;\n  z-index: 1;  \n"])), function (props) {
+  return props.segmentWidth.toString().concat("", "px");
+});
+exports.Segment = Segment;
+var SegmentLabel = _styledComponents.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: block;\n  //font-weight: 550;\n  padding: ", "; //10px;\n  transition: color 0.5s ease;\n  &.active {\n    color: ", ";\n  }\n  &.inactive {\n    color: ", ";\n  }\n"])), function (props) {
+  return props.segmentHeigth.toString().concat("", "px");
+}, function (props) {
+  return props.selectedTextColor;
+}, function (props) {
+  return props.unselectedTextColor;
+});
+exports.SegmentLabel = SegmentLabel;

package/dist/stories/TotalDoughnutChart.style.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendCurrencySign = exports.LegendControls = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChart = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 12px;\n  //border: 1px solid red;\n"])), function (props) {
+  return props.textColor;
+}, function (props) {
+  return props.width.toString().concat("", "px");
+}, function (props) {
+  return props.height.toString().concat("", "px");
+});
+exports.ControlsContainer = ControlsContainer;
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n  background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
+  return props.width.toString().concat("", "px");
+}, function (props) {
+  return props.height.toString().concat("", "px");
+});
+exports.Controls = Controls;
+var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 150px;\n  height: 22px;\n  left: 40px;\n  top: 81px;\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 22px;\n  //border: 1px solid red;\n"])));
+exports.Title = Title;
+var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 11px;\n  height: 22px;\n  left: 42px;\n  top: 135px;\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 22px;\n  //border: 1px solid red;\n"])));
+exports.CurrencySign = CurrencySign;
+var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 200px;\n  height: 48px;\n  left: 57px;\n  top: 115px;\n  font-weight: 500;\n  font-size: 40px;\n  line-height: 48px;\n  //border: 1px solid red;\n"])));
+exports.FormattedValue = FormattedValue;
+var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 95px;\n  height: 95px;\n  left: 40px;\n  top: 221px;\n  //border: 1px solid red;\n"])));
+exports.DoughnutChart = DoughnutChart;
+var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 12px;\n  width: 180px;\n  height: 47px;\n  left: 150px;\n  top: 221px;  \n  background: #ffffff;\n  //border: 1px solid blue;\n"])));
+exports.LegendControls = LegendControls;
+var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 14px;\n  top: 14px;\n  background: ", ";\n"])), function (props) {
+  return props.color;
+});
+exports.LegendColorRectangle = LegendColorRectangle;
+var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 120px;\n  height: 18px;\n  left: 40px;\n  top: 1px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  //border: 1px solid red;\n"])));
+exports.LegendTitle = LegendTitle;
+var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 11px;\n  height: 19px;\n  left: 42px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
+exports.LegendCurrencySign = LegendCurrencySign;
+var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100px;\n  height: 19px;\n  left: 52px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
+exports.LegendFormattedValue = LegendFormattedValue;

package/dist/stories/components/CommonFunctions.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
+var getCurrencySign = function getCurrencySign(currencyTypeToConvert, value) {
+  if (!currencyTypeToConvert) return "";
+  var currencySign = "";
+  var currencyFormatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: currencyTypeToConvert
+  });
+  currencySign = currencyFormatter.format(value).substring(0, 1);
+  return currencySign;
+};
+exports.getCurrencySign = getCurrencySign;
+var getFormattedUnits = function getFormattedUnits(num) {
+  if (Math.abs(num) >= 1000000000) {
+    return "B";
+  }
+  if (Math.abs(num) >= 1000000) {
+    return "M";
+  }
+  if (Math.abs(num) >= 1000) {
+    return "K";
+  }
+  return "";
+};
+exports.getFormattedUnits = getFormattedUnits;
+var getFormattedValue = function getFormattedValue(num) {
+  if (Math.abs(num) >= 1000000000) {
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
+  }
+  if (Math.abs(num) >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "");
+  }
+  if (Math.abs(num) >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, "");
+  }
+  return num;
+};
+exports.getFormattedValue = getFormattedValue;
+var getNumberWithCommas = function getNumberWithCommas(x) {
+  x = x.toString();
+  var pattern = /(-?\d+)(\d{3})/;
+  while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
+  return x;
+};
+exports.getNumberWithCommas = getNumberWithCommas;

package/dist/stories/components/FilterContainer.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FilterContainer = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _FilterContainer = require("./FilterContainer.style");
+var _excluded = ["width", "height"];
+var FilterContainer = function FilterContainer(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 350 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 950 : _ref$height,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_FilterContainer.FilterDivContainer, {
+    width: width,
+    height: height
+  }, props.children);
+};
+exports.FilterContainer = FilterContainer;
+FilterContainer.defaultProps = {};
+var _default = FilterContainer;
+exports.default = _default;

package/dist/stories/components/FilterContainer.style.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterDivContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: ", ";\n    height: ", ";\n    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);\n    border-radius: 12px;\n    background-color: red;\n"])), function (props) {
+  return props.width.toString().concat("", "px");
+}, function (props) {
+  return props.height.toString().concat("", "px");
+});
+exports.FilterDivContainer = FilterDivContainer;

package/dist/stories/components/OneColumnContainer.js

@@ -38,12 +38,10 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     setClicked(!clicked);
   };
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
-    className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle),
+    className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
+    innerRef: nodeRef,
     width: width,
     height: height
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(divStyle),
-    ref: nodeRef
   }, children, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
     clicked: clicked,
     width: width,
@@ -52,7 +50,7 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     onClick: onInfoClick
   }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
     clicked: clicked
-  }))));
+  })));
 };
 exports.OneColumnContainer = OneColumnContainer;
 OneColumnContainer.defaultProps = {};

package/dist/stories/components/TotalBenchmark.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TotalBenchmark = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _CommonFunctions = require("./CommonFunctions");
+var _Benchmark = require("./Benchmark");
+var _TotalBenchmarkStyle = require("./TotalBenchmark.style.js");
+var _excluded = ["data", "dotCut", "width", "height", "textColor"];
+/*TotalBenchmark*/
+var TotalBenchmark = function TotalBenchmark(_ref) {
+  var data = _ref.data,
+    _ref$dotCut = _ref.dotCut,
+    dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 260 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 350 : _ref$height,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.ControlsContainer, {
+    height: height,
+    width: width,
+    textColor: textColor
+  }, data.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Controls, {
+      index: index,
+      width: width
+    }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Title, {
+      width: width
+    }, item.title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.FormattedValue, {
+      width: width
+    }, dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : ""), item.totalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
+      width: width
+    }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
+      totalValue: item.totalValue,
+      currentValue: item.value,
+      height: 12,
+      width: 100,
+      color: "#79DB95",
+      linearGradientColor: "#C3EFD0",
+      linearGradientUnderAvarageColor: "#FDB1B1",
+      underAvarageColor: "#FD5959",
+      backgroundColor: "#F2F2F2"
+    })) : "");
+  }));
+};
+exports.TotalBenchmark = TotalBenchmark;
+var _default = TotalBenchmark;
+exports.default = _default;

package/dist/stories/components/TotalBenchmark.style.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.FormattedValue = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var MIN_HEIGHT = 300;
+var MIN_WIDTH = 260;
+var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 12px;\n  //border: 1px solid red;\n"])), function (props) {
+  return props.textColor;
+}, function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
+}, function (props) {
+  return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
+});
+exports.ControlsContainer = ControlsContainer;
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 12px;\n  width: ", ";\n  height: 100px;\n  top: ", ";\n  left: 40px;\n  background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+}, function (props) {
+  return (68 + 120 * props.index).toString().concat("", "px");
+});
+exports.Controls = Controls;
+var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: 22px;\n  left: 0px;\n  top: 0px;\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 22px;\n  //border: 1px solid red;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 200 : 200 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+});
+exports.Title = Title;
+var FormattedValue = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: 48px;\n  left: 0px;\n  top: 40px;\n  font-weight: 500;\n  font-size: 40px;\n  line-height: 48px;\n  //border: 1px solid red;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 200 : 200 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+});
+exports.FormattedValue = FormattedValue;
+var BenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100px;\n  height: 12px;\n  left: ", ";\n  top: 66px;\n  //border: 1px solid red;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 115 : 115 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+});
+exports.BenchmarkContainer = BenchmarkContainer;

package/dist/stories/components/TotalDoughnutChart.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TotalDoughnutChart = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _CommonFunctions = require("./CommonFunctions");
 var _recharts = require("recharts");
 var _TotalDoughnutChartStyle = require("./TotalDoughnutChart.style.js");
 var _excluded = ["title", "value", "dotCut", "currency", "currencyType", "legendData", "width", "height", "textColor"];
@@ -30,124 +31,28 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
     _ref$textColor = _ref.textColor,
     textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var MIN_WIDTH = 260;
-  var MIN_HEIGHT = 300;
-  var getCurrencySign = function getCurrencySign(currencyTypeToConvert) {
-    if (!currencyTypeToConvert) return "";
-    var currencySign = "";
-    var currencyFormatter = new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currencyTypeToConvert
-    });
-    currencySign = currencyFormatter.format(value).substring(0, 1);
-    return currencySign;
-  };
-  var getFormattedUnits = function getFormattedUnits(num) {
-    if (Math.abs(num) >= 1000000000) {
-      return "B";
-    }
-    if (Math.abs(num) >= 1000000) {
-      return "M";
-    }
-    if (Math.abs(num) >= 1000) {
-      return "K";
-    }
-    return "";
-  };
-  var getFormattedValue = function getFormattedValue(num) {
-    if (Math.abs(num) >= 1000000000) {
-      return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
-    }
-    if (Math.abs(num) >= 1000000) {
-      return (num / 1000000).toFixed(1).replace(/\.0$/, "");
-    }
-    if (Math.abs(num) >= 1000) {
-      return (num / 1000).toFixed(1).replace(/\.0$/, "");
-    }
-    return num;
-  };
-  var getNumberWithCommas = function getNumberWithCommas(x) {
-    x = x.toString();
-    var pattern = /(-?\d+)(\d{3})/;
-    while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
-    return x;
-  };
-  var getDoughnutChartLeft = function getDoughnutChartLeft() {
-    if (width <= 260) {
-      return 10;
-    }
-    ;
-    if (width >= 290) {
-      return 40;
-    }
-    ;
-    return 10 + (width - MIN_WIDTH);
-  };
-  var getLegendControlsLeft = function getLegendControlsLeft() {
-    if (width <= 260) {
-      return 100;
-    }
-    ;
-    if (width >= 300) {
-      return 140;
-    }
-    ;
-    return 100 + (width - MIN_WIDTH);
-  };
-  var getDoughnutChartTop = function getDoughnutChartTop() {
-    if (height <= 300) {
-      return 180;
-    }
-    ;
-    if (height >= 340) {
-      return 220;
-    }
-    ;
-    return 180 + (height - MIN_HEIGHT);
-  };
-  var getLegendControlsTop = function getLegendControlsTop() {
-    if (height <= 300) {
-      return 180;
-    }
-    ;
-    if (height >= 340) {
-      return 220;
-    }
-    ;
-    return 180 + (height - MIN_HEIGHT);
-  };
-  var getControlsLeft = function getControlsLeft() {
-    if (width - MIN_WIDTH <= 0) {
-      return MIN_WIDTH;
-    }
-    ;
-    return width;
-  };
-  var getControlsTop = function getControlsTop() {
-    if (height - MIN_HEIGHT <= 0) {
-      return MIN_HEIGHT;
-    }
-    ;
-    return height;
-  };
   var onPieEnterHandler = function onPieEnterHandler() {};
   return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
-    height: getControlsTop(),
-    width: getControlsLeft(),
+    height: height,
+    width: width,
     textColor: textColor
   }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
     height: height,
-    width: getControlsLeft
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, null, "".concat(dotCut ? getFormattedValue(value) : getNumberWithCommas(value)), "".concat(dotCut ? getFormattedUnits(value) : "")), legendData.map(function (row, index) {
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, {
+    width: width
+  }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, null, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, {
+    width: width
+  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), legendData.map(function (row, index) {
     return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControls, {
-      left: getLegendControlsLeft(),
-      top: getLegendControlsTop()
+      width: width,
+      height: height
     }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
       color: row.color
-    }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, null, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, null, "".concat(dotCut ? getFormattedValue(row.value) : getNumberWithCommas(row.value)), "".concat(dotCut ? getFormattedUnits(row.value) : "")));
+    }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, null, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, null, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, null, dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : ""));
   }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, {
-    left: getDoughnutChartLeft(),
-    top: getDoughnutChartTop()
+    width: width,
+    height: height
   }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
     width: 90,
     height: 90,

package/dist/stories/components/TotalDoughnutChart.style.js

@@ -8,36 +8,78 @@ exports.Title = exports.LegendTitle = exports.LegendFormattedValue = exports.Leg
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var MIN_WIDTH = 260;
+var MIN_HEIGHT = 300;
+var getLegendControlsTop = function getLegendControlsTop(height) {
+  if (height <= 300) {
+    return 180;
+  }
+  if (height >= 340) {
+    return 220;
+  }
+  return 180 + (height - MIN_HEIGHT);
+};
+var getLegendControlsLeft = function getLegendControlsLeft(width) {
+  if (width <= 260) {
+    return 100;
+  }
+  if (width >= 300) {
+    return 140;
+  }
+  return 100 + (width - MIN_WIDTH);
+};
+var getDoughnutChartTop = function getDoughnutChartTop(height) {
+  if (height <= 300) {
+    return 180;
+  }
+  if (height >= 340) {
+    return 220;
+  }
+  return 180 + (height - MIN_HEIGHT);
+};
+var getDoughnutChartLeft = function getDoughnutChartLeft(width) {
+  if (width <= 260) {
+    return 10;
+  }
+  if (width >= 290) {
+    return 40;
+  }
+  return 10 + (width - MIN_WIDTH);
+};
 var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 12px;\n  //border: 1px solid red;\n"])), function (props) {
   return props.textColor;
 }, function (props) {
-  return props.width.toString().concat("", "px");
+  return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
 }, function (props) {
-  return props.height.toString().concat("", "px");
+  return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
 });
 exports.ControlsContainer = ControlsContainer;
 var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n  background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
+  return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
 }, function (props) {
-  return props.height.toString().concat("", "px");
+  return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
 });
 exports.Controls = Controls;
-var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 150px;\n  height: 22px;\n  left: 40px;\n  top: 81px;\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 22px;\n  //border: 1px solid red;\n"])));
+var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: 22px;\n  left: 40px;\n  top: 68px;\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 22px;\n  //border: 1px solid red;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 210 : 210 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+});
 exports.Title = Title;
-var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 11px;\n  height: 22px;\n  left: 42px;\n  top: 135px;\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 22px;\n  //border: 1px solid red;\n"])));
+var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 11px;\n  height: 22px;\n  left: 40px;\n  top: 123px;\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 22px;\n  //border: 1px solid red;\n"])));
 exports.CurrencySign = CurrencySign;
-var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 200px;\n  height: 48px;\n  left: 57px;\n  top: 115px;\n  font-weight: 500;\n  font-size: 40px;\n  line-height: 48px;\n  //border: 1px solid red;\n"])));
+var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 200px;\n  width: ", ";\n  height: 48px;\n  left: 55px;\n  top: 102px;\n  font-weight: 500;\n  font-size: 40px;\n  line-height: 48px;\n  //border: 1px solid red;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 200 : 200 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+});
 exports.FormattedValue = FormattedValue;
-var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 90px;\n  height: 90px;\n  left: ", ";\n  top: ", ";     \n  //border: 1px solid red;\n"])), function (props) {
-  return props.left.toString().concat("", "px"); //10px
+var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 90px;\n  height: 90px;\n  left: ", ";\n  top: ", ";\n  //border: 1px solid red;\n"])), function (props) {
+  return getDoughnutChartLeft(props.width).toString().concat("", "px");
 }, function (props) {
-  return props.top.toString().concat("", "px"); //top: 221px;
+  return getDoughnutChartTop(props.height).toString().concat("", "px");
 });
 exports.DoughnutChart = DoughnutChart;
-var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 12px;\n  width: 150px;\n  height: 47px;  \n  left: ", ";\n  top: ", ";    \n  background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
-  return props.left.toString().concat("", "px"); //100px
+var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 12px;\n  width: 170px;\n  height: 47px;\n  left: ", ";\n  top: ", ";\n  background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
+  return getLegendControlsLeft(props.width).toString().concat("", "px");
 }, function (props) {
-  return props.top.toString().concat("", "px"); //top: 221px;
+  return getLegendControlsTop(props.height).toString().concat("", "px");
 });
 exports.LegendControls = LegendControls;
 var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 8px;\n  top: 14px;\n  background: ", ";\n"])), function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "",
   "main": "dist/index.js",
   "scripts": {