sag_components 2.0.0-beta61 → 2.0.0-beta63

package/dist/index.esm.js

@@ -31478,7 +31478,20 @@ const SeparatedLineBarChart = ({
       payload
     } = props;
     const label = payload.value;
-    const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+    const words = label.split(' ');
+    const chunks = [];
+    let currentChunk = '';
+    words.forEach(word => {
+      if (currentChunk.length + word.length > 15) {
+        chunks.push(currentChunk.trim());
+        currentChunk = word;
+      } else {
+        currentChunk += (currentChunk ? ' ' : '') + word;
+      }
+    });
+    if (currentChunk) {
+      chunks.push(currentChunk.trim());
+    }
     return /*#__PURE__*/React$1.createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React$1.createElement("text", {
@@ -31487,16 +31500,13 @@ const SeparatedLineBarChart = ({
       dy: 16,
       textAnchor: "middle",
       fill: "#212121",
-      fontSize: 11,
-      fontWeight: 400,
+      fontSize: 10,
       fontFamily: "Poppins"
-    }, /*#__PURE__*/React$1.createElement("tspan", {
-      x: 0,
-      dy: 8
-    }, "Vendor Selling"), /*#__PURE__*/React$1.createElement("tspan", {
+    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: i,
       x: 0,
-      dy: 18
-    }, "Event: ", parts.join(" "))));
+      dy: i === 0 ? "0.71em" : "1.2em"
+    }, chunk))));
   };
   const CustomTooltip = ({
     active,
@@ -31603,7 +31613,7 @@ const SeparatedLineBarChart = ({
     dataKey: "label",
     tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
     interval: 0,
-    height: 60,
+    height: 80,
     tickLine: false
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     tickFormatter: v => `${v / 1000}k`,
@@ -31663,7 +31673,20 @@ function SingleChart({
     payload
   }) => {
     const label = dataWithIndex[payload.value]?.label ?? "";
-    const parts = label.replace("Vendor Selling Event: ", "").split(" ");
+    const words = label.split(' ');
+    const chunks = [];
+    let currentChunk = '';
+    words.forEach(word => {
+      if (currentChunk.length + word.length > 15) {
+        chunks.push(currentChunk.trim());
+        currentChunk = word;
+      } else {
+        currentChunk += (currentChunk ? ' ' : '') + word;
+      }
+    });
+    if (currentChunk) {
+      chunks.push(currentChunk.trim());
+    }
     return /*#__PURE__*/React$1.createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React$1.createElement("text", {
@@ -31672,16 +31695,13 @@ function SingleChart({
       dy: 16,
       textAnchor: "middle",
       fill: "#212121",
-      fontSize: 11,
-      fontWeight: "400",
+      fontSize: 10,
       fontFamily: "Poppins"
-    }, /*#__PURE__*/React$1.createElement("tspan", {
-      x: 0,
-      dy: 8
-    }, "Vendor Selling"), /*#__PURE__*/React$1.createElement("tspan", {
+    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: i,
       x: 0,
-      dy: 18
-    }, "Event: ", parts.join(" "))));
+      dy: i === 0 ? "0.71em" : "1.2em"
+    }, chunk))));
   };
   const CustomTooltip = ({
     active,
@@ -31690,7 +31710,6 @@ function SingleChart({
     if (!active || !payload || !payload.length) return null;
     const data = payload[0]?.payload;
     if (!data) return null;
-    console.log(data);
     return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle, null, `${data.label}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `${data.description}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `${data.typeTitle}: ${getFormattedValue(data.value)}${getFormattedUnits(data.value)}`));
   };
   return /*#__PURE__*/React$1.createElement("div", {
@@ -31715,7 +31734,7 @@ function SingleChart({
     dataKey: "index",
     tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
     interval: 0,
-    height: 60,
+    height: 80,
     padding: {
       left: 20,
       right: 20
@@ -31986,13 +32005,6 @@ SegmentedButton.defaultProps = {
 function InnerBarChart({
   brushInnerBarData
 }) {
-  const processedData = brushInnerBarData.map(item => {
-    const parts = item.label.replace("Vendor Selling Event:", "").trim();
-    return {
-      ...item,
-      shortLabel: parts
-    };
-  });
   const BarWithInner = props => {
     const {
       x,
@@ -32055,7 +32067,23 @@ function InnerBarChart({
       y,
       payload
     } = props;
-    const labelText = payload.value.replace("Vendor Selling Event:", "").trim();
+    const label = payload.value;
+
+    // Split the label into chunks of words
+    const words = label.split(' ');
+    const chunks = [];
+    let currentChunk = '';
+    words.forEach(word => {
+      if (currentChunk.length + word.length > 15) {
+        chunks.push(currentChunk.trim());
+        currentChunk = word;
+      } else {
+        currentChunk += ' ' + word;
+      }
+    });
+    if (currentChunk) {
+      chunks.push(currentChunk.trim());
+    }
     return /*#__PURE__*/React$1.createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React$1.createElement("text", {
@@ -32066,37 +32094,30 @@ function InnerBarChart({
       fill: "#212121",
       fontSize: 10,
       fontFamily: "Poppins"
-    }, /*#__PURE__*/React$1.createElement("tspan", {
-      x: 0,
-      dy: "0.71em"
-    }, "Vendor"), /*#__PURE__*/React$1.createElement("tspan", {
+    }, chunks.map((chunk, i) => /*#__PURE__*/React$1.createElement("tspan", {
+      key: i,
       x: 0,
-      dy: "1.2em"
-    }, "Selling"), /*#__PURE__*/React$1.createElement("tspan", {
-      x: 0,
-      dy: "1.2em"
-    }, labelText)));
+      dy: i === 0 ? "0.71em" : "1.2em"
+    }, chunk))));
   };
-  return /*#__PURE__*/React$1.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  return /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
-    height: 450
+    height: "100%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
-    data: processedData,
+    data: brushInnerBarData,
     margin: {
       top: 30,
       right: 30,
       left: 20,
-      bottom: 60
+      bottom: 80
     }
   }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React$1.createElement(XAxis, {
-    dataKey: "shortLabel",
+    dataKey: "label",
     tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
-    height: 70,
+    height: 80,
     interval: 0
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     type: "number",
@@ -32104,17 +32125,16 @@ function InnerBarChart({
     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: 0,
-    endIndex: Math.min(6, processedData.length - 1),
-    y: 380
   }), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "total",
     shape: /*#__PURE__*/React$1.createElement(BarWithInner, null),
     barSize: 36
-  }))));
+  }), /*#__PURE__*/React$1.createElement(Brush, {
+    height: 30,
+    travellerWidth: 10,
+    startIndex: 0,
+    endIndex: Math.min(6, brushInnerBarData.length - 1)
+  })));
 }
 
 const BrushChart = props => {
@@ -32122,7 +32142,8 @@ const BrushChart = props => {
     width,
     height,
     brushInnerBarData,
-    barData,
+    brushBarIncData,
+    brushBarBasketData,
     brushAreaBarData,
     title
   } = props;
@@ -32147,9 +32168,9 @@ const BrushChart = props => {
   }), selectedOption === "INC Sales & ROI" && /*#__PURE__*/React$1.createElement(SeparatedLineBarChart, {
     brushAreaBarData: brushAreaBarData
   }), selectedOption === "INC Units" && /*#__PURE__*/React$1.createElement(SingleChart, {
-    barData: barData
+    barData: brushBarIncData
   }), selectedOption === "Basket Lift" && /*#__PURE__*/React$1.createElement(SingleChart, {
-    barData: barData
+    barData: brushBarBasketData
   }));
 };