sag_components 1.0.397 → 1.0.398

package/dist/stories/components/TotalBenchmarkArrows.js

@@ -1,12 +1,10 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TotalBenchmarkArrows = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ArrowUpIcon = require("./icons/ArrowUpIcon");
 var _ArrowDownIcon = require("./icons/ArrowDownIcon");
@@ -15,49 +13,47 @@ var _CommonFunctions = require("./CommonFunctions");
 var _Benchmark = require("./Benchmark");
 var _TotalBenchmarkArrows = require("./TotalBenchmarkArrows.style");
 /* TotalBenchmarkArrows */
-var TotalBenchmarkArrows = exports.TotalBenchmarkArrows = function TotalBenchmarkArrows(props) {
-  var title = props.title,
-    value = props.value,
-    addingBenchmark = props.addingBenchmark,
-    benchmarkTotalValue = props.benchmarkTotalValue,
-    benchmarkValue = props.benchmarkValue,
-    detailsTitle = props.detailsTitle,
-    detailsData = props.detailsData,
-    dotCut = props.dotCut,
-    width = props.width,
-    height = props.height,
-    textcolor = props.textcolor,
-    noDataText = props.noDataText;
-  var DEFAULT_ROOT_FONT = 16;
-  var DEFAULT_COMPONENT_WIDTH = 250;
-  var DEFAULT_COMPONENT_HEIGHT = 280;
-  var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px')),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    rootFont = _useState2[0],
-    setRootFont = _useState2[1];
-  var _useState3 = (0, _react.useState)(1),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    heightFactor = _useState4[0],
-    setHeightFactor = _useState4[1];
-  var controlsContainerRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    var offsetWidth = controlsContainerRef.current.offsetWidth;
+const TotalBenchmarkArrows = props => {
+  const {
+    title,
+    value,
+    addingBenchmark,
+    benchmarkTotalValue,
+    benchmarkValue,
+    detailsTitle,
+    detailsData,
+    dotCut,
+    width,
+    height,
+    textcolor,
+    noDataText
+  } = props;
+  const DEFAULT_ROOT_FONT = 16;
+  const DEFAULT_COMPONENT_WIDTH = 250;
+  const DEFAULT_COMPONENT_HEIGHT = 280;
+  const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
+  const [heightFactor, setHeightFactor] = (0, _react.useState)(1);
+  const controlsContainerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    const {
+      offsetWidth
+    } = controlsContainerRef.current;
     setRootFont(getRootFont(offsetWidth));
   }, [width]);
-  (0, _react.useEffect)(function () {
-    var offsetHeight = controlsContainerRef.current.offsetHeight;
-    var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
+  (0, _react.useEffect)(() => {
+    const {
+      offsetHeight
+    } = controlsContainerRef.current;
+    const factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
     setHeightFactor(factor);
   }, [height]);
-  var getRootFont = function getRootFont(width) {
-    var relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
-    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
+  const getRootFont = width => {
+    const relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
+    const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
     return fontRoot;
   };
-  var getSizeFactor = function getSizeFactor() {
-    return rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
-  };
-  var getArrowSign = function getArrowSign(arrowSign) {
+  const getSizeFactor = () => rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
+  const getArrowSign = arrowSign => {
     if (!arrowSign) {
       return '';
     }
@@ -111,23 +107,22 @@ var TotalBenchmarkArrows = exports.TotalBenchmarkArrows = function TotalBenchmar
     id: "DetailsContainer"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsTitle, {
     id: "DetailsTitle"
-  }, detailsTitle), detailsData.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowContainer, {
-      id: "DetailsRowContainer",
-      key: item.title
-    }, item.value !== undefined && item.value != null ? getArrowSign(item.value >= 0 ? 'up' : 'down') : '', /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowFormattedValue, {
-      id: "DetailsRowFormattedValue"
-    }, item.value !== undefined && item.value != null ? Math.abs(item.value) : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowPercentSign, {
-      id: "DetailsRowPercentSign"
-    }, item.value !== undefined && item.value != null ? ' % ' : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowFormattedValueNoDataMessage, {
-      id: "DetailsRowFormattedValueNoDataMessage"
-    }, item.value === undefined || item.value === null ? 'No Data' : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowTitle, {
-      id: "DetailsRowTitle"
-    }, item.title));
-  }))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  }, detailsTitle), detailsData.map(item => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowContainer, {
+    id: "DetailsRowContainer",
+    key: item.title
+  }, item.value !== undefined && item.value != null ? getArrowSign(item.value >= 0 ? 'up' : 'down') : '', /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowFormattedValue, {
+    id: "DetailsRowFormattedValue"
+  }, item.value !== undefined && item.value != null ? Math.abs(item.value) : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowPercentSign, {
+    id: "DetailsRowPercentSign"
+  }, item.value !== undefined && item.value != null ? ' % ' : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowFormattedValueNoDataMessage, {
+    id: "DetailsRowFormattedValueNoDataMessage"
+  }, item.value === undefined || item.value === null ? 'No Data' : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.DetailsRowTitle, {
+    id: "DetailsRowTitle"
+  }, item.title))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
+exports.TotalBenchmarkArrows = TotalBenchmarkArrows;
 var _default = exports.default = TotalBenchmarkArrows;
 TotalBenchmarkArrows.defaultProps = {
   title: 'Title',

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

@@ -8,23 +8,17 @@ exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = ex
 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, _templateObject13, _templateObject14;
-var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
-  return props.textColor;
-}, function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
-var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  width: 90%;\n  height: 100%;\n  background: #ffffff;  \n  flex-direction: column;\n  flex-basis: 100%;\n  //align-items: center;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0px 0.8rem;\n  \n"])));
-var Title = exports.Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([" \n  font-weight: 500;\n  font-size: 1rem;\n  // margin-bottom: 1rem;\n"])));
-var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: baseline;\n  height: 45%;\n"])));
-var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
-var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.77778rem;\n  width: 5.35rem;\n"])));
-var DetailsContainer = exports.DetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 14rem; */\n  height: 50%;\n"])));
-var DetailsTitle = exports.DetailsTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 25%;\n  font-weight: 500;\n  font-size: 1rem;\n"])));
-var DetailsRowContainer = exports.DetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  text-align: center;\n  align-items: baseline;\n  height: 25%;\n"])));
-var DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 0.8rem;\n  align-items: flex-end;\n  height: 25%;\n"])));
-var DetailsRowFormattedValue = exports.DetailsRowFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 0.88889rem;\n"])));
-var DetailsRowFormattedValueNoDataMessage = exports.DetailsRowFormattedValueNoDataMessage = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 0.88889rem;\n  margin: 0;  \n"])));
-var DetailsRowPercentSign = exports.DetailsRowPercentSign = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 12px;\n"])));
-var DetailsRowTitle = exports.DetailsRowTitle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 400;\n  font-size: 0.88889rem;\n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), props => props.textColor, props => props.width, props => props.height);
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  width: 90%;\n  height: 100%;\n  background: #ffffff;  \n  flex-direction: column;\n  flex-basis: 100%;\n  //align-items: center;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0px 0.8rem;\n  \n"])));
+const Title = exports.Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([" \n  font-weight: 500;\n  font-size: 1rem;\n  // margin-bottom: 1rem;\n"])));
+const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: baseline;\n  height: 45%;\n"])));
+const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
+const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.77778rem;\n  width: 5.35rem;\n"])));
+const DetailsContainer = exports.DetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 14rem; */\n  height: 50%;\n"])));
+const DetailsTitle = exports.DetailsTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 25%;\n  font-weight: 500;\n  font-size: 1rem;\n"])));
+const DetailsRowContainer = exports.DetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  text-align: center;\n  align-items: baseline;\n  height: 25%;\n"])));
+const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 0.8rem;\n  align-items: flex-end;\n  height: 25%;\n"])));
+const DetailsRowFormattedValue = exports.DetailsRowFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 0.88889rem;\n"])));
+const DetailsRowFormattedValueNoDataMessage = exports.DetailsRowFormattedValueNoDataMessage = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 0.88889rem;\n  margin: 0;  \n"])));
+const DetailsRowPercentSign = exports.DetailsRowPercentSign = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 12px;\n"])));
+const DetailsRowTitle = exports.DetailsRowTitle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 400;\n  font-size: 0.88889rem;\n"])));

package/dist/stories/components/TotalBenchmarkBarchart.js

@@ -1,12 +1,10 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TotalBenchmarkBarchart = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _recharts = require("recharts");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
@@ -14,56 +12,53 @@ var _CommonFunctions = require("./CommonFunctions");
 var _Benchmark = require("./Benchmark");
 var _TotalBenchmarkBarchart = require("./TotalBenchmarkBarchart.style");
 /* TotalBenchmarkBarchart */
-var TotalBenchmarkBarchart = exports.TotalBenchmarkBarchart = function TotalBenchmarkBarchart(props) {
-  var title = props.title,
-    value = props.value,
-    addingBenchmark = props.addingBenchmark,
-    benchmarkTotalValue = props.benchmarkTotalValue,
-    benchmarkValue = props.benchmarkValue,
-    currency = props.currency,
-    currencyType = props.currencyType,
-    barChartData = props.barChartData,
-    _props$dotCut = props.dotCut,
-    dotCut = _props$dotCut === void 0 ? true : _props$dotCut,
-    width = props.width,
-    height = props.height,
-    textcolor = props.textcolor,
-    noDataText = props.noDataText;
-  var DEFAULT_ROOT_FONT = 16;
-  var DEFAULT_COMPONENT_WIDTH = 250;
-  var DEFAULT_COMPONENT_HEIGHT = 280;
-  var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px')),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    rootFont = _useState2[0],
-    setRootFont = _useState2[1];
-  var _useState3 = (0, _react.useState)(1),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    heightFactor = _useState4[0],
-    setHeightFactor = _useState4[1];
-  var controlsContainerRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    var offsetWidth = controlsContainerRef.current.offsetWidth;
+const TotalBenchmarkBarchart = props => {
+  const {
+    title,
+    value,
+    addingBenchmark,
+    benchmarkTotalValue,
+    benchmarkValue,
+    currency,
+    currencyType,
+    barChartData,
+    dotCut = true,
+    width,
+    height,
+    textcolor,
+    noDataText
+  } = props;
+  const DEFAULT_ROOT_FONT = 16;
+  const DEFAULT_COMPONENT_WIDTH = 250;
+  const DEFAULT_COMPONENT_HEIGHT = 280;
+  const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
+  const [heightFactor, setHeightFactor] = (0, _react.useState)(1);
+  const controlsContainerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    const {
+      offsetWidth
+    } = controlsContainerRef.current;
     setRootFont(getRootFont(offsetWidth));
   }, [width]);
-  (0, _react.useEffect)(function () {
-    var offsetHeight = controlsContainerRef.current.offsetHeight;
-    var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
+  (0, _react.useEffect)(() => {
+    const {
+      offsetHeight
+    } = controlsContainerRef.current;
+    const factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
     setHeightFactor(factor);
   }, [height]);
-  var getRootFont = function getRootFont(width) {
-    var relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
-    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
+  const getRootFont = width => {
+    const relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
+    const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
     return fontRoot;
   };
-  var getSizeFactor = function getSizeFactor() {
-    return rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
-  };
-  var getFormattedBarChartData = function getFormattedBarChartData() {
-    var formattedBarChartData = [];
-    var currencySign = currency === true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : '';
+  const getSizeFactor = () => rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
+  const getFormattedBarChartData = () => {
+    const formattedBarChartData = [];
+    const currencySign = currency === true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : '';
     if (barChartData && (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) === 2) {
-      barChartData.forEach(function (data, i) {
-        var formattedData = {
+      barChartData.forEach((data, i) => {
+        const formattedData = {
           id: i,
           title: data.title,
           value: data.value,
@@ -123,12 +118,10 @@ var TotalBenchmarkBarchart = exports.TotalBenchmarkBarchart = function TotalBenc
     dataKey: "value",
     name: "title",
     radius: [5, 5, 0, 0]
-  }, getFormattedBarChartData().map(function (entry) {
-    return /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
-      key: entry.id,
-      fill: entry.color
-    });
-  }), /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+  }, getFormattedBarChartData().map(entry => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
+    key: entry.id,
+    fill: entry.color
+  })), /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
     dataKey: "formattedValue",
     position: "top",
     fill: "#212121",
@@ -144,6 +137,7 @@ var TotalBenchmarkBarchart = exports.TotalBenchmarkBarchart = function TotalBenc
     noDataText: noDataText
   }));
 };
+exports.TotalBenchmarkBarchart = TotalBenchmarkBarchart;
 var _default = exports.default = TotalBenchmarkBarchart;
 TotalBenchmarkBarchart.defaultProps = {
   title: 'Title',

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

@@ -8,19 +8,13 @@ exports.ValueAndBenchmarkContainer = exports.TitleAndValueContainer = exports.Ti
 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 ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background: #ffffff;\n"])), function (props) {
-  return props.textColor;
-}, function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
-var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  background: #ffffff; \n  justify-content: space-between;\n  flex-direction: column;\n  flex-basis: 100%;\n"])));
-var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0px;\n"])));
-var Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem; \n"])));
-var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: baseline;   \n\n"])));
-var CurrencySign = exports.CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["  \n  font-weight: 500;\n  font-size: 1rem;\n"])));
-var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
-var FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;  \n"])));
-var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.7em;\n  width: 5.35em;\n"])));
-var BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background: #ffffff;\n"])), props => props.textColor, props => props.width, props => props.height);
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  background: #ffffff; \n  justify-content: space-between;\n  flex-direction: column;\n  flex-basis: 100%;\n"])));
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0px;\n"])));
+const Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem; \n"])));
+const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: baseline;   \n\n"])));
+const CurrencySign = exports.CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["  \n  font-weight: 500;\n  font-size: 1rem;\n"])));
+const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
+const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;  \n"])));
+const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.7em;\n  width: 5.35em;\n"])));
+const BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/TotalDoughnutChart.js

@@ -1,12 +1,10 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TotalDoughnutChart = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _recharts = require("recharts");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
@@ -14,38 +12,37 @@ var _CommonFunctions = require("./CommonFunctions");
 var _TotalDoughnutChart = require("./TotalDoughnutChart.style");
 var _Benchmark = require("./Benchmark");
 /* TotalDoughnutChart */
-var TotalDoughnutChart = exports.TotalDoughnutChart = function TotalDoughnutChart(props) {
-  var title = props.title,
-    value = props.value,
-    addingBenchmark = props.addingBenchmark,
-    dotCut = props.dotCut,
-    currencySign = props.currencySign,
-    currencyType = props.currencyType,
-    legendData = props.legendData,
-    itemsPercentagesValueAside = props.itemsPercentagesValueAside,
-    itemsBoldedValues = props.itemsBoldedValues,
-    itemsValuesSeparateLine = props.itemsValuesSeparateLine,
-    width = props.width,
-    height = props.height,
-    textcolor = props.textcolor,
-    noDataText = props.noDataText;
-  var DEFAULT_ROOT_FONT = 18;
-  var DEFAULT_COMPONENT_WIDTH = 250;
-  var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px')),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    rootFont = _useState2[0],
-    setRootFont = _useState2[1];
-  var controlsContainerRef = (0, _react.useRef)();
-  var getRootFont = function getRootFont(scopeWidth) {
-    var relation = scopeWidth.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
-    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
+const TotalDoughnutChart = props => {
+  const {
+    title,
+    value,
+    addingBenchmark,
+    dotCut,
+    currencySign,
+    currencyType,
+    legendData,
+    itemsPercentagesValueAside,
+    itemsBoldedValues,
+    itemsValuesSeparateLine,
+    width,
+    height,
+    textcolor,
+    noDataText
+  } = props;
+  const DEFAULT_ROOT_FONT = 18;
+  const DEFAULT_COMPONENT_WIDTH = 250;
+  const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
+  const controlsContainerRef = (0, _react.useRef)();
+  const getRootFont = scopeWidth => {
+    const relation = scopeWidth.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
+    const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
     return fontRoot;
   };
-  var dotCutTrenty = function dotCutTrenty(row) {
-    return dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value);
-  };
-  (0, _react.useEffect)(function () {
-    var offsetWidth = controlsContainerRef.current.offsetWidth;
+  const dotCutTrenty = row => dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value);
+  (0, _react.useEffect)(() => {
+    const {
+      offsetWidth
+    } = controlsContainerRef.current;
     setRootFont(getRootFont(offsetWidth));
   }, [width]);
   return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.ControlsContainer, {
@@ -84,42 +81,39 @@ var TotalDoughnutChart = exports.TotalDoughnutChart = function TotalDoughnutChar
     data: legendData,
     outerRadius: rootFont.toString().replace('px', '') * 2,
     innerRadius: rootFont.toString().replace('px', '') * 1.5
-  }, legendData.map(function (row) {
-    return /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
-      key: "cell-".concat(row.name),
-      fill: row.color
-    });
-  })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+  }, legendData.map(row => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
+    key: "cell-".concat(row.name),
+    fill: row.color
+  }))), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/_react.default.createElement(CustomTooltip, {
       value: value
     })
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendContainer, {
     id: "LegendContainer"
-  }, legendData.map(function (row) {
-    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendControlsContainer, {
-      id: "LegendControlsContainer",
-      key: row.name
-    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendColorRectangle, {
-      id: "LegendColorRectangle",
-      color: row.color
-    }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitleAndFormatedValueContainer, {
-      id: "LegendTitleAndFormatedValueContainer"
-    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitle, {
-      id: "LegendTitle",
-      style: {
-        flexDirection: itemsValuesSeparateLine ? 'column' : 'row',
-        alignItems: itemsValuesSeparateLine ? 'baseline' : 'center'
-      }
-    }, row.name, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendFormattedValue, {
-      id: "LegendFormattedValue",
-      style: {
-        fontWeight: itemsBoldedValues ? '700' : '500'
-      }
-    }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : '', row.value !== undefined && row.value !== null ? dotCutTrenty(row) : 'No Data', row.value !== undefined && row.value !== null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)")))));
-  })))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  }, legendData.map(row => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendControlsContainer, {
+    id: "LegendControlsContainer",
+    key: row.name
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendColorRectangle, {
+    id: "LegendColorRectangle",
+    color: row.color
+  }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitleAndFormatedValueContainer, {
+    id: "LegendTitleAndFormatedValueContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitle, {
+    id: "LegendTitle",
+    style: {
+      flexDirection: itemsValuesSeparateLine ? 'column' : 'row',
+      alignItems: itemsValuesSeparateLine ? 'baseline' : 'center'
+    }
+  }, row.name, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendFormattedValue, {
+    id: "LegendFormattedValue",
+    style: {
+      fontWeight: itemsBoldedValues ? '700' : '500'
+    }
+  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : '', row.value !== undefined && row.value !== null ? dotCutTrenty(row) : 'No Data', row.value !== undefined && row.value !== null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)"))))))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
+exports.TotalDoughnutChart = TotalDoughnutChart;
 var _default = exports.default = TotalDoughnutChart;
 TotalDoughnutChart.defaultProps = {
   title: '',
@@ -138,11 +132,13 @@ TotalDoughnutChart.defaultProps = {
   noDataText: ''
 };
 function CustomTooltip(_ref) {
-  var active = _ref.active,
-    payload = _ref.payload,
-    value = _ref.value;
+  let {
+    active,
+    payload,
+    value
+  } = _ref;
   if (active && payload && payload.length) {
-    var percent = value && value !== 0 ? (payload[0].value / value * 100).toFixed(0) : 0;
+    const percent = value && value !== 0 ? (payload[0].value / value * 100).toFixed(0) : 0;
     return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TooltipLabel, null, "".concat(payload[0].name, " ").concat(percent, "%")));
   }
 }

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

@@ -8,32 +8,22 @@ exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exp
 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, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
-var scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
-var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  @media (max-width: 1536px) {\n    ", "\n  }\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
-  return props.rootFont;
-}, function (props) {
-  return props.textColor;
-}, function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-}, scrollableStyles);
-var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
-var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  background: white;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  padding: 6px 10px;\n  margin: 0;\n"])));
-var TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  width: max-content; // fit-content;  \n  line-height: normal;\n  margin: 0;\n"])));
-var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
-var Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
-var CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
-var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
-var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  } \n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
-var DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: auto;\n  padding: 0 20px;\n"])));
-var DoughnutChart = exports.DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 45%;\n  flex-basis: 45%;\n  min-height: 6rem;\n"])));
-var LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n"])));
-var LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.375rem;\n"])));
-var LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
-var LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: .875rem;\n"])));
-var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
-  return props.color;
-});
-var LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  gap: 5px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-var LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  white-space: nowrap;\n"])));
+const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  @media (max-width: 1536px) {\n    ", "\n  }\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), props => props.rootFont, props => props.textColor, props => props.width, props => props.height, scrollableStyles);
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
+const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  background: white;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  padding: 6px 10px;\n  margin: 0;\n"])));
+const TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  width: max-content; // fit-content;  \n  line-height: normal;\n  margin: 0;\n"])));
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
+const Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
+const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  } \n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+const DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: auto;\n  padding: 0 20px;\n"])));
+const DoughnutChart = exports.DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 45%;\n  flex-basis: 45%;\n  min-height: 6rem;\n"])));
+const LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n"])));
+const LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.375rem;\n"])));
+const LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
+const LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: .875rem;\n"])));
+const LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), props => props.color);
+const LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  gap: 5px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  white-space: nowrap;\n"])));