sag_components 2.0.0-beta84 → 2.0.0-beta86

package/dist/index.esm.js

@@ -23990,22 +23990,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24403,24 +24402,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -31504,7 +31502,7 @@ SegmentedButton.defaultProps = {
 const Container = styled.div`
   width: ${props => props.width};
   height: ${props => props.height};
-  margin: 10px;
+  padding: 10px;
   gap: 10px;
   display: flex;
   flex-direction: column;
@@ -31576,7 +31574,8 @@ const BarLine = props => {
   const {
     brushAreaBarData,
     color,
-    lineColor
+    lineColor,
+    hideBrush
   } = props;
   const MAX_CHARS_PER_LINE = getMaxCharsPerLine(brushAreaBarData.length);
   const MAX_LINES = 2;
@@ -31653,7 +31652,7 @@ const BarLine = props => {
       inc_sales,
       inc_roi
     } = payload[0].payload;
-    return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle$4, null, label), /*#__PURE__*/React$1.createElement(TooltipText, null, description), /*#__PURE__*/React$1.createElement(TooltipText, null, `INC Sales: ${getFormattedValue(inc_sales)}${getFormattedUnits(inc_sales)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `INC Sales ROI:  ${getFormattedValue(inc_roi)}${getFormattedUnits(inc_roi)}`));
+    return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle$4, null, label), /*#__PURE__*/React$1.createElement(TooltipText, null, description), /*#__PURE__*/React$1.createElement(TooltipText, null, `INC Sales: $${getFormattedValue(inc_sales)}${getFormattedUnits(inc_sales)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `INC Sales ROI:  ${getFormattedValue(inc_roi)}${getFormattedUnits(inc_roi)}`));
   });
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
@@ -31701,12 +31700,12 @@ const BarLine = props => {
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "inc_roi",
     position: "top",
-    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
+    formatter: value => `${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 15,
     fontWeight: "400",
     fontFamily: "Poppins"
-  })), /*#__PURE__*/React$1.createElement(Brush, {
+  })), !hideBrush && /*#__PURE__*/React$1.createElement(Brush, {
     dataKey: "label",
     height: 30,
     stroke: "#212121",
@@ -31758,7 +31757,7 @@ const BarLine = props => {
     fontSize: 16,
     fontWeight: "400",
     fontFamily: "Poppins"
-  })), /*#__PURE__*/React$1.createElement(Brush, {
+  })), !hideBrush && /*#__PURE__*/React$1.createElement(Brush, {
     height: 30,
     fill: "#EFEFEF",
     travellerWidth: 10,
@@ -31783,7 +31782,9 @@ const BarLine = props => {
 const SingleChart = props => {
   const {
     barData,
-    color
+    color,
+    legendLabel,
+    hideBrush
   } = props;
   const MAX_CHARS_PER_LINE = getMaxCharsPerLine(barData.length);
   const MAX_LINES = 2;
@@ -31891,12 +31892,12 @@ const SingleChart = props => {
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "value",
     position: "top",
-    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
+    formatter: value => `${legendLabel === "INC Units" ? "" : "$"}${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 16,
     fontWeight: "400",
     fontFamily: "Poppins"
-  })), /*#__PURE__*/React$1.createElement(Brush, {
+  })), !hideBrush && /*#__PURE__*/React$1.createElement(Brush, {
     height: 30,
     fill: "#EFEFEF",
     travellerWidth: 10,
@@ -31909,7 +31910,7 @@ const SingleChart = props => {
     legendData: [{
       iconColor: color,
       iconType: "Square",
-      title: "INC Units"
+      title: legendLabel
     }]
   }));
 };
@@ -31918,7 +31919,8 @@ const InnerBar = props => {
   const {
     brushInnerBarData,
     color,
-    backgroundColor
+    backgroundColor,
+    hideBrush
   } = props;
   const MAX_CHARS_PER_LINE = getMaxCharsPerLine(brushInnerBarData.length);
   const MAX_LINES = 2;
@@ -32068,7 +32070,7 @@ const InnerBar = props => {
     dataKey: "total",
     shape: /*#__PURE__*/React$1.createElement(BarWithInner, null),
     barSize: 55
-  }), /*#__PURE__*/React$1.createElement(Brush, {
+  }), !hideBrush && /*#__PURE__*/React$1.createElement(Brush, {
     height: 30,
     fill: "#EFEFEF",
     travellerWidth: 10,
@@ -32098,6 +32100,10 @@ const BrushChart = props => {
     brushBarIncData,
     brushBarBasketData,
     brushAreaBarData,
+    hideFirstBrush,
+    hideSecondBrush,
+    hideThirdBrush,
+    hideLastBrush,
     segmentedbuttonOptions,
     title,
     lineChartColor,
@@ -32122,17 +32128,23 @@ const BrushChart = props => {
   }), /*#__PURE__*/React$1.createElement(ChartContainer, null, selectedOption === "New Shoppers & Repeaters" && /*#__PURE__*/React$1.createElement(InnerBar, {
     color: innerChartColor,
     backgroundColor: barChartColor,
-    brushInnerBarData: brushInnerBarData
+    brushInnerBarData: brushInnerBarData,
+    hideBrush: hideFirstBrush
   }), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React$1.createElement(BarLine, {
     color: barChartColor,
     lineColor: lineChartColor,
-    brushAreaBarData: brushAreaBarData
+    brushAreaBarData: brushAreaBarData,
+    hideBrush: hideSecondBrush
   }), selectedOption === "INC Units" && /*#__PURE__*/React$1.createElement(SingleChart, {
     color: barChartColor,
-    barData: brushBarIncData
+    barData: brushBarIncData,
+    legendLabel: "INC Units",
+    hideBrush: hideThirdBrush
   }), selectedOption === "Basket Lift" && /*#__PURE__*/React$1.createElement(SingleChart, {
     color: barChartColor,
-    barData: brushBarBasketData
+    barData: brushBarBasketData,
+    legendLabel: "Basket Lift",
+    hideBrush: hideLastBrush
   })));
 };