sag_components 2.0.0-beta70 → 2.0.0-beta71

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React$1, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import styled, { keyframes, css } from 'styled-components';
-import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$2, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, Brush, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, ComposedChart } from 'recharts';
+import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$2, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, Brush, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -1682,6 +1682,12 @@ const getCurrencySign = (currencyTypeToConvert, value) => {
   currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
   return currencySign;
 };
+const getMaxCharsPerLine = len => {
+  if (len <= 20) return 20; // 1‒10 items
+  if (len <= 40) return 15; // 1‒40 items
+  if (len <= 80) return 10; // 41‒80 items
+  return 5; // 81+  items
+};
 const getFormattedUnits = num => {
   if (num === undefined || num === null) {
     return '';
@@ -9480,70 +9486,67 @@ const DropdownMain = styled.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$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 = ({
+  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
+}));
 DropdownNew.propTypes = {
   placeHolder: PropTypes.string,
   label: PropTypes.string,
@@ -9971,21 +9974,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] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState(''); // Added value state
@@ -10426,23 +10428,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] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10889,22 +10890,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] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24130,22 +24130,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("");
@@ -24543,24 +24542,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('');
@@ -25174,8 +25172,8 @@ function styleInject(css, ref) {
   }
 }
 
-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);
+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);
 
 const OneColumnContainer = props => {
   const {
@@ -30302,7 +30300,7 @@ const ChartSubtitle = styled.p`
   color: #484A4C;
   margin: 0;
 `;
-const ChartContainer = styled.div`
+const ChartContainer$1 = styled.div`
   position: relative;
   width: 100%;
   height: 90%; /* Reduced from 93% to make room for the zoom controls */
@@ -30910,7 +30908,7 @@ const BubbleChart = _ref => {
     "data-testid": "chart-title"
   }, title), /*#__PURE__*/React$1.createElement(ChartSubtitle, {
     "data-testid": "chart-subtitle"
-  }, subtitle)), /*#__PURE__*/React$1.createElement(ChartContainer, {
+  }, subtitle)), /*#__PURE__*/React$1.createElement(ChartContainer$1, {
     ref: scatterChartRef,
     "data-testid": "chart-container"
   }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
@@ -31411,120 +31409,312 @@ const BatteryChart = props => {
   }))))))), starText !== "" && /*#__PURE__*/React$1.createElement(StarText, null, starText));
 };
 
-const Container = styled.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"  
-    }
-`;
-const Title$1 = styled.h2`
-  color: #212121;
-  font-family: "Poppins";
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  margin: 0 0 16px 0;
-`;
 styled.div`
-  font-family: sans-serif;
-  text-align: center;
+  display: flex;
+  gap: 28px;
+  @media (max-width: 1536px) {
+    gap: 20px;
+  }
+  @media (max-width: 1366px) {
+    gap: 17px;
+  }
 `;
-styled.div`
-  height: 25%;
+const ButtonsControlsContainer = styled.div`
+  display: flex; 
+  font: ${props => props.fontSize?.toString().concat('', 'px Poppins, sans-serif')}; 
+  margin: 0;
+  --highlight-width: auto;
+  --highlight-x-pos: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  float: left;
+
+  &:not(:first-of-type) {
+    padding-left: 40px;
+    @media (max-width: 1536px) {
+      padding-left: 35px;
+    }
+    @media (max-width: 1366px) {
+      padding-left: 24px;
+    }
+  }
 `;
-styled.div`
-  height: 75%;
+const Controls = styled.div`
+  display: inline-flex;
+  justify-content: space-between;  
+  background: #f2f2f2;
+  border-radius:  ${props => props.controlradius.toString().concat('', 'px')}; //12px
+  // max-width: 500px; //use this to limit max lenght of the control 
+  padding: 6px;
+  gap: ${props => props.gap};
+  overflow: hidden;
+  position: relative;
+  &.controls::before {
+    content: "";
+    color: #212121;
+    background: #FFFFFF;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    border-radius:  ${props => props.segmentradius.toString().concat('', 'px')};
+    width: var(--highlight-width);
+    transform: translateX(var(--highlight-x-pos));
+    position: absolute;
+    top: 3px;
+    bottom: 3px;
+    left: 0; 
+    z-index: 0;
+  }
+  &.controls.ready::before {
+    transition: transform 0.3s ease, width 0.3s ease;
+  }
 `;
-styled.div`
+const ControlsInput = styled.input`
+  opacity: 0;
+  margin: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  cursor: pointer;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-`;
-const TooltipContainer = styled.div`
-background: white;
-padding: 10px;
-border-radius: 5px;
-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
-border: 1px solid #ddd;
-font-family: Poppins, sans-serif;
-font-weight: 500;
-font-size: 14px;
 `;
-const TooltipTitle = styled.p`
-font-weight: 700;
-margin-top: 5px;
-margin-bottom: 5px;
+const Segment = styled.div`
+  /* width: 100%; uncomment for each segment to have matching width */  
+  width: 50%;
+  min-width: ${props => props.segmentwidth.toString().concat('', 'px')};  //120px;
+  position: relative;
+  text-align: center;
+  z-index: 1;  
 `;
-const TooltipText = styled.p`
-margin-top: 5px;
-margin-bottom: 5px;
+const SegmentLabel = styled.label`
+  cursor: pointer;
+  display: block;
+  padding: 0 6px;
+  transition: color 0.5s ease;
+  &.active {
+    color: ${props => props.selectedtextcolor};
+  }
+  &.inactive {
+    color: ${props => props.unselectedtextcolor};
+  }
 `;
 
-const SeparatedLineBarChart = ({
-  brushAreaBarData = []
-}) => {
-  const processedData = brushAreaBarData.map(item => {
-    return {
-      ...item,
-      shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
-    };
-  });
-  const CustomizedTick = props => {
-    const {
-      x,
-      y,
-      payload
-    } = props;
-    const label = payload.value;
-    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());
+/* eslint-disable react/require-default-props */
+
+/* SegmentedButton */
+const SegmentedButton = props => {
+  const {
+    className,
+    name,
+    options,
+    width,
+    height,
+    controlradius,
+    segmentradius,
+    fontSize,
+    selectedsegmentcolor,
+    selectedtextcolor,
+    unselectedtextcolor,
+    defaultIndex,
+    onClick,
+    gap
+  } = props;
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+  const controlRef = useRef();
+  const componentReady = useRef();
+  const optionsRef = options?.map((item, i) => ({
+    ...item,
+    id: i,
+    ref: useRef()
+  }));
+
+  // Determine when the component is "ready"
+  useEffect(() => {
+    componentReady.current = true;
+  }, []);
+  useEffect(() => {
+    if (defaultIndex >= 0 && defaultIndex < options?.length) {
+      setActiveIndex(defaultIndex);
     }
-    return /*#__PURE__*/React$1.createElement("g", {
-      transform: `translate(${x},${y})`
-    }, /*#__PURE__*/React$1.createElement("text", {
-      x: 0,
-      y: 0,
-      dy: 16,
-      textAnchor: "middle",
-      fill: "#212121",
-      fontSize: 10,
-      fontFamily: "Poppins"
-    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
-      key: i,
-      x: 0,
-      dy: i === 0 ? "0.71em" : "1.2em"
-    }, chunk))));
-  };
-  const CustomTooltip = ({
-    active,
-    payload
-  }) => {
-    if (!active || !payload || !payload.length) return null;
-    const data = payload[0]?.payload;
-    if (!data) return null;
-    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, `INC Sales: ${getFormattedValue(data.inc_sales)}${getFormattedUnits(data.inc_sales)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `INC Sales ROI:  ${getFormattedValue(data.inc_roi)}${getFormattedUnits(data.inc_roi)}`));
+  }, [defaultIndex]);
+  useEffect(() => {
+    const activeSegmentRef = optionsRef[activeIndex].ref;
+    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);
+    onClick({
+      index,
+      value
+    });
   };
+  let segmentwidth = 120;
+  if (options && options.length > 0 && width && width > 0) {
+    segmentwidth = width / options.length;
+  }
+  return /*#__PURE__*/React$1.createElement(ButtonsControlsContainer, {
+    className: className,
+    fontSize: fontSize,
+    ref: controlRef
+  }, /*#__PURE__*/React$1.createElement(Controls, {
+    id: "Controls",
+    selectedsegmentcolor: selectedsegmentcolor,
+    segmentradius: segmentradius,
+    gap: gap,
+    controlradius: controlradius,
+    segmentwidth: segmentwidth,
+    className: `controls ${componentReady.current ? "ready" : "idle"}`
+  }, optionsRef?.map((item, i) => /*#__PURE__*/React$1.createElement(Segment, {
+    id: "Segment",
+    key: item.id,
+    selectedsegmentcolor: selectedsegmentcolor,
+    controlradius: controlradius,
+    segmentwidth: segmentwidth,
+    className: `${activeIndex === i ? "active" : "inactive"}`,
+    ref: item.ref
+  }, /*#__PURE__*/React$1.createElement(ControlsInput, {
+    type: "radio",
+    value: item.value,
+    id: item.id,
+    name: name,
+    onChange: () => onInputChangeHandler(item.value, item.id),
+    checked: i === activeIndex
+  }), /*#__PURE__*/React$1.createElement(SegmentLabel, {
+    id: "SegmentLabel",
+    selectedtextcolor: selectedtextcolor,
+    unselectedtextcolor: unselectedtextcolor,
+    segmentheight: height / 5,
+    className: `${activeIndex === i ? "active" : "inactive"} `,
+    htmlFor: item.value
+  }, item.value)))));
+};
+SegmentedButton.propTypes = {
+  name: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string
+  })),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  controlradius: PropTypes.number,
+  segmentradius: PropTypes.number,
+  gap: PropTypes.string,
+  fontSize: PropTypes.number,
+  selectedsegmentcolor: PropTypes.string,
+  selectedtextcolor: PropTypes.string,
+  unselectedtextcolor: PropTypes.string,
+  defaultIndex: PropTypes.number,
+  onClick: PropTypes.func
+};
+SegmentedButton.defaultProps = {
+  name: "",
+  options: [{
+    value: "4 w"
+  }, {
+    value: "8 w"
+  }, {
+    value: "13 w"
+  }],
+  width: 120,
+  height: 40,
+  controlradius: 8,
+  segmentradius: 8,
+  gap: "0px",
+  fontSize: 14,
+  selectedsegmentcolor: "#3a9df9",
+  selectedtextcolor: "#212121",
+  unselectedtextcolor: "black",
+  defaultIndex: 0,
+  onClick: () => {}
+};
+
+const Container = styled.div`
+  width: ${props => props.width};
+  height: ${props => props.height};
+  margin: 10px;
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+`;
+const SegmentedContainer = styled(SegmentedButton)`
+  height: auto;
+  #Segment {
+    width: auto;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: "Poppins";
+  }
+`;
+const ChartContainer = styled.div`
+  width: 100%;
+  height: calc(100% - 70px);
+`;
+const Title$1 = styled.h2`
+  color: #212121;
+  font-family: "Poppins";
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  height: 10px;
+  line-height: normal;
+  margin: 0 0 16px 0;
+`;
+styled.div`
+  font-family: sans-serif;
+  text-align: center;
+`;
+styled.div`
+  height: 25%;
+`;
+styled.div`
+  height: 75%;
+`;
+styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+`;
+const TooltipContainer = styled.div`
+  background: white;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid #ddd;
+  font-family: Poppins, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+`;
+const TooltipTitle = styled.p`
+  font-weight: 700;
+  margin-top: 5px;
+  margin-bottom: 5px;
+`;
+const TooltipText = styled.p`
+  margin-top: 5px;
+  margin-bottom: 5px;
+`;
+
+var css_248z = ".custom-brush .recharts-brush-slide {        /* selected area */\r\n  fill: #212121;\r\n}\r\n\r\n  ";
+styleInject(css_248z);
+
+const BarLine = props => {
+  const {
+    brushAreaBarData
+  } = props;
+  const MAX_CHARS_PER_LINE = getMaxCharsPerLine(brushAreaBarData.length);
+  const MAX_LINES = 2;
   const chartMargins = {
     top: 30,
     right: 30,
@@ -31535,9 +31725,71 @@ const SeparatedLineBarChart = ({
     top: 30,
     right: 30,
     left: 20,
-    bottom: 80
+    bottom: 0
   };
-  const BAR_CATEGORY_GAP = "30%";
+  const CustomizedTick = /*#__PURE__*/React$1.memo(({
+    x,
+    y,
+    payload
+  }) => {
+    const fullText = payload?.value ?? "";
+
+    /* ── 1. split text into lines that are ≤ MAX_CHARS_PER_LINE ─────────────── */
+    const words = fullText.split(" ");
+    const lines = [];
+    let current = "";
+    words.forEach(w => {
+      // +1 so we count the space that will be added
+      if ((current.length ? current.length + 1 : 0) + w.length > MAX_CHARS_PER_LINE) {
+        lines.push(current.trim());
+        current = w;
+      } else {
+        current += (current ? " " : "") + w;
+      }
+    });
+    if (current) lines.push(current.trim());
+
+    /* ── 2. squash down to two lines & add "..." if necessary ───────────────── */
+    if (lines.length > MAX_LINES) {
+      const firstLine = lines[0]; // keep it as-is
+      // join everything after the first line and truncate
+      let secondLine = lines.slice(1).join(" ");
+      if (secondLine.length > MAX_CHARS_PER_LINE - 3) {
+        secondLine = secondLine.slice(0, MAX_CHARS_PER_LINE - 3).trim();
+      }
+      lines.length = 0;
+      lines.push(firstLine, `${secondLine}…`);
+    }
+
+    /* ── 3. render ──────────────────────────────────────────────────────────── */
+    return /*#__PURE__*/React$1.createElement("g", {
+      transform: `translate(${x},${y})`
+    }, /*#__PURE__*/React$1.createElement("text", {
+      textAnchor: "middle",
+      fontFamily: "Poppins",
+      fontSize: 14,
+      fill: "#212121"
+    }, lines.map((line, idx) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: idx,
+      x: 0
+      /* first line sits on the baseline (≈ 0.71 em down); every
+         additional line gets another 1.2 em offset */,
+      dy: idx === 0 ? "0.71em" : "1.2em"
+    }, line))));
+  });
+  const CustomTooltip = /*#__PURE__*/React$1.memo(({
+    active,
+    payload
+  }) => {
+    if (!active || !payload?.length) return null;
+    const {
+      label,
+      description,
+      inc_sales,
+      inc_roi
+    } = payload[0].payload;
+    return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle, 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: {
       width: "100%",
@@ -31551,7 +31803,7 @@ const SeparatedLineBarChart = ({
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React$1.createElement(LineChart, {
-    data: processedData,
+    data: brushAreaBarData,
     margin: chartMargins,
     syncId: "composedChart",
     syncMethod: "index"
@@ -31567,7 +31819,8 @@ const SeparatedLineBarChart = ({
     },
     hide: true
   }), /*#__PURE__*/React$1.createElement(YAxis, {
-    domain: [0, 2],
+    type: "number",
+    domain: [0, dataMax => dataMax * 1.3],
     hide: true
   }), /*#__PURE__*/React$1.createElement(Line, {
     type: "monotone",
@@ -31579,15 +31832,13 @@ const SeparatedLineBarChart = ({
       fill: "#F8CD00"
     },
     activeDot: false,
-    name: "INC Sales ROI",
-    barCategoryGap: BAR_CATEGORY_GAP,
-    barGap: 0
+    name: "INC Sales ROI"
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "inc_roi",
     position: "top",
     formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
-    fontSize: 12,
+    fontSize: 15,
     fontWeight: "400",
     fontFamily: "Poppins"
   })), /*#__PURE__*/React$1.createElement(Brush, {
@@ -31595,25 +31846,23 @@ const SeparatedLineBarChart = ({
     height: 30,
     stroke: "#212121",
     startIndex: 0,
-    endIndex: Math.min(6, processedData.length - 1),
+    endIndex: Math.min(6, brushAreaBarData.length - 1),
     y: 330,
     travellerWidth: 10,
     tickFormatter: (value, index) => index + 1,
     hide: true
   })))), /*#__PURE__*/React$1.createElement("div", {
     style: {
-      height: "70%"
+      height: "65%"
     }
   }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: "100%"
-  }, /*#__PURE__*/React$1.createElement(ComposedChart, {
-    data: processedData,
+  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+    data: brushAreaBarData,
     margin: chartMargins2,
     syncId: "composedChart",
-    syncMethod: "index",
-    barCategoryGap: BAR_CATEGORY_GAP,
-    barGap: 0
+    syncMethod: "index"
   }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
@@ -31621,401 +31870,190 @@ const SeparatedLineBarChart = ({
     dataKey: "label",
     tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
     interval: 0,
-    height: 80,
+    height: 50,
     tickLine: false
   }), /*#__PURE__*/React$1.createElement(YAxis, {
-    tickFormatter: v => `${v / 1000}k`,
+    type: "number",
+    domain: [0, dataMax => dataMax * 1.3],
     hide: true
   }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null),
+    cursor: brushAreaBarData.length > 80
   }), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "inc_sales",
     fill: "#CCDCDD",
     gap: 4,
-    borderRadius: [4, 4, 0, 8],
-    barSize: 40,
+    barSize: 53,
     name: "INC Sales"
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "inc_sales",
     position: "top",
     formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
-    fontSize: 12,
-    fontWeight: "400",
-    fontFamily: "Poppins"
-  })), /*#__PURE__*/React$1.createElement(Brush, {
-    dataKey: "label",
-    height: 30,
-    stroke: "#212121",
-    startIndex: 0,
-    endIndex: Math.min(6, processedData.length - 1),
-    travellerWidth: 10,
-    tickFormatter: (value, index) => index + 1
-  })), /*#__PURE__*/React$1.createElement("div", null)), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
-    width: "100%",
-    height: "40px",
-    legendData: [{
-      iconColor: "#CCDCDD",
-      iconType: "Square",
-      title: "INC Sales"
-    }, {
-      iconColor: "#F8CD00",
-      iconType: "LegendUnionIcon",
-      title: "INC Sales ROI"
-    }]
-  })));
-};
-
-function SingleChart({
-  barData,
-  height = 450,
-  width = "100%"
-}) {
-  const dataWithIndex = barData?.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 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", {
-      x: 0,
-      y: 0,
-      dy: 16,
-      textAnchor: "middle",
-      fill: "#212121",
-      fontSize: 10,
-      fontFamily: "Poppins"
-    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
-      key: i,
-      x: 0,
-      dy: i === 0 ? "0.71em" : "1.2em"
-    }, chunk))));
-  };
-  const CustomTooltip = ({
-    active,
-    payload
-  }) => {
-    if (!active || !payload || !payload.length) return null;
-    const data = payload[0]?.payload;
-    if (!data) return null;
-    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%",
-      height: "100%"
-    }
-  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
-    width: "100%",
-    height: "95%"
-  }, /*#__PURE__*/React$1.createElement(ComposedChart, {
-    data: dataWithIndex,
-    margin: {
-      top: 40,
-      right: 40,
-      left: 20,
-      bottom: 40
-    }
-  }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
-    strokeDasharray: "3 3",
-    vertical: false
-  }), /*#__PURE__*/React$1.createElement(XAxis, {
-    dataKey: "index",
-    tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
-    interval: 0,
-    height: 80,
-    padding: {
-      left: 20,
-      right: 20
-    },
-    tickLine: false
-  }), /*#__PURE__*/React$1.createElement(YAxis, {
-    tickFormatter: v => `$${v / 1000}k`,
-    hide: true
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Bar, {
-    dataKey: "value",
-    fill: "#CCDCDD",
-    gap: "4px",
-    borderRadius: [4, 4, 0, 8],
-    barSize: 40,
-    name: "INC Sales"
-  }, /*#__PURE__*/React$1.createElement(LabelList, {
-    dataKey: "value",
-    position: "top",
-    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
-    fill: "#212121",
-    fontSize: 12,
+    fontSize: 16,
     fontWeight: "400",
     fontFamily: "Poppins"
   })), /*#__PURE__*/React$1.createElement(Brush, {
     height: 30,
+    fill: "#EFEFEF",
     travellerWidth: 10,
     startIndex: 0,
-    endIndex: Math.min(6, barData.length - 1)
-  }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    endIndex: Math.min(6, brushAreaBarData.length - 1),
+    className: "custom-brush"
+  })))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
     width: "100%",
-    height: "40px",
-    legendData: [{
-      iconColor: "#CCDCDD",
-      iconType: "Square",
-      title: "INC Units"
-    }]
-  }));
-}
-
-styled.div`
-  display: flex;
-  gap: 28px;
-  @media (max-width: 1536px) {
-    gap: 20px;
-  }
-  @media (max-width: 1366px) {
-    gap: 17px;
-  }
-`;
-const ButtonsControlsContainer = styled.div`
-  display: flex; 
-  font: ${props => props.fontSize?.toString().concat('', 'px Poppins, sans-serif')}; 
-  margin: 0;
-  --highlight-width: auto;
-  --highlight-x-pos: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  float: left;
-
-  &:not(:first-of-type) {
-    padding-left: 40px;
-    @media (max-width: 1536px) {
-      padding-left: 35px;
-    }
-    @media (max-width: 1366px) {
-      padding-left: 24px;
-    }
-  }
-`;
-const Controls = styled.div`
-  display: inline-flex;
-  justify-content: space-between;  
-  background: #f2f2f2;
-  border-radius:  ${props => props.controlradius.toString().concat('', 'px')}; //12px
-  // max-width: 500px; //use this to limit max lenght of the control 
-  padding: 6px;
-  gap: ${props => props.gap};
-  overflow: hidden;
-  position: relative;
-  &.controls::before {
-    content: "";
-    color: #212121;
-    background: #FFFFFF;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    border-radius:  ${props => props.segmentradius.toString().concat('', 'px')};
-    width: var(--highlight-width);
-    transform: translateX(var(--highlight-x-pos));
-    position: absolute;
-    top: 3px;
-    bottom: 3px;
-    left: 0; 
-    z-index: 0;
-  }
-  &.controls.ready::before {
-    transition: transform 0.3s ease, width 0.3s ease;
-  }
-`;
-const ControlsInput = styled.input`
-  opacity: 0;
-  margin: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  width: 100%;
-  cursor: pointer;
-  height: 100%;
-`;
-const Segment = styled.div`
-  /* width: 100%; uncomment for each segment to have matching width */  
-  width: 50%;
-  min-width: ${props => props.segmentwidth.toString().concat('', 'px')};  //120px;
-  position: relative;
-  text-align: center;
-  z-index: 1;  
-`;
-const SegmentLabel = styled.label`
-  cursor: pointer;
-  display: block;
-  padding: 0 6px;
-  transition: color 0.5s ease;
-  &.active {
-    color: ${props => props.selectedtextcolor};
-  }
-  &.inactive {
-    color: ${props => props.unselectedtextcolor};
-  }
-`;
-
-/* eslint-disable react/require-default-props */
+    height: "40px",
+    legendData: [{
+      iconColor: "#CCDCDD",
+      iconType: "Square",
+      title: "INC Sales"
+    }, {
+      iconColor: "#F8CD00",
+      iconType: "LegendUnionIcon",
+      title: "INC Sales ROI"
+    }]
+  }));
+};
 
-/* SegmentedButton */
-const SegmentedButton = props => {
+const SingleChart = props => {
   const {
-    name,
-    options,
-    width,
-    height,
-    controlradius,
-    segmentradius,
-    fontSize,
-    selectedsegmentcolor,
-    selectedtextcolor,
-    unselectedtextcolor,
-    defaultIndex,
-    onClick,
-    gap
+    barData
   } = props;
-  const [activeIndex, setActiveIndex] = useState(defaultIndex);
-  const controlRef = useRef();
-  const componentReady = useRef();
-  const optionsRef = options?.map((item, i) => ({
+  const MAX_CHARS_PER_LINE = getMaxCharsPerLine(barData.length);
+  const MAX_LINES = 2;
+  const dataWithIndex = barData?.map((item, index) => ({
     ...item,
-    id: i,
-    ref: useRef()
+    index,
+    shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
   }));
+  const CustomizedTick = /*#__PURE__*/React$1.memo(({
+    x,
+    y,
+    payload
+  }) => {
+    const fullText = payload?.value ?? "";
+
+    /* ── 1. split text into lines that are ≤ MAX_CHARS_PER_LINE ─────────────── */
+    const words = fullText.split(" ");
+    const lines = [];
+    let current = "";
+    words.forEach(w => {
+      // +1 so we count the space that will be added
+      if ((current.length ? current.length + 1 : 0) + w.length > MAX_CHARS_PER_LINE) {
+        lines.push(current.trim());
+        current = w;
+      } else {
+        current += (current ? " " : "") + w;
+      }
+    });
+    if (current) lines.push(current.trim());
 
-  // Determine when the component is "ready"
-  useEffect(() => {
-    componentReady.current = true;
-  }, []);
-  useEffect(() => {
-    if (defaultIndex >= 0 && defaultIndex < options?.length) {
-      setActiveIndex(defaultIndex);
+    /* ── 2. squash down to two lines & add "..." if necessary ───────────────── */
+    if (lines.length > MAX_LINES) {
+      const firstLine = lines[0]; // keep it as-is
+      // join everything after the first line and truncate
+      let secondLine = lines.slice(1).join(" ");
+      if (secondLine.length > MAX_CHARS_PER_LINE - 3) {
+        secondLine = secondLine.slice(0, MAX_CHARS_PER_LINE - 3).trim();
+      }
+      lines.length = 0;
+      lines.push(firstLine, `${secondLine}…`);
     }
-  }, [defaultIndex]);
-  useEffect(() => {
-    const activeSegmentRef = optionsRef[activeIndex].ref;
-    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);
-    onClick({
-      index,
-      value
-    });
+
+    /* ── 3. render ──────────────────────────────────────────────────────────── */
+    return /*#__PURE__*/React$1.createElement("g", {
+      transform: `translate(${x},${y})`
+    }, /*#__PURE__*/React$1.createElement("text", {
+      textAnchor: "middle",
+      fontFamily: "Poppins",
+      fontSize: 14,
+      fill: "#212121"
+    }, lines.map((line, idx) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: idx,
+      x: 0
+      /* first line sits on the baseline (≈ 0.71 em down); every
+         additional line gets another 1.2 em offset */,
+      dy: idx === 0 ? "0.71em" : "1.2em"
+    }, line))));
+  });
+  const CustomTooltip = ({
+    active,
+    payload
+  }) => {
+    if (!active || !payload || !payload.length) return null;
+    const data = payload[0]?.payload;
+    if (!data) return null;
+    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)}`));
   };
-  let segmentwidth = 120;
-  if (options && options.length > 0 && width && width > 0) {
-    segmentwidth = width / options.length;
-  }
-  return /*#__PURE__*/React$1.createElement(ButtonsControlsContainer, {
-    fontSize: fontSize,
-    ref: controlRef
-  }, /*#__PURE__*/React$1.createElement(Controls, {
-    id: "Controls",
-    selectedsegmentcolor: selectedsegmentcolor,
-    segmentradius: segmentradius,
-    gap: gap,
-    controlradius: controlradius,
-    segmentwidth: segmentwidth,
-    className: `controls ${componentReady.current ? "ready" : "idle"}`
-  }, optionsRef?.map((item, i) => /*#__PURE__*/React$1.createElement(Segment, {
-    id: "Segment",
-    key: item.id,
-    selectedsegmentcolor: selectedsegmentcolor,
-    controlradius: controlradius,
-    segmentwidth: segmentwidth,
-    className: `${activeIndex === i ? "active" : "inactive"}`,
-    ref: item.ref
-  }, /*#__PURE__*/React$1.createElement(ControlsInput, {
-    type: "radio",
-    value: item.value,
-    id: item.id,
-    name: name,
-    onChange: () => onInputChangeHandler(item.value, item.id),
-    checked: i === activeIndex
-  }), /*#__PURE__*/React$1.createElement(SegmentLabel, {
-    id: "SegmentLabel",
-    selectedtextcolor: selectedtextcolor,
-    unselectedtextcolor: unselectedtextcolor,
-    segmentheight: height / 5,
-    className: `${activeIndex === i ? "active" : "inactive"} `,
-    htmlFor: item.value
-  }, item.value)))));
-};
-SegmentedButton.propTypes = {
-  name: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string
-  })),
-  width: PropTypes.number,
-  height: PropTypes.number,
-  controlradius: PropTypes.number,
-  segmentradius: PropTypes.number,
-  gap: PropTypes.string,
-  fontSize: PropTypes.number,
-  selectedsegmentcolor: PropTypes.string,
-  selectedtextcolor: PropTypes.string,
-  unselectedtextcolor: PropTypes.string,
-  defaultIndex: PropTypes.number,
-  onClick: PropTypes.func
-};
-SegmentedButton.defaultProps = {
-  name: "",
-  options: [{
-    value: "4 w"
-  }, {
-    value: "8 w"
-  }, {
-    value: "13 w"
-  }],
-  width: 120,
-  height: 40,
-  controlradius: 8,
-  segmentradius: 8,
-  gap: "0px",
-  fontSize: 14,
-  selectedsegmentcolor: "#3a9df9",
-  selectedtextcolor: "#212121",
-  unselectedtextcolor: "black",
-  defaultIndex: 0,
-  onClick: () => {}
+  return /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    width: "100%",
+    height: "90%"
+  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+    data: dataWithIndex,
+    margin: {
+      top: 40,
+      right: 40,
+      left: 20,
+      bottom: 0
+    }
+  }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
+    strokeDasharray: "3 3",
+    vertical: false
+  }), /*#__PURE__*/React$1.createElement(XAxis, {
+    dataKey: "label",
+    tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
+    interval: 0,
+    height: 50,
+    tickLine: false
+  }), /*#__PURE__*/React$1.createElement(YAxis, {
+    type: "number",
+    domain: [0, dataMax => dataMax * 1.3],
+    hide: true
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    cursor: barData.length > 80,
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
+  }), /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "value",
+    fill: "#CCDCDD",
+    barSize: 53,
+    name: "INC Sales"
+  }, /*#__PURE__*/React$1.createElement(LabelList, {
+    dataKey: "value",
+    position: "top",
+    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
+    fill: "#212121",
+    fontSize: 16,
+    fontWeight: "400",
+    fontFamily: "Poppins"
+  })), /*#__PURE__*/React$1.createElement(Brush, {
+    height: 30,
+    fill: "#EFEFEF",
+    travellerWidth: 10,
+    startIndex: 0,
+    endIndex: Math.min(6, barData.length - 1),
+    className: "custom-brush"
+  }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    width: "100%",
+    height: "40px",
+    legendData: [{
+      iconColor: "#CCDCDD",
+      iconType: "Square",
+      title: "INC Units"
+    }]
+  }));
 };
 
-function InnerBarChart({
-  brushInnerBarData
-}) {
+const InnerBar = props => {
+  const {
+    brushInnerBarData
+  } = props;
+  const MAX_CHARS_PER_LINE = getMaxCharsPerLine(brushInnerBarData.length);
+  const MAX_LINES = 2;
   const BarWithInner = props => {
     const {
       x,
@@ -32040,7 +32078,7 @@ function InnerBarChart({
       x: x + width / 2,
       y: y - 8,
       textAnchor: "middle",
-      fontSize: 11,
+      fontSize: 16,
       fontWeight: 400,
       fontFamily: "Poppins",
       fill: "#212121"
@@ -32056,61 +32094,76 @@ function InnerBarChart({
       x: x + width / 2,
       y: innerY - 6,
       textAnchor: "middle",
-      fontSize: 11,
+      fontSize: 16,
       fontWeight: 400,
       fontFamily: "Poppins",
       fill: "#212121"
     }, `${getFormattedValue(payload.actual)}${getFormattedUnits(payload.actual)}`));
   };
-  const CustomTooltip = ({
+  const CustomTooltip = /*#__PURE__*/React$1.memo(({
     active,
-    payload,
-    label
+    payload
   }) => {
     if (!active || !payload || !payload.length) return null;
-    const data = payload[0].payload;
-    const repeaterPercentage = (data.actual / data.total * 100).toFixed(1);
-    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, `New Shoppers: ${getFormattedValue(data.total)}${getFormattedUnits(data.total)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `Repeaters: ${getFormattedValue(data.actual)}${getFormattedUnits(data.actual)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `% Repeaters: ${repeaterPercentage}%`));
-  };
-  const CustomizedTick = props => {
     const {
-      x,
-      y,
-      payload
-    } = props;
-    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;
+      label,
+      description,
+      total,
+      actual
+    } = payload[0].payload;
+    const repeaterPercentage = (actual / total * 100).toFixed(1);
+    return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle, null, label), /*#__PURE__*/React$1.createElement(TooltipText, null, description), /*#__PURE__*/React$1.createElement(TooltipText, null, `New Shoppers: ${getFormattedValue(total)}${getFormattedUnits(total)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `Repeaters: ${getFormattedValue(actual)}${getFormattedUnits(actual)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `% Repeaters: ${repeaterPercentage}%`));
+  });
+  const CustomizedTick = /*#__PURE__*/React$1.memo(({
+    x,
+    y,
+    payload
+  }) => {
+    const fullText = payload?.value ?? "";
+
+    /* ── 1. split text into lines that are ≤ MAX_CHARS_PER_LINE ─────────────── */
+    const words = fullText.split(" ");
+    const lines = [];
+    let current = "";
+    words.forEach(w => {
+      // +1 so we count the space that will be added
+      if ((current.length ? current.length + 1 : 0) + w.length > MAX_CHARS_PER_LINE) {
+        lines.push(current.trim());
+        current = w;
       } else {
-        currentChunk += " " + word;
+        current += (current ? " " : "") + w;
       }
     });
-    if (currentChunk) {
-      chunks.push(currentChunk.trim());
+    if (current) lines.push(current.trim());
+
+    /* ── 2. squash down to two lines & add "..." if necessary ───────────────── */
+    if (lines.length > MAX_LINES) {
+      const firstLine = lines[0]; // keep it as-is
+      // join everything after the first line and truncate
+      let secondLine = lines.slice(1).join(" ");
+      if (secondLine.length > MAX_CHARS_PER_LINE - 3) {
+        secondLine = secondLine.slice(0, MAX_CHARS_PER_LINE - 3).trim();
+      }
+      lines.length = 0;
+      lines.push(firstLine, `${secondLine}…`);
     }
+
+    /* ── 3. render ──────────────────────────────────────────────────────────── */
     return /*#__PURE__*/React$1.createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React$1.createElement("text", {
-      x: 0,
-      y: 0,
-      dy: 16,
       textAnchor: "middle",
-      fill: "#212121",
-      fontSize: 10,
-      fontFamily: "Poppins"
-    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
-      key: i,
-      x: 0,
-      dy: i === 0 ? "0.71em" : "1.2em"
-    }, chunk))));
-  };
+      fontFamily: "Poppins",
+      fontSize: 14,
+      fill: "#212121"
+    }, lines.map((line, idx) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: idx,
+      x: 0
+      /* first line sits on the baseline (≈ 0.71 em down); every
+       additional line gets another 1.2 em offset */,
+      dy: idx === 0 ? "0.71em" : "1.2em"
+    }, line))));
+  });
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
       width: "100%",
@@ -32118,14 +32171,14 @@ function InnerBarChart({
     }
   }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
-    height: "95%"
+    height: "90%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
     data: brushInnerBarData,
     margin: {
       top: 30,
-      right: 30,
+      right: 20,
       left: 20,
-      bottom: 80
+      bottom: 0
     }
   }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
@@ -32133,23 +32186,27 @@ function InnerBarChart({
   }), /*#__PURE__*/React$1.createElement(XAxis, {
     dataKey: "label",
     tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
-    height: 80,
+    height: 50,
+    tickLine: false,
     interval: 0
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     type: "number",
-    domain: [0, "dataMax + 2000"],
+    domain: [0, dataMax => dataMax * 1.3],
     hide: true
   }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    cursor: brushInnerBarData.length > 80,
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "total",
     shape: /*#__PURE__*/React$1.createElement(BarWithInner, null),
-    barSize: 36
+    barSize: 55
   }), /*#__PURE__*/React$1.createElement(Brush, {
     height: 30,
+    fill: "#EFEFEF",
     travellerWidth: 10,
     startIndex: 0,
-    endIndex: Math.min(6, brushInnerBarData.length - 1)
+    endIndex: Math.min(6, brushInnerBarData.length - 1),
+    className: "custom-brush"
   }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
     width: "100%",
     height: "40px",
@@ -32163,7 +32220,7 @@ function InnerBarChart({
       title: "Repeaters"
     }]
   }));
-}
+};
 
 const BrushChart = props => {
   const {
@@ -32173,14 +32230,14 @@ const BrushChart = props => {
     brushBarIncData,
     brushBarBasketData,
     brushAreaBarData,
+    segmentedbuttonOptions,
     title
   } = props;
-  const segmentedbuttonOptions = ["New Shoppers & Repeaters", "INC Sales & ROI", "INC Units", "Basket Lift"];
   const [selectedOption, setSelectedOption] = useState(segmentedbuttonOptions[0]);
   return /*#__PURE__*/React$1.createElement(Container, {
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(Title$1, null, title), /*#__PURE__*/React$1.createElement(SegmentedButton, {
+  }, /*#__PURE__*/React$1.createElement(Title$1, null, title), /*#__PURE__*/React$1.createElement(SegmentedContainer, {
     gap: "8px",
     options: segmentedbuttonOptions.map(value => ({
       value
@@ -32191,15 +32248,15 @@ const BrushChart = props => {
       } = _ref;
       return setSelectedOption(value);
     }
-  }), selectedOption === "New Shoppers & Repeaters" && /*#__PURE__*/React$1.createElement(InnerBarChart, {
+  }), /*#__PURE__*/React$1.createElement(ChartContainer, null, selectedOption === "New Shoppers & Repeaters" && /*#__PURE__*/React$1.createElement(InnerBar, {
     brushInnerBarData: brushInnerBarData
-  }), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React$1.createElement(SeparatedLineBarChart, {
+  }), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React$1.createElement(BarLine, {
     brushAreaBarData: brushAreaBarData
   }), selectedOption === "INC Units" && /*#__PURE__*/React$1.createElement(SingleChart, {
     barData: brushBarIncData
   }), selectedOption === "Basket Lift" && /*#__PURE__*/React$1.createElement(SingleChart, {
     barData: brushBarBasketData
-  }));
+  })));
 };
 
 const Overlay = styled.div`