sag_components 2.0.0-beta86 → 2.0.0-beta88

package/dist/index.esm.js

@@ -23990,21 +23990,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24402,23 +24403,24 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -30414,7 +30416,7 @@ const BubbleChart = _ref => {
         "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, {
+      }, /*#__PURE__*/React$1.createElement("span", null, "Total cost:"), /*#__PURE__*/React$1.createElement("span", null, data.tooltip.allSizesEmpty ? 'N/A' : 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"
@@ -30427,6 +30429,10 @@ const BubbleChart = _ref => {
 
   // Process all chart data - use original data values
   const allChartData = useMemo(() => {
+    // Check if all size values are empty (0, null, undefined)
+    const allSizesEmpty = data.every(item => !item.size || item.size === 0);
+    const defaultSize = allSizesEmpty ? 10 : null; // Use 10 as default size when all are empty
+
     return data.map((item, index) => {
       if (item.x === undefined || item.y === undefined || item.size === undefined) {
         console.warn('Skipping data item with missing values:', item);
@@ -30439,6 +30445,7 @@ const BubbleChart = _ref => {
         units: item.units || 0,
         roi: item.x || 0,
         incSales: item.y || 0,
+        allSizesEmpty: allSizesEmpty,
         ...(item.tooltip || {})
       };
       return {
@@ -30446,8 +30453,8 @@ const BubbleChart = _ref => {
         // Use original x value
         y: item.y,
         // Use original y value
-        z: item.size,
-        // Use original size value
+        z: defaultSize || item.size,
+        // Use default size if all sizes are empty, otherwise use original
         tooltip: tooltipInfo,
         fill: getFill(item.x, item.y),
         key: `bubble-${index}` // Use index for stable keys
@@ -31553,7 +31560,6 @@ const TooltipContainer = styled.div`
   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;
 `;
@@ -31591,6 +31597,12 @@ const BarLine = props => {
     left: 20,
     bottom: 0
   };
+
+  // Changed to match InnerBar component behavior
+  const [brushRange, setBrushRange] = useState({
+    startIndex: 0,
+    endIndex: Math.min(6, brushAreaBarData.length - 1)
+  });
   const CustomizedTick = /*#__PURE__*/React$1.memo(({
     x,
     y,
@@ -31654,6 +31666,15 @@ const BarLine = props => {
     } = payload[0].payload;
     return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle$4, null, label), /*#__PURE__*/React$1.createElement(TooltipText, null, description), /*#__PURE__*/React$1.createElement(TooltipText, null, `INC Sales: $${getFormattedValue(inc_sales)}${getFormattedUnits(inc_sales)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `INC Sales ROI:  ${getFormattedValue(inc_roi)}${getFormattedUnits(inc_roi)}`));
   });
+
+  // Fixed brush change handler to match InnerBar component
+  const handleBrushChange = range => {
+    setBrushRange(range);
+  };
+
+  // Calculate the number of visible bars like InnerBar component
+  const visibleBarsCount = brushRange.endIndex - brushRange.startIndex + 1;
+  const shouldShowLabels = visibleBarsCount <= 8;
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
       width: "100%",
@@ -31709,12 +31730,13 @@ const BarLine = props => {
     dataKey: "label",
     height: 30,
     stroke: "#212121",
-    startIndex: 0,
-    endIndex: Math.min(6, brushAreaBarData.length - 1),
+    startIndex: brushRange.startIndex,
+    endIndex: brushRange.endIndex,
     y: 330,
     travellerWidth: 10,
     tickFormatter: (value, index) => index + 1,
-    hide: true
+    hide: true,
+    onChange: handleBrushChange
   })))), /*#__PURE__*/React$1.createElement("div", {
     style: {
       height: "65%"
@@ -31732,7 +31754,7 @@ const BarLine = props => {
     vertical: false
   }), /*#__PURE__*/React$1.createElement(XAxis, {
     dataKey: "label",
-    tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
+    tick: shouldShowLabels ? /*#__PURE__*/React$1.createElement(CustomizedTick, null) : false,
     interval: 0,
     height: 50,
     tickLine: false
@@ -31761,9 +31783,10 @@ const BarLine = props => {
     height: 30,
     fill: "#EFEFEF",
     travellerWidth: 10,
-    startIndex: 0,
-    endIndex: Math.min(6, brushAreaBarData.length - 1),
-    className: "custom-brush"
+    startIndex: brushRange.startIndex,
+    endIndex: brushRange.endIndex,
+    className: "custom-brush",
+    onChange: handleBrushChange
   })))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
     width: "100%",
     height: "40px",
@@ -31788,11 +31811,20 @@ const SingleChart = props => {
   } = props;
   const MAX_CHARS_PER_LINE = getMaxCharsPerLine(barData.length);
   const MAX_LINES = 2;
-  const dataWithIndex = barData?.map((item, index) => ({
-    ...item,
-    index,
-    shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
-  }));
+
+  // Separate state for brush range
+  const [brushRange, setBrushRange] = useState({
+    startIndex: 0,
+    endIndex: Math.min(6, barData.length - 1)
+  });
+
+  // Remove data transformation - use original data like InnerBar does
+  // const dataWithIndex = barData?.map((item, index) => ({
+  //   ...item,
+  //   index,
+  //   shortLabel: item.label.replace("Vendor Selling Event: ", "Wk "),
+  // }));
+
   const CustomizedTick = /*#__PURE__*/React$1.memo(({
     x,
     y,
@@ -31852,28 +31884,41 @@ const SingleChart = props => {
     if (!data) return null;
     return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle$4, null, `${data.label}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `${data.description}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `${data.typeTitle}: ${getFormattedValue(data.value)}${getFormattedUnits(data.value)}`));
   };
+
+  // Fixed brush change handler - matches the working InnerBar component exactly
+  const handleBrushChange = range => {
+    setBrushRange(range);
+  };
+
+  // Calculate the number of visible bars
+  const visibleBarsCount = brushRange.endIndex - brushRange.startIndex + 1;
+  const shouldShowLabels = visibleBarsCount <= 8;
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
       width: "100%",
-      height: "100%"
+      height: "100%",
+      userSelect: "none"
     }
   }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: "90%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
-    data: dataWithIndex,
+    data: barData,
     margin: {
       top: 40,
       right: 40,
       left: 20,
       bottom: 0
+    },
+    style: {
+      userSelect: "none"
     }
   }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React$1.createElement(XAxis, {
     dataKey: "label",
-    tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
+    tick: shouldShowLabels ? /*#__PURE__*/React$1.createElement(CustomizedTick, null) : false,
     interval: 0,
     height: 50,
     tickLine: false
@@ -31901,9 +31946,10 @@ const SingleChart = props => {
     height: 30,
     fill: "#EFEFEF",
     travellerWidth: 10,
-    startIndex: 0,
-    endIndex: Math.min(6, barData.length - 1),
-    className: "custom-brush"
+    startIndex: brushRange.startIndex,
+    endIndex: brushRange.endIndex,
+    className: "custom-brush",
+    onChange: handleBrushChange
   }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
     width: "100%",
     height: "40px",
@@ -31924,6 +31970,12 @@ const InnerBar = props => {
   } = props;
   const MAX_CHARS_PER_LINE = getMaxCharsPerLine(brushInnerBarData.length);
   const MAX_LINES = 2;
+
+  // Separate state for brush range and label display
+  const [brushRange, setBrushRange] = useState({
+    startIndex: 0,
+    endIndex: Math.min(6, brushInnerBarData.length - 1)
+  });
   const BarWithInner = props => {
     const {
       x,
@@ -32034,6 +32086,13 @@ const InnerBar = props => {
       dy: idx === 0 ? "0.71em" : "1.2em"
     }, line))));
   });
+  const handleBrushChange = range => {
+    setBrushRange(range);
+  };
+
+  // Calculate the number of visible bars
+  const visibleBarsCount = brushRange.endIndex - brushRange.startIndex + 1;
+  const shouldShowLabels = visibleBarsCount <= 8;
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
       width: "100%",
@@ -32055,7 +32114,7 @@ const InnerBar = props => {
     vertical: false
   }), /*#__PURE__*/React$1.createElement(XAxis, {
     dataKey: "label",
-    tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
+    tick: shouldShowLabels ? /*#__PURE__*/React$1.createElement(CustomizedTick, null) : false,
     height: 50,
     tickLine: false,
     interval: 0
@@ -32074,9 +32133,10 @@ const InnerBar = props => {
     height: 30,
     fill: "#EFEFEF",
     travellerWidth: 10,
-    startIndex: 0,
-    endIndex: Math.min(6, brushInnerBarData.length - 1),
-    className: "custom-brush"
+    startIndex: brushRange.startIndex,
+    endIndex: brushRange.endIndex,
+    className: "custom-brush",
+    onChange: handleBrushChange
   }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
     width: "100%",
     height: "40px",