sag_components 2.0.0-beta63 → 2.0.0-beta65

package/dist/index.esm.js

@@ -31478,15 +31478,15 @@ const SeparatedLineBarChart = ({
       payload
     } = props;
     const label = payload.value;
-    const words = label.split(' ');
+    const words = label.split(" ");
     const chunks = [];
-    let currentChunk = '';
+    let currentChunk = "";
     words.forEach(word => {
       if (currentChunk.length + word.length > 15) {
         chunks.push(currentChunk.trim());
         currentChunk = word;
       } else {
-        currentChunk += (currentChunk ? ' ' : '') + word;
+        currentChunk += (currentChunk ? " " : "") + word;
       }
     });
     if (currentChunk) {
@@ -31533,11 +31533,11 @@ const SeparatedLineBarChart = ({
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
       width: "100%",
-      height: "700px"
+      height: "100%"
     }
   }, /*#__PURE__*/React$1.createElement("div", {
     style: {
-      height: "40%"
+      height: "25%"
     }
   }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
@@ -31577,7 +31577,7 @@ const SeparatedLineBarChart = ({
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "inc_roi",
     position: "top",
-    formatter: value => value.toFixed(1),
+    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 12,
     fontWeight: "400",
@@ -31594,7 +31594,7 @@ const SeparatedLineBarChart = ({
     hide: true
   })))), /*#__PURE__*/React$1.createElement("div", {
     style: {
-      height: "60%"
+      height: "70%"
     }
   }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
@@ -31630,7 +31630,7 @@ const SeparatedLineBarChart = ({
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "inc_sales",
     position: "top",
-    formatter: value => `${value / 1000}k`,
+    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 12,
     fontWeight: "400",
@@ -31641,10 +31641,11 @@ const SeparatedLineBarChart = ({
     stroke: "#212121",
     startIndex: 0,
     endIndex: Math.min(6, processedData.length - 1),
-    y: 330,
     travellerWidth: 10,
     tickFormatter: (value, index) => index + 1
-  })), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+  })), /*#__PURE__*/React$1.createElement("div", null)), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    width: "100%",
+    height: "40px",
     legendData: [{
       iconColor: "#CCDCDD",
       iconType: "Square",
@@ -31654,7 +31655,7 @@ const SeparatedLineBarChart = ({
       iconType: "LegendUnionIcon",
       title: "INC Sales ROI"
     }]
-  })))));
+  })));
 };
 
 function SingleChart({
@@ -31714,11 +31715,12 @@ function SingleChart({
   };
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
-      width: "100%"
+      width: "100%",
+      height: "100%"
     }
   }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
-    width: width,
-    height: height
+    width: "100%",
+    height: "95%"
   }, /*#__PURE__*/React$1.createElement(ComposedChart, {
     data: dataWithIndex,
     margin: {
@@ -31755,7 +31757,7 @@ function SingleChart({
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "value",
     position: "top",
-    formatter: value => `$${value / 1000}k`,
+    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 12,
     fontWeight: "400",
@@ -31764,15 +31766,16 @@ function SingleChart({
     height: 30,
     travellerWidth: 10,
     startIndex: 0,
-    endIndex: Math.min(6, barData.length - 1),
-    y: 380
-  })), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    endIndex: Math.min(6, barData.length - 1)
+  }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    width: "100%",
+    height: "40px",
     legendData: [{
       iconColor: "#CCDCDD",
       iconType: "Square",
       title: "INC Units"
     }]
-  })));
+  }));
 }
 
 styled.div`
@@ -32070,15 +32073,15 @@ function InnerBarChart({
     const label = payload.value;
 
     // Split the label into chunks of words
-    const words = label.split(' ');
+    const words = label.split(" ");
     const chunks = [];
-    let currentChunk = '';
+    let currentChunk = "";
     words.forEach(word => {
       if (currentChunk.length + word.length > 15) {
         chunks.push(currentChunk.trim());
         currentChunk = word;
       } else {
-        currentChunk += ' ' + word;
+        currentChunk += " " + word;
       }
     });
     if (currentChunk) {
@@ -32100,9 +32103,14 @@ function InnerBarChart({
       dy: i === 0 ? "0.71em" : "1.2em"
     }, chunk))));
   };
-  return /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  return /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
-    height: "100%"
+    height: "95%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
     data: brushInnerBarData,
     margin: {
@@ -32134,7 +32142,19 @@ function InnerBarChart({
     travellerWidth: 10,
     startIndex: 0,
     endIndex: Math.min(6, brushInnerBarData.length - 1)
-  })));
+  }))), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    width: "100%",
+    height: "40px",
+    legendData: [{
+      iconColor: "#CCDCDD",
+      iconType: "Square",
+      title: "New Shoppers"
+    }, {
+      iconColor: "#07575b",
+      iconType: "Square",
+      title: "Repeaters"
+    }]
+  }));
 }
 
 const BrushChart = props => {