sag_components 2.0.0-beta87 → 2.0.0-beta88

package/dist/index.esm.js

@@ -31560,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;
 `;
@@ -31598,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,
@@ -31661,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%",
@@ -31716,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%"
@@ -31739,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
@@ -31768,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",
@@ -31795,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,
@@ -31859,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
@@ -31908,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",
@@ -31931,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,
@@ -32041,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%",
@@ -32062,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
@@ -32081,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",