sag_components 1.0.249 → 1.0.251

package/.history/package_20231004111550.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.251",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-storysource": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.7",
+    "eslint": "^8.50.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^4.5.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.0",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "@mui/x-date-pickers": "^6.11.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.9",
+    "hoopy": "^0.1.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.6.2",
+    "storybook": "^7.4.5",
+    "styled-components": "^5.3.11"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/dist/stories/components/CommonFunctions.js

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

package/dist/stories/components/TotalDoughnutChart.js

@@ -1,136 +1,154 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _recharts = require("recharts");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
 var _CommonFunctions = require("./CommonFunctions");
-var _recharts = require("recharts");
-var _TotalDoughnutChartStyle = require("./TotalDoughnutChart.style.js");
-var _excluded = ["title", "value", "dotCut", "currency", "currencyType", "legendData", "width", "height", "textColor", "noDataText"];
-/*TotalDoughnutChart*/
-var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "Total Cost" : _ref$title,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? 0 : _ref$value,
-    _ref$dotCut = _ref.dotCut,
-    dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
-    _ref$currency = _ref.currency,
-    currency = _ref$currency === void 0 ? true : _ref$currency,
-    _ref$currencyType = _ref.currencyType,
-    currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
-    legendData = _ref.legendData,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "250px" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "280px" : _ref$height,
-    _ref$textColor = _ref.textColor,
-    textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
-    _ref$noDataText = _ref.noDataText,
-    noDataText = _ref$noDataText === void 0 ? "" : _ref$noDataText,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var DEFAULT_ROOT_FONT = 16;
+var _TotalDoughnutChart = require("./TotalDoughnutChart.style");
+var _Benchmark = require("./Benchmark");
+/* TotalDoughnutChart */
+var 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")),
+  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');
+    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;
     setRootFont(getRootFont(offsetWidth));
   }, [width]);
-  var getRootFont = function getRootFont(width) {
-    var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
-    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
-    return fontRoot;
-  };
-  var CustomTooltip = function CustomTooltip(_ref2) {
-    var active = _ref2.active,
-      payload = _ref2.payload,
-      label = _ref2.label;
-    if (active && payload && payload.length) {
-      console.log(active, payload, label);
-      var percent = value && value != 0 ? (payload[0].value / value * 100).toFixed(0) : 0;
-      return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TooltipLabel, null, "".concat(payload[0].name, " ").concat(percent, "%")));
-    }
-    return null;
-  };
-  var onPieEnterHandler = function onPieEnterHandler() {};
-  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
+  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
     width: width,
     textColor: textColor,
     ref: controlsContainerRef,
     rootFont: rootFont
-  }, (legendData === null || legendData === void 0 ? void 0 : legendData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
+  }, (legendData === null || legendData === void 0 ? void 0 : legendData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Controls, {
     id: "Controls",
     height: height,
     width: width
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TitleAndValueContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Title, {
     id: "Title",
     width: width
-  }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySignAndFormattedValueContainer, {
+  }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySignAndFormattedValueContainer, {
     id: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, {
-    id: "CurrencySign"
-  }, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.FormattedValue, {
     id: "FormattedValue",
     width: width
-  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChartAndLegendContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySign, {
+    id: "CurrencySign"
+  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''), addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartAndLegendContainer, {
     id: "DoughnutChartAndLegendContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChart, {
     id: "DoughnutChart",
     width: width,
     height: height
-  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
-    onMouseEnter: onPieEnterHandler
-  }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
-    data: legendData,
-    outerRadius: 37 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
-    innerRadius: 26 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
+  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, null, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
     fill: "#8884d8",
-    dataKey: "value"
-  }, legendData.map(function (row, index) {
+    dataKey: "value",
+    blendStroke: true,
+    startAngle: -270,
+    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(index),
+      key: "cell-".concat(row.name),
       fill: row.color
     });
   })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
-    content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendContainer, {
+    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, index) {
-    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControlsContainer, {
+  }, legendData.map(function (row) {
+    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendControlsContainer, {
       id: "LegendControlsContainer"
-    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
+    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendColorRectangle, {
       id: "LegendColorRectangle",
       color: row.color
-    }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitleAndFormatedValueContainer, {
+    }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitleAndFormatedValueContainer, {
       id: "LegendTitleAndFormatedValueContainer"
-    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, {
-      id: "LegendTitle"
-    }, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormatedValueContainer, {
-      id: "LegendFormatedValueContainer"
-    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, {
-      id: "LegendCurrencySign"
-    }, row.value != undefined && row.value != null && currency ? (0, _CommonFunctions.getCurrencySign)(currencyType) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, {
-      id: "LegendFormattedValue"
-    }, row.value != undefined && row.value != null ? dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value) : "No Data", row.value != undefined && row.value != null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : ""))));
+    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitle, {
+      id: "LegendTitle",
+      style: {
+        flexWrap: itemsValuesSeparateLine ? 'wrap' : 'nowrap'
+      }
+    }, row.name, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendFormattedValue, {
+      id: "LegendFormattedValue",
+      style: {
+        fontWeight: itemsBoldedValues ? '700' : '500'
+      }
+    }, 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 = TotalDoughnutChart;
-exports.default = _default;
+exports.default = _default;
+TotalDoughnutChart.defaultProps = {
+  title: 'Total Cost',
+  value: 0,
+  addingBenchmark: true,
+  dotCut: false,
+  currencySign: false,
+  currencyType: 'USD',
+  legendData: [],
+  itemsPercentagesValueAside: false,
+  itemsBoldedValues: true,
+  itemsValuesSeparateLine: false,
+  width: '300px',
+  height: '280px',
+  textColor: '#212121',
+  noDataText: ''
+};
+function CustomTooltip(_ref) {
+  var active = _ref.active,
+    payload = _ref.payload,
+    value = _ref.value;
+  if (active && payload && payload.length) {
+    var 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, "%")));
+  }
+}
+CustomTooltip.defaultProps = {
+  active: '',
+  payload: '',
+  value: ''
+};

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

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendCurrencySign = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
+exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = 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, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
-var 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  font-size: ", ";\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) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var 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  align-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
   return props.rootFont;
 }, function (props) {
   return props.textColor;
@@ -18,41 +18,39 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
   return props.height;
 });
 exports.ControlsContainer = ControlsContainer;
-var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  width: 100%;\n  height: 100%;\n  background: #ffffff;\n  align-items: center;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  width: 100%;\n  height: 100%;\n  background: #ffffff;\n  padding: 1rem;\n"])));
 exports.Controls = Controls;
-var TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  background: #fff;\n  padding: 6px 10px;\n  display: flex;\n  flex-direction: row;\n  margin:0;\n"])));
+var TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  background: #fff;\n  padding: 6px 10px;\n  display: flex;\n  margin:0;\n"])));
 exports.TooltipDiv = TooltipDiv;
-var 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 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"])));
 exports.TooltipLabel = TooltipLabel;
-var TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 90%;\n  //margin-top: 6%;\n"])));
+var TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
 exports.TitleAndValueContainer = TitleAndValueContainer;
-var Title = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  font-weight: 500;\n  font-size: 1rem;\n  //margin-bottom: 1rem;\n"])));
+var Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n"])));
 exports.Title = Title;
-var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"])));
+var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 1.7rem;\n"])));
 exports.CurrencySignAndFormattedValueContainer = CurrencySignAndFormattedValueContainer;
-var CurrencySign = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n"])));
+var CurrencySign = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n"])));
 exports.CurrencySign = CurrencySign;
-var FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
+var FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 2.225rem;\n"])));
 exports.FormattedValue = FormattedValue;
-var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 95%;\n  height: 37%;\n  margin-top: 1em; \n  margin-bottom: 1em;  \n"])));
+var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  margin-top: auto;\n"])));
 exports.DoughnutChartAndLegendContainer = DoughnutChartAndLegendContainer;
-var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 34%;\n  height: 100%;\n  min-width: 105px;\n  min-height: 105px;\n"])));
+var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 40%;\n  flex-basis: 40%;\n  min-height: 6rem;\n"])));
 exports.DoughnutChart = DoughnutChart;
-var LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 66%;\n  padding-left: 10px;\n  flex-direction: column;\n  align-items: left;\n  justify-content: space-between;\n"])));
+var LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  padding-left: .300rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n"])));
 exports.LegendContainer = LegendContainer;
-var LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n"])));
+var 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"])));
 exports.LegendControlsContainer = LegendControlsContainer;
-var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n"])));
+var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
 exports.LegendTitleAndFormatedValueContainer = LegendTitleAndFormatedValueContainer;
-var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  font-weight: 700;\n  font-size: 16px;\n"])));
+var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: .875rem;\n"])));
 exports.LegendFormatedValueContainer = LegendFormatedValueContainer;
-var LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.8rem;\n  height: 0.77778rem;\n  margin-right: 0.3rem;\n  background: ", ";\n"])), function (props) {
+var 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;
 });
 exports.LegendColorRectangle = LegendColorRectangle;
-var LegendTitle = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n"])));
+var LegendTitle = _styledComponents.default.h5(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.875rem;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 exports.LegendTitle = LegendTitle;
-var LegendCurrencySign = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
-exports.LegendCurrencySign = LegendCurrencySign;
-var LegendFormattedValue = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var LegendFormattedValue = _styledComponents.default.span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  white-space: nowrap;\n"])));
 exports.LegendFormattedValue = LegendFormattedValue;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "sag_components",
-  "version": "1.0.249",
+  "version": "1.0.251",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
     "start": "react-scripts start",
+    "lint": "eslint .",
     "build": "cross-env BABEL_ENV=production babel src -d dist  ",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -17,26 +18,28 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@storybook/addon-a11y": "^7.0.7",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/addon-storysource": "^7.0.7",
-    "@storybook/blocks": "^7.0.6",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-storysource": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-webpack5": "^7.0.6",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "eslint": "^8.50.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.62.0",
-    "sass-loader": "^10.4.1",
-    "storybook": "^7.0.6",
-    "style-loader": "^2.0.0",
-    "styled-components": "^5.3.10"
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
@@ -50,14 +53,19 @@
     "@mui/material": "^5.13.0",
     "@mui/styled-engine-sc": "^5.12.0",
     "@mui/x-date-pickers": "^6.11.1",
+    "@storybook/addon-designs": "^7.0.5",
     "babel-plugin-react-css-modules": "^5.2.6",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",
     "hoopy": "^0.1.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-css-modules": "^4.7.11",
     "react-loading-skeleton": "^3.3.1",
     "react-scripts": "5.0.1",
-    "recharts": "^2.6.2"
+    "recharts": "^2.6.2",
+    "storybook": "^7.4.5",
+    "styled-components": "^5.3.11"
   },
   "browserslist": {
     "production": [

package/dist/stories/components/InfoIcon.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.InfoIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var InfoIcon = function InfoIcon(_ref) {
-  var clicked = _ref.clicked;
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: clicked ? "white" : "black",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "feather feather-info"
-  }, /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_react.default.createElement("line", {
-    x1: "12",
-    y1: "16",
-    x2: "12",
-    y2: "12"
-  }), /*#__PURE__*/_react.default.createElement("line", {
-    x1: "12",
-    y1: "8",
-    x2: "12",
-    y2: "8"
-  }));
-};
-exports.InfoIcon = InfoIcon;
-var _default = InfoIcon;
-exports.default = _default;