sag_components 1.0.700 → 1.0.702

package/dist/stories/components/TotalHorizontalCharts.js

@@ -18,6 +18,7 @@ const TotalHorizontalCharts = props => {
     title,
     value,
     dotCut,
+    AvgROI,
     currencySign,
     currencyType,
     width,
@@ -105,17 +106,13 @@ const TotalHorizontalCharts = props => {
     id: "FormattedValue"
   }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
     id: "CurrencySign"
-  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '')), showOutgoingBanner && /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.OutBanner, {
+  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : '', AvgROI ? 'AVG OF X ' : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '')), showOutgoingBanner && /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.OutBanner, {
     onClick: onBannerClick
   }, /*#__PURE__*/_react.default.createElement(_ExportIcon.default, {
     color: textColor
-  }), "View By Banner")), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, {
-    id: "ChartWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
-    id: "ChartInner",
+  }), "View By Banner")), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
     ref: chartContainerRef
   }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
-    id: "ResponsiveContainer",
     height: heightChartContainer - 10,
     width: widthChartContainer
   }, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
@@ -150,7 +147,7 @@ const TotalHorizontalCharts = props => {
       fontSize: 14,
       fontWeight: 600,
       fill: '#212121',
-      formatter: valueBar => "".concat(valueBar, "%")
+      formatter: valueBar => "".concat(valueBar)
     }
   }, chartsData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
     key: "cell-".concat(index),
@@ -173,6 +170,7 @@ TotalHorizontalCharts.defaultProps = {
   title: 'SALES',
   value: 0,
   dotCut: false,
+  AvgROI: false,
   currencySign: false,
   currencyType: 'USD',
   chartsData: [],

package/dist/stories/components/TotalHorizontalCharts.style.js

@@ -9,12 +9,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;  \n  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  .top {\n    text-align: center;\n    white-space: normal;\n    &:before {\n      display: none;\n    }\n  }\n"])), props => props.textColor, props => props.width, props => props.height);
-const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  /* height: 80%; */\n  flex-grow: 1;\n  width: 100%;\n"])), scrollableStyles);
-const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;  \n  height: 100%;\n  width: 100%;\n  ", "\n  overflow-y: scroll;\n"])), scrollableStyles);
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  padding: 0 20px;\n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;  \n  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  margin: 0;\n  .top {\n    text-align: center;\n    white-space: normal;\n    &:before {\n      display: none;\n    }\n  }\n"])), props => props.textColor, props => props.width, props => props.height);
+const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 80%;\n  width: 100%;\n  margin: 0;\n  ", "\n"])), scrollableStyles);
+const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;  \n  height: 120%;\n  width: 75%;\n"])));
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  padding: 16px;\n"])));
 const Header = exports.Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
 const Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  font-weight: 400;\n  line-height: 1;\n  margin: 0 0 8px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
-const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  display: flex;\n  align-items: baseline;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  display: flex;\n  align-items: baseline;\n  line-height: 1;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
 const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 10px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 8px;\n  }\n  > svg {\n    width: 14px;\n    height: 14px;\n    @media (max-width: 1536px) {\n      width: 12px;\n      height: 12px;\n    }\n    @media (max-width: 1366px) {\n      width: 8px;\n      height: 8px;\n    }\n  }\n"])), props => props.textColor);
 const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.700",
+  "version": "1.0.702",
   "description": "",
   "main": "dist/index.js",
   "scripts": {