sag_components 1.0.785 → 1.0.786

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/stories/components/BannerEventBoxList.js +1 -1
  2. package/dist/stories/components/CommonFunctions.js +4 -0
  3. package/dist/stories/components/MarketShareDescription.js +6 -8
  4. package/dist/stories/components/MarketShareDescription.style.js +3 -2
  5. package/dist/stories/components/PopupCharts.js +33 -1
  6. package/dist/stories/components/PopupCharts.style.js +2 -1
  7. package/dist/stories/components/SalesAndROI.style.js +4 -4
  8. package/dist/stories/components/TitleDescription.js +21 -22
  9. package/dist/stories/components/TotalDoughnutChart.js +20 -5
  10. package/dist/stories/components/TotalDoughnutChart.style.js +13 -12
  11. package/package.json +1 -1
package/dist/stories/components/BannerEventBoxList.js CHANGED
@@ -127,7 +127,7 @@ BannerEventBoxList.defaultProps = {
127
127
  retailer: 'StopAndShop',
128
128
  retailerFile: () => {},
129
129
  cardsContent: true,
130
- disableToggle: false,
130
+ disableToggle: true,
131
131
  children: null,
132
132
  bannerWidth: 'auto'
133
133
  };
package/dist/stories/components/CommonFunctions.js CHANGED
@@ -8,6 +8,7 @@ const getCurrencySign = (currencyTypeToConvert, value) => {
8
8
  if (value === undefined || value === null) {
9
9
  return '';
10
10
  }
11
+ // eslint-disable-next-line no-restricted-globals
11
12
  if (isNaN(parseFloat(value))) {
12
13
  return '';
13
14
  }
@@ -25,6 +26,7 @@ const getFormattedUnits = num => {
25
26
  if (num === undefined || num === null) {
26
27
  return '';
27
28
  }
29
+ // eslint-disable-next-line no-restricted-globals
28
30
  if (isNaN(parseFloat(num))) {
29
31
  return '';
30
32
  }
@@ -44,6 +46,7 @@ const getFormattedValue = num => {
44
46
  if (num === undefined || num === null) {
45
47
  return null;
46
48
  }
49
+ // eslint-disable-next-line no-restricted-globals
47
50
  if (isNaN(parseFloat(num))) {
48
51
  return null;
49
52
  }
@@ -70,6 +73,7 @@ const isNumericValue = num => {
70
73
  if (num === undefined || num === null) {
71
74
  return false;
72
75
  }
76
+ // eslint-disable-next-line no-restricted-globals
73
77
  if (isNaN(parseFloat(num))) {
74
78
  return false;
75
79
  }
package/dist/stories/components/MarketShareDescription.js CHANGED
@@ -14,13 +14,11 @@ var _CommonFunctions = require("./CommonFunctions");
14
14
  const MarketShareDescription = props => {
15
15
  const {
16
16
  width,
17
- height
18
- } = props;
19
- const {
17
+ height,
20
18
  marketShareData,
21
19
  iconColor,
22
- showBanner,
23
- onBannerClick
20
+ onBannerClick,
21
+ dotCut
24
22
  } = props;
25
23
  const displayField = dataItem => {
26
24
  var _dataItem$value;
@@ -32,7 +30,7 @@ const MarketShareDescription = props => {
32
30
  className: "FormattedValue"
33
31
  }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.TextBeforeAndAfterValue, {
34
32
  className: "TextBeforeAndAfterValue"
35
- }, dataItem.textBefore), (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value), (0, _CommonFunctions.getFormattedUnits)(dataItem.value), /*#__PURE__*/_react.default.createElement(_MarketShareDescription.TextBeforeAndAfterValue, null, dataItem.textAfter)));
33
+ }, dataItem.textBefore), dotCut ? (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value) : (0, _CommonFunctions.getNumberWithCommas)(dataItem.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(dataItem.value) : '', /*#__PURE__*/_react.default.createElement(_MarketShareDescription.TextBeforeAndAfterValue, null, dataItem.textAfter)));
36
34
  return content;
37
35
  };
38
36
  const dispalyRowFields = data => {
@@ -102,6 +100,6 @@ MarketShareDescription.defaultProps = {
102
100
  width: '100%',
103
101
  height: '100%',
104
102
  iconColor: '#1B30AA',
105
- showBanner: false,
106
- onBannerClick: () => {}
103
+ onBannerClick: () => {},
104
+ dotCut: false
107
105
  };
package/dist/stories/components/MarketShareDescription.style.js CHANGED
@@ -8,7 +8,8 @@ exports.TextBeforeAndAfterValue = exports.RowTitle = exports.OutBanner = exports
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
11
- const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 1rem;\n border-radius: 12px;\n padding: 10px;\n width: ", ";\n height: ", ";\n overflow: auto;\n"])), props => props.width, props => props.height);
11
+ 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";
12
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 1rem;\n border-radius: 12px;\n padding: 10px;\n width: ", ";\n height: ", ";\n overflow: auto;\n ", "\n"])), props => props.width, props => props.height, scrollableStyles);
12
13
  const RowTitle = exports.RowTitle = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n font-size: 18px;\n margin: 5px 5px 5px 0;\n @media (max-width: 1536px) {\n font-size: 15px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
13
14
  const AllRowsContainer = exports.AllRowsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n"])));
14
15
  const OneRowContainer = exports.OneRowContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n"])));
@@ -22,5 +23,5 @@ const TextBeforeAndAfterValue = exports.TextBeforeAndAfterValue = _styledCompone
22
23
  const FieldTitleAndValueSubContainer = exports.FieldTitleAndValueSubContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-around;\n flex-direction: column;\n flex-wrap: wrap;\n width: 100%;\n"])));
23
24
  const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%; \n overflow:auto;\n"])));
24
25
  const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)([" \n display: flex; \n padding: 5px 10px 0 0;\n cursor: pointer; \n"])));
25
- const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 18px;\n line-height: 26px;\n font-weight: 400;\n width: 100%;\n overflow: auto;\n strong {\n font-weight: 500;\n color: #212121;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n };\n p1 {\n font-weight: 400;\n color: #726F6F;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n };\n"])));
26
+ const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 18px;\n line-height: 24px;\n font-weight: 400;\n width: 100%;\n overflow: auto;\n ", "\n strong {\n font-weight: 500;\n color: #212121;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n };\n p1 {\n font-weight: 400;\n color: #726F6F;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n };\n"])), scrollableStyles);
26
27
  const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 14px;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n @media (max-width: 1536px) {\n font-size: 13px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n > svg {\n width: 14px;\n height: 14px;\n @media (max-width: 1536px) {\n width: 13px;\n height: 13px;\n }\n @media (max-width: 1366px) {\n width: 12px;\n height: 12px;\n }\n }\n"])), props => props.textColor);
package/dist/stories/components/PopupCharts.js CHANGED
@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
9
9
  var _TotalDoughnutChart = require("./TotalDoughnutChart");
10
10
  var _BarChartsByWeeks = require("./BarChartsByWeeks");
11
11
  var _TotalHorizontalCharts = require("./TotalHorizontalCharts");
12
+ var _MarketShareDescription = require("./MarketShareDescription");
13
+ var _SalesAndROI = require("./SalesAndROI");
12
14
  var _CloseXIcon = require("./icons/CloseXIcon");
13
15
  var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
14
16
  var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
@@ -107,8 +109,32 @@ const PopupCharts = props => {
107
109
  height: "240px",
108
110
  width: "100%"
109
111
  });
112
+ const displayMarketShareDescription = rowsData => {
113
+ const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.MarketShareDescription, {
114
+ marketShareData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.marketShareData,
115
+ height: "240px",
116
+ width: "100%",
117
+ iconColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.iconColor // "#229E38"
118
+ });
119
+ return content;
120
+ };
121
+ const displaySalesAndROI = rowsData => {
122
+ const content = /*#__PURE__*/_react.default.createElement(_SalesAndROI.SalesAndROI, {
123
+ title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
124
+ dotCut: rowsData === null || rowsData === void 0 ? void 0 : rowsData.dotCut,
125
+ currencySign: rowsData === null || rowsData === void 0 ? void 0 : rowsData.currencySign,
126
+ currencyType: rowsData === null || rowsData === void 0 ? void 0 : rowsData.currencyType,
127
+ salesData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.salesData,
128
+ noDataText: rowsData === null || rowsData === void 0 ? void 0 : rowsData.noDataText,
129
+ showBanner: false,
130
+ showBorderShadow: false,
131
+ height: "280px",
132
+ width: "100%"
133
+ });
134
+ return content;
135
+ };
110
136
  const displayChart = item => {
111
- var _item$rowsData, _item$rowsData2, _item$rowsData3, _item$rowsData4;
137
+ var _item$rowsData, _item$rowsData2, _item$rowsData3, _item$rowsData4, _item$rowsData5, _item$rowsData6;
112
138
  let content;
113
139
  switch (chartType) {
114
140
  case 'TotalDoughnutChart':
@@ -123,6 +149,12 @@ const PopupCharts = props => {
123
149
  case 'BarChartsByWeeksTwoBars':
124
150
  content = displayBarChartsByWeeks((_item$rowsData4 = item.rowsData) === null || _item$rowsData4 === void 0 ? void 0 : _item$rowsData4.BarChartsByWeeksDetails, true);
125
151
  break;
152
+ case 'MarketShareDescription':
153
+ content = displayMarketShareDescription((_item$rowsData5 = item.rowsData) === null || _item$rowsData5 === void 0 ? void 0 : _item$rowsData5.MarketShareDescriptionDetails);
154
+ break;
155
+ case 'SalesAndROI':
156
+ content = displaySalesAndROI((_item$rowsData6 = item.rowsData) === null || _item$rowsData6 === void 0 ? void 0 : _item$rowsData6.SalesAndROIDetails);
157
+ break;
126
158
  default:
127
159
  content = '';
128
160
  break;
package/dist/stories/components/PopupCharts.style.js CHANGED
@@ -8,12 +8,13 @@ exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalCon
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
11
+ 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";
11
12
  const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
12
13
  const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: fixed;\n z-index: 100;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
13
14
  const ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([" \n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 18px;\n background-color: #fefefe;\n padding: 20px 30px 20px 40px;\n border: 1px solid #888;\n border-radius: 10px;\n height: ", ";\n width: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
14
15
  const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 0 10px 0;\n margin: 0;\n border-bottom: 1px solid #b1b1b1;\n"])));
15
16
  const Title = exports.Title = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 24px;\n margin: 0;\n"])));
16
- const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(3, 1fr); /* 3 columns */\n flex-wrap: wrap; \n overflow-y: auto;\n max-height: ", ";\n height: ", ";\n padding: 10px 0 0 0;\n"])), props => props.maxHeight, props => props.height);
17
+ const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(3, 1fr); /* 3 columns */\n flex-wrap: wrap; \n overflow-y: auto;\n ", "\n max-height: ", ";\n height: ", ";\n padding: 10px 0 0 0;\n"])), scrollableStyles, props => props.maxHeight, props => props.height);
17
18
  const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n // display: flex;\n margin: 10px 10px 10px 10px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n padding-right: 10px;\n \n"])));
18
19
  const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 20px 10px;\n"])));
19
20
  const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n margin: 0 10px;\n color: ", ";\n"])), props => props.subtitleTextColor);
package/dist/stories/components/SalesAndROI.style.js CHANGED
@@ -8,10 +8,10 @@ exports.TitleAndValueContainer = exports.Title = exports.TextBeforeAndAfterValue
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
11
- 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 box-shadow: ", ";\n border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height, props => props.showBorderShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null);
12
- const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between; \n padding: 0 20px; \n"])));
13
- const ItemsContainer = exports.ItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(2, 1fr); /* Two columns */\n padding: 20px;\n gap: 10px;\n"])));
14
- const ItemContainer = exports.ItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
11
+ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n // position: relative;\n display: flex;\n flex-direction: column;\n font-family: \"Poppins\", sans-serif;\n color: ", ";\n width: ", ";\n height: ", ";\n background-color: white;\n box-shadow: ", ";\n border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height, props => props.showBorderShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null);
12
+ const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between; \n padding: 0; \n"])));
13
+ const ItemsContainer = exports.ItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(2, 1fr); /* Two columns */\n padding: 20px;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
14
+ const ItemContainer = exports.ItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n justify-content: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
15
15
  const Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 18px;\n font-weight: 500;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
16
16
  const ItemTitle = exports.ItemTitle = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 18px;\n font-weight: 500;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
17
17
  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 gap: 2px;\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n"])));
package/dist/stories/components/TitleDescription.js CHANGED
@@ -16,7 +16,6 @@ var _ComboBoxArrowDownIcon = require("./icons/ComboBoxArrowDownIcon");
16
16
  var _ComboBoxArrowUpIcon = require("./icons/ComboBoxArrowUpIcon");
17
17
  var _ListBox = require("./ListBox");
18
18
  var _TitleDescription = require("./TitleDescription.style");
19
- /* TitleDescription */
20
19
  const TitleDescription = props => {
21
20
  var _data$eventDescriptio, _data$eventDatesValue, _data$eventDatesValue2, _data$objectivesDescr;
22
21
  const {
@@ -88,7 +87,7 @@ const TitleDescription = props => {
88
87
  return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
89
88
  id: "RetailerIconContainer"
90
89
  }, retailerName, retailerName && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
91
- id: "FieldsDelimiter"
90
+ className: "FieldsDelimiter"
92
91
  }, " | "));
93
92
  }
94
93
  };
@@ -178,32 +177,32 @@ const TitleDescription = props => {
178
177
  }, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_TitleDescription.Retailer, {
179
178
  id: "Retailer"
180
179
  }, getRetailerIcon(data.retailer)), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
181
- id: "FilterValue"
182
- }, data.eventType), data.externalEventDescription && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
183
- id: "FieldsDelimiter"
180
+ className: "FilterValue"
181
+ }, data.eventType), data.externalEventDescription && data.externalEventDescription !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
182
+ className: "FieldsDelimiter"
184
183
  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
185
- id: "FilterValue"
186
- }, data.externalEventDescription), data.externalEventID && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
187
- id: "FieldsDelimiter"
184
+ className: "FilterValue"
185
+ }, data.externalEventDescription)), data.externalEventID && data.externalEventID !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
186
+ className: "FieldsDelimiter"
188
187
  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
189
- id: "FilterValue"
190
- }, data.externalEventID), data.storeType && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
191
- id: "FieldsDelimiter"
188
+ className: "FilterValue"
189
+ }, data.externalEventID)), data.storeType && data.storeType !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
190
+ className: "FieldsDelimiter"
192
191
  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
193
- id: "FilterValue"
194
- }, data.storeType), data.category && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
195
- id: "FieldsDelimiter"
192
+ className: "FilterValue"
193
+ }, data.storeType)), data.category && data.category !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
194
+ className: "FieldsDelimiter"
196
195
  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
197
- id: "FilterValue"
198
- }, data.category), data.supplier && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
199
- id: "FieldsDelimiter"
196
+ className: "FilterValue"
197
+ }, data.category)), data.supplier && data.supplier !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
198
+ className: "FieldsDelimiter"
200
199
  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
201
- id: "FilterValue"
202
- }, data.supplier), data.brand && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
203
- id: "FieldsDelimiter"
200
+ className: "FilterValue"
201
+ }, data.supplier)), data.brand && data.brand !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
202
+ className: "FieldsDelimiter"
204
203
  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
205
- id: "FilterValue"
206
- }, data.brand)), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesContainer, {
204
+ className: "FilterValue"
205
+ }, data.brand))), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesContainer, {
207
206
  id: "ObjectiesContainer",
208
207
  showPeriodIcon: showPeriodIcon
209
208
  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectivesDescription, {
package/dist/stories/components/TotalDoughnutChart.js CHANGED
@@ -30,7 +30,8 @@ const TotalDoughnutChart = props => {
30
30
  textcolor,
31
31
  isPercent,
32
32
  hideTitleAndValue,
33
- noDataText
33
+ noDataText,
34
+ textAfterValue
34
35
  } = props;
35
36
  const [DoughnutChartRadius, setDoughnutChartRadius] = (0, _react.useState)(0);
36
37
  const [zoomResolution, setZoomResolution] = (0, _react.useState)(1);
@@ -89,14 +90,26 @@ const TotalDoughnutChart = props => {
89
90
  width: width,
90
91
  textcolor: textcolor
91
92
  }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
93
+ className: "NoDataFoundMessage",
92
94
  noDataText: noDataText
93
95
  }) : /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Controls, {
94
- id: "Controls",
96
+ className: "Controls",
95
97
  height: height,
96
98
  width: width
97
- }, !hideTitleAndValue && /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TitleAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySignAndFormattedValueContainer, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.FormattedValue, {
99
+ }, !hideTitleAndValue && /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TitleAndValueContainer, {
100
+ className: "TitleAndValueContainer"
101
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Title, {
102
+ className: "Title"
103
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySignAndFormattedValueContainer, {
104
+ className: "CurrencySignAndFormattedValueContainer"
105
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.FormattedValue, {
106
+ className: "FormattedValue",
98
107
  width: width
99
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySign, null, 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) : ''), addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartAndLegendContainer, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartContainer, {
108
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySign, {
109
+ className: "CurrencySign"
110
+ }, 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) : ''), textAfterValue ? /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TextAfterValue, {
111
+ className: "TextAfterValue"
112
+ }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartAndLegendContainer, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartContainer, {
100
113
  width: width,
101
114
  height: height,
102
115
  ref: DoughnutChartContainerRef
@@ -146,7 +159,8 @@ TotalDoughnutChart.defaultProps = {
146
159
  textcolor: '#212121',
147
160
  isPercent: false,
148
161
  hideTitleAndValue: false,
149
- noDataText: 'No Data'
162
+ noDataText: 'No Data',
163
+ textAfterValue: ''
150
164
  };
151
165
  function CustomTooltip(_ref) {
152
166
  let {
@@ -156,6 +170,7 @@ function CustomTooltip(_ref) {
156
170
  isPercent = false
157
171
  } = _ref;
158
172
  if (active && payload && payload.length) {
173
+ // eslint-disable-next-line no-nested-ternary
159
174
  const percent = value && value !== 0 && !isPercent ? (payload[0].value / value * 100).toFixed(1) : value && isPercent ? payload[0].value.toFixed(1) : 0;
160
175
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TooltipLabel, null, "".concat(payload[0].name, " ").concat(percent, "%")));
161
176
  }
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartContainer = exports.DoughnutChartAndLegendContainer = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
7
+ exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.TextAfterValue = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartContainer = exports.DoughnutChartAndLegendContainer = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
11
11
  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";
12
12
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n display: flex;\n align-items: center;\n @media (max-width: 1536px) {\n ", "\n }\n\n > * {\n box-sizing: border-box;\n }\n"])), props => props.rootFont, props => props.textColor, props => props.width, props => props.height, scrollableStyles);
13
13
  const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: white;\n border-radius: 12px; \n"])));
@@ -15,15 +15,16 @@ const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateO
15
15
  const TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n width: max-content; // fit-content;\n line-height: normal;\n margin: 0;\n"])));
16
16
  const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n padding: 0 20px;\n"])));
17
17
  const Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
18
- const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
18
+ const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 5px;\n align-items: baseline;\n"])));
19
19
  const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (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"])));
20
20
  const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n"])));
21
- const DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n margin-top: auto;\n padding: 0 20px ;\n margin-bottom: 20px; \n"])));
22
- const DoughnutChartContainer = exports.DoughnutChartContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center; \n min-width: 90px;\n min-height: 90px; \n"])));
23
- const LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n padding-left: 10px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly; \n"])));
24
- const LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 0.5rem;\n align-items: center;\n margin-bottom: 0.375rem;\n"])));
25
- const LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 1;\n"])));
26
- const LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0.875rem;\n"])));
27
- const LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.875rem;\n min-width: 0.875rem;\n height: 0.875rem;\n border-radius: 2px;\n background: ", ";\n"])), props => props.color);
28
- const LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 16px;\n gap: 5px;\n margin: 0;\n display: flex;\n justify-content: space-between;\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
29
- const LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n white-space: nowrap;\n"])));
21
+ const TextAfterValue = exports.TextAfterValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 400;\n font-size: 12px;\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
22
+ const DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n margin-top: auto;\n padding: 0 20px ;\n margin-bottom: 20px; \n"])));
23
+ const DoughnutChartContainer = exports.DoughnutChartContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center; \n min-width: 90px;\n min-height: 90px; \n"])));
24
+ const LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n padding-left: 10px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly; \n"])));
25
+ const LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 0.5rem;\n align-items: center;\n margin-bottom: 0.375rem;\n"])));
26
+ const LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 1;\n"])));
27
+ const LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0.875rem;\n"])));
28
+ const LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.875rem;\n min-width: 0.875rem;\n height: 0.875rem;\n border-radius: 2px;\n background: ", ";\n"])), props => props.color);
29
+ const LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 16px;\n gap: 5px;\n margin: 0;\n display: flex;\n justify-content: space-between;\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
30
+ const LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n white-space: nowrap;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.785",
3
+ "version": "1.0.786",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {