sag_components 2.0.0-beta52 → 2.0.0-beta53

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 } 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, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -1902,7 +1902,7 @@ const ControlsContainer$a = styled.div`
     box-sizing: border-box;
   }
 `;
-const Controls$8 = styled.div`
+const Controls$9 = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -2026,7 +2026,7 @@ const ControlsContainer$9 = styled.div`
   //border: 1px solid red;
   align-items: center;
 `;
-const Controls$7 = styled.div`
+const Controls$8 = styled.div`
   position: relative;
   border-radius: 100px;
   width: ${props => props.width.toString().concat('', 'px')};
@@ -2282,7 +2282,7 @@ const Benchmark = props => {
     id: "Tooltip",
     content: getTooltipText(),
     direction: tooltipDirection
-  }, /*#__PURE__*/React$1.createElement(Controls$7, {
+  }, /*#__PURE__*/React$1.createElement(Controls$8, {
     id: "ControlsBenchmark",
     height: height,
     width: width
@@ -2407,7 +2407,7 @@ const PieChart = props => {
   }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
     noDataText: noDataText
-  }) : /*#__PURE__*/React$1.createElement(Controls$8, {
+  }) : /*#__PURE__*/React$1.createElement(Controls$9, {
     className: "Controls",
     height: height,
     width: width
@@ -25147,8 +25147,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 {
@@ -25345,7 +25345,7 @@ const ControlsContainer$7 = styled.div`
     box-sizing: border-box;
   }
 `;
-const Controls$6 = styled.div`
+const Controls$7 = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -25413,7 +25413,7 @@ const FormattedValue$3 = props => {
     height: height,
     width: width,
     textcolor: textcolor
-  }, /*#__PURE__*/React$1.createElement(Controls$6, {
+  }, /*#__PURE__*/React$1.createElement(Controls$7, {
     className: "Controls",
     height: height,
     width: width
@@ -25473,7 +25473,7 @@ const ControlsContainer$6 = styled.div`
   height: ${props => props.height};
   min-width: 250px;
 `;
-const Controls$5 = styled.div`
+const Controls$6 = styled.div`
   height: 100%;
   width: 100%;
   background: white;
@@ -25606,7 +25606,7 @@ const ControlsContainer$5 = styled.div`
     box-sizing: border-box;
   }
 `;
-const Controls$4 = styled.div`
+const Controls$5 = styled.div`
   display: flex;
   gap: 20px;
   flex-direction: column;
@@ -25669,7 +25669,7 @@ const PerformanceAnalyticsLegend = props => {
     className: className,
     height: height,
     width: width
-  }, legendData?.length > 0 ? /*#__PURE__*/React$1.createElement(Controls$4, {
+  }, legendData?.length > 0 ? /*#__PURE__*/React$1.createElement(Controls$5, {
     height: height,
     width: width
   }, /*#__PURE__*/React$1.createElement(LegendDataContainer, {
@@ -25837,7 +25837,7 @@ const BarChartsByWeeks = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls$5, {
+  }, /*#__PURE__*/React$1.createElement(Controls$6, {
     height: getControlsHeight()
   }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$b, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
     title: headerValueTopTitle,
@@ -26043,7 +26043,7 @@ const ControlsContainer$4 = styled.div`
     box-sizing: border-box;
   }
 `;
-const Controls$3 = styled.div`
+const Controls$4 = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -26269,7 +26269,7 @@ const TotalDoughnutChart = props => {
   }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
     noDataText: noDataText
-  }) : /*#__PURE__*/React$1.createElement(Controls$3, {
+  }) : /*#__PURE__*/React$1.createElement(Controls$4, {
     className: "Controls",
     height: height,
     width: width
@@ -28521,7 +28521,7 @@ const ControlsContainer$1 = styled.div`
   height: ${props => props.height};
   min-width: 250px;
 `;
-const Controls$2 = styled.div`
+const Controls$3 = styled.div`
   height: 100%;
   width: 100%;
   background: white;
@@ -28706,7 +28706,7 @@ const BarChart = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls$2, null, /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(Controls$3, null, /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: 400
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -28870,7 +28870,7 @@ const LegendContainer = styled.div`
   width: ${props => `${props.width}px`};
   bottom: 20px;
 `;
-const Controls$1 = styled.div`
+const Controls$2 = styled.div`
   /* height: calc(100% - 30px); */
   height: 100%;
   display: flex;
@@ -29134,7 +29134,7 @@ const DoubleBarSingleLine = props => {
     hasScroll: hasScroll
   }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
     noDataText: noDataText
-  }) : /*#__PURE__*/React$1.createElement(Controls$1, {
+  }) : /*#__PURE__*/React$1.createElement(Controls$2, {
     className: "Controls"
   }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
     width: hasScroll ? `${data.length * 178}px` : 'auto'
@@ -29224,7 +29224,7 @@ const AreaChartContaner = styled.div`
   height: ${props => props.height};
   min-width: 1100px;
 `;
-const HeaderContainer$1 = styled.div`   
+const HeaderContainer$2 = styled.div`   
     display: flex;
     justify-content: space-between;
     padding: 10px 40px;   
@@ -29283,7 +29283,7 @@ const ControlsContainer = styled.div`
   font-family: Poppins;
   margin: 0;
 `;
-const Controls = styled.div`
+const Controls$1 = styled.div`
   display: flex;  
   align-items: center;
 `;
@@ -29329,7 +29329,7 @@ const CheckBox = props => {
     fontSize: fontSize,
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(Controls, {
+  }, /*#__PURE__*/React$1.createElement(Controls$1, {
     className: "Controls",
     "data-testid": "controls"
   }, checkedState ? /*#__PURE__*/React$1.createElement(CheckBoxIconContainer, {
@@ -29561,7 +29561,7 @@ const AreaChart = props => {
     noDataText: "",
     width: width,
     height: height
-  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$1, {
+  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$2, {
     "data-testid": "header-container"
   }, /*#__PURE__*/React$1.createElement(Title$1, {
     "data-testid": "title"
@@ -30055,7 +30055,7 @@ const BreakdownPanelContainer = styled.div`
   height: ${props => props.height};
   min-width: 1100px;
 `;
-const HeaderContainer = styled.div`
+const HeaderContainer$1 = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -30128,7 +30128,7 @@ const BreakdownPanel = props => {
     noDataText: "",
     width: width,
     height: height
-  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer, {
+  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$1, {
     "data-testid": "header-container"
   }, /*#__PURE__*/React$1.createElement(Title, {
     "data-testid": "title"
@@ -30154,264 +30154,2070 @@ const BreakdownPanel = props => {
   }))))));
 };
 
-const BatteryChartContainer = styled.div`
-    position: relative;
-    font-family: "Poppins", sans-serif;
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-template-rows: auto 1fr auto;
-    color: #212121;
-    background-color: ${props => props.backgroundColor || 'transparent'};
-    padding: ${props => props.containerPadding || '25px 30px 0'};
-    width: ${props => props.width};
-    height: ${props => props.height}; 
-`;
-const PanelSide = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+const BubbleChartContainer = styled.div`
+  position: relative;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  display: flex;
+  flex-direction: column;
+  background-color: ${props => props.backgroundColor};
+  border-radius: 8px;
+  padding: 10px;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+  min-width: 800px;
+  
+  /* Enable proper overflow handling */
+  overflow: hidden;
 `;
-const ProgressDetails = styled.div`
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+styled.div`
+  position: absolute;
+  font-family: "Poppins", sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  color: #555;
+  text-align: center;
+  
+  &.top-left {
+    top: 20px;
+    left: 20px;
+  }
+  
+  &.top-right {
+    top: 20px;
+    right: 20px;
+  }
+  
+  &.bottom-left {
+    bottom: 20px;
+    left: 20px;
+  }
+  
+  &.bottom-right {
+    bottom: 20px;
+    right: 20px;
+  }
 `;
-const HeadingText = styled.p`
-    grid-column: 1 / span 2; 
-    color: #212121;
-    font-size: 18px;
-    font-weight: 400;
-    padding-left: 10px;
+const CustomTooltipContainer = styled.div`
+  background-color: white;
+  border-radius: 6px;
+  z-index: 1000;
+  padding: 10px 14px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+  max-width: 220px;
+  font-family: "Poppins", sans-serif;
+  
+  h4 {
     margin: 0 0 8px;
-`;
-const HeadingPercentage = styled.p`
-    color: #212121;
-    font-size: 32px;
-    font-weight: 500;
-    padding-left: 10px;
-    margin: 0;
-`;
-const ChartSide = styled.div`
-    text-align: center;
-`;
-const ChartWrapper = styled.div`
-    position: relative;
-    width: 110px;
-`;
-const GoalValue = styled.div`
-    text-align: center;
-    font-size: 18px;
-    color: #8B8989;
-    line-height: 1;
-    &.overload {
-        position: absolute;
-        top: ${props => props.goalValuePosition}px;
-        left: 0;
-        right: 0;
-        z-index: 2;
-        margin: 0 auto;
-        width: 40%;
-        display: inline;
-        padding: 0px 8px;
-        border: 2px solid #F2F2F2;
-        border-bottom: none;
-        border-radius: 6px 6px 0px 0px;
-        background-color: white;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  
+  p {
+    margin: 3px 0;
+    font-size: 12px;
+    color: #555;
+  }
+  
+  @media (max-width: 768px) {
+    padding: 8px 12px;
+    max-width: 180px;
+    
+    h4 {
+      font-size: 12px;
+      margin: 0 0 6px;
     }
+    
+    p {
+      font-size: 10px;
+    }
+  }
 `;
-const Indicator = styled.div`
-    position: absolute;
-    top: ${props => props.top}px;
-    left: 0;
-    transform: translateY(50%);
-    width: calc(100% + 60px);
-    display: flex;
-    gap: 6px;
-    justify-content: center;
-    padding-left: 4px;
-    align-items: center;
-    z-index: 1;
-`;
-const IndicatorLine = styled.div`
-    width: 100%;
-    height: 0;
-    border-top: 4px dashed ${props => props.color};
+const TooltipMetric = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 5px 0;
+  font-size: 12px;
+  
+  span:last-child {
+    font-weight: 500;
+  }
+  
+  @media (max-width: 768px) {
+    font-size: 10px;
+    margin: 4px 0;
+  }
 `;
-const IndicatorText = styled.span`
-    font-size: 18px;
-    font-weight: 400;
-    color: ${props => props.color};
+styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
 `;
-const ProgressLegend = styled.div`
-    margin-top: 12px;
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 0;
+  margin-bottom: 10px;
 `;
-const LegendItem = styled.div`
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    margin-bottom: 12px;
+const ChartTitle = styled.h2`
+  font-family: "Poppins", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  margin: 0;
+  color: #212121;
 `;
-const LegendText = styled.span`
-    color: #8B8989;
-    font-size: 14px;
+const ChartSubtitle = styled.p`
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: #484A4C;
+  margin: 0;
 `;
-const LegendCube = styled.div`
-    border-radius: 3px;
-    width: 17px;
-    height: 17px;
-    background-color: ${props => props.color};
+const ChartContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 90%; /* Reduced from 93% to make room for the zoom controls */
+  flex: 1;
 `;
-const ProgressDescription = styled.div`
-    color: #8B8989;
-    font-size: 12px;
-    font-weight: 400;
-    margin-top: auto;
+
+/* Updated Zoom Controls Styles to match the new design */
+const ZoomControlsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  margin-top: 10px;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(245, 245, 245, 0.92));
+  border-radius: 8px;
+  padding: 6px 6px 6px 12px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  font-family: "Poppins", sans-serif;
+  backdrop-filter: blur(8px);
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
 `;
-const ProgressItem = styled.p`
-    margin: 0 0 6px;
+const ZoomPercentage = styled.span`
+  font-size: 18px;
+  font-weight: 500;
+  color: #726F6F;
+  margin: 0;
+  min-width: 50px;
 `;
-const StarText = styled.span`
-    width: 100%;
-    color: #B1B1B1;
-    font-size: 9px;
-    grid-column: 1 / span 2;
-    padding-top: 10px;
+const ZoomButton = styled.button`
+  width: 26px;
+  height: 20px;
+  border: none;
+  background: none;
+  font-size: 24px;
+  font-weight: 500;
+  color: #726F6F;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0 ;
+  
+  &:hover {
+    color: #333;
+  }
+  
+  &:focus {
+    outline: none;
+  }
 `;
+const ZoomResetButton = styled.button`
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  height: 32px;
+  padding: 0 12px;
+  margin-left: 5px;
+  border-radius: 8px;
+  background-color: white;
+  border: 1px solid #ddd;
+  cursor: pointer;
+  color: #212121;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(245, 245, 245, 0.92));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease-in-out;
 
-const BatteryChart = props => {
+  &:hover {
+    background: linear-gradient(to right, #f0f0f0, #eaeaea);
+    border-color: #ccc;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  &:active {
+    background: #e0e0e0;
+    transform: scale(0.98);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(100, 150, 250, 0.4);
+  }
+`;
+
+// Enhanced color palette with bubble-like transparency and gradients
+const defaultColorPalette = [
+// Top Left - Yellow Bubbles
+'rgba(255, 249, 220, 0.7)',
+// Inner highlight
+'rgba(255, 235, 165, 0.4)',
+// Outer edge
+
+// Top Right - Green Bubbles
+'rgba(235, 255, 240, 0.7)',
+// Inner highlight
+'rgba(190, 235, 200, 0.4)',
+// Outer edge
+
+// Bottom Left - Pink Bubbles
+'rgba(255, 235, 240, 0.7)',
+// Inner highlight
+'rgba(255, 190, 200, 0.4)',
+// Outer edge
+
+// Bottom Right - Cream/Yellow Bubbles
+'rgba(255, 250, 230, 0.7)',
+// Inner highlight
+'rgba(255, 235, 180, 0.4)' // Outer edge
+];
+
+// Main component
+const BubbleChart = _ref => {
+  let {
+    data = [],
+    title = 'Event Performance Based on Incrementality',
+    subtitle = '* Total cost is reflected by the circle size',
+    leftHeader = 'Low INC Sales ROI',
+    rightHeader = 'High INC Sales ROI',
+    topHeader = 'High INC Sales',
+    bottomHeader = 'Low INC Sales',
+    colorPalette = defaultColorPalette,
+    height = '600px',
+    width = '100%',
+    backgroundColor = 'white',
+    showAxis = false
+  } = _ref;
+  // Calculate the medians and domain for raw X, Y, and Z values
   const {
-    className,
-    containerPadding,
-    width,
-    height,
-    title,
-    color,
-    backgroundColor,
-    indicatorColor,
-    noCommitment,
-    goalAmount,
-    currentAmount,
-    ask,
-    target,
-    totalSegmentsLines,
-    starText
-  } = props;
-  const [top, setTop] = useState(0);
-  const [goalValuePosition, setGoalValuePosition] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0); // State to store container height
-  const containerRef = useRef(null); // Ref for BatteryChartContainer
+    xMedian,
+    yMedian,
+    xDomain,
+    yDomain,
+    zRange
+  } = useMemo(() => {
+    if (!data || !Array.isArray(data) || data.length === 0) {
+      return {
+        xMedian: 0,
+        yMedian: 0,
+        xDomain: [0, 100],
+        yDomain: [0, 100],
+        zRange: [0, 3600]
+      };
+    }
 
-  // Calculate the percentage and completed segments
-  const percentage = Math.round(currentAmount / goalAmount * 100);
-  const completedSegments = Math.min(Math.floor(currentAmount / goalAmount * totalSegmentsLines), totalSegmentsLines);
+    // Extract x, y, and size values
+    const xValues = data.map(item => item.x).filter(x => x !== undefined && x !== null);
+    const yValues = data.map(item => item.y).filter(y => y !== undefined && y !== null);
+    const sizeValues = data.map(item => item.size).filter(size => size !== undefined && size !== null);
+
+    // Calculate min and max values
+    const minX = Math.min(...xValues);
+    const maxX = Math.max(...xValues);
+    const minY = Math.min(...yValues);
+    const maxY = Math.max(...yValues);
+    Math.min(...sizeValues);
+    const maxSize = Math.max(...sizeValues);
+
+    // Calculate medians
+    const calculateMedian = arr => {
+      if (!arr || arr.length === 0) return 0;
+      const sorted = [...arr].sort((a, b) => a - b);
+      const middle = Math.floor(sorted.length / 2);
+      if (sorted.length % 2 === 1) {
+        return sorted[middle];
+      }
+      return (sorted[middle - 1] + sorted[middle]) / 2;
+    };
+    const medianX = calculateMedian(xValues);
+    const medianY = calculateMedian(yValues);
 
-  // Dynamically create the data for the bar chart
-  let barsChips = Array.from({
-    length: totalSegmentsLines
-  }).map((_, index) => ({
-    name: `segment-${index}`,
-    value: 100,
-    isCompleted: index >= totalSegmentsLines - completedSegments,
-    // Fill from bottom up
-    color: index >= totalSegmentsLines - completedSegments ? color : "#e5e7eb" // Completed or remaining color
-  }));
+    // Calculate domains based on median-centered logic
+    const calculateDomainBasedOnMedian = (min, max, median) => {
+      const distance = Math.max(Math.abs(max - median), Math.abs(min - median));
+      return [median - distance, median + distance];
+    };
+    const xDom = calculateDomainBasedOnMedian(minX, maxX, medianX);
+    const yDom = calculateDomainBasedOnMedian(minY, maxY, medianY);
 
-  // Add 4 extra chips if currentAmount > goalAmount
-  if (currentAmount > goalAmount && !noCommitment) {
-    const extraSegments = 4;
-    const extraData = Array.from({
-      length: extraSegments
-    }).map((_, index) => ({
-      name: `extra-segment-${index}`,
-      value: 100,
-      isCompleted: true,
-      color: "#E8F5EB"
-    }));
+    // Determine z-axis range scaled appropriately 
+    const zRng = [0, maxSize * 7];
+    return {
+      xMedian: medianX,
+      yMedian: medianY,
+      xDomain: xDom,
+      yDomain: yDom,
+      zRange: zRng
+    };
+  }, [data]);
 
-    // Prepend the extra segments to the barsChips array
-    barsChips = [...extraData, ...barsChips];
-  }
+  // Init viewDomain with calculated domain values
+  const fullDomain = useMemo(() => ({
+    x: xDomain,
+    y: yDomain
+  }), [xDomain, yDomain]);
 
-  // Calculate the top position for the indicator and goal value
+  // State for current view domain
+  const [viewDomain, setViewDomain] = useState(fullDomain);
+  const [zoomLevel, setZoomLevel] = useState(100);
+
+  // Drag state
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({
+    x: 0,
+    y: 0
+  });
+  const [domainStart, setDomainStart] = useState(fullDomain);
+
+  // Refs for the chart container
+  const containerRef = useRef(null);
+  const scatterChartRef = useRef(null);
+
+  // Set up initial domain
   useEffect(() => {
-    const barHeight = containerHeight / (totalSegmentsLines + (currentAmount > goalAmount ? 4 : 0)); // Adjust for extra chips
-    let newTop;
-    let newGoalValuePosition;
-    if (currentAmount > goalAmount) {
-      // Position the indicator slightly below the top chip
-      newTop = barHeight * 1.5; // Slightly below the 4th chip
-      // Position the goal value just above the active chips
+    // Set initial viewDomain from fullDomain
+    setViewDomain(fullDomain);
+  }, [fullDomain]);
+
+  // Function to get gradient fill based on quadrant
+  const getFill = useCallback((x, y) => {
+    if (x < xMedian && y > yMedian) return 'url(#topLeftGradient)'; // Top Left
+    if (x >= xMedian && y > yMedian) return 'url(#topRightGradient)'; // Top Right
+    if (x < xMedian && y <= yMedian) return 'url(#bottomLeftGradient)'; // Bottom Left
+    if (x >= xMedian && y <= yMedian) return 'url(#bottomRightGradient)'; // Bottom Right
+    return 'gray'; // fallback
+  }, [xMedian, yMedian]);
+
+  // CustomTooltip component inside BubbleChart
+  const CustomTooltip = useCallback(_ref2 => {
+    let {
+      active,
+      payload
+    } = _ref2;
+    if (active && payload && payload.length && payload[0].payload.tooltip) {
+      const data = payload[0].payload;
+      return /*#__PURE__*/React$1.createElement(CustomTooltipContainer, {
+        "data-testid": "tooltip-container"
+      }, /*#__PURE__*/React$1.createElement("h4", {
+        "data-testid": "tooltip-title"
+      }, data.tooltip.title), data.tooltip.description && /*#__PURE__*/React$1.createElement(TooltipMetric, {
+        "data-testid": "tooltip-description"
+      }, /*#__PURE__*/React$1.createElement("span", null, data.tooltip.description)), /*#__PURE__*/React$1.createElement(TooltipMetric, {
+        "data-testid": "tooltip-cost"
+      }, /*#__PURE__*/React$1.createElement("span", null, "Total cost:"), /*#__PURE__*/React$1.createElement("span", null, formatCurrency(data.tooltip.cost))), /*#__PURE__*/React$1.createElement(TooltipMetric, {
+        "data-testid": "tooltip-sales"
+      }, /*#__PURE__*/React$1.createElement("span", null, "INC Sales:"), /*#__PURE__*/React$1.createElement("span", null, formatCurrency(data.tooltip.incSales))), /*#__PURE__*/React$1.createElement(TooltipMetric, {
+        "data-testid": "tooltip-roi"
+      }, /*#__PURE__*/React$1.createElement("span", null, "INC Sales ROI:"), /*#__PURE__*/React$1.createElement("span", null, formatROI(data.tooltip.roi))), /*#__PURE__*/React$1.createElement(TooltipMetric, {
+        "data-testid": "tooltip-units"
+      }, /*#__PURE__*/React$1.createElement("span", null, "INC Units:"), /*#__PURE__*/React$1.createElement("span", null, formatUnits(data.tooltip.units))));
+    }
+    return null;
+  }, []);
 
-      newGoalValuePosition = barHeight * 2.3;
-      // newGoalValuePosition = (totalSegmentsLines - completedSegments + 4) * barHeight - barHeight / 2;
+  // Process all chart data - use original data values
+  const allChartData = useMemo(() => {
+    return data.map((item, index) => {
+      if (item.x === undefined || item.y === undefined || item.size === undefined) {
+        console.warn('Skipping data item with missing values:', item);
+        return null;
+      }
+      const tooltipInfo = {
+        title: item.name || 'Marketing event',
+        description: item.description || '',
+        cost: item.size || 0,
+        units: item.units || 0,
+        roi: item.x || 0,
+        incSales: item.y || 0,
+        ...(item.tooltip || {})
+      };
+      return {
+        x: item.x,
+        // Use original x value
+        y: item.y,
+        // Use original y value
+        z: item.size,
+        // Use original size value
+        tooltip: tooltipInfo,
+        fill: getFill(item.x, item.y),
+        key: `bubble-${index}` // Use index for stable keys
+      };
+    }).filter(Boolean); // Filter out null items
+  }, [data, getFill]);
+
+  // Function to determine which data points should be visible
+  const getVisibleData = useCallback(() => {
+    return allChartData.filter(item => item.x >= viewDomain.x[0] && item.x <= viewDomain.x[1] && item.y >= viewDomain.y[0] && item.y <= viewDomain.y[1]);
+  }, [allChartData, viewDomain]);
+
+  // Get visible data - memoized
+  const visibleData = useMemo(() => getVisibleData(), [getVisibleData]);
+
+  // Calculate a new domain based on zoom level and center point - memoized
+  const calculateDomain = useCallback((center, zoomFactor) => {
+    // Calculate new domain size
+    const xSize = (fullDomain.x[1] - fullDomain.x[0]) * zoomFactor;
+    const ySize = (fullDomain.y[1] - fullDomain.y[0]) * zoomFactor;
+
+    // Calculate new domain
+    return {
+      x: [center.x - xSize / 2, center.x + xSize / 2],
+      y: [center.y - ySize / 2, center.y + ySize / 2]
+    };
+  }, [fullDomain]);
+
+  // Rendering gradients with enhanced bubble-like appearance
+  const renderGradients = useCallback(() => /*#__PURE__*/React$1.createElement("defs", null, /*#__PURE__*/React$1.createElement("radialGradient", {
+    id: "topLeftGradient",
+    cx: "25%",
+    cy: "25%",
+    r: "70%",
+    fx: "20%",
+    fy: "20%"
+  }, /*#__PURE__*/React$1.createElement("stop", {
+    offset: "0%",
+    stopColor: colorPalette[0]
+  }), /*#__PURE__*/React$1.createElement("stop", {
+    offset: "85%",
+    stopColor: colorPalette[1]
+  })), /*#__PURE__*/React$1.createElement("radialGradient", {
+    id: "topRightGradient",
+    cx: "25%",
+    cy: "25%",
+    r: "70%",
+    fx: "20%",
+    fy: "20%"
+  }, /*#__PURE__*/React$1.createElement("stop", {
+    offset: "0%",
+    stopColor: colorPalette[2]
+  }), /*#__PURE__*/React$1.createElement("stop", {
+    offset: "85%",
+    stopColor: colorPalette[3]
+  })), /*#__PURE__*/React$1.createElement("radialGradient", {
+    id: "bottomLeftGradient",
+    cx: "25%",
+    cy: "25%",
+    r: "70%",
+    fx: "20%",
+    fy: "20%"
+  }, /*#__PURE__*/React$1.createElement("stop", {
+    offset: "0%",
+    stopColor: colorPalette[4]
+  }), /*#__PURE__*/React$1.createElement("stop", {
+    offset: "85%",
+    stopColor: colorPalette[5]
+  })), /*#__PURE__*/React$1.createElement("radialGradient", {
+    id: "bottomRightGradient",
+    cx: "25%",
+    cy: "25%",
+    r: "70%",
+    fx: "20%",
+    fy: "20%"
+  }, /*#__PURE__*/React$1.createElement("stop", {
+    offset: "0%",
+    stopColor: colorPalette[6]
+  }), /*#__PURE__*/React$1.createElement("stop", {
+    offset: "85%",
+    stopColor: colorPalette[7]
+  })), /*#__PURE__*/React$1.createElement("filter", {
+    id: "bubble-blur",
+    x: "-50%",
+    y: "-50%",
+    width: "200%",
+    height: "200%"
+  }, /*#__PURE__*/React$1.createElement("feGaussianBlur", {
+    in: "SourceGraphic",
+    stdDeviation: "0.3"
+  }))), [colorPalette]);
+
+  // Handle mouse down for dragging
+  const handleMouseDown = useCallback(e => {
+    if (containerRef.current?.contains(e.target)) {
+      setIsDragging(true);
+      setDragStart({
+        x: e.clientX,
+        y: e.clientY
+      });
+      setDomainStart({
+        ...viewDomain
+      }); // Store current domain, not fullDomain
+      e.preventDefault();
+    }
+  }, [viewDomain]); // Add viewDomain as dependency to capture current value
+
+  // Handle mouse move for dragging
+  const handleMouseMove = useCallback(e => {
+    if (!isDragging) return;
+    const dx = e.clientX - dragStart.x;
+    const dy = e.clientY - dragStart.y;
+    const containerWidth = containerRef.current?.clientWidth || 800;
+    const containerHeight = containerRef.current?.clientHeight || 600;
+
+    // Calculate the domain range from the domainStart (which preserves zoom level)
+    const xRange = domainStart.x[1] - domainStart.x[0];
+    const yRange = domainStart.y[1] - domainStart.y[0];
+
+    // Calculate the shift amount (negative for dx to make drag direction feel natural)
+    const xShift = -(dx / containerWidth) * xRange * 1.5; // Multiply by 1.5 to make dragging more responsive
+    const yShift = dy / containerHeight * yRange * 1.5; // Y is inverted in charts
+
+    // Create new domain values based on the domainStart (preserves zoom level)
+    const newXDomain = [domainStart.x[0] + xShift, domainStart.x[1] + xShift];
+    const newYDomain = [domainStart.y[0] + yShift, domainStart.y[1] + yShift];
+
+    // Update the domain
+    setViewDomain({
+      x: newXDomain,
+      y: newYDomain
+    });
+  }, [isDragging, dragStart, domainStart]);
+
+  // Handle mouse up for dragging
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  // Handle zoom in
+  const handleZoomIn = useCallback(() => {
+    if (zoomLevel >= 400) return;
+    const newZoomLevel = zoomLevel + 20;
+    setZoomLevel(newZoomLevel);
+
+    // Calculate zoom factor (smaller factor = more zoomed in)
+    const zoomFactor = 100 / newZoomLevel;
+
+    // Get current domain center
+    const centerX = (viewDomain.x[0] + viewDomain.x[1]) / 2;
+    const centerY = (viewDomain.y[0] + viewDomain.y[1]) / 2;
+
+    // Calculate new domain
+    const newDomain = calculateDomain({
+      x: centerX,
+      y: centerY
+    }, zoomFactor);
+
+    // Update domain
+    setViewDomain(newDomain);
+  }, [zoomLevel, viewDomain, calculateDomain]);
+
+  // Handle zoom out
+  const handleZoomOut = useCallback(() => {
+    if (zoomLevel <= 50) return;
+    const newZoomLevel = zoomLevel - 20;
+
+    // If returning to 100%, reset to full domain
+    if (newZoomLevel === 100) {
+      setViewDomain({
+        ...fullDomain
+      });
+      setZoomLevel(100);
+      return;
+    }
+    setZoomLevel(newZoomLevel);
+
+    // Calculate zoom factor (larger factor = more zoomed out)
+    const zoomFactor = 100 / newZoomLevel;
+
+    // Get current domain center
+    const centerX = (viewDomain.x[0] + viewDomain.x[1]) / 2;
+    const centerY = (viewDomain.y[0] + viewDomain.y[1]) / 2;
+
+    // Calculate new domain size
+    const xSize = (fullDomain.x[1] - fullDomain.x[0]) * zoomFactor;
+    const ySize = (fullDomain.y[1] - fullDomain.y[0]) * zoomFactor;
+
+    // If new domain would be larger than full domain, reset to full
+    if (xSize >= fullDomain.x[1] - fullDomain.x[0] || ySize >= fullDomain.y[1] - fullDomain.y[0]) {
+      setViewDomain({
+        ...fullDomain
+      });
+      setZoomLevel(100);
+      return;
+    }
+
+    // Calculate new domain
+    const newDomain = calculateDomain({
+      x: centerX,
+      y: centerY
+    }, zoomFactor);
+
+    // Update domain
+    setViewDomain(newDomain);
+  }, [zoomLevel, viewDomain, fullDomain, calculateDomain]);
+
+  // Handle reset
+  const handleReset = useCallback(() => {
+    setZoomLevel(100);
+    setViewDomain({
+      ...fullDomain
+    });
+  }, [fullDomain]);
+
+  // Handle mouse wheel
+  const handleWheel = useCallback(e => {
+    e.preventDefault();
+    if (e.deltaY < 0) {
+      handleZoomIn();
     } else {
-      // Normal case: position the indicator above the active chips
-      newTop = (totalSegmentsLines - completedSegments) * barHeight / 1.65;
-      // Position the goal value just above the active chips
-      newGoalValuePosition = newTop;
+      handleZoomOut();
     }
-    setTop(newTop);
-    setGoalValuePosition(newGoalValuePosition);
-  }, [completedSegments, totalSegmentsLines, currentAmount, goalAmount, containerHeight]);
+  }, [handleZoomIn, handleZoomOut]);
+
+  // Memoize the visibility condition for the middle value label
+  const isMiddleValueVisible = useMemo(() => xMedian >= viewDomain.x[0] && xMedian <= viewDomain.x[1] && yMedian >= viewDomain.y[0] && yMedian <= viewDomain.y[1], [viewDomain, xMedian, yMedian]);
+
+  // Set up event listeners
   useEffect(() => {
-    if (containerRef.current) {
-      const height = containerRef.current.offsetHeight;
-      if (height > 0) {
-        setContainerHeight(height);
-      }
+    const container = containerRef.current;
+    if (!container) return;
+    container.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    container.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      container.removeEventListener('wheel', handleWheel);
+      container.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [handleWheel, handleMouseDown, handleMouseMove, handleMouseUp]);
+
+  // Unified arrow component with direction parameter
+  const Arrow = _ref3 => {
+    let {
+      viewBox,
+      direction
+    } = _ref3;
+    // Define points based on direction
+    let points = '';
+    switch (direction) {
+      case 'top':
+        points = `${viewBox.x},${viewBox.y - 10} ${viewBox.x - 5},${viewBox.y} ${viewBox.x + 5},${viewBox.y}`;
+        break;
+      case 'bottom':
+        points = `${viewBox.x},${viewBox.y + viewBox.height + 10} ${viewBox.x - 5},${viewBox.y + viewBox.height} ${viewBox.x + 5},${viewBox.y + viewBox.height}`;
+        break;
+      case 'left':
+        points = `${viewBox.x - 10},${viewBox.y} ${viewBox.x},${viewBox.y - 5} ${viewBox.x},${viewBox.y + 5}`;
+        break;
+      case 'right':
+        points = `${viewBox.x + viewBox.width + 10},${viewBox.y} ${viewBox.x + viewBox.width},${viewBox.y - 5} ${viewBox.x + viewBox.width},${viewBox.y + 5}`;
+        break;
     }
-  }, [containerRef, width, height]);
-  return /*#__PURE__*/React$1.createElement(BatteryChartContainer, {
-    ref: containerRef,
+    return /*#__PURE__*/React$1.createElement("polygon", {
+      points: points,
+      fill: "#D0D0D0"
+    });
+  };
+
+  // Function to format currency values
+  const formatCurrency = value => {
+    if (Math.abs(value) >= 1000000) {
+      return `$${(value / 1000000).toFixed(1)}M`;
+    } else if (Math.abs(value) >= 1000) {
+      return `$${(value / 1000).toFixed(1)}K`;
+    }
+    return `$${value.toFixed(1)}`;
+  };
+
+  // Function to format units values
+  const formatUnits = value => {
+    if (Math.abs(value) >= 1000000) {
+      return `${(value / 1000000).toFixed(1)}M`;
+    } else if (Math.abs(value) >= 1000) {
+      return `${(value / 1000).toFixed(1)}K`;
+    }
+    return `${value.toFixed(1)}`;
+  };
+
+  // Function to format ROI values
+  const formatROI = value => {
+    return value.toFixed(1);
+  };
+
+  // Format the median values for display
+  const formattedMedianValue = useMemo(() => {
+    const formattedX = formatROI(xMedian);
+    const formattedY = formatUnits(yMedian);
+    return `${formattedX}, ${formattedY}`;
+  }, [xMedian, yMedian]);
+
+  // Render the component
+  return /*#__PURE__*/React$1.createElement(BubbleChartContainer, {
     width: width,
     height: height,
-    className: className,
-    containerPadding: containerPadding,
-    backgroundColor: backgroundColor
-  }, /*#__PURE__*/React$1.createElement(HeadingText, null, title), /*#__PURE__*/React$1.createElement(PanelSide, null, /*#__PURE__*/React$1.createElement(ProgressDetails, null, !noCommitment && /*#__PURE__*/React$1.createElement(HeadingPercentage, null, percentage, "%"), /*#__PURE__*/React$1.createElement(ProgressDescription, null, ask && /*#__PURE__*/React$1.createElement(ProgressItem, null, "ASK: ", `$${getFormattedValue(ask, false) + getFormattedUnits(ask)}`), target && /*#__PURE__*/React$1.createElement(ProgressItem, null, "Target: ", `$${getFormattedValue(target, false) + getFormattedUnits(target)}`)), /*#__PURE__*/React$1.createElement(ProgressLegend, null, /*#__PURE__*/React$1.createElement(LegendItem, null, /*#__PURE__*/React$1.createElement(LegendCube, {
-    color: color
-  }), /*#__PURE__*/React$1.createElement(LegendText, null, "Spend")), !noCommitment && /*#__PURE__*/React$1.createElement(LegendItem, null, /*#__PURE__*/React$1.createElement(LegendCube, {
-    color: "#E3E4E5"
-  }), /*#__PURE__*/React$1.createElement(LegendText, null, "Commitment"))))), /*#__PURE__*/React$1.createElement(ChartSide, null, /*#__PURE__*/React$1.createElement(ChartWrapper, null, /*#__PURE__*/React$1.createElement(GoalValue, {
-    className: currentAmount > goalAmount && !noCommitment ? "overload" : "",
-    goalValuePosition: goalValuePosition
-  }, !noCommitment ? `$${getFormattedValue(goalAmount, false) + getFormattedUnits(goalAmount)}` : `$${getFormattedValue(currentAmount, false) + getFormattedUnits(currentAmount)}`), !noCommitment && /*#__PURE__*/React$1.createElement(Indicator, {
-    top: top
-  }, /*#__PURE__*/React$1.createElement(IndicatorLine, {
-    color: indicatorColor
-  }), /*#__PURE__*/React$1.createElement(IndicatorText, {
-    color: indicatorColor
-  }, `$${getFormattedValue(currentAmount, false) + getFormattedUnits(currentAmount)}`)), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
-    height: Math.max(containerHeight - 105, 210)
-  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
-    data: barsChips,
-    layout: "vertical",
+    ref: containerRef,
+    style: {
+      cursor: isDragging ? 'grabbing' : 'grab'
+    },
+    backgroundColor: backgroundColor,
+    "data-testid": "bubble-chart-container"
+  }, /*#__PURE__*/React$1.createElement(HeaderContainer, {
+    "data-testid": "header-container"
+  }, /*#__PURE__*/React$1.createElement(ChartTitle, {
+    "data-testid": "chart-title"
+  }, title), /*#__PURE__*/React$1.createElement(ChartSubtitle, {
+    "data-testid": "chart-subtitle"
+  }, subtitle)), /*#__PURE__*/React$1.createElement(ChartContainer, {
+    ref: scatterChartRef,
+    "data-testid": "chart-container"
+  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    width: "100%",
+    height: "100%",
+    "data-testid": "responsive-container"
+  }, /*#__PURE__*/React$1.createElement(ScatterChart, {
     margin: {
-      top: 5,
-      right: 5,
-      left: 5,
-      bottom: 5
+      top: 60,
+      right: 190,
+      bottom: 50,
+      left: 180
     },
-    barSize: 4
-  }, /*#__PURE__*/React$1.createElement(XAxis, {
+    "data-testid": "scatter-chart"
+  }, renderGradients(), /*#__PURE__*/React$1.createElement(XAxis, {
     type: "number",
-    hide: true,
-    domain: [0, 100]
+    dataKey: "x",
+    domain: viewDomain.x,
+    axisLine: showAxis,
+    tickLine: showAxis,
+    tick: showAxis ? {
+      fontSize: 10,
+      fontWeight: 400,
+      fontFamily: 'Poppins'
+    } : false,
+    tickFormatter: value => formatUnits(value),
+    hide: !showAxis,
+    "data-testid": "x-axis",
+    style: {
+      fontSize: '10px',
+      fontWeight: 400,
+      fontFamily: 'Poppins'
+    }
   }), /*#__PURE__*/React$1.createElement(YAxis, {
-    type: "category",
-    hide: true,
-    dataKey: "name"
-  }), /*#__PURE__*/React$1.createElement(Bar, {
-    dataKey: "value",
-    background: {
-      fill: "#f3f4f6"
+    type: "number",
+    dataKey: "y",
+    domain: viewDomain.y,
+    axisLine: showAxis,
+    tickLine: showAxis,
+    tick: showAxis ? {
+      fontSize: 10,
+      fontWeight: 400,
+      fontFamily: 'Poppins'
+    } : false,
+    tickFormatter: value => formatUnits(value),
+    hide: !showAxis,
+    "data-testid": "y-axis",
+    style: {
+      fontSize: '10px',
+      fontWeight: 400,
+      fontFamily: 'Poppins'
+    }
+  }), /*#__PURE__*/React$1.createElement(ZAxis, {
+    type: "number",
+    dataKey: "z",
+    range: [0, 7000],
+    domain: [0, Math.max(...data.map(item => item.size || 0))],
+    "data-testid": "z-axis"
+  }), /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    x: xMedian,
+    stroke: "#D0D0D0",
+    strokeDasharray: "4 4",
+    isFront: false,
+    "data-testid": "reference-line-x",
+    label: xMedian >= viewDomain.x[0] && xMedian <= viewDomain.x[1] ? {
+      value: topHeader,
+      position: "top",
+      offset: 40,
+      fill: '#484A4C',
+      fontSize: 16,
+      fontWeight: 500
+    } : null
+  }), xMedian >= viewDomain.x[0] && xMedian <= viewDomain.x[1] && /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    x: xMedian,
+    stroke: "transparent",
+    isFront: true,
+    label: _ref4 => {
+      let {
+        viewBox
+      } = _ref4;
+      return /*#__PURE__*/React$1.createElement(Arrow, {
+        viewBox: viewBox,
+        direction: "top"
+      });
+    }
+  }), /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    x: xMedian,
+    stroke: "transparent",
+    isFront: false,
+    "data-testid": "reference-line-x-bottom",
+    label: xMedian >= viewDomain.x[0] && xMedian <= viewDomain.x[1] ? {
+      value: bottomHeader,
+      position: "bottom",
+      offset: 30,
+      fill: '#484A4C',
+      fontSize: 16,
+      fontWeight: 500
+    } : null
+  }), xMedian >= viewDomain.x[0] && xMedian <= viewDomain.x[1] && /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    x: xMedian,
+    stroke: "transparent",
+    isFront: true,
+    label: _ref5 => {
+      let {
+        viewBox
+      } = _ref5;
+      return /*#__PURE__*/React$1.createElement(Arrow, {
+        viewBox: viewBox,
+        direction: "bottom"
+      });
+    }
+  }), /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    y: yMedian,
+    stroke: "#D0D0D0",
+    strokeDasharray: "4 4",
+    isFront: false,
+    "data-testid": "reference-line-y",
+    label: yMedian >= viewDomain.y[0] && yMedian <= viewDomain.y[1] ? {
+      value: leftHeader,
+      position: "left",
+      offset: 30,
+      fill: '#484A4C',
+      fontSize: 16,
+      fontWeight: 500
+    } : null
+  }), yMedian >= viewDomain.y[0] && yMedian <= viewDomain.y[1] && /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    y: yMedian,
+    isFront: true,
+    stroke: "transparent",
+    label: _ref6 => {
+      let {
+        viewBox
+      } = _ref6;
+      return /*#__PURE__*/React$1.createElement(Arrow, {
+        viewBox: viewBox,
+        direction: "left"
+      });
+    }
+  }), /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    y: yMedian,
+    stroke: "transparent",
+    isFront: false,
+    "data-testid": "reference-line-y-transparent",
+    label: yMedian >= viewDomain.y[0] && yMedian <= viewDomain.y[1] ? {
+      value: rightHeader,
+      position: "right",
+      offset: 30,
+      fill: '#484A4C',
+      fontSize: 16,
+      fontWeight: 500
+    } : null
+  }), yMedian >= viewDomain.y[0] && yMedian <= viewDomain.y[1] && /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    y: yMedian,
+    isFront: true,
+    stroke: "transparent",
+    label: _ref7 => {
+      let {
+        viewBox
+      } = _ref7;
+      return /*#__PURE__*/React$1.createElement(Arrow, {
+        viewBox: viewBox,
+        direction: "right"
+      });
+    }
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null),
+    cursor: false,
+    wrapperStyle: {
+      zIndex: 9999,
+      position: 'absolute',
+      pointerEvents: 'auto'
     },
-    radius: [8, 8, 8, 8]
-  }, barsChips.map((entry, index) => /*#__PURE__*/React$1.createElement(Cell, {
-    key: `cell-${index}`,
-    fill: entry.color
-  }))))))), starText !== "" && /*#__PURE__*/React$1.createElement(StarText, null, starText));
+    allowEscapeViewBox: {
+      x: false,
+      y: false
+    },
+    "data-testid": "tooltip"
+  }), /*#__PURE__*/React$1.createElement(Scatter, {
+    name: "Bubble Chart",
+    data: visibleData,
+    shape: "circle",
+    fill: "transparent",
+    isAnimationActive: false,
+    animationBegin: 0,
+    animationDuration: 0,
+    "data-testid": "scatter"
+  }, visibleData.map((entry, index) => /*#__PURE__*/React$1.createElement(Cell, {
+    key: entry.key,
+    fill: entry.fill,
+    stroke: "rgba(255,255,255,0.6)",
+    strokeWidth: 1.5,
+    filter: "url(#bubble-blur)",
+    "data-testid": `cell-${index}`
+  }))), isMiddleValueVisible && /*#__PURE__*/React$1.createElement(ReferenceLine, {
+    x: xMedian,
+    y: yMedian,
+    stroke: "transparent",
+    isFront: true,
+    "data-testid": "middle-value-reference",
+    label: _ref8 => {
+      let {
+        viewBox
+      } = _ref8;
+      // Calculate the exact position of the median point in the SVG
+      const xPos = viewBox.x + (xMedian - viewDomain.x[0]) / (viewDomain.x[1] - viewDomain.x[0]) * viewBox.width;
+      const yPos = viewBox.y + (1 - (yMedian - viewDomain.y[0]) / (viewDomain.y[1] - viewDomain.y[0])) * viewBox.height;
+      return /*#__PURE__*/React$1.createElement("text", {
+        x: xPos,
+        y: yPos,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fill: "#484A4C",
+        fontSize: 16,
+        fontWeight: 600,
+        style: {
+          backgroundColor: 'rgba(255, 255, 255, 0.7)',
+          padding: '2px'
+        }
+      }, formattedMedianValue);
+    }
+  })))), /*#__PURE__*/React$1.createElement(ZoomControlsContainer, {
+    "data-testid": "zoom-controls-container"
+  }, /*#__PURE__*/React$1.createElement(ZoomPercentage, {
+    "data-testid": "zoom-percentage"
+  }, zoomLevel, "%"), /*#__PURE__*/React$1.createElement(ZoomButton, {
+    onClick: handleZoomOut,
+    title: "Zoom Out",
+    "data-testid": "zoom-out-button"
+  }, "\u2212"), /*#__PURE__*/React$1.createElement(ZoomButton, {
+    onClick: handleZoomIn,
+    title: "Zoom In",
+    "data-testid": "zoom-in-button"
+  }, "+"), /*#__PURE__*/React$1.createElement(ZoomResetButton, {
+    onClick: handleReset,
+    "data-testid": "zoom-reset-button"
+  }, "Reset")));
+};
+
+const BatteryChartContainer = styled.div`
+    position: relative;
+    font-family: "Poppins", sans-serif;
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto 1fr auto;
+    color: #212121;
+    background-color: ${props => props.backgroundColor || 'transparent'};
+    padding: ${props => props.containerPadding || '25px 30px 0'};
+    width: ${props => props.width};
+    height: ${props => props.height}; 
+`;
+const PanelSide = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+`;
+const ProgressDetails = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+`;
+const HeadingText = styled.p`
+    grid-column: 1 / span 2; 
+    color: #212121;
+    font-size: 18px;
+    font-weight: 400;
+    padding-left: 10px;
+    margin: 0 0 8px;
+`;
+const HeadingPercentage = styled.p`
+    color: #212121;
+    font-size: 32px;
+    font-weight: 500;
+    padding-left: 10px;
+    margin: 0;
+`;
+const ChartSide = styled.div`
+    text-align: center;
+`;
+const ChartWrapper = styled.div`
+    position: relative;
+    width: 110px;
+`;
+const GoalValue = styled.div`
+    text-align: center;
+    font-size: 18px;
+    color: #8B8989;
+    line-height: 1;
+    &.overload {
+        position: absolute;
+        top: ${props => props.goalValuePosition}px;
+        left: 0;
+        right: 0;
+        z-index: 2;
+        margin: 0 auto;
+        width: 40%;
+        display: inline;
+        padding: 0px 8px;
+        border: 2px solid #F2F2F2;
+        border-bottom: none;
+        border-radius: 6px 6px 0px 0px;
+        background-color: white;
+    }
+`;
+const Indicator = styled.div`
+    position: absolute;
+    top: ${props => props.top}px;
+    left: 0;
+    transform: translateY(50%);
+    width: calc(100% + 60px);
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+    padding-left: 4px;
+    align-items: center;
+    z-index: 1;
+`;
+const IndicatorLine = styled.div`
+    width: 100%;
+    height: 0;
+    border-top: 4px dashed ${props => props.color};
+`;
+const IndicatorText = styled.span`
+    font-size: 18px;
+    font-weight: 400;
+    color: ${props => props.color};
+`;
+const ProgressLegend = styled.div`
+    margin-top: 12px;
+`;
+const LegendItem = styled.div`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-bottom: 12px;
+`;
+const LegendText = styled.span`
+    color: #8B8989;
+    font-size: 14px;
+`;
+const LegendCube = styled.div`
+    border-radius: 3px;
+    width: 17px;
+    height: 17px;
+    background-color: ${props => props.color};
+`;
+const ProgressDescription = styled.div`
+    color: #8B8989;
+    font-size: 12px;
+    font-weight: 400;
+    margin-top: auto;
+`;
+const ProgressItem = styled.p`
+    margin: 0 0 6px;
+`;
+const StarText = styled.span`
+    width: 100%;
+    color: #B1B1B1;
+    font-size: 9px;
+    grid-column: 1 / span 2;
+    padding-top: 10px;
+`;
+
+const BatteryChart = props => {
+  const {
+    className,
+    containerPadding,
+    width,
+    height,
+    title,
+    color,
+    backgroundColor,
+    indicatorColor,
+    noCommitment,
+    goalAmount,
+    currentAmount,
+    ask,
+    target,
+    totalSegmentsLines,
+    starText
+  } = props;
+  const [top, setTop] = useState(0);
+  const [goalValuePosition, setGoalValuePosition] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0); // State to store container height
+  const containerRef = useRef(null); // Ref for BatteryChartContainer
+
+  // Calculate the percentage and completed segments
+  const percentage = Math.round(currentAmount / goalAmount * 100);
+  const completedSegments = Math.min(Math.floor(currentAmount / goalAmount * totalSegmentsLines), totalSegmentsLines);
+
+  // Dynamically create the data for the bar chart
+  let barsChips = Array.from({
+    length: totalSegmentsLines
+  }).map((_, index) => ({
+    name: `segment-${index}`,
+    value: 100,
+    isCompleted: index >= totalSegmentsLines - completedSegments,
+    // Fill from bottom up
+    color: index >= totalSegmentsLines - completedSegments ? color : "#e5e7eb" // Completed or remaining color
+  }));
+
+  // Add 4 extra chips if currentAmount > goalAmount
+  if (currentAmount > goalAmount && !noCommitment) {
+    const extraSegments = 4;
+    const extraData = Array.from({
+      length: extraSegments
+    }).map((_, index) => ({
+      name: `extra-segment-${index}`,
+      value: 100,
+      isCompleted: true,
+      color: "#E8F5EB"
+    }));
+
+    // Prepend the extra segments to the barsChips array
+    barsChips = [...extraData, ...barsChips];
+  }
+
+  // Calculate the top position for the indicator and goal value
+  useEffect(() => {
+    const barHeight = containerHeight / (totalSegmentsLines + (currentAmount > goalAmount ? 4 : 0)); // Adjust for extra chips
+    let newTop;
+    let newGoalValuePosition;
+    if (currentAmount > goalAmount) {
+      // Position the indicator slightly below the top chip
+      newTop = barHeight * 1.5; // Slightly below the 4th chip
+      // Position the goal value just above the active chips
+
+      newGoalValuePosition = barHeight * 2.3;
+      // newGoalValuePosition = (totalSegmentsLines - completedSegments + 4) * barHeight - barHeight / 2;
+    } else {
+      // Normal case: position the indicator above the active chips
+      newTop = (totalSegmentsLines - completedSegments) * barHeight / 1.65;
+      // Position the goal value just above the active chips
+      newGoalValuePosition = newTop;
+    }
+    setTop(newTop);
+    setGoalValuePosition(newGoalValuePosition);
+  }, [completedSegments, totalSegmentsLines, currentAmount, goalAmount, containerHeight]);
+  useEffect(() => {
+    if (containerRef.current) {
+      const height = containerRef.current.offsetHeight;
+      if (height > 0) {
+        setContainerHeight(height);
+      }
+    }
+  }, [containerRef, width, height]);
+  return /*#__PURE__*/React$1.createElement(BatteryChartContainer, {
+    ref: containerRef,
+    width: width,
+    height: height,
+    className: className,
+    containerPadding: containerPadding,
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/React$1.createElement(HeadingText, null, title), /*#__PURE__*/React$1.createElement(PanelSide, null, /*#__PURE__*/React$1.createElement(ProgressDetails, null, !noCommitment && /*#__PURE__*/React$1.createElement(HeadingPercentage, null, percentage, "%"), /*#__PURE__*/React$1.createElement(ProgressDescription, null, ask && /*#__PURE__*/React$1.createElement(ProgressItem, null, "ASK: ", `$${getFormattedValue(ask, false) + getFormattedUnits(ask)}`), target && /*#__PURE__*/React$1.createElement(ProgressItem, null, "Target: ", `$${getFormattedValue(target, false) + getFormattedUnits(target)}`)), /*#__PURE__*/React$1.createElement(ProgressLegend, null, /*#__PURE__*/React$1.createElement(LegendItem, null, /*#__PURE__*/React$1.createElement(LegendCube, {
+    color: color
+  }), /*#__PURE__*/React$1.createElement(LegendText, null, "Spend")), !noCommitment && /*#__PURE__*/React$1.createElement(LegendItem, null, /*#__PURE__*/React$1.createElement(LegendCube, {
+    color: "#E3E4E5"
+  }), /*#__PURE__*/React$1.createElement(LegendText, null, "Commitment"))))), /*#__PURE__*/React$1.createElement(ChartSide, null, /*#__PURE__*/React$1.createElement(ChartWrapper, null, /*#__PURE__*/React$1.createElement(GoalValue, {
+    className: currentAmount > goalAmount && !noCommitment ? "overload" : "",
+    goalValuePosition: goalValuePosition
+  }, !noCommitment ? `$${getFormattedValue(goalAmount, false) + getFormattedUnits(goalAmount)}` : `$${getFormattedValue(currentAmount, false) + getFormattedUnits(currentAmount)}`), !noCommitment && /*#__PURE__*/React$1.createElement(Indicator, {
+    top: top
+  }, /*#__PURE__*/React$1.createElement(IndicatorLine, {
+    color: indicatorColor
+  }), /*#__PURE__*/React$1.createElement(IndicatorText, {
+    color: indicatorColor
+  }, `$${getFormattedValue(currentAmount, false) + getFormattedUnits(currentAmount)}`)), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    height: Math.max(containerHeight - 105, 210)
+  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+    data: barsChips,
+    layout: "vertical",
+    margin: {
+      top: 5,
+      right: 5,
+      left: 5,
+      bottom: 5
+    },
+    barSize: 4
+  }, /*#__PURE__*/React$1.createElement(XAxis, {
+    type: "number",
+    hide: true,
+    domain: [0, 100]
+  }), /*#__PURE__*/React$1.createElement(YAxis, {
+    type: "category",
+    hide: true,
+    dataKey: "name"
+  }), /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "value",
+    background: {
+      fill: "#f3f4f6"
+    },
+    radius: [8, 8, 8, 8]
+  }, barsChips.map((entry, index) => /*#__PURE__*/React$1.createElement(Cell, {
+    key: `cell-${index}`,
+    fill: entry.color
+  }))))))), starText !== "" && /*#__PURE__*/React$1.createElement(StarText, null, starText));
+};
+
+const originalData$1 = [{
+  label: "Vendor Selling Event: Week 28",
+  inc_unit: 20000,
+  inc_roi: 1.2
+}, {
+  label: "Vendor Selling Event: Week 29",
+  inc_unit: 10000,
+  inc_roi: 1.2
+}, {
+  label: "Vendor Selling Event: Week 30",
+  inc_unit: 8000,
+  inc_roi: 0.8
+}, {
+  label: "Vendor Selling Event: Week 33",
+  inc_unit: 12000,
+  inc_roi: 1.1
+}, {
+  label: "Vendor Selling Event: Week 36",
+  inc_unit: 8000,
+  inc_roi: 1.2
+}, {
+  label: "Vendor Selling Event: Week 34",
+  inc_unit: 8000,
+  inc_roi: 0.7
+}, {
+  label: "Vendor Selling Event: Week 35",
+  inc_unit: 8000,
+  inc_roi: 0.8
+}, {
+  label: "Vendor Selling Event: Week 38",
+  inc_unit: 9000,
+  inc_roi: 1.1
+}];
+const dataWithIndex$1 = originalData$1.map((item, index) => ({
+  ...item,
+  index,
+  shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
+}));
+const CustomizedTick$1 = ({
+  x,
+  y,
+  payload
+}) => {
+  const label = dataWithIndex$1[payload.value]?.label ?? "";
+  const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+  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: 11,
+    fontWeight: "400",
+    fontFamily: "Poppins"
+  }, /*#__PURE__*/React$1.createElement("tspan", {
+    x: 0,
+    dy: 8
+  }, "Vendor Selling"), /*#__PURE__*/React$1.createElement("tspan", {
+    x: 0,
+    dy: 18
+  }, "Event: ", parts.join(" "))));
+};
+
+// Common chart configuration
+const chartMargins = {
+  top: 15,
+  right: 40,
+  left: 20,
+  bottom: 40
+};
+const SeparatedLineBarChart = () => {
+  const [viewWindow, setViewWindow] = useState({
+    startIndex: 0,
+    endIndex: dataWithIndex$1.length - 1
+  });
+  return /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      width: "100%",
+      height: 700
+    }
+  }, /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      height: "40%"
+    }
+  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, /*#__PURE__*/React$1.createElement(LineChart, {
+    data: dataWithIndex$1 // Use full dataset for alignment
+    ,
+    margin: chartMargins
+  }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
+    strokeDasharray: "3 3",
+    vertical: false
+  }), /*#__PURE__*/React$1.createElement(XAxis, {
+    dataKey: "index",
+    type: "number",
+    domain: ['dataMin', 'dataMax'],
+    padding: {
+      left: 20,
+      right: 20
+    },
+    hide: true
+  }), /*#__PURE__*/React$1.createElement(YAxis, {
+    domain: [0, 2],
+    hide: true
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null), /*#__PURE__*/React$1.createElement(Line, {
+    type: "monotone",
+    dataKey: "inc_roi",
+    stroke: "#F8CD00",
+    strokeWidth: 2,
+    dot: {
+      r: 4,
+      fill: "#F8CD00"
+    },
+    activeDot: false,
+    name: "INC Sales ROI"
+  }, /*#__PURE__*/React$1.createElement(LabelList, {
+    dataKey: "inc_roi",
+    position: "top",
+    formatter: value => value.toFixed(1)
+  }))))), /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      height: "60%"
+    }
+  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, /*#__PURE__*/React$1.createElement(ComposedChart, {
+    data: dataWithIndex$1,
+    margin: chartMargins
+  }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
+    strokeDasharray: "3 3",
+    vertical: false
+  }), /*#__PURE__*/React$1.createElement(XAxis, {
+    dataKey: "index",
+    type: "number",
+    domain: ['dataMin', 'dataMax'],
+    padding: {
+      left: 20,
+      right: 20
+    },
+    tick: /*#__PURE__*/React$1.createElement(CustomizedTick$1, null),
+    interval: 0 // Force display all ticks
+    ,
+    height: 60,
+    tickLine: false,
+    ticks: dataWithIndex$1.map(item => item.index)
+  }), /*#__PURE__*/React$1.createElement(YAxis, {
+    tickFormatter: v => `$${v / 1000}k`,
+    hide: true
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null), /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "inc_unit",
+    fill: "#CCDCDD",
+    gap: "4px",
+    borderRadius: [4, 4, 0, 8],
+    barSize: 40,
+    name: "INC Sales"
+  }, /*#__PURE__*/React$1.createElement(LabelList, {
+    dataKey: "inc_unit",
+    position: "top",
+    formatter: value => `$${value / 1000}k`,
+    fill: "#212121",
+    fontSize: 12,
+    fontWeight: "400",
+    fontFamily: "Poppins"
+  })), /*#__PURE__*/React$1.createElement(Brush, {
+    dataKey: "index",
+    height: 30,
+    stroke: "#212121",
+    startIndex: viewWindow.startIndex,
+    endIndex: viewWindow.endIndex,
+    onChange: e => {
+      setViewWindow({
+        startIndex: e.startIndex ?? 0,
+        endIndex: e.endIndex ?? dataWithIndex$1.length - 1
+      });
+    },
+    travellerWidth: 12
+  })), /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      marginTop: "-28px"
+    }
+  }, /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    legendData: [{
+      iconColor: "#CCDCDD",
+      iconType: "Square",
+      title: "INC Sales"
+    }, {
+      iconColor: "#F8CD00",
+      iconType: "LegendUnionIcon",
+      title: "INC Sales ROI"
+    }]
+  })))));
+};
+
+const originalData = [{
+  label: "Vendor Selling Event: Week 28",
+  inc_unit: 20000
+}, {
+  label: "Vendor Selling Event: Week 29",
+  inc_unit: 10000
+}, {
+  label: "Vendor Selling Event: Week 30",
+  inc_unit: 8000
+}, {
+  label: "Vendor Selling Event: Week 33",
+  inc_unit: 12000
+}, {
+  label: "Vendor Selling Event: Week 36",
+  inc_unit: 8000
+}, {
+  label: "Vendor Selling Event: Week 34",
+  inc_unit: 8000
+}, {
+  label: "Vendor Selling Event: Week 35",
+  inc_unit: 8000
+}, {
+  label: "Vendor Selling Event: Week 38",
+  inc_unit: 9000
+}];
+
+// Adding index and shortLabel to original data
+const dataWithIndex = originalData.map((item, index) => ({
+  ...item,
+  index,
+  shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
+}));
+const CustomizedTick = ({
+  x,
+  y,
+  payload
+}) => {
+  const label = dataWithIndex[payload.value]?.label ?? "";
+  const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+  return /*#__PURE__*/React$1.createElement("g", {
+    transform: `translate(${x},${y})`
+  }, /*#__PURE__*/React$1.createElement("text", {
+    x: 0,
+    y: 0,
+    dy: 16,
+    textAnchor: "middle",
+    fill: "#212121",
+    fontSize: 11,
+    fontWeight: "400",
+    fontFamily: "Poppins"
+  }, /*#__PURE__*/React$1.createElement("tspan", {
+    x: 0,
+    dy: 8
+  }, "Vendor Selling"), /*#__PURE__*/React$1.createElement("tspan", {
+    x: 0,
+    dy: 18
+  }, "Event: ", parts.join(" "))));
+};
+const SingleChart = () => {
+  const [startIndex, setStartIndex] = useState(0);
+  const [endIndex, setEndIndex] = useState(dataWithIndex.length - 1);
+  dataWithIndex.slice(startIndex, endIndex + 1);
+  return /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      width: "100%",
+      height: 600
+    }
+  }, /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      height: "100%"
+    }
+  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, /*#__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: 60,
+    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, null), /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "inc_unit",
+    fill: "#CCDCDD",
+    gap: "4px",
+    borderRadius: [4, 4, 0, 8],
+    barSize: 40,
+    name: "INC Sales"
+  }, /*#__PURE__*/React$1.createElement(LabelList, {
+    dataKey: "inc_unit",
+    position: "top",
+    formatter: value => `$${value / 1000}k`,
+    fill: "#212121",
+    fontSize: 12,
+    fontWeight: "400",
+    fontFamily: "Poppins"
+  })), /*#__PURE__*/React$1.createElement(Brush, {
+    dataKey: "index",
+    height: 30,
+    stroke: "#212121",
+    startIndex: startIndex,
+    endIndex: endIndex,
+    onChange: e => {
+      setStartIndex(e.startIndex ?? 0);
+      setEndIndex(e.endIndex ?? dataWithIndex.length - 1);
+    },
+    travellerWidth: 12
+  })), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    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 */
+
+/* SegmentedButton */
+const SegmentedButton = props => {
+  const {
+    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);
+    }
+  }, [defaultIndex]);
+  useEffect(() => {
+    const activeSegmentRef = optionsRef[activeIndex].ref;
+    const {
+      offsetWidth,
+      offsetLeft
+    } = activeSegmentRef.current;
+    const {
+      style
+    } = controlRef.current;
+    style.setProperty('--highlight-width', `${offsetWidth}px`);
+    style.setProperty('--highlight-x-pos', `${offsetLeft}px`);
+  }, [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, {
+    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: () => {}
+};
+
+var css_248z = ".BarLine {\r\n    font-family: sans-serif;\r\n    text-align: center;\r\n  }\r\n  \r\n  /* Make brush background darker */\r\n  /* .recharts-brush .recharts-brush-slide {\r\n    fill: #a52a2a !important;\r\n    stroke: none;\r\n  }\r\n  \r\n  /* Style draggable handles (travellers) */\r\n  /* .recharts-brush-traveller {\r\n    fill: limegreen !important; /* bright green like in the image */\r\n  /* cursor: ew-resize;\r\n  } */\r\n  */\r\n  \r\n  /* Optional: center grip arrows (you can fake it with CSS) */\r\n  /* .recharts-brush .recharts-brush-traveller > rect {\r\n    rx: 2;\r\n    ry: 2;\r\n    width: 6;\r\n    fill: #a52a2a !important; /* dark gray */\r\n  /* } */ */\r\n  */\r\n  \r\n  /* Remove tick labels if needed */\r\n  .recharts-brush .recharts-layer text {\r\n    display: none;\r\n  }\r\n  ";
+styleInject(css_248z);
+
+function InnerBarChart() {
+  const data = [{
+    week: "Week 28",
+    total: 20000,
+    actual: 4000
+  }, {
+    week: "Week 29",
+    total: 10000,
+    actual: 8000
+  }, {
+    week: "Week 30",
+    total: 8000,
+    actual: 950
+  }, {
+    week: "Week 33",
+    total: 12000,
+    actual: 1000
+  }, {
+    week: "Week 36",
+    total: 16000,
+    actual: 13000
+  }, {
+    week: "Week 34",
+    total: 30000,
+    actual: 3000
+  }, {
+    week: "Week 35",
+    total: 8000,
+    actual: 950
+  }, {
+    week: "Week 37",
+    total: 9000,
+    actual: 3000
+  }];
+  const originalData = [{
+    label: "Vendor Selling Event: Week 28",
+    inc_unit: 20000,
+    inc_roi: 1.2
+  }, {
+    label: "Vendor Selling Event: Week 29",
+    inc_unit: 10000,
+    inc_roi: 1.2
+  }, {
+    label: "Vendor Selling Event: Week 30",
+    inc_unit: 8000,
+    inc_roi: 0.8
+  }, {
+    label: "Vendor Selling Event: Week 33",
+    inc_unit: 12000,
+    inc_roi: 1.1
+  }, {
+    label: "Vendor Selling Event: Week 36",
+    inc_unit: 8000,
+    inc_roi: 1.2
+  }, {
+    label: "Vendor Selling Event: Week 34",
+    inc_unit: 8000,
+    inc_roi: 0.7
+  }, {
+    label: "Vendor Selling Event: Week 35",
+    inc_unit: 8000,
+    inc_roi: 0.8
+  }, {
+    label: "Vendor Selling Event: Week 38",
+    inc_unit: 9000,
+    inc_roi: 1.1
+  }];
+  const format = v => v >= 1000 ? `${v / 1000}K` : v;
+  const CustomBarLabel = ({
+    x,
+    y,
+    width,
+    payload
+  }) => {
+    if (!payload || typeof payload.total === "undefined") {
+      console.error("Invalid payload:", payload);
+      return null;
+    }
+    const centerX = x + width / 2;
+    return /*#__PURE__*/React$1.createElement("text", {
+      x: centerX,
+      y: Math.max(y - 8, 10),
+      textAnchor: "middle",
+      fill: "black"
+    }, format(payload.total));
+  };
+  const BarWithInner = props => {
+    const {
+      x,
+      y,
+      width,
+      height,
+      payload
+    } = props;
+    const totalHeight = height;
+    const actualRatio = payload.actual / payload.total;
+    const innerHeight = totalHeight * actualRatio;
+    const innerY = y + (totalHeight - innerHeight);
+    return /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("rect", {
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      fill: "#d0e6ea",
+      rx: 4,
+      ry: 4
+    }), /*#__PURE__*/React$1.createElement("text", {
+      x: x + width / 2,
+      y: y - 8,
+      textAnchor: "middle",
+      fontSize: 11,
+      fontWeight: 400,
+      fontFamily: "Poppins",
+      fill: "#212121"
+    }, format(payload.total)), /*#__PURE__*/React$1.createElement("rect", {
+      x: x + width * 0.2,
+      y: innerY,
+      width: width * 0.6,
+      height: innerHeight,
+      fill: "#07575b",
+      rx: 2,
+      ry: 2
+    }), innerHeight > 16 && /*#__PURE__*/React$1.createElement("text", {
+      x: x + width / 2,
+      y: innerY - 6,
+      textAnchor: "middle",
+      fontSize: 11,
+      fontWeight: 400,
+      fontFamily: "Poppins",
+      fill: "#212121"
+    }, format(payload.actual)));
+  };
+  const CustomTooltip = ({
+    active,
+    payload,
+    label
+  }) => {
+    if (!active || !payload || !payload.length) return null;
+    const data = payload[0].payload;
+    return /*#__PURE__*/React$1.createElement("div", {
+      style: {
+        background: "white",
+        border: "1px solid #ccc",
+        padding: "10px",
+        borderRadius: "8px",
+        fontSize: "14px"
+      }
+    }, /*#__PURE__*/React$1.createElement("strong", null, label), /*#__PURE__*/React$1.createElement("div", null, "Actual: ", format(data.actual)), /*#__PURE__*/React$1.createElement("div", null, "Total: ", format(data.total)));
+  };
+  const dataWithIndex = originalData.map((item, index) => ({
+    ...item,
+    index,
+    shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
+  }));
+  const CustomizedTick = ({
+    x,
+    y,
+    payload
+  }) => {
+    const label = dataWithIndex[payload.value]?.label ?? "";
+    const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+    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: 11,
+      fontWeight: "400",
+      fontFamily: "Poppins"
+    }, /*#__PURE__*/React$1.createElement("tspan", {
+      x: 0,
+      dy: 8
+    }, "Vendor Selling"), /*#__PURE__*/React$1.createElement("tspan", {
+      x: 0,
+      dy: 18
+    }, "Event: ", parts.join(" "))));
+  };
+  return /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    width: "100%",
+    height: 400
+  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+    data: data,
+    margin: {
+      top: 20,
+      right: 30,
+      left: 20,
+      bottom: 10
+    }
+  }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
+    strokeDasharray: "3 3",
+    vertical: false
+  }), /*#__PURE__*/React$1.createElement(XAxis, {
+    dataKey: "week",
+    tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null)
+  }), /*#__PURE__*/React$1.createElement(YAxis, {
+    type: "number",
+    domain: [0, "dataMax + 2000"],
+    hide: true
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
+  }), /*#__PURE__*/React$1.createElement(Brush, {
+    height: 30,
+    travellerWidth: 10,
+    startIndex: 1,
+    endIndex: 5,
+    y: 369
+  }), /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "total",
+    shape: /*#__PURE__*/React$1.createElement(BarWithInner, null),
+    label: /*#__PURE__*/React$1.createElement(CustomBarLabel, null),
+    barSize: 30
+  })));
+}
+
+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 Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  #Segment {
+    width: auto;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: "Poppins"  
+    }
+`;
+/* Make brush background darker */
+/* .recharts-brush .recharts-brush-slide {
+    fill: #a52a2a !important;
+    stroke: none;
+  }
+  
+  /* Style draggable handles (travellers) */
+/* .recharts-brush-traveller {
+    fill: limegreen !important; /* bright green like in the image */
+/* cursor: ew-resize;
+  } */
+
+/* Optional: center grip arrows (you can fake it with CSS) */
+/* .recharts-brush .recharts-brush-traveller > rect {
+    rx: 2;
+    ry: 2;
+    width: 6;
+    fill: #a52a2a !important; /* dark gray */
+/* } */
+
+/* Remove tick labels if needed */
+//   .recharts-brush .recharts-layer text {
+//     display: none;
+//   }
+
+const BrushChart = () => {
+  const segmentedbuttonOptions = ["New Shoppers & Repeaters", "INC Sales & ROI", "INC Units", "Basket Lift"];
+  const [selectedOption, setSelectedOption] = useState(segmentedbuttonOptions[0]);
+  return /*#__PURE__*/React$1.createElement(Container, null, /*#__PURE__*/React$1.createElement(SegmentedButton, {
+    gap: '8px',
+    options: segmentedbuttonOptions.map(value => ({
+      value
+    })),
+    onClick: _ref => {
+      let {
+        value
+      } = _ref;
+      return setSelectedOption(value);
+    }
+  }), selectedOption === "New Shoppers & Repeaters" && /*#__PURE__*/React$1.createElement(InnerBarChart, null), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React$1.createElement(SeparatedLineBarChart, null), selectedOption === "INC Units" && /*#__PURE__*/React$1.createElement(SingleChart, null), selectedOption === "Basket Lift" && /*#__PURE__*/React$1.createElement(SingleChart, null));
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, Button, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };
+export { AreaChart, BannerEventBoxList, BarChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };
 //# sourceMappingURL=index.esm.js.map