sag_components 1.0.581 → 1.0.583

package/dist/stories/components/PopupCharts.js

@@ -7,23 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _TotalDoughnutChart = require("./TotalDoughnutChart");
+var _BarChartsByWeeks = require("./BarChartsByWeeks");
+var _TotalHorizontalCharts = require("./TotalHorizontalCharts");
 var _CloseXIcon = require("./icons/CloseXIcon");
-var _FoodLionIcon = require("./icons/FoodLionIcon");
-var _HannafordNewIcon = require("./icons/HannafordNewIcon");
-var _StopAndShopIcon = require("./icons/StopAndShopIcon");
-var _GiantFoodIcon = require("./icons/GiantFoodIcon");
-var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
+var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
+var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
+var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
+var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
+var _HannafordIcon_new = require("./icons/HannafordIcon_new");
 var _PopupCharts = require("./PopupCharts.style");
 const PopupCharts = props => {
   const {
     title,
-    PopupChartsItemsData,
+    chartType,
+    popupChartsItemsData,
     isPopupChartsOpen,
     width,
     height,
-    borderColor,
     subtitleTextColor,
-    onOverlayClick
+    onCloseClick
   } = props;
   const [IsPopupChartsOpen, setIsPopupChartsOpen] = (0, _react.useState)(isPopupChartsOpen);
   const divRef = (0, _react.useRef)(null);
@@ -34,80 +36,112 @@ const PopupCharts = props => {
         top,
         bottom
       } = divRef.current.getBoundingClientRect();
-      const height = bottom - top;
-      setDivHeight(height);
+      const newHeight = bottom - top;
+      setDivHeight(newHeight);
     }
   }, [height]);
   (0, _react.useEffect)(() => {
     setIsPopupChartsOpen(isPopupChartsOpen);
   }, [isPopupChartsOpen]);
-  const openPopupCharts = () => {
-    setIsPopupChartsOpen(true);
-  };
   const closePopupCharts = e => {
     setIsPopupChartsOpen(false);
-    onOverlayClick(e);
+    onCloseClick(e);
   };
   const displayRetailerIcon = retailer => {
     switch (retailer) {
-      case "Food Lion":
-        return /*#__PURE__*/_react.default.createElement(_FoodLionIcon.FoodLionIcon, null);
-      case "Hannaford":
-        return /*#__PURE__*/_react.default.createElement(_HannafordNewIcon.HannafordNewIcon, null);
-      case "Stop&Shop":
-        return /*#__PURE__*/_react.default.createElement(_StopAndShopIcon.StopAndShopIcon, {
-          width: 80,
-          height: 25,
-          viewBox: "0 0 1400.000000 160.000000"
-        });
-      case "The Giant Company":
-        return /*#__PURE__*/_react.default.createElement(_TheGiantCompanyIcon.TheGiantCompanyIcon, null);
-      case "Giant Food":
-        return /*#__PURE__*/_react.default.createElement(_GiantFoodIcon.GiantFoodIcon, {
-          width: 80,
-          height: 25,
-          viewBox: "0 0 1300.000000 350.000000"
-        });
+      case 'Food Lion':
+        return /*#__PURE__*/_react.default.createElement(_FoodLionNewIcon.FoodLionNewIcon, null);
+      case 'Hannaford':
+        return /*#__PURE__*/_react.default.createElement(_HannafordIcon_new.HannafordNewIcon, null);
+      case 'Stop&Shop':
+        return /*#__PURE__*/_react.default.createElement(_StopAndShopNewIcon.StopAndShopNewIcon, null);
+      case 'The Giant Company':
+        return /*#__PURE__*/_react.default.createElement(_TheGiantCompanyNewIcon.TheGiantCompanyIcon, null);
+      case 'Giant Food':
+        return /*#__PURE__*/_react.default.createElement(_GiantFoodIcon_new.GiantFoodNewIcon, null);
       default:
-        return "";
+        return '';
     }
   };
-  const displayDoughnutChart = rowsData => {
-    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, {
-      currencySign: true,
-      dotCut: true,
-      legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
-      noDataText: rowsData.noDataText,
-      title: rowsData.title,
-      value: rowsData.value,
-      width: "500px",
-      height: "290px",
-      itemsValuesSeparateLine: false,
-      isPercent: true
-    });
-  };
-  const ChartItem = _ref => {
-    let {
-      title,
-      rowsData
-    } = _ref;
-    return /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
-      id: "ChartItemMainContainer",
-      borderColor: borderColor
-    }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
-      id: "ChartItemContainer",
-      style: {
-        cursor: "pointer"
-      }
-    }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemIconContainer, {
-      id: "ChartItemIconContainer"
-    }, displayRetailerIcon(title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
-      id: "ChartItemTitle",
-      subtitleTextColor: subtitleTextColor
-    }, title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
-      id: "ChartContentContainer"
-    }, displayDoughnutChart(rowsData === null || rowsData === void 0 ? void 0 : rowsData.TotalDoughnutChartDetails)));
+  const displayDoughnutChart = rowsData => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, {
+    currencySign: true,
+    dotCut: true,
+    legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
+    noDataText: rowsData.noDataText,
+    title: rowsData.title,
+    value: rowsData.value,
+    height: "270px",
+    width: "100%",
+    itemsValuesSeparateLine: false,
+    isPercent: true
+  });
+  const displayBarChartsByWeeks = rowsData => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarChartsByWeeks, {
+    legendData: [{
+      iconColor: '#90CE9C',
+      iconType: 'Square',
+      title: 'Sales'
+    }, {
+      iconColor: '#C906FD',
+      iconType: 'LegendLineIcon',
+      title: 'Category Average'
+    }],
+    showLegend: false,
+    barChartColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartColor,
+    barChartData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartData,
+    endWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.endWeekRange,
+    startWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.startWeekRange,
+    title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
+    tooltipTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.tooltipTitle,
+    height: "240px",
+    width: "100%",
+    xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor // "#C7E7CD"
+  });
+
+  const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
+    currencySign: true,
+    dotCut: true,
+    chartsData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.chartsData,
+    noDataText: rowsData.noDataText,
+    title: rowsData.title,
+    value: rowsData.value,
+    showOutgoingBanner: false,
+    height: "240px",
+    width: "100%"
+  });
+  const displayChart = item => {
+    var _item$rowsData, _item$rowsData2, _item$rowsData3;
+    let content;
+    switch (chartType) {
+      case 'TotalDoughnutChart':
+        content = displayDoughnutChart((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.TotalDoughnutChartDetails);
+        break;
+      case 'TotalHorizontalCharts':
+        content = displayTotalHorizontalCharts((_item$rowsData2 = item.rowsData) === null || _item$rowsData2 === void 0 ? void 0 : _item$rowsData2.TotalHorizontalChartsDetails);
+        break;
+      case 'BarChartsByWeeks':
+        content = displayBarChartsByWeeks((_item$rowsData3 = item.rowsData) === null || _item$rowsData3 === void 0 ? void 0 : _item$rowsData3.BarChartsByWeeksDetails);
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", null, content);
   };
+  const displayChartItem = item => /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
+    id: "ChartItemMainContainer"
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
+    id: "ChartItemContainer",
+    style: {
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemIconContainer, {
+    id: "ChartItemIconContainer"
+  }, displayRetailerIcon(item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
+    id: "ChartItemTitle",
+    subtitleTextColor: subtitleTextColor
+  }, item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
+    id: "ChartContentContainer"
+  }, displayChart(item)));
   return /*#__PURE__*/_react.default.createElement(_PopupCharts.MainContainer, {
     id: "MainContainer"
   }, IsPopupChartsOpen && /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalOverlay, {
@@ -125,21 +159,19 @@ const PopupCharts = props => {
   }, /*#__PURE__*/_react.default.createElement(_PopupCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_PopupCharts.CloseXIconContainer, {
     id: "CloseXIconContainer",
     onClick: e => closePopupCharts(e)
-  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContainer, {
-    id: "ChartContainer",
-    maxHeight: divHeight ? (divHeight - 160).toString().concat("", "px") : null
-  }, PopupChartsItemsData.map((item, index) => /*#__PURE__*/_react.default.createElement(ChartItem, {
-    key: index,
-    title: item.title,
-    rowsData: item.rowsData
-  }))))));
+  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartsContainer, {
+    id: "ChartsContainer",
+    maxHeight: divHeight ? (divHeight - 160).toString().concat('', 'px') : null,
+    height: (popupChartsItemsData === null || popupChartsItemsData === void 0 ? void 0 : popupChartsItemsData.length) < 4 ? '45%' : '100%'
+  }, popupChartsItemsData.map(item => displayChartItem(item))))));
 };
 var _default = exports.default = PopupCharts;
 PopupCharts.defaultProps = {
+  title: 'Switching Pattern',
+  chartType: 'TotalDoughnutChart',
   isPopupChartsOpen: true,
-  width: "1700px",
-  height: "800px",
-  onSaveClick: () => {},
-  onCancelClick: () => {},
-  onOverlayClick: () => {}
+  width: '1700px',
+  height: '800px',
+  onCloseClick: () => {},
+  subtitleTextColor: '#7E7E7E'
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.CloseXIconContainer = exports.ChartItemTitle = exports.ChartItemMainContainer = exports.ChartItemIconContainer = exports.ChartItemContainer = exports.ChartContentContainer = exports.ChartContainer = void 0;
+exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.CloseXIconContainer = exports.ChartsContainer = exports.ChartItemTitle = exports.ChartItemMainContainer = exports.ChartItemIconContainer = exports.ChartItemContainer = exports.ChartContentContainer = 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;
@@ -13,10 +13,10 @@ const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templ
 const ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 18px;\n  background-color: #fefefe;\n  padding: 30px 30px 60px 40px;\n  border: 1px solid #888;\n  border-radius: 10px;\n  height: ", ";\n  width: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
 const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 0 20px 0;\n  margin: 0 0 30px 0;\n  border-bottom: 1px solid #b1b1b1;\n"])));
 const Title = exports.Title = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 24px;\n  margin: 0;\n"])));
-const ChartContainer = exports.ChartContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  overflow-y: auto;\n  padding: 0 10px 0 0;\n  max-height: ", ";\n"])), props => props.maxHeight);
-const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 10px 10px 10px 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  border-radius: 12px;\n  /* width: 565px;\n  height: 365px;\n  max-width: 565px;\n  max-height: 365px;  */\n\n"])));
-const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px 10px 10px 10px;\n"])));
+const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr); /* 3 columns */\n  flex-wrap: wrap;  \n  overflow-y: auto;\n  padding: 0 10px 0 0;\n  max-height: ", ";\n  height: ", ";\n \n"])), props => props.maxHeight, props => props.height);
+const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 10px 10px 10px 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  border-radius: 12px;\n"])));
+const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 20px 10px;\n"])));
 const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0 10px;\n  color: ", ";\n"])), props => props.subtitleTextColor);
 const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 10px;\n"])));
-const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 14px;\n  margin: 0;\n  \n"])));
-const CloseXIconContainer = exports.CloseXIconContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 20px 0 0 0;\n  cursor: pointer;\n \n"])));
+const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 14px;\n  margin: 0;\n  border-radius: 12px;\n"])));
+const CloseXIconContainer = exports.CloseXIconContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 20px 0 0 0;\n  cursor: pointer;\n"])));

package/dist/stories/components/ProductsVariety.js

@@ -20,31 +20,29 @@ const ProductsVariety = props => {
     onClickBannersDropdown
   } = props;
   const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
-  const displayBannersDropdown = () => {
-    return /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
-      banners: [{
-        checked: true,
-        name: "StopAndShop"
-      }, {
-        checked: true,
-        name: "FoodLion"
-      }, {
-        checked: true,
-        name: "GiantFood"
-      }, {
-        checked: true,
-        name: "TheGiantCompany"
-      }, {
-        checked: true,
-        name: "Hannaford"
-      }],
-      onClick: banners => {
-        onClickBannersDropdown({
-          banners
-        });
-      }
-    });
-  };
+  const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
+    banners: [{
+      checked: true,
+      name: 'StopAndShop'
+    }, {
+      checked: true,
+      name: 'FoodLion'
+    }, {
+      checked: true,
+      name: 'GiantFood'
+    }, {
+      checked: true,
+      name: 'TheGiantCompany'
+    }, {
+      checked: true,
+      name: 'Hannaford'
+    }],
+    onClick: banners => {
+      onClickBannersDropdown({
+        banners
+      });
+    }
+  });
   return /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyMainContainer, {
     id: "ProductsVarietyMainContainer"
   }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContainer, {
@@ -57,7 +55,7 @@ const ProductsVariety = props => {
     id: "ProductsVarietySubTitle"
   }, "|"), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
     id: "ProductsVarietySubTitle"
-  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ""), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
     id: "ProductButtonContainer",
     onClick: () => {
       setIsProductsListOpen(!IsProductsListOpen);
@@ -77,18 +75,18 @@ const ProductsVariety = props => {
   }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
     id: "ProductButtonContainer",
     background: "#F8CD00",
-    onClick: e => {
+    onClick: () => {
       onSpotlightProductClick({
         value: item.value,
         label: item.label
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ""))));
+  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
 };
 var _default = exports.default = ProductsVariety;
 ProductsVariety.defaultProps = {
-  title: "Products Variety",
-  subTitle: "Product Name",
+  title: 'Products Variety',
+  subTitle: 'Product Name',
   onSpotlightProductClick: () => {},
-  onBannersDropdownClick: () => {}
+  onClickBannersDropdown: () => {}
 };

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

@@ -13,8 +13,8 @@ const ProductsVarietyContainer = exports.ProductsVarietyContainer = _styledCompo
 const ProductsVarietyTitleContainer = exports.ProductsVarietyTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px;\n  gap: 15px;\n"])));
 const ProductsVarietyTitle = exports.ProductsVarietyTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 20px;\n\n  margin: 0;\n"])));
 const ProductsVarietySubTitle = exports.ProductsVarietySubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #757171;\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
-const ProductsVarietyContentContainer = exports.ProductsVarietyContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 10px;\n  padding: 10px 0 0 50px;\n"])));
-const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  //margin: 0 5px 0 10px;\n  margin: 10px 0;\n"])));
-const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  justify-content: flex-start;\n  align-items: center;\n  border-bottom: 1px solid #00000010;\n  width: 50%;\n  //border-radius: 12px;\n  gap: 20px;\n"])));
+const ProductsVarietyContentContainer = exports.ProductsVarietyContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 10px;\n  padding: 10px 20px 20px 50px;\n"])));
+const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 10px 0;\n"])));
+const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-bottom: 1px solid #00000010;\n  width: 100%;\n  gap: 20px;\n"])));
 const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  border-radius: 12px;\n"])));
-const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: ", ";\n  border-radius: 12px;\n  height: 25px;\n  padding: 0 15px;\n  user-select: none;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n  gap: 10px;\n"])), props => props.background || "#ffffff");
+const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: ", ";\n  border-radius: 12px;\n  height: 25px;\n  padding: 0 15px;\n  user-select: none;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n  gap: 10px;\n"])), props => props.background || '#ffffff');

package/dist/stories/components/SalesAndROI.js

@@ -20,10 +20,22 @@ const SalesAndROI = props => {
     height,
     textColor,
     salesData,
-    showOutgoingBanner,
+    showBanner,
     noDataText,
-    onBannerClick
+    onBannerClick,
+    showBorderShadow
   } = props;
+  const getTextBefore = dataItem => {
+    let newTextBefore = '';
+    if (dataItem.textBefore) {
+      newTextBefore = dataItem.textBefore;
+    } else if (currencySign) {
+      newTextBefore = (0, _CommonFunctions.getCurrencySign)(currencyType, dataItem.value);
+    } else {
+      newTextBefore = '';
+    }
+    return newTextBefore;
+  };
   const displayItem = dataItem => {
     var _dataItem$value;
     return /*#__PURE__*/_react.default.createElement(_SalesAndROI.ItemContainer, {
@@ -34,18 +46,19 @@ const SalesAndROI = props => {
       id: "FormattedValue"
     }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.TextBeforeAndAfterValue, {
       id: "TextBeforeAndAfterValue"
-    }, dataItem.textBefore ? dataItem.textBefore : currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, dataItem.value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value) : (0, _CommonFunctions.getNumberWithCommas)(dataItem.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(dataItem.value) : '', /*#__PURE__*/_react.default.createElement(_SalesAndROI.TextBeforeAndAfterValue, null, dataItem.textAfter)));
+    }, getTextBefore(dataItem)), dotCut ? (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value) : (0, _CommonFunctions.getNumberWithCommas)(dataItem.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(dataItem.value) : '', /*#__PURE__*/_react.default.createElement(_SalesAndROI.TextBeforeAndAfterValue, null, dataItem.textAfter)));
   };
   return /*#__PURE__*/_react.default.createElement(_SalesAndROI.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
     width: width,
-    textColor: textColor
+    textColor: textColor,
+    showBorderShadow: showBorderShadow
   }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.TitleAndValueContainer, {
     id: "TitleAndValueContainer"
   }, /*#__PURE__*/_react.default.createElement(_SalesAndROI.Title, {
     id: "Title"
-  }, title), showOutgoingBanner && /*#__PURE__*/_react.default.createElement(_SalesAndROI.OutBanner, {
+  }, title), showBanner && /*#__PURE__*/_react.default.createElement(_SalesAndROI.OutBanner, {
     id: "OutBanner",
     onClick: () => onBannerClick({
       eventName: 'onBannerClick'
@@ -69,7 +82,8 @@ SalesAndROI.defaultProps = {
   width: '100%',
   height: '100%',
   textColor: '#212121',
-  showOutgoingBanner: true,
-  noDataText: 'No Data',
-  onBannerClick: () => {}
+  showBanner: true,
+  noDataText: '',
+  onBannerClick: () => {},
+  showBorderShadow: true
 };

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

@@ -8,9 +8,8 @@ exports.TitleAndValueContainer = exports.Title = exports.TextBeforeAndAfterValue
 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;
-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  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height);
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  margin: 0 0 30px 0;\n  padding: 20px;\n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  box-shadow: ", ";\n  border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height, props => props.showBorderShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null);
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  margin: 0 0 30px 0;\n  padding: 20px;\n  gap: 20px;\n"])));
 const ItemsContainer = exports.ItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr); /* Two columns */\n  padding: 20px;\n  gap: 30px;\n"])));
 const ItemContainer = exports.ItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  flex-wrap: wrap;\n"])));
 const Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  font-weight: 400;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 18px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 16px;\n  }\n"])));

package/dist/stories/components/TabMenu.js

@@ -27,7 +27,9 @@ const TabMenu = props => {
     onTabChange(index);
     setActiveTab(index);
   };
-  return /*#__PURE__*/_react.default.createElement(_TabMenu.TabMenuContainer, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, null, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab, {
+  return /*#__PURE__*/_react.default.createElement(_TabMenu.TabMenuContainer, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, null, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab
+  // eslint-disable-next-line react/no-array-index-key
+  , {
     key: index,
     isActive: index === activeTab,
     className: "tab ".concat(index === activeTab ? 'active' : ''),

package/dist/stories/components/TotalHorizontalCharts.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TotalHorizontalCharts = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _recharts = require("recharts");
 var _ExportIcon = _interopRequireDefault(require("./icons/ExportIcon"));
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
@@ -27,6 +28,15 @@ const TotalHorizontalCharts = props => {
     onBannerClick
   } = props;
   const barBackgrounds = chartsData.map(bg => bg.color);
+  const [widthChartContainer, setWidthChartContainer] = (0, _react.useState)(0);
+  const [heightChartContainer, setHeightChartContainer] = (0, _react.useState)(0);
+  const chartContainerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (chartContainerRef.current) {
+      setWidthChartContainer(chartContainerRef.current.clientWidth);
+      setHeightChartContainer(chartContainerRef.current.clientHeight);
+    }
+  }, [width, height]);
   return /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
@@ -34,7 +44,9 @@ const TotalHorizontalCharts = props => {
     textColor: textColor
   }, (chartsData === null || chartsData === void 0 ? void 0 : chartsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Header, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Title, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Header, {
+    id: "Header"
+  }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Title, {
     id: "Title"
   }, title), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.FormattedValue, {
     id: "FormattedValue"
@@ -44,14 +56,23 @@ const TotalHorizontalCharts = props => {
     onClick: onBannerClick
   }, /*#__PURE__*/_react.default.createElement(_ExportIcon.default, {
     color: textColor
-  }), "View By Banner")), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, null, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
+  }), "View By Banner")), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, {
+    id: "ChartWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
+    id: "ChartInner",
+    ref: chartContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+    id: "ResponsiveContainer",
+    height: heightChartContainer - 10,
+    width: widthChartContainer
+  }, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
     layout: "vertical",
     data: chartsData,
     margin: {
-      top: 0,
-      right: 20,
-      bottom: 20,
-      left: 30
+      top: 10,
+      right: 50,
+      bottom: 10,
+      left: 50
     }
   }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
     type: "number",
@@ -74,8 +95,10 @@ const TotalHorizontalCharts = props => {
       fontSize: 14,
       fontWeight: 600,
       fill: '#212121',
-      formatter: value => "".concat(value, "%")
-    }
+      formatter: valueBar => "".concat(valueBar, "%")
+    },
+    barCategoryGap: 0,
+    barGap: 5
   }, chartsData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
     key: "cell-".concat(index),
     fill: barBackgrounds[index % 20]

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

@@ -9,12 +9,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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  padding: 20px 16px;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n"])), props => props.textColor, props => props.width, props => props.height);
-const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    height: 270px;\n"])), scrollableStyles);
-const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 290px;\n"])));
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n"])));
-const Header = exports.Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;  \n  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  margin: 0;\n"])), props => props.textColor, props => props.width, props => props.height);
+const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  height: 80%;\n  width: 100%;\n  margin: 0;\n"])), scrollableStyles);
+const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;  \n  height: 100%;\n  width: 100%;\n"])));
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  padding: 0 20px;\n"])));
+const Header = exports.Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
 const Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  font-weight: 400;\n  line-height: 1;\n  margin: 0 0 8px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
 const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  display: flex;\n  align-items: baseline;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
-const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 10px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 8px;\n  }\n  > svg {\n        width: 14px;\n        height: 14px;\n    @media (max-width: 1536px) {\n        width: 12px;\n        height: 12px;\n    }\n    @media (max-width: 1366px) {\n        width: 8px;\n        height: 8px;\n    }\n  }\n"])), props => props.textColor);
+const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 10px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 8px;\n  }\n  > svg {\n    width: 14px;\n    height: 14px;\n    @media (max-width: 1536px) {\n      width: 12px;\n      height: 12px;\n    }\n    @media (max-width: 1366px) {\n      width: 8px;\n      height: 8px;\n    }\n  }\n"])), props => props.textColor);
 const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (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"])));

package/package.json

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

package/.history/.env_20231001120613

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_YdAmQQKQ2B6ZngEijA0JiqNNUdJvP23G46NK7-fc

package/.history/.env_20231003143620

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_MOcc8-aS91XJ3mFdtNlH4oPVY73ChHlmw6-hKhsb

package/.history/.eslintrc_20230928112617.js

@@ -1,26 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-  },
-};