sag_components 1.0.613 → 1.0.615

package/dist/stories/components/PerformanceAnalyticsOneColumn.js

@@ -35,7 +35,7 @@ const PerformanceAnalyticsOneColumn = props => {
   } = props;
   const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
   const [tooltipCouponText, setTooltipCouponText] = (0, _react.useState)({
-    content: "",
+    content: '',
     clientX: 0,
     clientY: 0
   });
@@ -45,7 +45,6 @@ const PerformanceAnalyticsOneColumn = props => {
       payload
     } = _ref;
     if (active && payload && payload.length > 0) {
-      console.log("CustomTooltipBarChart", payload);
       return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
         id: "LegendColorRectangle",
         color: colorBarchart1
@@ -57,13 +56,13 @@ const PerformanceAnalyticsOneColumn = props => {
     return null;
   };
   const getTopBarSigning = signing => {
-    if (signing === "Dollar sign ($)") {
-      return "$";
+    if (signing === 'Dollar sign ($)') {
+      return '$';
     }
-    if (signing === "Euro sign (€)") {
-      return "€";
+    if (signing === 'Euro sign (€)') {
+      return '€';
     }
-    return "";
+    return '';
   };
   const CustomizedLabelBarchart = props => {
     const {
@@ -83,7 +82,7 @@ const PerformanceAnalyticsOneColumn = props => {
       fontSize: "16px",
       textAnchor: "middle",
       dominantBaseline: "middle"
-    }, "".concat(getTopBarSigning(topBarSigning), "\n            ").concat((0, _CommonFunctions.getFormattedValue)(totalValue), "\n            ").concat((0, _CommonFunctions.getFormattedUnits)(totalValue), "\n            ").concat(topBarPercentSigning ? "%" : "")));
+    }, "".concat(getTopBarSigning(topBarSigning), "\n            ").concat((0, _CommonFunctions.getFormattedValue)(totalValue), "\n            ").concat((0, _CommonFunctions.getFormattedUnits)(totalValue), "\n            ").concat(topBarPercentSigning ? '%' : '')));
   };
   const CustomizedTickBarChart = props => {
     const {
@@ -164,7 +163,7 @@ const PerformanceAnalyticsOneColumn = props => {
         direction: "top"
       }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
         cursor: {
-          fill: "transparent"
+          fill: 'transparent'
         },
         content: CustomTooltipBarChart
       }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
@@ -205,19 +204,29 @@ const PerformanceAnalyticsOneColumn = props => {
       fontWeight: lineChartValueBold ? 600 : 400,
       fontSize: 14,
       textAnchor: "middle"
-    }, "".concat(value).concat(lineChartValueType ? "%" : ""));
-  };
-  const CustomTooltipROI = _ref2 => {
-    let {
-      active,
-      payload
-    } = _ref2;
-    if (active && payload && payload.length > 0) {
-      var _payload$0$payload;
-      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipTitle, null, "".concat((_payload$0$payload = payload[0].payload) === null || _payload$0$payload === void 0 ? void 0 : _payload$0$payload.retailer)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "Incremental Sales ROI:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value)))));
-    }
-    return null;
+    }, "".concat(value).concat(lineChartValueType ? '%' : ''));
   };
+
+  // const CustomTooltipROI = ({ active, payload }) => {
+  //   if (active && payload && payload.length > 0) {
+  //     return (
+  //       <TooltipContainer>
+  //         <TooltipTitle>{`${payload[0].payload?.retailer}`}</TooltipTitle>
+
+  //         <ToolTipLabelAndValueContainer>
+  //           <TooltipLabel>Incremental Sales ROI:</TooltipLabel>
+  //           <TooltipValue>
+  //             {`${getFormattedValue(payload[0].value)}${getFormattedUnits(
+  //               payload[0].value,
+  //             )}`}
+  //           </TooltipValue>
+  //         </ToolTipLabelAndValueContainer>
+  //       </TooltipContainer>
+  //     );
+  //   }
+
+  //   return null;
+  // };
   const displayLineChartROI = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
     id: "ResponsiveContainer",
     height: lineChartHeight
@@ -259,7 +268,7 @@ const PerformanceAnalyticsOneColumn = props => {
   })))));
   return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ControlsContainer, {
     id: "PerformanceAnalyticsControlsContainer",
-    className: (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? "" : "NoData",
+    className: (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? '' : 'NoData',
     width: width,
     height: height
   }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.Controls, {
@@ -271,26 +280,26 @@ const PerformanceAnalyticsOneColumn = props => {
 exports.PerformanceAnalyticsOneColumn = PerformanceAnalyticsOneColumn;
 var _default = exports.default = PerformanceAnalyticsOneColumn;
 PerformanceAnalyticsOneColumn.defaultProps = {
-  colorBarchart1: "#1F7677",
-  colorBarchart2: "#90CE9C",
+  colorBarchart1: '#1F7677',
+  colorBarchart2: '#90CE9C',
   lineChartHeight: 50,
   barChartHeight: 250,
-  width: "100%",
-  height: "100%",
-  noDataText: "No data",
+  width: '100%',
+  height: '100%',
+  noDataText: 'No data',
   totalsData: [{
-    title: "title",
+    title: 'title',
     value: 13,
     dotCut: true,
     currency: true,
-    currencyType: "USD",
+    currencyType: 'USD',
     growthPercent: 14,
     showGrowthPercentSign: true
   }],
   data: [{
-    retailer: "",
-    offerType: "",
-    period: "",
+    retailer: '',
+    offerType: '',
+    period: '',
     newShoppersValue: 44,
     newShoppersPercentValue: 55,
     existingShoppersValue: 66,
@@ -301,6 +310,6 @@ PerformanceAnalyticsOneColumn.defaultProps = {
     iconType: null,
     title: null
   }],
-  tooltipBarchartLabel1: "New Shoppers",
-  tooltipBarchartLabel2: "Existing Shoppers"
+  tooltipBarchartLabel1: 'New Shoppers',
+  tooltipBarchartLabel2: 'Existing Shoppers'
 };

package/dist/stories/components/TotalHorizontalCharts.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TotalHorizontalCharts = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _recharts = require("recharts");
+var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
 var _ExportIcon = _interopRequireDefault(require("./icons/ExportIcon"));
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
 var _CommonFunctions = require("./CommonFunctions");
@@ -31,12 +32,64 @@ const TotalHorizontalCharts = props => {
   const [widthChartContainer, setWidthChartContainer] = (0, _react.useState)(0);
   const [heightChartContainer, setHeightChartContainer] = (0, _react.useState)(0);
   const chartContainerRef = (0, _react.useRef)();
+  const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
+  const [tooltipText, setTooltipText] = (0, _react.useState)({
+    content: '',
+    clientX: 0,
+    clientY: 0
+  });
   (0, _react.useEffect)(() => {
     if (chartContainerRef.current) {
       setWidthChartContainer(chartContainerRef.current.clientWidth);
       setHeightChartContainer(chartContainerRef.current.clientHeight);
     }
   }, [width, height]);
+  const CustomizedTickBarChart = props => {
+    const {
+      x,
+      y,
+      width,
+      height,
+      payload,
+      fill,
+      orientation,
+      stroke
+    } = props;
+    const handleMouseEnter = content => {
+      setTooltipText(prevState => ({
+        ...prevState,
+        content: content !== prevState.content ? content : prevState.content,
+        clientX: x / 1.2,
+        clientY: y - 20
+      }));
+      setShowLegendTooltip(true);
+    };
+    const handleMouseLeave = () => {
+      setShowLegendTooltip(false);
+    };
+    if (chartsData && chartsData.length > 0 && payload) {
+      const chartsDataLabel = chartsData.filter(item => item.name === payload.value);
+      if (chartsDataLabel && chartsDataLabel.length > 0) {
+        return /*#__PURE__*/_react.default.createElement("g", {
+          onMouseEnter: () => handleMouseEnter(payload.value),
+          onMouseLeave: handleMouseLeave
+        }, /*#__PURE__*/_react.default.createElement(_recharts.Text, {
+          width: width,
+          height: height,
+          x: 20,
+          y: y,
+          fontSize: 12,
+          orientation: orientation,
+          stroke: stroke,
+          textAnchor: "start",
+          verticalAnchor: "middle",
+          fill: fill
+        }, payload.value.length > 13 ? "".concat(payload.value.slice(0, 13), "...") : payload.value));
+      }
+      return null;
+    }
+    return null;
+  };
   return /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
@@ -82,27 +135,35 @@ const TotalHorizontalCharts = props => {
     type: "category",
     scale: "auto",
     tickLine: false,
-    axisLine: false,
-    tick: {
-      fontSize: 12
-    }
+    axisLine: false
+    // tick={{ fontSize: 12 }}
+    ,
+    tick: CustomizedTickBarChart
   }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
     dataKey: "value",
     barSize: 20,
     fill: "#8884d8",
+    barCategoryGap: 0,
+    barGap: 5,
     label: {
       position: 'right',
       fontSize: 14,
       fontWeight: 600,
       fill: '#212121',
       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]
-  })))))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  }))), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
+    direction: "top",
+    content: tooltipText.content,
+    top: tooltipText.clientY,
+    left: tooltipText.clientX,
+    style: {
+      pointerEvents: 'none'
+    } // Add this line
+  })))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };

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

@@ -9,7 +9,7 @@ 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  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  margin: 0;\n"])), props => props.textColor, props => props.width, props => props.height);
+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  .top {\n    text-align: center;\n    white-space: normal;\n    &:before {\n      display: none;\n    }\n  }\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"])));

package/package.json

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

package/dist/stories/components/EventInfo.js

@@ -1,92 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
-var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
-var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
-var _BannersDropdown = require("./BannersDropdown");
-var _EventInfo = require("./EventInfo.style");
-const EventInfo = props => {
-  const {
-    title,
-    subTitle,
-    productsData,
-    onSpotlightProductClick,
-    onClickBannersDropdown
-  } = props;
-  const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
-  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(_EventInfo.EventInfoMainContainer, {
-    id: "EventInfoMainContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContainer, {
-    id: "EventInfoContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitleContainer, {
-    id: "EventInfoTitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitle, {
-    id: "EventInfoTitle"
-  }, title), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
-    id: "EventInfoSubTitle"
-  }, "|"), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
-    id: "EventInfoSubTitle"
-  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
-    id: "ProductButtonContainer",
-    onClick: () => {
-      setIsProductsListOpen(!IsProductsListOpen);
-    }
-  }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
-    color: "#212121"
-  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
-    color: "#212121"
-  }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContentContainer, {
-    id: "EventInfoContentContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.ProductsTitle, {
-    id: "ProductsTitle"
-  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
-    id: "ProductContainer"
-  }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
-    id: "Product"
-  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
-    id: "ProductButtonContainer",
-    background: "#F8CD00",
-    onClick: () => {
-      onSpotlightProductClick({
-        value: item.value,
-        label: item.label
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
-};
-var _default = exports.default = EventInfo;
-EventInfo.defaultProps = {
-  title: 'Products Variety',
-  subTitle: 'Product Name',
-  onSpotlightProductClick: () => {},
-  onClickBannersDropdown: () => {}
-};

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

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = exports.EventInfoTitleContainer = exports.EventInfoTitle = exports.EventInfoSubTitle = exports.EventInfoMainContainer = exports.EventInfoContentContainer = exports.EventInfoContainer = 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;
-const EventInfoMainContainer = exports.EventInfoMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin: 0;\n  padding: 10px;\n  border-radius: 12px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
-const EventInfoContainer = exports.EventInfoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 10px;\n"])));
-const EventInfoTitleContainer = exports.EventInfoTitleContainer = _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 EventInfoTitle = exports.EventInfoTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 20px;\n\n  margin: 0;\n"])));
-const EventInfoSubTitle = exports.EventInfoSubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #757171;\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
-const EventInfoContentContainer = exports.EventInfoContentContainer = _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');