sag_components 1.0.46 → 1.0.48

package/dist/stories/components/ArrowDownIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrowDownIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var ArrowDownIcon = function ArrowDownIcon(_ref) {
+  var clicked = _ref.clicked;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "8",
+    height: "9",
+    viewBox: "0 0 8 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3.52935 8.81165C3.78967 9.06278 4.21242 9.06278 4.47273 8.81165L7.80476 5.59719C8.06508 5.34606 8.06508 4.93822 7.80476 4.68709C7.54445 4.43596 7.1217 4.43596 6.86138 4.68709L4.66641 6.80663L4.66641 0.642893C4.66641 0.287292 4.36861 -4.08657e-07 4 -4.40881e-07C3.63139 -4.73106e-07 3.33359 0.287292 3.33359 0.642893L3.33359 6.80663L1.13862 4.6891C0.878303 4.43797 0.455551 4.43797 0.195236 4.6891C-0.0650787 4.94023 -0.0650787 5.34807 0.195236 5.5992L3.52727 8.81366L3.52935 8.81165Z",
+    fill: "#F00021"
+  }));
+};
+exports.ArrowDownIcon = ArrowDownIcon;
+var _default = ArrowDownIcon;
+exports.default = _default;

package/dist/stories/components/ArrowUpIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrowUpIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var ArrowUpIcon = function ArrowUpIcon(_ref) {
+  var clicked = _ref.clicked;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "8",
+    height: "9",
+    viewBox: "0 0 8 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M4.47065 0.188348C4.21033 -0.0627825 3.78758 -0.0627825 3.52727 0.188348L0.195236 3.40281C-0.0650787 3.65394 -0.0650787 4.06178 0.195236 4.31291C0.455551 4.56404 0.878303 4.56404 1.13862 4.31291L3.33359 2.19337V8.35711C3.33359 8.71271 3.63139 9 4 9C4.36861 9 4.66641 8.71271 4.66641 8.35711V2.19337L6.86138 4.3109C7.1217 4.56203 7.54445 4.56203 7.80476 4.3109C8.06508 4.05977 8.06508 3.65193 7.80476 3.4008L4.47273 0.186338L4.47065 0.188348Z",
+    fill: "#5FCC70"
+  }));
+};
+exports.ArrowUpIcon = ArrowUpIcon;
+var _default = ArrowUpIcon;
+exports.default = _default;

package/dist/stories/components/Benchmark.js

@@ -8,13 +8,14 @@ exports.default = exports.Benchmark = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _BenchmarkStyle = require("./Benchmark.style.js");
-var _excluded = ["totalValue", "currentValue", "width", "height", "color", "linearGradientColor", "underAvarageColor", "linearGradientUnderAvarageColor", "backgroundColor"];
+var _excluded = ["totalValue", "currentValue", "benchmarkValue", "width", "height", "color", "linearGradientColor", "underAvarageColor", "linearGradientUnderAvarageColor", "backgroundColor"];
 /*Benchmark*/
 var Benchmark = function Benchmark(_ref) {
   var _ref$totalValue = _ref.totalValue,
     totalValue = _ref$totalValue === void 0 ? 100 : _ref$totalValue,
     _ref$currentValue = _ref.currentValue,
     currentValue = _ref$currentValue === void 0 ? 60 : _ref$currentValue,
+    benchmarkValue = _ref.benchmarkValue,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 100 : _ref$width,
     _ref$height = _ref.height,
@@ -38,7 +39,15 @@ var Benchmark = function Benchmark(_ref) {
   var getUnderAvarageColor = function getUnderAvarageColor() {
     if (!totalValue) return backgroundColor;
     if (currentValue > totalValue) return color;
-    if (currentValue / totalValue <= 0.5) {
+    var benchmarkCurrentValue;
+    if (!benchmarkValue) {
+      benchmarkCurrentValue = 0.5;
+    } else if (benchmarkValue > totalValue) {
+      benchmarkCurrentValue = 1;
+    } else {
+      benchmarkCurrentValue = benchmarkValue / totalValue;
+    }
+    if (currentValue / totalValue <= benchmarkCurrentValue) {
       return underAvarageColor;
     } else {
       return color;
@@ -47,12 +56,29 @@ var Benchmark = function Benchmark(_ref) {
   var getUnderAvaragelinearGradientColor = function getUnderAvaragelinearGradientColor() {
     if (!totalValue) return backgroundColor;
     if (currentValue > totalValue) return linearGradientColor;
-    if (currentValue / totalValue <= 0.5) {
+    var benchmarkCurrentValue;
+    if (!benchmarkValue) {
+      benchmarkCurrentValue = 0.5;
+    } else if (benchmarkValue > totalValue) {
+      benchmarkCurrentValue = 1;
+    } else {
+      benchmarkCurrentValue = benchmarkValue / totalValue;
+    }
+    if (currentValue / totalValue <= benchmarkCurrentValue) {
       return linearGradientUnderAvarageColor;
     } else {
       return linearGradientColor;
     }
   };
+  var getBenchmarkLeft = function getBenchmarkLeft() {
+    if (!benchmarkValue) {
+      return width / 2;
+    }
+    if (benchmarkValue > totalValue) {
+      return width;
+    }
+    return width * (benchmarkValue / totalValue);
+  };
   return /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.ControlsContainer, {
     height: height,
     width: width
@@ -72,7 +98,7 @@ var Benchmark = function Benchmark(_ref) {
     height: height + 4,
     width: 0,
     top: -2,
-    left: width / 2
+    left: getBenchmarkLeft()
   })));
 };
 exports.Benchmark = Benchmark;

package/dist/stories/components/FilterContainer.js

@@ -10,6 +10,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _FilterContainer = require("./FilterContainer.style");
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+require("./Filter.css");
 var _excluded = ["width", "nodeRef", "height"];
 var _templateObject;
 var Card = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
@@ -24,7 +25,7 @@ var FilterContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     width: width,
     height: height
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: props.className,
+    className: 'filter',
     ref: nodeRef
   }, props.children), /*#__PURE__*/_react.default.createElement(_FilterContainer.FilterFooterContent, null));
 });

package/dist/stories/components/SegmentedButton.js

@@ -11,15 +11,15 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _SegmentedButtonStyle = require("./SegmentedButton.style.js");
-var _excluded = ["name", "options", "segmentWidth", "segmentHeigth", "controlRadius", "segmentRadius", "fontSize", "backgroundColor", "selectedSegmentColor", "selectedTextColor", "unselectedTextColor", "defaultIndex", "onClick"];
+var _excluded = ["name", "options", "width", "heigth", "controlRadius", "segmentRadius", "fontSize", "backgroundColor", "selectedSegmentColor", "selectedTextColor", "unselectedTextColor", "defaultIndex", "onClick"];
 /*SegmentedButton*/
 var SegmentedButton = function SegmentedButton(_ref) {
   var name = _ref.name,
     options = _ref.options,
-    _ref$segmentWidth = _ref.segmentWidth,
-    segmentWidth = _ref$segmentWidth === void 0 ? 120 : _ref$segmentWidth,
-    _ref$segmentHeigth = _ref.segmentHeigth,
-    segmentHeigth = _ref$segmentHeigth === void 0 ? 41 : _ref$segmentHeigth,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 120 : _ref$width,
+    _ref$heigth = _ref.heigth,
+    heigth = _ref$heigth === void 0 ? 40 : _ref$heigth,
     _ref$controlRadius = _ref.controlRadius,
     controlRadius = _ref$controlRadius === void 0 ? 8 : _ref$controlRadius,
     _ref$segmentRadius = _ref.segmentRadius,
@@ -76,6 +76,10 @@ var SegmentedButton = function SegmentedButton(_ref) {
       value: value
     });
   };
+  var segmentWidth = 120;
+  if (options && options.length > 0 && width && width > 0) {
+    segmentWidth = width / options.length;
+  }
   return /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.ControlsContainer, {
     fontSize: fontSize,
     ref: controlRef
@@ -108,7 +112,7 @@ var SegmentedButton = function SegmentedButton(_ref) {
     }), /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.SegmentLabel, {
       selectedTextColor: selectedTextColor,
       unselectedTextColor: unselectedTextColor,
-      segmentHeigth: segmentHeigth / 5,
+      segmentHeigth: heigth / 5,
       className: "".concat(activeIndex === i ? "active" : "inactive", " "),
       htmlFor: item.value
     }, item.value));

package/dist/stories/components/TotalBenchmark.js

@@ -40,6 +40,7 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
       totalValue: item.totalValue,
       currentValue: item.value,
+      benchmarkValue: item.benchmarkValue,
       height: 12,
       width: 100,
       color: "#79DB95",

package/dist/stories/components/TotalBenchmarkArrows.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TotalBenchmarkArrows = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _ArrowUpIcon = require("./ArrowUpIcon");
+var _ArrowDownIcon = require("./ArrowDownIcon");
+var _CommonFunctions = require("./CommonFunctions");
+var _Benchmark = require("./Benchmark");
+var _TotalBenchmarkArrowsStyle = require("./TotalBenchmarkArrows.style.js");
+var _excluded = ["title", "value", "benchmarkTotalValue", "benchmarkValue", "detailsTitle", "detailsData", "dotCut", "width", "height", "textColor"];
+/*TotalBenchmarkArrows*/
+var TotalBenchmarkArrows = function TotalBenchmarkArrows(_ref) {
+  var title = _ref.title,
+    value = _ref.value,
+    benchmarkTotalValue = _ref.benchmarkTotalValue,
+    benchmarkValue = _ref.benchmarkValue,
+    _ref$detailsTitle = _ref.detailsTitle,
+    detailsTitle = _ref$detailsTitle === void 0 ? "" : _ref$detailsTitle,
+    detailsData = _ref.detailsData,
+    _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);
+  var getArrowSign = function getArrowSign(value) {
+    if (!value) {
+      return "";
+    }
+    if (value >= 0) {
+      return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrow, {
+        value: value
+      }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, null));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrow, {
+        value: value
+      }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, null));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.ControlsContainer, {
+    height: height,
+    width: width,
+    textColor: textColor
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.Controls, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.Title, {
+    width: width
+  }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.FormattedValue, {
+    width: width
+  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.BenchmarkContainer, {
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
+    totalValue: benchmarkTotalValue,
+    currentValue: value,
+    benchmarkValue: benchmarkValue,
+    height: 12,
+    width: 100,
+    color: "#79DB95",
+    linearGradientColor: "#C3EFD0",
+    linearGradientUnderAvarageColor: "#FDB1B1",
+    underAvarageColor: "#FD5959",
+    backgroundColor: "#F2F2F2"
+  })) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsContainer, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsTitle, {
+    height: height,
+    width: width
+  }, detailsTitle), detailsData.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowContainer, {
+      height: height,
+      width: width,
+      index: index
+    }, getArrowSign(item.value), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowFormattedValue, null, item.value ? Math.abs(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowPercentSign, null, " % "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowTitle, {
+      height: height,
+      width: width
+    }, item.title));
+  })), ";"));
+};
+exports.TotalBenchmarkArrows = TotalBenchmarkArrows;
+var _default = TotalBenchmarkArrows;
+exports.default = _default;

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

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.FormattedValue = exports.DetailsTitle = exports.DetailsRowTitle = exports.DetailsRowPercentSign = exports.DetailsRowFormattedValue = exports.DetailsRowContainer = exports.DetailsRowArrow = exports.DetailsContainer = 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, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+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: ", ";\n  top: 68px;\n  left: 40px;\n  background: #ffffff;\n  //border: 1px solid yellow;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+}, function (props) {
+  return (props.height - MIN_HEIGHT <= 0 ? 230 : 230 + (props.height - MIN_HEIGHT)).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 ? 250 : 250 + (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 ? 217 : 217 + (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;
+var DetailsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";  \n  height: ", ";  \n  left: 0px;\n  top: 150px;\n  //border: 1px solid green;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+}, function (props) {
+  return (props.height - MIN_HEIGHT <= 0 ? 80 : 80 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
+});
+exports.DetailsContainer = DetailsContainer;
+var DetailsTitle = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: 22px;\n  left: 0px;\n  top: 0px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 240 : 240 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+});
+exports.DetailsTitle = DetailsTitle;
+var DetailsRowContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: inline-flex;\n  width: ", ";\n  height: 35px;\n  left: 0px;\n  top: ", ";\n  //border: 1px solid brown;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 220 : 220 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+}, function (props) {
+  return (35 + 35 * props.index).toString().concat("", "px");
+});
+exports.DetailsRowContainer = DetailsRowContainer;
+var DetailsRowArrow = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([" \n  margin-left: 0px;\n  margin-top: 4px;   \n  height: 12px;     \n  font-size: 12px;\n  line-height: 14px; \n  //border: 1px solid red;\n"])));
+exports.DetailsRowArrow = DetailsRowArrow;
+var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 5px;\n  height: 19px;\n  left: 0px;\n  top: 0px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
+exports.DetailsRowFormattedValue = DetailsRowFormattedValue;
+var DetailsRowPercentSign = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n  margin-left: 5px;\n  margin-top: 3px;\n  margin-right: 10px;\n  text-align: bottom;\n  height: 16px;\n  left: 32px;\n  top: 5px;\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 14px;\n  //border: 1px solid red;\n"])));
+exports.DetailsRowPercentSign = DetailsRowPercentSign;
+var DetailsRowTitle = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["   \n  height: 19px;\n  left: 50px;\n  top: 0px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
+exports.DetailsRowTitle = DetailsRowTitle;

package/dist/stories/components/TotalBenchmarkBarchart.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TotalBenchmarkBarchart = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _recharts = require("recharts");
+var _CommonFunctions = require("./CommonFunctions");
+var _Benchmark = require("./Benchmark");
+var _TotalBenchmarkBarchartStyle = require("./TotalBenchmarkBarchart.style.js");
+var _excluded = ["title", "value", "benchmarkTotalValue", "benchmarkValue", "currency", "currencyType", "barChartData", "dotCut", "width", "height", "textColor"];
+/*TotalBenchmarkBarchart*/
+var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
+  var title = _ref.title,
+    value = _ref.value,
+    benchmarkTotalValue = _ref.benchmarkTotalValue,
+    benchmarkValue = _ref.benchmarkValue,
+    _ref$currency = _ref.currency,
+    currency = _ref$currency === void 0 ? true : _ref$currency,
+    _ref$currencyType = _ref.currencyType,
+    currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
+    barChartData = _ref.barChartData,
+    _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);
+  var formattedBarChartData = [];
+  if (barChartData && barChartData.length === 2) {
+    formattedBarChartData.push({
+      title1: barChartData[0].title,
+      value1: barChartData[0].value,
+      formattedValue1: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)) : "",
+      color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
+      title2: barChartData[1].title,
+      value2: barChartData[1].value,
+      formattedValue2: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)) : "",
+      color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ControlsContainer, {
+    height: height,
+    width: width,
+    textColor: textColor
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Controls, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Title, {
+    width: width
+  }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ValueAndBenchmarkContainer, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.CurrencySign, null, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.FormattedValue, {
+    width: width
+  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BenchmarkContainer, {
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
+    totalValue: benchmarkTotalValue,
+    currentValue: value,
+    benchmarkValue: benchmarkValue,
+    height: 12,
+    width: 100,
+    color: "#79DB95",
+    linearGradientColor: "#C3EFD0",
+    linearGradientUnderAvarageColor: "#FDB1B1",
+    underAvarageColor: "#FD5959",
+    backgroundColor: "#F2F2F2"
+  })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+    width: 240,
+    height: 120,
+    data: formattedBarChartData,
+    margin: {
+      top: 20,
+      right: -20,
+      bottom: 0,
+      left: -20
+    }
+  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
+    strokeDasharray: "3 3",
+    vertical: false
+  }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
+    dataKey: "value1",
+    fill: formattedBarChartData[0].color1,
+    name: "Actual",
+    maxBarSize: 60,
+    radius: [5, 5, 0, 0]
+  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+    dataKey: "formattedValue1",
+    position: "top",
+    fill: textColor,
+    style: (0, _defineProperty2.default)({}, "font-size", "16px")
+  })), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
+    dataKey: "value2",
+    fill: formattedBarChartData[0].color2,
+    name: "Base Line",
+    maxBarSize: 60,
+    radius: [5, 5, 0, 0],
+    label: "aaa"
+  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+    dataKey: "formattedValue2",
+    position: "top",
+    fill: textColor,
+    style: (0, _defineProperty2.default)({}, "font-size", "16px")
+  }))), formattedBarChartData && formattedBarChartData.length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
+    height: height,
+    width: width
+  }, formattedBarChartData[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
+    height: height,
+    width: width
+  }, formattedBarChartData[0].title2)) : ""), ";"));
+};
+exports.TotalBenchmarkBarchart = TotalBenchmarkBarchart;
+var _default = TotalBenchmarkBarchart;
+exports.default = _default;

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.BarchartContainer = 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;
+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: ", ";\n  top: 68px;\n  left: 40px;\n  background: #ffffff;\n  //border: 1px solid yellow;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+}, function (props) {
+  return (props.height - MIN_HEIGHT <= 0 ? 230 : 230 + (props.height - MIN_HEIGHT)).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 ? 250 : 250 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+});
+exports.Title = Title;
+var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: inline-flex;\n  width: ", ";\n  height: ", ";\n  left: 0px;\n  top: 30px;\n  //border: 1px solid green;\n"])), function (props) {
+  return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+}, function (props) {
+  return (props.height - MIN_HEIGHT <= 0 ? 0 : 0 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
+});
+exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
+var CurrencySign = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  //position: absolute;\n  margin-left: 0px;\n  margin-top: 19px;\n  width: 11px;\n  height: 22px;\n  left: 40px;\n  top: 10px;\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(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  //position: absolute;\n  margin-left: 2px;\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 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
+});
+exports.FormattedValue = FormattedValue;
+var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  //position: absolute;\n  margin-left: 4px;\n  margin-top: 26px;\n  width: 100px;\n  height: 12px;\n  left: ", ";\n  //top: 24px;\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;
+var BarchartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  //   display: inline-flex;\n  width: 240 px;\n  height: ", ";\n  left: 0px;\n  top: 120px;\n  //border: 1px solid green;\n"])), function (props) {
+  return (props.height - MIN_HEIGHT <= 0 ? 100 : 100 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
+});
+exports.BarchartContainer = BarchartContainer;
+var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  //width: 245px;\n  height: 20px;\n  left: 0px;\n  top: 3px;\n \n  //border: 1px solid brown;\n"])));
+exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
+var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-top: 1px;\n  margin-left: 1px;  \n  margin-right: 1px;\n  height: 19px;\n  width: 115px;\n  left: 0px;\n  top: 0px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  //border: 1px solid red;\n"])));
+exports.BottomDetailsRowTitle = BottomDetailsRowTitle;

package/package.json

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

package/dist/stories/Button.style.js

@@ -1,14 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-"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

@@ -1,28 +0,0 @@
-"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

@@ -1,39 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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;