sag_components 2.0.0-beta64 → 2.0.0-beta66

package/dist/index.js

@@ -1943,7 +1943,7 @@ const TitleAndValueContainer$4 = styled__default["default"].div`
   flex-direction: column;
   padding: 0 20px;
 `;
-const Title$f = styled__default["default"].h4`
+const Title$e = styled__default["default"].h4`
   font-weight: 400;
   font-size: 18px;
   margin: 0 0 8px;
@@ -2078,7 +2078,7 @@ const AvarageDelimiter = styled__default["default"].div`
 `;
 
 /* Custom properties */
-const TooltipContainer$4 = styled__default["default"].div`
+const TooltipContainer$3 = styled__default["default"].div`
   --tooltip-text-color: black;
   --tooltip-background-color: white;
   --tooltip-margin: 40px;
@@ -2192,7 +2192,7 @@ const Tooltip$1 = props => {
     clearInterval(timeout);
     setActive(false);
   };
-  return /*#__PURE__*/React__default["default"].createElement(TooltipContainer$4, null, /*#__PURE__*/React__default["default"].createElement(TooltipWrapper$2, {
+  return /*#__PURE__*/React__default["default"].createElement(TooltipContainer$3, null, /*#__PURE__*/React__default["default"].createElement(TooltipWrapper$2, {
     onMouseEnter: showTip,
     onMouseLeave: hideTip
   }, children, active && /*#__PURE__*/React__default["default"].createElement(TooltipTip$1, {
@@ -2423,7 +2423,7 @@ const PieChart = props => {
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$4, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$f, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$e, {
     className: "Title"
   }, title), /*#__PURE__*/React__default["default"].createElement(CurrencySignAndFormattedValueContainer$2, {
     className: "CurrencySignAndFormattedValueContainer"
@@ -11149,7 +11149,7 @@ const TooltipTextContainer = styled__default["default"].div`
     cursor: pointer;
   }
 `;
-const TooltipText$2 = styled__default["default"].div` 
+const TooltipText$1 = styled__default["default"].div` 
   margin: 0; 
 `;
 
@@ -11319,8 +11319,8 @@ const FilterPanel = props => {
       fieldsData: newFieldsDataState
     });
   };
-  const getTooltipTextDates = () => /*#__PURE__*/React__default["default"].createElement(TooltipTextContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipText$2, null, "Dates can be selected"), /*#__PURE__*/React__default["default"].createElement(TooltipText$2, null, "only after selecting"), /*#__PURE__*/React__default["default"].createElement(TooltipText$2, null, "period types"));
-  const getTooltipTextGoButton = () => /*#__PURE__*/React__default["default"].createElement(TooltipTextContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipText$2, null, tooltipTextGoButton));
+  const getTooltipTextDates = () => /*#__PURE__*/React__default["default"].createElement(TooltipTextContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipText$1, null, "Dates can be selected"), /*#__PURE__*/React__default["default"].createElement(TooltipText$1, null, "only after selecting"), /*#__PURE__*/React__default["default"].createElement(TooltipText$1, null, "period types"));
+  const getTooltipTextGoButton = () => /*#__PURE__*/React__default["default"].createElement(TooltipTextContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipText$1, null, tooltipTextGoButton));
   const getYearsArray = () => {
     const currentYear = moment().year();
     const previousYear = moment().subtract(1, 'years').year();
@@ -25397,7 +25397,7 @@ const TitleAndValueContainer$3 = styled__default["default"].div`
   display: flex;
   flex-direction: column; 
 `;
-const Title$e = styled__default["default"].h4`
+const Title$d = styled__default["default"].h4`
   font-weight: 400;
   font-size: 20px;
   margin: 0;
@@ -25460,7 +25460,7 @@ const FormattedValue$3 = props => {
     width: width
   }, /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$3, {
     className: "TitleAndValueContainer"
-  }, title ? /*#__PURE__*/React__default["default"].createElement(Title$e, {
+  }, title ? /*#__PURE__*/React__default["default"].createElement(Title$d, {
     className: "Title",
     width: width
   }, title) : '', showTopValue && /*#__PURE__*/React__default["default"].createElement(CurrencySignAndFormattedValueContainer$1, {
@@ -25472,7 +25472,7 @@ const FormattedValue$3 = props => {
     className: "CurrencySignOrPercent"
   }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '', /*#__PURE__*/React__default["default"].createElement(CurrencySignOrPercent, {
     className: "CurrencySignOrPercent"
-  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React__default["default"].createElement(Title$e, {
+  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React__default["default"].createElement(Title$d, {
     className: "Title",
     width: width
   }, subtitle) : '')));
@@ -25534,7 +25534,7 @@ const TooltipLabel$3 = styled__default["default"].div`
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle$4 = styled__default["default"].div`
+const TooltipTitle$3 = styled__default["default"].div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
@@ -25542,7 +25542,7 @@ const TooltipTitle$4 = styled__default["default"].div`
 const TitleAndValueContainer$2 = styled__default["default"].div`
   padding: 0 1rem;
 `;
-const Title$d = styled__default["default"].h5`
+const Title$c = styled__default["default"].h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -25671,7 +25671,7 @@ const TitleAndIconContainer = styled__default["default"].div`
   display: flex;
   align-items: center;
 `;
-const Title$c = styled__default["default"].h4`
+const Title$b = styled__default["default"].h4`
   font-weight: 400;
   font-size: 14px;
   line-height: 27px;
@@ -25725,7 +25725,7 @@ const PerformanceAnalyticsLegend = props => {
     color: item.iconColor
   }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$2 ? /*#__PURE__*/React__default["default"].createElement(LegendLineIcon, {
     color: item.iconColor
-  }) : '', /*#__PURE__*/React__default["default"].createElement(Title$c, {
+  }) : '', /*#__PURE__*/React__default["default"].createElement(Title$b, {
     id: "Title",
     width: width
   }, item.title))))) : '');
@@ -25823,7 +25823,7 @@ const BarChartsByWeeks = props => {
     let currentTooltipSecondValue = 0;
     if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
     if (payload[0].payload?.secondValue) currentTooltipSecondValue = payload[0].payload?.secondValue;
-    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv$3, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle$4, null, `${isTitleOriganal ? '' : 'Week: '}${week}`), /*#__PURE__*/React__default["default"].createElement(TooltipLabel$3, null, `${tooltipTitle}             
+    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv$3, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle$3, null, `${isTitleOriganal ? '' : 'Week: '}${week}`), /*#__PURE__*/React__default["default"].createElement(TooltipLabel$3, null, `${tooltipTitle}             
             ${displayFormattedValue(currentTooltipValue)}                                       
           `), currentTooltipSecondValue ? /*#__PURE__*/React__default["default"].createElement(TooltipLabel$3, null, `${tooltipSecondTitle}                        
             ${displayFormattedValue(currentTooltipSecondValue)}                       
@@ -25880,7 +25880,7 @@ const BarChartsByWeeks = props => {
     ref: controlsContainerRef
   }, /*#__PURE__*/React__default["default"].createElement(Controls$6, {
     height: getControlsHeight()
-  }, showTitle && /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Title$d, null, title), /*#__PURE__*/React__default["default"].createElement(FormattedValue$3, {
+  }, showTitle && /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Title$c, null, title), /*#__PURE__*/React__default["default"].createElement(FormattedValue$3, {
     title: headerValueTopTitle,
     subtitle: headerValueBottomTitle,
     showTopValue: showHeaderTopValue,
@@ -26113,7 +26113,7 @@ const TitleAndValueContainer$1 = styled__default["default"].div`
   flex-direction: column;
   padding: 0 1.25em; /* 20px → 1.25em */
 `;
-const Title$b = styled__default["default"].h4`
+const Title$a = styled__default["default"].h4`
   font-weight: 500;
   font-size: ${props => props.titleFontSize || '1.125em'}; /* Default: 18px → 1.125em */
   margin: 0;
@@ -26316,7 +26316,7 @@ const TotalDoughnutChart = props => {
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$1, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$b, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$a, {
     className: "Title",
     fontSize: titleFontSize
   }, title), /*#__PURE__*/React__default["default"].createElement(CurrencySignAndFormattedValueContainer, {
@@ -26446,7 +26446,7 @@ CustomTooltip.defaultProps = {
   isPercent: false
 };
 
-const TooltipContainer$3 = styled__default["default"].div`
+const TooltipContainer$2 = styled__default["default"].div`
   --tooltip-text-color: black;
   --tooltip-background-color: white;
   --tooltip-margin: 40px;
@@ -26552,7 +26552,7 @@ const Tooltip = props => {
     direction,
     content
   } = props;
-  return /*#__PURE__*/React__default["default"].createElement(TooltipContainer$3, {
+  return /*#__PURE__*/React__default["default"].createElement(TooltipContainer$2, {
     className: className,
     top: `${top}px`,
     left: `${left}px`
@@ -26638,7 +26638,7 @@ const TotalValue = styled__default["default"].div`
     font-size: 20px;
   }
 `;
-const Title$a = styled__default["default"].h4`
+const Title$9 = styled__default["default"].h4`
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
@@ -26795,7 +26795,7 @@ const TotalHorizontalCharts = props => {
   }, chartsData?.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(CardHeader, {
     ref: topHeader,
     className: "CardHeader"
-  }, !hideTitle ? /*#__PURE__*/React__default["default"].createElement(Title$a, null, title) : '', !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(TotalValue, {
+  }, !hideTitle ? /*#__PURE__*/React__default["default"].createElement(Title$9, null, title) : '', !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(TotalValue, {
     className: "TotalValue"
   }, currencySign && /*#__PURE__*/React__default["default"].createElement(CurrencySign, {
     className: "CurrencySign"
@@ -27268,7 +27268,7 @@ const ItemContainer = styled__default["default"].div`
   flex-direction: column;
   flex-wrap: wrap;
 `;
-const Title$9 = styled__default["default"].h4`
+const Title$8 = styled__default["default"].h4`
   font-size: 18px;
   font-weight: 500;
   margin: 0;
@@ -27384,7 +27384,7 @@ const SalesAndROI = props => {
     showBorderShadow: showBorderShadow
   }, /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$9, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$8, {
     id: "Title"
   }, title), showBanner && /*#__PURE__*/React__default["default"].createElement(OutBanner, {
     id: "OutBanner",
@@ -27483,7 +27483,7 @@ const TitleContainer$1 = styled__default["default"].div`
   margin: 0;
   border-bottom: 1px solid #b1b1b1;
 `;
-const Title$8 = styled__default["default"].p`
+const Title$7 = styled__default["default"].p`
   font-weight: 400;
   font-size: 24px;
   margin: 0;
@@ -27703,7 +27703,7 @@ const PopupCharts = props => {
     height: height,
     width: width,
     onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/React__default["default"].createElement(TitleContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Title$8, null, title), /*#__PURE__*/React__default["default"].createElement(CloseXIconContainer, {
+  }, /*#__PURE__*/React__default["default"].createElement(TitleContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Title$7, null, title), /*#__PURE__*/React__default["default"].createElement(CloseXIconContainer, {
     onClick: e => closePopupCharts(e)
   }, /*#__PURE__*/React__default["default"].createElement(CloseXIcon, null))), /*#__PURE__*/React__default["default"].createElement(ChartsContainer, {
     id: "ChartsContainer",
@@ -27801,7 +27801,7 @@ const TopToggleListMainContainer = styled__default["default"].div`
     padding: 0 24px;
     width: ${props => props.width};
 `;
-const Title$7 = styled__default["default"].h4`
+const Title$6 = styled__default["default"].h4`
     font-size: 14px;
     font-weight: 600;
     margin: 20px 0 12px;
@@ -27831,7 +27831,7 @@ const TopToggleList = props => {
   } = props;
   return /*#__PURE__*/React__default["default"].createElement(TopToggleListMainContainer, {
     width: width
-  }, /*#__PURE__*/React__default["default"].createElement(Title$7, null, title), /*#__PURE__*/React__default["default"].createElement(ListContainer, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$6, null, title), /*#__PURE__*/React__default["default"].createElement(ListContainer, {
     height: height
   }, list.map(item => /*#__PURE__*/React__default["default"].createElement(ListItem, {
     key: item.value
@@ -27893,7 +27893,7 @@ const TitleContainer = styled__default["default"].div`
   justify-content: flex-start; 
   margin: 0 0 10px 0; 
 `;
-const Title$6 = styled__default["default"].h3`
+const Title$5 = styled__default["default"].h3`
   user-select: none;
   text-align: left;
   margin: 0;
@@ -27938,7 +27938,7 @@ const BarLabel = styled__default["default"].span`
   font-weight: 400; 
   user-select: none;
 `;
-const TooltipContainer$2 = styled__default["default"].div`
+const TooltipContainer$1 = styled__default["default"].div`
   position: absolute;
 
   top: ${props => props.top};
@@ -28048,7 +28048,7 @@ const Heatmap = props => {
     if (tooltip && tooltipPosition && tooltip.label === `${item.label} - ${Math.round(item.value / totalValue * 100)}%`) {
       const top = `${tooltipPosition.y}px`;
       const left = `${tooltipPosition.x}px`;
-      return /*#__PURE__*/React__default["default"].createElement(TooltipContainer$2, {
+      return /*#__PURE__*/React__default["default"].createElement(TooltipContainer$1, {
         className: "TooltipContainer",
         top: top,
         left: left
@@ -28168,7 +28168,7 @@ const Heatmap = props => {
     className: "HeatmapWrapper"
   }, /*#__PURE__*/React__default["default"].createElement(TitleContainer, {
     className: "TitleContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$6, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$5, {
     className: "Title"
   }, title)), refreshRequired && renderBars(), !refreshRequired && renderBars(), renderLegend()));
 };
@@ -28582,12 +28582,12 @@ const TooltipLabel$1 = styled__default["default"].div`
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle$3 = styled__default["default"].div`
+const TooltipTitle$2 = styled__default["default"].div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
 `;
-const Title$5 = styled__default["default"].h5`
+const Title$4 = styled__default["default"].h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -28664,7 +28664,7 @@ const BarChart = props => {
     if (!active || !payload || payload?.length === 0) return null;
     let currentTooltipValue = 0;
     if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
-    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv$1, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle$3, null, `${label}`), /*#__PURE__*/React__default["default"].createElement(TooltipLabel$1, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
+    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv$1, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle$2, null, `${label}`), /*#__PURE__*/React__default["default"].createElement(TooltipLabel$1, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
   };
   const CustomizedTickBarChart = props => {
     const {
@@ -28747,7 +28747,7 @@ const BarChart = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React__default["default"].createElement(Controls$3, null, /*#__PURE__*/React__default["default"].createElement(Title$5, null, title), /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
+  }, /*#__PURE__*/React__default["default"].createElement(Controls$3, null, /*#__PURE__*/React__default["default"].createElement(Title$4, null, title), /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
     width: "100%",
     height: 400
   }, /*#__PURE__*/React__default["default"].createElement(recharts.BarChart, {
@@ -28918,7 +28918,7 @@ const Controls$2 = styled__default["default"].div`
   flex-direction: column;
   background-color: white;
 `;
-const Title$4 = styled__default["default"].h5`
+const Title$3 = styled__default["default"].h5`
   font-size: 18px;
   font-weight: 400;
   margin: 0 0 30px;
@@ -28933,10 +28933,10 @@ const ChartsWrapper = styled__default["default"].div`
   background-color: white;
 `;
 const LineChartWrapper = styled__default["default"].div`
-  height: 30%;
+  height: 150px;
 `;
 const BarChartWrapper = styled__default["default"].div`
-  height: 70%;
+  height: 260px;
 `;
 const TooltipDiv = styled__default["default"].div`
   border-radius: 5px;
@@ -28951,7 +28951,7 @@ const TooltipLabel = styled__default["default"].div`
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle$2 = styled__default["default"].div`
+const TooltipTitle$1 = styled__default["default"].div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
@@ -28968,6 +28968,7 @@ const DoubleBarSingleLine = props => {
     hasScroll,
     dataState,
     data,
+    lineType,
     lineChartValueType,
     barChartValueType,
     barsWidth,
@@ -29104,7 +29105,7 @@ const DoubleBarSingleLine = props => {
     } else {
       `${currentTooltipValue.toFixed(1)}`;
     }
-    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle$2, null, `${label}`), payload.map((item, idx) => {
+    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle$1, null, `${label}`), payload.map((item, idx) => {
       const dataStateItem = dataState.find(state => state.key === item.dataKey);
       return /*#__PURE__*/React__default["default"].createElement(TooltipLabel, {
         key: item.dataKey || idx
@@ -29177,7 +29178,7 @@ const DoubleBarSingleLine = props => {
     noDataText: noDataText
   }) : /*#__PURE__*/React__default["default"].createElement(Controls$2, {
     className: "Controls"
-  }, title && title.trim() !== '' && /*#__PURE__*/React__default["default"].createElement(Title$4, null, title), /*#__PURE__*/React__default["default"].createElement(ChartsWrapper, {
+  }, title && title.trim() !== '' && /*#__PURE__*/React__default["default"].createElement(Title$3, null, title), /*#__PURE__*/React__default["default"].createElement(ChartsWrapper, {
     width: hasScroll ? `${data.length * 178}px` : 'auto'
   }, /*#__PURE__*/React__default["default"].createElement(LineChartWrapper, null, /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, null, /*#__PURE__*/React__default["default"].createElement(recharts.LineChart, _extends({
     data: transformedData
@@ -29195,10 +29196,10 @@ const DoubleBarSingleLine = props => {
       right: barsWidth
     }
   }), /*#__PURE__*/React__default["default"].createElement(recharts.YAxis, {
-    domain: [dataMin => Math.min(dataMin, calculateMinValue(data, dataState)) - 10, dataMax => Math.max(dataMax, calculateMaxValue(data, dataState)) + 10],
+    domain: [dataMin => Math.min(dataMin, calculateMinValue(data, dataState)) + 5, dataMax => Math.max(dataMax, calculateMaxValue(data, dataState)) + 5],
     hide: true
   }), dataState.filter(item => item.type === "line").map(obj => /*#__PURE__*/React__default["default"].createElement(recharts.Line, {
-    type: "monotone",
+    type: lineType,
     key: obj.key,
     dataKey: obj.key,
     stroke: obj.color,
@@ -29276,7 +29277,7 @@ const CheckboxGroupContainer = styled__default["default"].div`
   height: 21px;   
   gap: 20px;
 `;
-const Title$3 = styled__default["default"].h5`
+const Title$2 = styled__default["default"].h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -29296,7 +29297,7 @@ const LegendIcon = styled__default["default"].div`
   margin-right: 5px;
   background-color: ${props => props.color};
 `;
-const TooltipContainer$1 = styled__default["default"].div`
+const TooltipContainer = styled__default["default"].div`
   background: white;
   padding: 10px;
   border-radius: 5px;
@@ -29306,12 +29307,12 @@ const TooltipContainer$1 = styled__default["default"].div`
   font-weight: 500;
   font-size: 14px;
 `;
-const TooltipTitle$1 = styled__default["default"].p`
+const TooltipTitle = styled__default["default"].p`
   font-weight: 700;
   margin-top: 5px;
   margin-bottom: 5px;
 `;
-const TooltipText$1 = styled__default["default"].p`
+const TooltipText = styled__default["default"].p`
   margin-top: 5px;
   margin-bottom: 5px;
 `;
@@ -29552,10 +29553,10 @@ const AreaChart = props => {
       payload
     } = _ref3;
     if (active && payload && payload.length) {
-      return /*#__PURE__*/React__default["default"].createElement(TooltipContainer$1, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle$1, null, `${payload[0].payload.label}`), payload.map((data, index) => {
+      return /*#__PURE__*/React__default["default"].createElement(TooltipContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle, null, `${payload[0].payload.label}`), payload.map((data, index) => {
         const chart = areaChartsState.find(chart => chart.key === data.dataKey);
         if (chart) {
-          return /*#__PURE__*/React__default["default"].createElement(TooltipText$1, {
+          return /*#__PURE__*/React__default["default"].createElement(TooltipText, {
             key: index
           }, `${chart.name}: ${displayFormattedValue(data.value, chart.isDollar)}`);
         }
@@ -29604,7 +29605,7 @@ const AreaChart = props => {
     height: height
   }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(HeaderContainer$2, {
     "data-testid": "header-container"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$3, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$2, {
     "data-testid": "title"
   }, title), /*#__PURE__*/React__default["default"].createElement(CheckboxGroupContainer, {
     "data-testid": "checkbox-group-container"
@@ -30102,7 +30103,7 @@ const HeaderContainer$1 = styled__default["default"].div`
   align-items: center;
   padding-bottom: 8px;
 `;
-const Title$2 = styled__default["default"].h3`
+const Title$1 = styled__default["default"].h3`
   font-size: 18px;
   font-weight: 400;
   margin: 0;
@@ -30171,7 +30172,7 @@ const BreakdownPanel = props => {
     height: height
   }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(HeaderContainer$1, {
     "data-testid": "header-container"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$2, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
     "data-testid": "title"
   }, title)), /*#__PURE__*/React__default["default"].createElement(CategorySalesMainContainer, {
     "data-testid": "category-sales-main-container"
@@ -31413,94 +31414,41 @@ const BatteryChart = props => {
   }))))))), starText !== "" && /*#__PURE__*/React__default["default"].createElement(StarText, null, starText));
 };
 
-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"  
-    }
-`;
-const Title$1 = styled__default["default"].h2`
-  color: #212121;
-  font-family: "Poppins";
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  margin: 0 0 16px 0;
-`;
-styled__default["default"].div`
-  font-family: sans-serif;
-  text-align: center;
-`;
-styled__default["default"].div`
-  height: 25%;
-`;
-styled__default["default"].div`
-  height: 75%;
-`;
-styled__default["default"].div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-`;
-const TooltipContainer = styled__default["default"].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__default["default"].p`
-font-weight: 700;
-margin-top: 5px;
-margin-bottom: 5px;
-`;
-const TooltipText = styled__default["default"].p`
-margin-top: 5px;
-margin-bottom: 5px;
-`;
+// 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 = ({
-  brushAreaBarData = []
+  barlineData = []
 }) => {
-  const processedData = brushAreaBarData.map(item => {
-    return {
-      ...item,
-      shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
-    };
+  // 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 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());
+  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})`
@@ -31510,40 +31458,62 @@ const SeparatedLineBarChart = ({
       dy: 16,
       textAnchor: "middle",
       fill: "#212121",
-      fontSize: 10,
+      fontSize: 11,
+      fontWeight: "400",
       fontFamily: "Poppins"
-    }, chunks.map((chunk, i) => /*#__PURE__*/React__default["default"].createElement("tspan", {
-      key: i,
+    }, /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: 8
+    }, "Vendor Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
       x: 0,
-      dy: i === 0 ? "0.71em" : "1.2em"
-    }, chunk))));
+      dy: 18
+    }, "Event: ", parts.join(" "))));
   };
-  const CustomTooltip = ({
-    active,
-    payload
-  }) => {
-    if (!active || !payload || !payload.length) return null;
-    const data = payload[0]?.payload;
-    if (!data) return null;
-    return /*#__PURE__*/React__default["default"].createElement(TooltipContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle, null, `${data.label}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `${data.description}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `INC Sales: ${getFormattedValue(data.inc_sales)}${getFormattedUnits(data.inc_sales)}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `INC Sales ROI:  ${getFormattedValue(data.inc_roi)}${getFormattedUnits(data.inc_roi)}`));
+  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: 30,
-    right: 30,
-    left: 20,
-    bottom: 0
-  };
-  const chartMargins2 = {
-    top: 30,
-    right: 30,
+    top: 15,
+    right: 40,
     left: 20,
-    bottom: 80
+    bottom: 40
   };
-  const BAR_CATEGORY_GAP = "30%";
+  const [viewWindow, setViewWindow] = React$1.useState({
+    startIndex: 0,
+    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%",
-      height: "100%"
+      height: 700
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -31553,25 +31523,24 @@ const SeparatedLineBarChart = ({
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React__default["default"].createElement(recharts.LineChart, {
-    data: processedData,
-    margin: chartMargins,
-    syncId: "composedChart",
-    syncMethod: "index"
+    data: dataWithIndex,
+    margin: chartMargins
   }, /*#__PURE__*/React__default["default"].createElement(recharts.CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React__default["default"].createElement(recharts.XAxis, {
-    dataKey: "label",
-    tick: false,
+    dataKey: "index",
+    type: "number",
+    domain: ['dataMin', 'dataMax'],
     padding: {
-      left: 70,
-      right: 70
+      left: 20,
+      right: 20
     },
     hide: true
   }), /*#__PURE__*/React__default["default"].createElement(recharts.YAxis, {
     domain: [0, 2],
     hide: true
-  }), /*#__PURE__*/React__default["default"].createElement(recharts.Line, {
+  }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, null), /*#__PURE__*/React__default["default"].createElement(recharts.Line, {
     type: "monotone",
     dataKey: "inc_roi",
     stroke: "#F8CD00",
@@ -31581,28 +31550,13 @@ const SeparatedLineBarChart = ({
       fill: "#F8CD00"
     },
     activeDot: false,
-    name: "INC Sales ROI",
-    barCategoryGap: BAR_CATEGORY_GAP,
-    barGap: 0
-  }, /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
+    name: "INC Sales ROI"
+  }, /*#__PURE__*/React__default["default"].createElement(CustomLabelListFilter, {
     dataKey: "inc_roi",
     position: "top",
-    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
-    fill: "#212121",
-    fontSize: 12,
-    fontWeight: "400",
-    fontFamily: "Poppins"
-  })), /*#__PURE__*/React__default["default"].createElement(recharts.Brush, {
-    dataKey: "label",
-    height: 30,
-    stroke: "#212121",
-    startIndex: 0,
-    endIndex: Math.min(6, processedData.length - 1),
-    y: 330,
-    travellerWidth: 10,
-    tickFormatter: (value, index) => index + 1,
-    hide: true
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    formatter: value => value.toFixed(1),
+    viewableIndices: viewableIndices
+  }))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: "60%"
     }
@@ -31610,51 +31564,59 @@ const SeparatedLineBarChart = ({
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React__default["default"].createElement(recharts.ComposedChart, {
-    data: processedData,
-    margin: chartMargins2,
-    syncId: "composedChart",
-    syncMethod: "index",
-    barCategoryGap: BAR_CATEGORY_GAP,
-    barGap: 0
+    data: dataWithIndex,
+    margin: chartMargins
   }, /*#__PURE__*/React__default["default"].createElement(recharts.CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React__default["default"].createElement(recharts.XAxis, {
-    dataKey: "label",
-    tick: /*#__PURE__*/React__default["default"].createElement(CustomizedTick, null),
+    dataKey: "index",
+    type: "number",
+    domain: ['dataMin', 'dataMax'],
+    padding: {
+      left: 20,
+      right: 20
+    },
+    tick: props => /*#__PURE__*/React__default["default"].createElement(CustomizedTick, _extends({}, props, {
+      viewableIndices: viewableIndices
+    })),
     interval: 0,
-    height: 80,
-    tickLine: false
+    height: 60,
+    tickLine: false,
+    ticks: dataWithIndex.map(item => item.index)
   }), /*#__PURE__*/React__default["default"].createElement(recharts.YAxis, {
     tickFormatter: v => `${v / 1000}k`,
     hide: true
-  }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, {
-    content: /*#__PURE__*/React__default["default"].createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
+  }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, null), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
     dataKey: "inc_sales",
     fill: "#CCDCDD",
-    gap: 4,
+    gap: "4px",
     borderRadius: [4, 4, 0, 8],
     barSize: 40,
     name: "INC Sales"
-  }, /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
+  }, /*#__PURE__*/React__default["default"].createElement(CustomLabelListFilter, {
     dataKey: "inc_sales",
     position: "top",
     formatter: value => `${value / 1000}k`,
-    fill: "#212121",
-    fontSize: 12,
-    fontWeight: "400",
-    fontFamily: "Poppins"
+    viewableIndices: viewableIndices
   })), /*#__PURE__*/React__default["default"].createElement(recharts.Brush, {
-    dataKey: "label",
+    dataKey: "index",
     height: 30,
     stroke: "#212121",
-    startIndex: 0,
-    endIndex: Math.min(6, processedData.length - 1),
-    y: 330,
-    travellerWidth: 10,
-    tickFormatter: (value, index) => index + 1
-  })), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(PerformanceAnalyticsLegend, {
+    startIndex: viewWindow.startIndex,
+    endIndex: viewWindow.endIndex,
+    onChange: e => {
+      setViewWindow({
+        startIndex: e.startIndex ?? 0,
+        endIndex: e.endIndex ?? dataWithIndex.length - 1
+      });
+    },
+    travellerWidth: 12
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginTop: "-28px"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(PerformanceAnalyticsLegend, {
     legendData: [{
       iconColor: "#CCDCDD",
       iconType: "Square",
@@ -31668,11 +31630,9 @@ const SeparatedLineBarChart = ({
 };
 
 function SingleChart({
-  barData,
-  height = 450,
-  width = "100%"
+  lineChartData
 }) {
-  const dataWithIndex = barData?.map((item, index) => ({
+  const dataWithIndex = lineChartData?.map((item, index) => ({
     ...item,
     index,
     shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
@@ -31683,20 +31643,7 @@ function SingleChart({
     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());
-    }
+    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", {
@@ -31705,26 +31652,31 @@ function SingleChart({
       dy: 16,
       textAnchor: "middle",
       fill: "#212121",
-      fontSize: 10,
+      fontSize: 11,
+      fontWeight: "400",
       fontFamily: "Poppins"
-    }, chunks.map((chunk, i) => /*#__PURE__*/React__default["default"].createElement("tspan", {
-      key: i,
+    }, /*#__PURE__*/React__default["default"].createElement("tspan", {
       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__default["default"].createElement(TooltipContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle, null, `${data.label}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `${data.description}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `${data.typeTitle}: ${getFormattedValue(data.value)}${getFormattedUnits(data.value)}`));
+      dy: 8
+    }, "Vendor Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: 18
+    }, "Event: ", parts.join(" "))));
   };
-  return /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
-    width: width,
-    height: height
+  const [startIndex, setStartIndex] = React$1.useState(0);
+  const [endIndex, setEndIndex] = React$1.useState(dataWithIndex?.length - 1);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: "100%",
+      height: 600
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      height: "100%"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
   }, /*#__PURE__*/React__default["default"].createElement(recharts.ComposedChart, {
     data: dataWithIndex,
     margin: {
@@ -31740,7 +31692,7 @@ function SingleChart({
     dataKey: "index",
     tick: /*#__PURE__*/React__default["default"].createElement(CustomizedTick, null),
     interval: 0,
-    height: 80,
+    height: 60,
     padding: {
       left: 20,
       right: 20
@@ -31749,9 +31701,7 @@ function SingleChart({
   }), /*#__PURE__*/React__default["default"].createElement(recharts.YAxis, {
     tickFormatter: v => `$${v / 1000}k`,
     hide: true
-  }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, {
-    content: /*#__PURE__*/React__default["default"].createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
+  }), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, null), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
     dataKey: "value",
     fill: "#CCDCDD",
     gap: "4px",
@@ -31761,24 +31711,29 @@ function SingleChart({
   }, /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
     dataKey: "value",
     position: "top",
-    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
+    formatter: value => `$${value / 1000}k`,
     fill: "#212121",
     fontSize: 12,
     fontWeight: "400",
     fontFamily: "Poppins"
   })), /*#__PURE__*/React__default["default"].createElement(recharts.Brush, {
+    dataKey: "index",
     height: 30,
-    travellerWidth: 10,
-    startIndex: 0,
-    endIndex: Math.min(6, barData.length - 1),
-    y: 380
+    stroke: "#212121",
+    startIndex: startIndex,
+    endIndex: endIndex,
+    onChange: e => {
+      setStartIndex(e.startIndex ?? 0);
+      setEndIndex(e.endIndex ?? dataWithIndex?.length - 1);
+    },
+    travellerWidth: 12
   })), /*#__PURE__*/React__default["default"].createElement(PerformanceAnalyticsLegend, {
     legendData: [{
       iconColor: "#CCDCDD",
       iconType: "Square",
       title: "INC Units"
     }]
-  }));
+  }))));
 }
 
 styled__default["default"].div`
@@ -32009,8 +31964,16 @@ SegmentedButton.defaultProps = {
 };
 
 function InnerBarChart({
-  brushInnerBarData
+  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 BarWithInner = props => {
     const {
       x,
@@ -32039,7 +32002,7 @@ function InnerBarChart({
       fontWeight: 400,
       fontFamily: "Poppins",
       fill: "#212121"
-    }, `${getFormattedValue(payload.total)}${getFormattedUnits(payload.total)}`), /*#__PURE__*/React__default["default"].createElement("rect", {
+    }, format(payload.total)), /*#__PURE__*/React__default["default"].createElement("rect", {
       x: x + width * 0.2,
       y: innerY,
       width: width * 0.6,
@@ -32055,7 +32018,7 @@ function InnerBarChart({
       fontWeight: 400,
       fontFamily: "Poppins",
       fill: "#212121"
-    }, `${getFormattedValue(payload.actual)}${getFormattedUnits(payload.actual)}`));
+    }, format(payload.actual)));
   };
   const CustomTooltip = ({
     active,
@@ -32064,8 +32027,9 @@ function InnerBarChart({
   }) => {
     if (!active || !payload || !payload.length) return null;
     const data = payload[0].payload;
-    const repeaterPercentage = (data.actual / data.total * 100).toFixed(1);
-    return /*#__PURE__*/React__default["default"].createElement(TooltipContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle, null, `${data.label}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `${data.description}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `New Shoppers: ${getFormattedValue(data.total)}${getFormattedUnits(data.total)}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `Repeaters: ${getFormattedValue(data.actual)}${getFormattedUnits(data.actual)}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `% Repeaters: ${repeaterPercentage}%`));
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      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 CustomizedTick = props => {
     const {
@@ -32073,23 +32037,7 @@ function InnerBarChart({
       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;
-      } else {
-        currentChunk += ' ' + word;
-      }
-    });
-    if (currentChunk) {
-      chunks.push(currentChunk.trim());
-    }
+    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", {
@@ -32100,75 +32048,104 @@ function InnerBarChart({
       fill: "#212121",
       fontSize: 10,
       fontFamily: "Poppins"
-    }, chunks.map((chunk, i) => /*#__PURE__*/React__default["default"].createElement("tspan", {
-      key: i,
+    }, /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: "0.71em"
+    }, "Vendor"), /*#__PURE__*/React__default["default"].createElement("tspan", {
+      x: 0,
+      dy: "1.2em"
+    }, "Selling"), /*#__PURE__*/React__default["default"].createElement("tspan", {
       x: 0,
-      dy: i === 0 ? "0.71em" : "1.2em"
-    }, chunk))));
+      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: "100%"
+    height: 450
   }, /*#__PURE__*/React__default["default"].createElement(recharts.BarChart, {
-    data: brushInnerBarData,
+    data: processedData,
     margin: {
       top: 30,
       right: 30,
       left: 20,
-      bottom: 80
+      bottom: 60
     }
   }, /*#__PURE__*/React__default["default"].createElement(recharts.CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React__default["default"].createElement(recharts.XAxis, {
-    dataKey: "label",
+    dataKey: "shortLabel",
     tick: /*#__PURE__*/React__default["default"].createElement(CustomizedTick, null),
-    height: 80,
+    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.Bar, {
-    dataKey: "total",
-    shape: /*#__PURE__*/React__default["default"].createElement(BarWithInner, null),
-    barSize: 36
   }), /*#__PURE__*/React__default["default"].createElement(recharts.Brush, {
     height: 30,
     travellerWidth: 10,
     startIndex: 0,
-    endIndex: Math.min(6, brushInnerBarData.length - 1)
-  })), /*#__PURE__*/React__default["default"].createElement(PerformanceAnalyticsLegend, {
-    legendData: [{
-      iconColor: "#CCDCDD",
-      iconType: "Square",
-      title: "New Shoppers"
-    }, {
-      iconColor: "#07575b",
-      iconType: "Square",
-      title: "Repeaters"
-    }]
-  }));
+    endIndex: 5,
+    y: 380
+  }), /*#__PURE__*/React__default["default"].createElement(recharts.Bar, {
+    dataKey: "total",
+    shape: /*#__PURE__*/React__default["default"].createElement(BarWithInner, null),
+    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;
+`;
+styled__default["default"].div`
+  height: 25%;
+`;
+styled__default["default"].div`
+  height: 75%;
+`;
+styled__default["default"].div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+`;
+
 const BrushChart = props => {
   const {
     width,
     height,
-    brushInnerBarData,
-    brushBarIncData,
-    brushBarBasketData,
-    brushAreaBarData,
-    title
+    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, {
     height: height,
     width: width
-  }, /*#__PURE__*/React__default["default"].createElement(Title$1, null, title), /*#__PURE__*/React__default["default"].createElement(SegmentedButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(SegmentedButton, {
     gap: "8px",
     options: segmentedbuttonOptions.map(value => ({
       value
@@ -32180,13 +32157,13 @@ const BrushChart = props => {
       return setSelectedOption(value);
     }
   }), selectedOption === "New Shoppers & Repeaters" && /*#__PURE__*/React__default["default"].createElement(InnerBarChart, {
-    brushInnerBarData: brushInnerBarData
+    data: data
   }), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React__default["default"].createElement(SeparatedLineBarChart, {
-    brushAreaBarData: brushAreaBarData
+    barlineData: barlineData
   }), selectedOption === "INC Units" && /*#__PURE__*/React__default["default"].createElement(SingleChart, {
-    barData: brushBarIncData
+    lineChartData: lineChartData
   }), selectedOption === "Basket Lift" && /*#__PURE__*/React__default["default"].createElement(SingleChart, {
-    barData: brushBarBasketData
+    lineChartData: lineChartData
   }));
 };
 
@@ -32290,7 +32267,6 @@ const VisibleCardsContainer = styled__default["default"].div`
 
   .prev-card {
     transform: translateX(-50%) scale(0.75);
-    opacity: 0.3;
   }
 
   .active-card {
@@ -32301,7 +32277,6 @@ const VisibleCardsContainer = styled__default["default"].div`
 
   .next-card {
     transform: translateX(50%) scale(0.75);
-    opacity: 0.3;
   }
 
   .hidden-card {