sag_components 2.0.0-beta54 → 2.0.0-beta56

package/dist/index.js

@@ -9494,70 +9494,67 @@ const DropdownMain = styled__default["default"].div`
 `;
 
 /* eslint-disable react/prop-types */
-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__default["default"].createElement(DropdownMain, {
-    className: "DropdownMain",
-    width: width
-  }, isMulti ? /*#__PURE__*/React__default["default"].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__default["default"].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 = ({
+  isMulti,
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  checkBoxColor,
+  xIconShow,
+  showLabelOnTop,
+  orderBy,
+  elementType
+}) => /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
+  className: "DropdownMain",
+  width: width
+}, isMulti ? /*#__PURE__*/React__default["default"].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__default["default"].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,
@@ -9730,26 +9727,34 @@ const OptionsContainer$4 = styled__default["default"].div`
   padding-top: 8px;
 `;
 
-const ChervronRightIcon = () => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: "8",
-  height: "13",
+const ChervronRightIcon = ({
+  width = "8",
+  height = "13",
+  fill = "#777575"
+}) => /*#__PURE__*/React__default["default"].createElement("svg", {
+  width: width,
+  height: height,
   viewBox: "0 0 8 13",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 }, /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M7.33984 5.78516C7.58594 6.05859 7.58594 6.46875 7.33984 6.71484L2.08984 11.9648C1.81641 12.2383 1.40625 12.2383 1.16016 11.9648C0.886719 11.7188 0.886719 11.3086 1.16016 11.0625L5.94531 6.27734L1.16016 1.46484C0.886719 1.21875 0.886719 0.808594 1.16016 0.5625C1.40625 0.289062 1.81641 0.289062 2.0625 0.5625L7.33984 5.78516Z",
-  fill: "#777575"
+  fill: fill
 }));
 
-const ChervronLeftIcon = () => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: "7",
-  height: "13",
+const ChervronLeftIcon = ({
+  width = 7,
+  height = 13,
+  fill = "#777575"
+}) => /*#__PURE__*/React__default["default"].createElement("svg", {
+  width: width,
+  height: height,
   viewBox: "0 0 7 13",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 }, /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M0.410156 5.78516L5.66016 0.5625C5.90625 0.289062 6.31641 0.289062 6.58984 0.5625C6.83594 0.808594 6.83594 1.21875 6.58984 1.46484L1.77734 6.25L6.5625 11.0625C6.83594 11.3086 6.83594 11.7188 6.5625 11.9648C6.31641 12.2383 5.90625 12.2383 5.66016 11.9648L0.410156 6.71484C0.136719 6.46875 0.136719 6.05859 0.410156 5.78516Z",
-  fill: "#777575"
+  fill: fill
 }));
 
 /* eslint-disable react/prop-types */
@@ -9971,21 +9976,20 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = _ref => {
-  let {
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const RangePicker = ({
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState(''); // Added value state
@@ -10340,7 +10344,15 @@ const DateCell$1 = styled__default["default"].div`
     color: #ccc;
   }
 `;
-const years$1 = [2022, 2023, 2024];
+const generateYearsArray$1 = (startYear, endDate) => {
+  const years = [];
+  const endYear = endDate.getFullYear();
+  for (let year = startYear; year <= endYear; year++) {
+    years.push(`${year}`);
+  }
+  return years;
+};
+const years$1 = generateYearsArray$1(2022, new Date());
 const QuarterPopupPicker = ({
   isOpen,
   onChangeDate,
@@ -10418,23 +10430,22 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -10769,7 +10780,15 @@ const DateCell = styled__default["default"].div`
     color: #ccc;
   }
 `;
-const years = [2022, 2023, 2024];
+const generateYearsArray = (startYear, endDate) => {
+  const years = [];
+  const endYear = endDate.getFullYear();
+  for (let year = startYear; year <= endYear; year++) {
+    years.push(`${year}`);
+  }
+  return years;
+};
+const years = generateYearsArray(2022, new Date());
 const MonthPopupPicker = ({
   isOpen,
   onChangeDate,
@@ -10873,22 +10892,21 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -25156,8 +25174,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = "@keyframes react-loading-skeleton {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.react-loading-skeleton {\n  --base-color: #ebebeb;\n  --highlight-color: #f5f5f5;\n  --animation-duration: 1.5s;\n  --animation-direction: normal;\n  --pseudo-element-display: block; /* Enable animation */\n\n  background-color: var(--base-color);\n\n  width: 100%;\n  border-radius: 0.25rem;\n  display: inline-flex;\n  line-height: 1;\n\n  position: relative;\n  user-select: none;\n  overflow: hidden;\n}\n\n.react-loading-skeleton::after {\n  content: ' ';\n  display: var(--pseudo-element-display);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-repeat: no-repeat;\n  background-image: var(\n    --custom-highlight-background,\n    linear-gradient(\n      90deg,\n      var(--base-color) 0%,\n      var(--highlight-color) 50%,\n      var(--base-color) 100%\n    )\n  );\n  transform: translateX(-100%);\n\n  animation-name: react-loading-skeleton;\n  animation-direction: var(--animation-direction);\n  animation-duration: var(--animation-duration);\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n  .react-loading-skeleton {\n    --pseudo-element-display: none; /* Disable animation */\n  }\n}\n";
-styleInject(css_248z$1);
+var css_248z = "@keyframes react-loading-skeleton {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.react-loading-skeleton {\n  --base-color: #ebebeb;\n  --highlight-color: #f5f5f5;\n  --animation-duration: 1.5s;\n  --animation-direction: normal;\n  --pseudo-element-display: block; /* Enable animation */\n\n  background-color: var(--base-color);\n\n  width: 100%;\n  border-radius: 0.25rem;\n  display: inline-flex;\n  line-height: 1;\n\n  position: relative;\n  user-select: none;\n  overflow: hidden;\n}\n\n.react-loading-skeleton::after {\n  content: ' ';\n  display: var(--pseudo-element-display);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-repeat: no-repeat;\n  background-image: var(\n    --custom-highlight-background,\n    linear-gradient(\n      90deg,\n      var(--base-color) 0%,\n      var(--highlight-color) 50%,\n      var(--base-color) 100%\n    )\n  );\n  transform: translateX(-100%);\n\n  animation-name: react-loading-skeleton;\n  animation-direction: var(--animation-direction);\n  animation-duration: var(--animation-duration);\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n  .react-loading-skeleton {\n    --pseudo-element-display: none; /* Disable animation */\n  }\n}\n";
+styleInject(css_248z);
 
 const OneColumnContainer = props => {
   const {
@@ -31381,83 +31399,102 @@ const BatteryChart = props => {
   }))))))), starText !== "" && /*#__PURE__*/React__default["default"].createElement(StarText, null, starText));
 };
 
-const originalData$1 = [{
-  label: "Vendor Selling Event: Week 28",
-  inc_unit: 20000,
-  inc_roi: 1.2
-}, {
-  label: "Vendor Selling Event: Week 29",
-  inc_unit: 10000,
-  inc_roi: 1.2
-}, {
-  label: "Vendor Selling Event: Week 30",
-  inc_unit: 8000,
-  inc_roi: 0.8
-}, {
-  label: "Vendor Selling Event: Week 33",
-  inc_unit: 12000,
-  inc_roi: 1.1
-}, {
-  label: "Vendor Selling Event: Week 36",
-  inc_unit: 8000,
-  inc_roi: 1.2
-}, {
-  label: "Vendor Selling Event: Week 34",
-  inc_unit: 8000,
-  inc_roi: 0.7
-}, {
-  label: "Vendor Selling Event: Week 35",
-  inc_unit: 8000,
-  inc_roi: 0.8
-}, {
-  label: "Vendor Selling Event: Week 38",
-  inc_unit: 9000,
-  inc_roi: 1.1
-}];
-const dataWithIndex$1 = originalData$1.map((item, index) => ({
-  ...item,
-  index,
-  shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
-}));
-const CustomizedTick$1 = ({
-  x,
-  y,
-  payload
+// const originalData = [
+//   { label: "Vendor Selling Event: Week 34", inc_sales: 20000, inc_roi: 1.2 },
+//   { label: "Vendor Selling Event: Week 36", inc_sales: 10000, inc_roi: 1.2 },
+//   { label: "Vendor Selling Event: Week 38", inc_sales: 8000, inc_roi: 0.8 },
+//   { label: "Vendor Selling Event: Week 33", inc_sales: 12000, inc_roi: 1.1 },
+//   { label: "Vendor Selling Event: Week 29", inc_sales: 8000, inc_roi: 1.2 },
+//   { label: "Vendor Selling Event: Week 28", inc_sales: 8000, inc_roi: 0.7 },
+//   { label: "Vendor Selling Event: Week 35", inc_sales: 8000, inc_roi: 0.8 },
+//   { label: "Vendor Selling Event: Week 30", inc_sales: 9000, inc_roi: 1.1 },
+// ];
+
+const SeparatedLineBarChart = ({
+  barlineData
 }) => {
-  const label = dataWithIndex$1[payload.value]?.label ?? "";
-  const parts = label.replace("Vendor Selling Event: ", "").split(" ");
-  return /*#__PURE__*/React__default["default"].createElement("g", {
-    transform: `translate(${x},${y})`
-  }, /*#__PURE__*/React__default["default"].createElement("text", {
-    x: 0,
-    y: 0,
-    dy: 16,
-    textAnchor: "middle",
-    fill: "#212121",
-    fontSize: 11,
-    fontWeight: "400",
-    fontFamily: "Poppins"
-  }, /*#__PURE__*/React__default["default"].createElement("tspan", {
-    x: 0,
-    dy: 8
-  }, "Vendor Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
-    x: 0,
-    dy: 18
-  }, "Event: ", parts.join(" "))));
-};
-
-// Common chart configuration
-const chartMargins = {
-  top: 15,
-  right: 40,
-  left: 20,
-  bottom: 40
-};
-const SeparatedLineBarChart = () => {
+  // Sort the data by week number extracted from the label
+  const sortedData = barlineData?.sort((a, b) => {
+    const weekA = parseInt(a.label.match(/Week (\d+)/)[1], 10);
+    const weekB = parseInt(b.label.match(/Week (\d+)/)[1], 10);
+    return weekA - weekB;
+  });
+  const dataWithIndex = sortedData.map((item, index) => ({
+    ...item,
+    index,
+    shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
+  }));
+  const CustomizedTick = ({
+    x,
+    y,
+    payload,
+    viewableIndices
+  }) => {
+    const label = dataWithIndex[payload.value]?.label ?? "";
+    const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+    if (!viewableIndices.includes(payload.value)) {
+      return null;
+    }
+    return /*#__PURE__*/React__default["default"].createElement("g", {
+      transform: `translate(${x},${y})`
+    }, /*#__PURE__*/React__default["default"].createElement("text", {
+      x: 0,
+      y: 0,
+      dy: 16,
+      textAnchor: "middle",
+      fill: "#212121",
+      fontSize: 11,
+      fontWeight: "400",
+      fontFamily: "Poppins"
+    }, /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: 8
+    }, "Vendor Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: 18
+    }, "Event: ", parts.join(" "))));
+  };
+  const CustomLabelListFilter = props => {
+    const {
+      viewableIndices,
+      dataKey,
+      position,
+      formatter,
+      fill,
+      fontSize,
+      fontWeight,
+      fontFamily
+    } = props;
+    return /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
+      dataKey: dataKey,
+      position: position,
+      formatter: (value, name, props) => {
+        if (!viewableIndices.includes(props.index)) {
+          return "";
+        }
+        return formatter ? formatter(value) : value;
+      },
+      fill: fill || "#212121",
+      fontSize: fontSize || 12,
+      fontWeight: fontWeight || "400",
+      fontFamily: fontFamily || "Poppins"
+    });
+  };
+  const chartMargins = {
+    top: 15,
+    right: 40,
+    left: 20,
+    bottom: 40
+  };
   const [viewWindow, setViewWindow] = React$1.useState({
     startIndex: 0,
-    endIndex: dataWithIndex$1.length - 1
+    endIndex: dataWithIndex.length - 1
   });
+  const viewableIndices = [];
+  for (let i = viewWindow.startIndex; i <= viewWindow.endIndex; i++) {
+    viewableIndices.push(i);
+  }
+  dataWithIndex.filter(item => viewableIndices.includes(item.index));
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: "100%",
@@ -31471,8 +31508,7 @@ const SeparatedLineBarChart = () => {
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React__default["default"].createElement(recharts.LineChart, {
-    data: dataWithIndex$1 // Use full dataset for alignment
-    ,
+    data: dataWithIndex,
     margin: chartMargins
   }, /*#__PURE__*/React__default["default"].createElement(recharts.CartesianGrid, {
     strokeDasharray: "3 3",
@@ -31500,10 +31536,11 @@ const SeparatedLineBarChart = () => {
     },
     activeDot: false,
     name: "INC Sales ROI"
-  }, /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
+  }, /*#__PURE__*/React__default["default"].createElement(CustomLabelListFilter, {
     dataKey: "inc_roi",
     position: "top",
-    formatter: value => value.toFixed(1)
+    formatter: value => value.toFixed(1),
+    viewableIndices: viewableIndices
   }))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: "60%"
@@ -31512,7 +31549,7 @@ const SeparatedLineBarChart = () => {
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React__default["default"].createElement(recharts.ComposedChart, {
-    data: dataWithIndex$1,
+    data: dataWithIndex,
     margin: chartMargins
   }, /*#__PURE__*/React__default["default"].createElement(recharts.CartesianGrid, {
     strokeDasharray: "3 3",
@@ -31525,30 +31562,28 @@ const SeparatedLineBarChart = () => {
       left: 20,
       right: 20
     },
-    tick: /*#__PURE__*/React__default["default"].createElement(CustomizedTick$1, null),
-    interval: 0 // Force display all ticks
-    ,
+    tick: props => /*#__PURE__*/React__default["default"].createElement(CustomizedTick, _extends({}, props, {
+      viewableIndices: viewableIndices
+    })),
+    interval: 0,
     height: 60,
     tickLine: false,
-    ticks: dataWithIndex$1.map(item => item.index)
+    ticks: dataWithIndex.map(item => item.index)
   }), /*#__PURE__*/React__default["default"].createElement(recharts.YAxis, {
-    tickFormatter: v => `$${v / 1000}k`,
+    tickFormatter: v => `${v / 1000}k`,
     hide: true
   }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, null), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
-    dataKey: "inc_unit",
+    dataKey: "inc_sales",
     fill: "#CCDCDD",
     gap: "4px",
     borderRadius: [4, 4, 0, 8],
     barSize: 40,
     name: "INC Sales"
-  }, /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
-    dataKey: "inc_unit",
+  }, /*#__PURE__*/React__default["default"].createElement(CustomLabelListFilter, {
+    dataKey: "inc_sales",
     position: "top",
-    formatter: value => `$${value / 1000}k`,
-    fill: "#212121",
-    fontSize: 12,
-    fontWeight: "400",
-    fontFamily: "Poppins"
+    formatter: value => `${value / 1000}k`,
+    viewableIndices: viewableIndices
   })), /*#__PURE__*/React__default["default"].createElement(recharts.Brush, {
     dataKey: "index",
     height: 30,
@@ -31558,7 +31593,7 @@ const SeparatedLineBarChart = () => {
     onChange: e => {
       setViewWindow({
         startIndex: e.startIndex ?? 0,
-        endIndex: e.endIndex ?? dataWithIndex$1.length - 1
+        endIndex: e.endIndex ?? dataWithIndex.length - 1
       });
     },
     travellerWidth: 12
@@ -31579,68 +31614,42 @@ const SeparatedLineBarChart = () => {
   })))));
 };
 
-const originalData = [{
-  label: "Vendor Selling Event: Week 28",
-  inc_unit: 20000
-}, {
-  label: "Vendor Selling Event: Week 29",
-  inc_unit: 10000
-}, {
-  label: "Vendor Selling Event: Week 30",
-  inc_unit: 8000
-}, {
-  label: "Vendor Selling Event: Week 33",
-  inc_unit: 12000
-}, {
-  label: "Vendor Selling Event: Week 36",
-  inc_unit: 8000
-}, {
-  label: "Vendor Selling Event: Week 34",
-  inc_unit: 8000
-}, {
-  label: "Vendor Selling Event: Week 35",
-  inc_unit: 8000
-}, {
-  label: "Vendor Selling Event: Week 38",
-  inc_unit: 9000
-}];
-
-// Adding index and shortLabel to original data
-const dataWithIndex = originalData.map((item, index) => ({
-  ...item,
-  index,
-  shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
-}));
-const CustomizedTick = ({
-  x,
-  y,
-  payload
-}) => {
-  const label = dataWithIndex[payload.value]?.label ?? "";
-  const parts = label.replace("Vendor Selling Event: ", "").split(" ");
-  return /*#__PURE__*/React__default["default"].createElement("g", {
-    transform: `translate(${x},${y})`
-  }, /*#__PURE__*/React__default["default"].createElement("text", {
-    x: 0,
-    y: 0,
-    dy: 16,
-    textAnchor: "middle",
-    fill: "#212121",
-    fontSize: 11,
-    fontWeight: "400",
-    fontFamily: "Poppins"
-  }, /*#__PURE__*/React__default["default"].createElement("tspan", {
-    x: 0,
-    dy: 8
-  }, "Vendor Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
-    x: 0,
-    dy: 18
-  }, "Event: ", parts.join(" "))));
-};
-const SingleChart = () => {
+function SingleChart({
+  lineChartData
+}) {
+  const dataWithIndex = lineChartData?.map((item, index) => ({
+    ...item,
+    index,
+    shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
+  }));
+  const CustomizedTick = ({
+    x,
+    y,
+    payload
+  }) => {
+    const label = dataWithIndex[payload.value]?.label ?? "";
+    const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+    return /*#__PURE__*/React__default["default"].createElement("g", {
+      transform: `translate(${x},${y})`
+    }, /*#__PURE__*/React__default["default"].createElement("text", {
+      x: 0,
+      y: 0,
+      dy: 16,
+      textAnchor: "middle",
+      fill: "#212121",
+      fontSize: 11,
+      fontWeight: "400",
+      fontFamily: "Poppins"
+    }, /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: 8
+    }, "Vendor Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: 18
+    }, "Event: ", parts.join(" "))));
+  };
   const [startIndex, setStartIndex] = React$1.useState(0);
-  const [endIndex, setEndIndex] = React$1.useState(dataWithIndex.length - 1);
-  dataWithIndex.slice(startIndex, endIndex + 1);
+  const [endIndex, setEndIndex] = React$1.useState(dataWithIndex?.length - 1);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: "100%",
@@ -31678,14 +31687,14 @@ const SingleChart = () => {
     tickFormatter: v => `$${v / 1000}k`,
     hide: true
   }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, null), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
-    dataKey: "inc_unit",
+    dataKey: "value",
     fill: "#CCDCDD",
     gap: "4px",
     borderRadius: [4, 4, 0, 8],
     barSize: 40,
     name: "INC Sales"
   }, /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
-    dataKey: "inc_unit",
+    dataKey: "value",
     position: "top",
     formatter: value => `$${value / 1000}k`,
     fill: "#212121",
@@ -31700,7 +31709,7 @@ const SingleChart = () => {
     endIndex: endIndex,
     onChange: e => {
       setStartIndex(e.startIndex ?? 0);
-      setEndIndex(e.endIndex ?? dataWithIndex.length - 1);
+      setEndIndex(e.endIndex ?? dataWithIndex?.length - 1);
     },
     travellerWidth: 12
   })), /*#__PURE__*/React__default["default"].createElement(PerformanceAnalyticsLegend, {
@@ -31710,7 +31719,7 @@ const SingleChart = () => {
       title: "INC Units"
     }]
   }))));
-};
+}
 
 styled__default["default"].div`
   display: flex;
@@ -31842,15 +31851,17 @@ const SegmentedButton = props => {
   }, [defaultIndex]);
   React$1.useEffect(() => {
     const activeSegmentRef = optionsRef[activeIndex].ref;
-    const {
-      offsetWidth,
-      offsetLeft
-    } = activeSegmentRef.current;
-    const {
-      style
-    } = controlRef.current;
-    style.setProperty('--highlight-width', `${offsetWidth}px`);
-    style.setProperty('--highlight-x-pos', `${offsetLeft}px`);
+    setTimeout(() => {
+      const {
+        offsetWidth,
+        offsetLeft
+      } = activeSegmentRef.current;
+      const {
+        style
+      } = controlRef.current;
+      style.setProperty("--highlight-width", `${offsetWidth}px`);
+      style.setProperty("--highlight-x-pos", `${offsetLeft}px`);
+    }, 0);
   }, [activeIndex, controlRef, optionsRef]);
   const onInputChangeHandler = (value, index) => {
     setActiveIndex(index);
@@ -31873,14 +31884,14 @@ const SegmentedButton = props => {
     gap: gap,
     controlradius: controlradius,
     segmentwidth: segmentwidth,
-    className: `controls ${componentReady.current ? 'ready' : 'idle'}`
+    className: `controls ${componentReady.current ? "ready" : "idle"}`
   }, optionsRef?.map((item, i) => /*#__PURE__*/React__default["default"].createElement(Segment, {
     id: "Segment",
     key: item.id,
     selectedsegmentcolor: selectedsegmentcolor,
     controlradius: controlradius,
     segmentwidth: segmentwidth,
-    className: `${activeIndex === i ? 'active' : 'inactive'}`,
+    className: `${activeIndex === i ? "active" : "inactive"}`,
     ref: item.ref
   }, /*#__PURE__*/React__default["default"].createElement(ControlsInput, {
     type: "radio",
@@ -31894,7 +31905,7 @@ const SegmentedButton = props => {
     selectedtextcolor: selectedtextcolor,
     unselectedtextcolor: unselectedtextcolor,
     segmentheight: height / 5,
-    className: `${activeIndex === i ? 'active' : 'inactive'} `,
+    className: `${activeIndex === i ? "active" : "inactive"} `,
     htmlFor: item.value
   }, item.value)))));
 };
@@ -31916,116 +31927,38 @@ SegmentedButton.propTypes = {
   onClick: PropTypes.func
 };
 SegmentedButton.defaultProps = {
-  name: '',
+  name: "",
   options: [{
-    value: '4 w'
+    value: "4 w"
   }, {
-    value: '8 w'
+    value: "8 w"
   }, {
-    value: '13 w'
+    value: "13 w"
   }],
   width: 120,
   height: 40,
   controlradius: 8,
   segmentradius: 8,
-  gap: '0px',
+  gap: "0px",
   fontSize: 14,
-  selectedsegmentcolor: '#3a9df9',
-  selectedtextcolor: '#212121',
-  unselectedtextcolor: 'black',
+  selectedsegmentcolor: "#3a9df9",
+  selectedtextcolor: "#212121",
+  unselectedtextcolor: "black",
   defaultIndex: 0,
   onClick: () => {}
 };
 
-var css_248z = ".BarLine {\r\n    font-family: sans-serif;\r\n    text-align: center;\r\n  }\r\n  \r\n  /* Make brush background darker */\r\n  /* .recharts-brush .recharts-brush-slide {\r\n    fill: #a52a2a !important;\r\n    stroke: none;\r\n  }\r\n  \r\n  /* Style draggable handles (travellers) */\r\n  /* .recharts-brush-traveller {\r\n    fill: limegreen !important; /* bright green like in the image */\r\n  /* cursor: ew-resize;\r\n  } */\r\n  */\r\n  \r\n  /* Optional: center grip arrows (you can fake it with CSS) */\r\n  /* .recharts-brush .recharts-brush-traveller > rect {\r\n    rx: 2;\r\n    ry: 2;\r\n    width: 6;\r\n    fill: #a52a2a !important; /* dark gray */\r\n  /* } */ */\r\n  */\r\n  \r\n  /* Remove tick labels if needed */\r\n  .recharts-brush .recharts-layer text {\r\n    display: none;\r\n  }\r\n  ";
-styleInject(css_248z);
-
-function InnerBarChart() {
-  const data = [{
-    week: "Week 28",
-    total: 20000,
-    actual: 4000
-  }, {
-    week: "Week 29",
-    total: 10000,
-    actual: 8000
-  }, {
-    week: "Week 30",
-    total: 8000,
-    actual: 950
-  }, {
-    week: "Week 33",
-    total: 12000,
-    actual: 1000
-  }, {
-    week: "Week 36",
-    total: 16000,
-    actual: 13000
-  }, {
-    week: "Week 34",
-    total: 30000,
-    actual: 3000
-  }, {
-    week: "Week 35",
-    total: 8000,
-    actual: 950
-  }, {
-    week: "Week 37",
-    total: 9000,
-    actual: 3000
-  }];
-  const originalData = [{
-    label: "Vendor Selling Event: Week 28",
-    inc_unit: 20000,
-    inc_roi: 1.2
-  }, {
-    label: "Vendor Selling Event: Week 29",
-    inc_unit: 10000,
-    inc_roi: 1.2
-  }, {
-    label: "Vendor Selling Event: Week 30",
-    inc_unit: 8000,
-    inc_roi: 0.8
-  }, {
-    label: "Vendor Selling Event: Week 33",
-    inc_unit: 12000,
-    inc_roi: 1.1
-  }, {
-    label: "Vendor Selling Event: Week 36",
-    inc_unit: 8000,
-    inc_roi: 1.2
-  }, {
-    label: "Vendor Selling Event: Week 34",
-    inc_unit: 8000,
-    inc_roi: 0.7
-  }, {
-    label: "Vendor Selling Event: Week 35",
-    inc_unit: 8000,
-    inc_roi: 0.8
-  }, {
-    label: "Vendor Selling Event: Week 38",
-    inc_unit: 9000,
-    inc_roi: 1.1
-  }];
+function InnerBarChart({
+  data
+}) {
+  const processedData = data.map(item => {
+    const parts = item.label.replace("Vendor Selling Event:", "").trim();
+    return {
+      ...item,
+      shortLabel: parts
+    };
+  });
   const format = v => v >= 1000 ? `${v / 1000}K` : v;
-  const CustomBarLabel = ({
-    x,
-    y,
-    width,
-    payload
-  }) => {
-    if (!payload || typeof payload.total === "undefined") {
-      console.error("Invalid payload:", payload);
-      return null;
-    }
-    const centerX = x + width / 2;
-    return /*#__PURE__*/React__default["default"].createElement("text", {
-      x: centerX,
-      y: Math.max(y - 8, 10),
-      textAnchor: "middle",
-      fill: "black"
-    }, format(payload.total));
-  };
   const BarWithInner = props => {
     const {
       x,
@@ -32080,27 +32013,16 @@ function InnerBarChart() {
     if (!active || !payload || !payload.length) return null;
     const data = payload[0].payload;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        background: "white",
-        border: "1px solid #ccc",
-        padding: "10px",
-        borderRadius: "8px",
-        fontSize: "14px"
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("strong", null, label), /*#__PURE__*/React__default["default"].createElement("div", null, "Actual: ", format(data.actual)), /*#__PURE__*/React__default["default"].createElement("div", null, "Total: ", format(data.total)));
+      className: "bg-white border border-gray-300 p-2 rounded-lg text-sm"
+    }, /*#__PURE__*/React__default["default"].createElement("strong", null, data.label), /*#__PURE__*/React__default["default"].createElement("div", null, "Actual: ", format(data.actual)), /*#__PURE__*/React__default["default"].createElement("div", null, "Total: ", format(data.total)));
   };
-  const dataWithIndex = originalData.map((item, index) => ({
-    ...item,
-    index,
-    shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
-  }));
-  const CustomizedTick = ({
-    x,
-    y,
-    payload
-  }) => {
-    const label = dataWithIndex[payload.value]?.label ?? "";
-    const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+  const CustomizedTick = props => {
+    const {
+      x,
+      y,
+      payload
+    } = props;
+    const labelText = payload.value.replace("Vendor Selling Event:", "").trim();
     return /*#__PURE__*/React__default["default"].createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React__default["default"].createElement("text", {
@@ -32109,54 +32031,75 @@ function InnerBarChart() {
       dy: 16,
       textAnchor: "middle",
       fill: "#212121",
-      fontSize: 11,
-      fontWeight: "400",
+      fontSize: 10,
       fontFamily: "Poppins"
     }, /*#__PURE__*/React__default["default"].createElement("tspan", {
       x: 0,
-      dy: 8
-    }, "Vendor Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
+      dy: "0.71em"
+    }, "Vendor"), /*#__PURE__*/React__default["default"].createElement("tspan", {
       x: 0,
-      dy: 18
-    }, "Event: ", parts.join(" "))));
+      dy: "1.2em"
+    }, "Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: "1.2em"
+    }, labelText)));
   };
-  return /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React__default["default"].createElement("h3", {
+    className: "text-lg font-medium mb-4 text-center"
+  }, "Vendor Selling Events Comparison"), /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
     width: "100%",
-    height: 400
+    height: 450
   }, /*#__PURE__*/React__default["default"].createElement(recharts.BarChart, {
-    data: data,
+    data: processedData,
     margin: {
-      top: 20,
+      top: 30,
       right: 30,
       left: 20,
-      bottom: 10
+      bottom: 60
     }
   }, /*#__PURE__*/React__default["default"].createElement(recharts.CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React__default["default"].createElement(recharts.XAxis, {
-    dataKey: "week",
-    tick: /*#__PURE__*/React__default["default"].createElement(CustomizedTick, null)
+    dataKey: "shortLabel",
+    tick: /*#__PURE__*/React__default["default"].createElement(CustomizedTick, null),
+    height: 70,
+    interval: 0
   }), /*#__PURE__*/React__default["default"].createElement(recharts.YAxis, {
     type: "number",
     domain: [0, "dataMax + 2000"],
-    hide: true
+    tickFormatter: format
   }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, {
     content: /*#__PURE__*/React__default["default"].createElement(CustomTooltip, null)
   }), /*#__PURE__*/React__default["default"].createElement(recharts.Brush, {
     height: 30,
     travellerWidth: 10,
-    startIndex: 1,
+    startIndex: 0,
     endIndex: 5,
-    y: 369
+    y: 380
   }), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
     dataKey: "total",
     shape: /*#__PURE__*/React__default["default"].createElement(BarWithInner, null),
-    label: /*#__PURE__*/React__default["default"].createElement(CustomBarLabel, null),
-    barSize: 30
-  })));
+    barSize: 36
+  }))));
 }
 
+const Container = styled__default["default"].div`
+  width: ${props => props.width};
+  height: ${props => props.height};
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  #Segment {
+    width: auto;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: "Poppins"  
+    }
+`;
 styled__default["default"].div`
   font-family: sans-serif;
   text-align: center;
@@ -32173,49 +32116,22 @@ styled__default["default"].div`
   flex-direction: column;
   background-color: white;
 `;
-const Container = styled__default["default"].div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  #Segment {
-    width: auto;
-    white-space: nowrap;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: "Poppins"  
-    }
-`;
-/* Make brush background darker */
-/* .recharts-brush .recharts-brush-slide {
-    fill: #a52a2a !important;
-    stroke: none;
-  }
-  
-  /* Style draggable handles (travellers) */
-/* .recharts-brush-traveller {
-    fill: limegreen !important; /* bright green like in the image */
-/* cursor: ew-resize;
-  } */
 
-/* Optional: center grip arrows (you can fake it with CSS) */
-/* .recharts-brush .recharts-brush-traveller > rect {
-    rx: 2;
-    ry: 2;
-    width: 6;
-    fill: #a52a2a !important; /* dark gray */
-/* } */
-
-/* Remove tick labels if needed */
-//   .recharts-brush .recharts-layer text {
-//     display: none;
-//   }
-
-const BrushChart = () => {
+const BrushChart = props => {
+  const {
+    width,
+    height,
+    data,
+    barlineData,
+    lineChartData
+  } = props;
   const segmentedbuttonOptions = ["New Shoppers & Repeaters", "INC Sales & ROI", "INC Units", "Basket Lift"];
   const [selectedOption, setSelectedOption] = React$1.useState(segmentedbuttonOptions[0]);
-  return /*#__PURE__*/React__default["default"].createElement(Container, null, /*#__PURE__*/React__default["default"].createElement(SegmentedButton, {
-    gap: '8px',
+  return /*#__PURE__*/React__default["default"].createElement(Container, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/React__default["default"].createElement(SegmentedButton, {
+    gap: "8px",
     options: segmentedbuttonOptions.map(value => ({
       value
     })),
@@ -32225,7 +32141,15 @@ const BrushChart = () => {
       } = _ref;
       return setSelectedOption(value);
     }
-  }), selectedOption === "New Shoppers & Repeaters" && /*#__PURE__*/React__default["default"].createElement(InnerBarChart, null), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React__default["default"].createElement(SeparatedLineBarChart, null), selectedOption === "INC Units" && /*#__PURE__*/React__default["default"].createElement(SingleChart, null), selectedOption === "Basket Lift" && /*#__PURE__*/React__default["default"].createElement(SingleChart, null));
+  }), selectedOption === "New Shoppers & Repeaters" && /*#__PURE__*/React__default["default"].createElement(InnerBarChart, {
+    data: data
+  }), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React__default["default"].createElement(SeparatedLineBarChart, {
+    barlineData: barlineData
+  }), selectedOption === "INC Units" && /*#__PURE__*/React__default["default"].createElement(SingleChart, {
+    lineChartData: lineChartData
+  }), selectedOption === "Basket Lift" && /*#__PURE__*/React__default["default"].createElement(SingleChart, {
+    lineChartData: lineChartData
+  }));
 };
 
 exports.AreaChart = AreaChart;