sag_components 2.0.0-beta63 → 2.0.0-beta64

package/dist/index.js

@@ -31488,15 +31488,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) {
@@ -31543,7 +31543,7 @@ const SeparatedLineBarChart = ({
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: "100%",
-      height: "700px"
+      height: "100%"
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -31587,7 +31587,7 @@ const SeparatedLineBarChart = ({
   }, /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
     dataKey: "inc_roi",
     position: "top",
-    formatter: value => value.toFixed(1),
+    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 12,
     fontWeight: "400",
@@ -31722,11 +31722,7 @@ function SingleChart({
     if (!data) return null;
     return /*#__PURE__*/React__default["default"].createElement(TooltipContainer, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle, null, `${data.label}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `${data.description}`), /*#__PURE__*/React__default["default"].createElement(TooltipText, null, `${data.typeTitle}: ${getFormattedValue(data.value)}${getFormattedUnits(data.value)}`));
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      width: "100%"
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(recharts.ResponsiveContainer, {
     width: width,
     height: height
   }, /*#__PURE__*/React__default["default"].createElement(recharts.ComposedChart, {
@@ -31765,7 +31761,7 @@ function SingleChart({
   }, /*#__PURE__*/React__default["default"].createElement(recharts.LabelList, {
     dataKey: "value",
     position: "top",
-    formatter: value => `$${value / 1000}k`,
+    formatter: value => `$${getFormattedValue(value)}${getFormattedUnits(value)}`,
     fill: "#212121",
     fontSize: 12,
     fontWeight: "400",
@@ -31782,7 +31778,7 @@ function SingleChart({
       iconType: "Square",
       title: "INC Units"
     }]
-  })));
+  }));
 }
 
 styled__default["default"].div`
@@ -32144,7 +32140,17 @@ function InnerBarChart({
     travellerWidth: 10,
     startIndex: 0,
     endIndex: Math.min(6, brushInnerBarData.length - 1)
-  })));
+  })), /*#__PURE__*/React__default["default"].createElement(PerformanceAnalyticsLegend, {
+    legendData: [{
+      iconColor: "#CCDCDD",
+      iconType: "Square",
+      title: "New Shoppers"
+    }, {
+      iconColor: "#07575b",
+      iconType: "Square",
+      title: "Repeaters"
+    }]
+  }));
 }
 
 const BrushChart = props => {