sag_components 2.0.0-beta62 → 2.0.0-beta64

package/dist/index.esm.js

@@ -9484,67 +9484,70 @@ const DropdownMain = styled.div`
 `;
 
 /* eslint-disable react/prop-types */
-const DropdownNew = ({
-  isMulti,
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  checkBoxColor,
-  xIconShow,
-  showLabelOnTop,
-  orderBy,
-  elementType
-}) => /*#__PURE__*/React$1.createElement(DropdownMain, {
-  className: "DropdownMain",
-  width: width
-}, isMulti ? /*#__PURE__*/React$1.createElement(DropdownMultiNew, {
-  className: "DropdownMultiNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}) : /*#__PURE__*/React$1.createElement(DropdownSingleNew, {
-  className: "DropdownSingleNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}));
+const DropdownNew = _ref => {
+  let {
+    isMulti,
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    checkBoxColor,
+    xIconShow,
+    showLabelOnTop,
+    orderBy,
+    elementType
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement(DropdownMain, {
+    className: "DropdownMain",
+    width: width
+  }, isMulti ? /*#__PURE__*/React$1.createElement(DropdownMultiNew, {
+    className: "DropdownMultiNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }) : /*#__PURE__*/React$1.createElement(DropdownSingleNew, {
+    className: "DropdownSingleNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }));
+};
 DropdownNew.propTypes = {
   placeHolder: PropTypes.string,
   label: PropTypes.string,
@@ -9972,20 +9975,21 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = ({
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const RangePicker = _ref => {
+  let {
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState(''); // Added value state
@@ -10426,22 +10430,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10888,21 +10893,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24128,21 +24134,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24540,23 +24547,24 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -31470,7 +31478,20 @@ const SeparatedLineBarChart = ({
       payload
     } = props;
     const label = payload.value;
-    const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+    const words = label.split(" ");
+    const chunks = [];
+    let currentChunk = "";
+    words.forEach(word => {
+      if (currentChunk.length + word.length > 15) {
+        chunks.push(currentChunk.trim());
+        currentChunk = word;
+      } else {
+        currentChunk += (currentChunk ? " " : "") + word;
+      }
+    });
+    if (currentChunk) {
+      chunks.push(currentChunk.trim());
+    }
     return /*#__PURE__*/React$1.createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React$1.createElement("text", {
@@ -31479,16 +31500,13 @@ const SeparatedLineBarChart = ({
       dy: 16,
       textAnchor: "middle",
       fill: "#212121",
-      fontSize: 11,
-      fontWeight: 400,
+      fontSize: 10,
       fontFamily: "Poppins"
-    }, /*#__PURE__*/React$1.createElement("tspan", {
-      x: 0,
-      dy: 8
-    }, "Vendor Selling"), /*#__PURE__*/React$1.createElement("tspan", {
+    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: i,
       x: 0,
-      dy: 18
-    }, "Event: ", parts.join(" "))));
+      dy: i === 0 ? "0.71em" : "1.2em"
+    }, chunk))));
   };
   const CustomTooltip = ({
     active,
@@ -31515,7 +31533,7 @@ const SeparatedLineBarChart = ({
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
       width: "100%",
-      height: "700px"
+      height: "100%"
     }
   }, /*#__PURE__*/React$1.createElement("div", {
     style: {
@@ -31559,7 +31577,7 @@ const SeparatedLineBarChart = ({
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "inc_roi",
     position: "top",
-    formatter: value => value.toFixed(1),
+    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 12,
     fontWeight: "400",
@@ -31595,7 +31613,7 @@ const SeparatedLineBarChart = ({
     dataKey: "label",
     tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
     interval: 0,
-    height: 60,
+    height: 80,
     tickLine: false
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     tickFormatter: v => `${v / 1000}k`,
@@ -31655,7 +31673,20 @@ function SingleChart({
     payload
   }) => {
     const label = dataWithIndex[payload.value]?.label ?? "";
-    const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+    const words = label.split(' ');
+    const chunks = [];
+    let currentChunk = '';
+    words.forEach(word => {
+      if (currentChunk.length + word.length > 15) {
+        chunks.push(currentChunk.trim());
+        currentChunk = word;
+      } else {
+        currentChunk += (currentChunk ? ' ' : '') + word;
+      }
+    });
+    if (currentChunk) {
+      chunks.push(currentChunk.trim());
+    }
     return /*#__PURE__*/React$1.createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React$1.createElement("text", {
@@ -31664,16 +31695,13 @@ function SingleChart({
       dy: 16,
       textAnchor: "middle",
       fill: "#212121",
-      fontSize: 11,
-      fontWeight: "400",
+      fontSize: 10,
       fontFamily: "Poppins"
-    }, /*#__PURE__*/React$1.createElement("tspan", {
-      x: 0,
-      dy: 8
-    }, "Vendor Selling"), /*#__PURE__*/React$1.createElement("tspan", {
+    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: i,
       x: 0,
-      dy: 18
-    }, "Event: ", parts.join(" "))));
+      dy: i === 0 ? "0.71em" : "1.2em"
+    }, chunk))));
   };
   const CustomTooltip = ({
     active,
@@ -31682,14 +31710,9 @@ function SingleChart({
     if (!active || !payload || !payload.length) return null;
     const data = payload[0]?.payload;
     if (!data) return null;
-    console.log(data);
     return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle, null, `${data.label}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `${data.description}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `${data.typeTitle}: ${getFormattedValue(data.value)}${getFormattedUnits(data.value)}`));
   };
-  return /*#__PURE__*/React$1.createElement("div", {
-    style: {
-      width: "100%"
-    }
-  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  return /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: width,
     height: height
   }, /*#__PURE__*/React$1.createElement(ComposedChart, {
@@ -31707,7 +31730,7 @@ function SingleChart({
     dataKey: "index",
     tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
     interval: 0,
-    height: 60,
+    height: 80,
     padding: {
       left: 20,
       right: 20
@@ -31728,7 +31751,7 @@ function SingleChart({
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "value",
     position: "top",
-    formatter: value => `$${value / 1000}k`,
+    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 12,
     fontWeight: "400",
@@ -31745,7 +31768,7 @@ function SingleChart({
       iconType: "Square",
       title: "INC Units"
     }]
-  })));
+  }));
 }
 
 styled.div`
@@ -31978,13 +32001,6 @@ SegmentedButton.defaultProps = {
 function InnerBarChart({
   brushInnerBarData
 }) {
-  const processedData = brushInnerBarData.map(item => {
-    const parts = item.label.replace("Vendor Selling Event:", "").trim();
-    return {
-      ...item,
-      shortLabel: parts
-    };
-  });
   const BarWithInner = props => {
     const {
       x,
@@ -32047,7 +32063,23 @@ function InnerBarChart({
       y,
       payload
     } = props;
-    const labelText = payload.value.replace("Vendor Selling Event:", "").trim();
+    const label = payload.value;
+
+    // Split the label into chunks of words
+    const words = label.split(' ');
+    const chunks = [];
+    let currentChunk = '';
+    words.forEach(word => {
+      if (currentChunk.length + word.length > 15) {
+        chunks.push(currentChunk.trim());
+        currentChunk = word;
+      } else {
+        currentChunk += ' ' + word;
+      }
+    });
+    if (currentChunk) {
+      chunks.push(currentChunk.trim());
+    }
     return /*#__PURE__*/React$1.createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React$1.createElement("text", {
@@ -32058,37 +32090,30 @@ function InnerBarChart({
       fill: "#212121",
       fontSize: 10,
       fontFamily: "Poppins"
-    }, /*#__PURE__*/React$1.createElement("tspan", {
-      x: 0,
-      dy: "0.71em"
-    }, "Vendor"), /*#__PURE__*/React$1.createElement("tspan", {
-      x: 0,
-      dy: "1.2em"
-    }, "Selling"), /*#__PURE__*/React$1.createElement("tspan", {
+    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: i,
       x: 0,
-      dy: "1.2em"
-    }, labelText)));
+      dy: i === 0 ? "0.71em" : "1.2em"
+    }, chunk))));
   };
-  return /*#__PURE__*/React$1.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  return /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
-    height: 450
+    height: "100%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
-    data: processedData,
+    data: brushInnerBarData,
     margin: {
       top: 30,
       right: 30,
       left: 20,
-      bottom: 60
+      bottom: 80
     }
   }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React$1.createElement(XAxis, {
-    dataKey: "shortLabel",
+    dataKey: "label",
     tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
-    height: 70,
+    height: 80,
     interval: 0
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     type: "number",
@@ -32096,17 +32121,26 @@ function InnerBarChart({
     hide: true
   }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Brush, {
-    height: 30,
-    travellerWidth: 10,
-    startIndex: 0,
-    endIndex: Math.min(6, processedData.length - 1),
-    y: 380
   }), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "total",
     shape: /*#__PURE__*/React$1.createElement(BarWithInner, null),
     barSize: 36
-  }))));
+  }), /*#__PURE__*/React$1.createElement(Brush, {
+    height: 30,
+    travellerWidth: 10,
+    startIndex: 0,
+    endIndex: Math.min(6, brushInnerBarData.length - 1)
+  })), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    legendData: [{
+      iconColor: "#CCDCDD",
+      iconType: "Square",
+      title: "New Shoppers"
+    }, {
+      iconColor: "#07575b",
+      iconType: "Square",
+      title: "Repeaters"
+    }]
+  }));
 }
 
 const BrushChart = props => {