sag_components 1.0.446 → 1.0.448
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.
|
@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.isNumericValue = exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
|
|
7
7
|
const getCurrencySign = (currencyTypeToConvert, value) => {
|
|
8
8
|
if (value === undefined || value === null) {
|
|
9
|
-
return
|
|
9
|
+
return '';
|
|
10
10
|
}
|
|
11
11
|
if (isNaN(parseFloat(value))) {
|
|
12
|
-
return
|
|
12
|
+
return '';
|
|
13
13
|
}
|
|
14
|
-
if (!currencyTypeToConvert) return
|
|
15
|
-
let currencySign =
|
|
16
|
-
const currencyFormatter = new Intl.NumberFormat(
|
|
17
|
-
style:
|
|
14
|
+
if (!currencyTypeToConvert) return '';
|
|
15
|
+
let currencySign = '';
|
|
16
|
+
const currencyFormatter = new Intl.NumberFormat('en-US', {
|
|
17
|
+
style: 'currency',
|
|
18
18
|
currency: currencyTypeToConvert
|
|
19
19
|
});
|
|
20
20
|
currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
|
|
@@ -23,21 +23,21 @@ const getCurrencySign = (currencyTypeToConvert, value) => {
|
|
|
23
23
|
exports.getCurrencySign = getCurrencySign;
|
|
24
24
|
const getFormattedUnits = num => {
|
|
25
25
|
if (num === undefined || num === null) {
|
|
26
|
-
return
|
|
26
|
+
return '';
|
|
27
27
|
}
|
|
28
28
|
if (isNaN(parseFloat(num))) {
|
|
29
|
-
return
|
|
29
|
+
return '';
|
|
30
30
|
}
|
|
31
31
|
if (Math.abs(num) >= 1000000000) {
|
|
32
|
-
return
|
|
32
|
+
return 'B';
|
|
33
33
|
}
|
|
34
34
|
if (Math.abs(num) >= 1000000) {
|
|
35
|
-
return
|
|
35
|
+
return 'M';
|
|
36
36
|
}
|
|
37
37
|
if (Math.abs(num) >= 1000) {
|
|
38
|
-
return
|
|
38
|
+
return 'K';
|
|
39
39
|
}
|
|
40
|
-
return
|
|
40
|
+
return '';
|
|
41
41
|
};
|
|
42
42
|
exports.getFormattedUnits = getFormattedUnits;
|
|
43
43
|
const getFormattedValue = num => {
|
|
@@ -50,13 +50,13 @@ const getFormattedValue = num => {
|
|
|
50
50
|
|
|
51
51
|
// if (typeof num === 'number') {
|
|
52
52
|
if (Math.abs(num) >= 1000000000) {
|
|
53
|
-
return (num / 1000000000).toFixed(1).replace(/\.0$/,
|
|
53
|
+
return (num / 1000000000).toFixed(1).replace(/\.0$/, '');
|
|
54
54
|
}
|
|
55
55
|
if (Math.abs(num) >= 1000000) {
|
|
56
|
-
return (num / 1000000).toFixed(1).replace(/\.0$/,
|
|
56
|
+
return (num / 1000000).toFixed(1).replace(/\.0$/, '');
|
|
57
57
|
}
|
|
58
58
|
if (Math.abs(num) >= 1000) {
|
|
59
|
-
return (num / 1000).toFixed(1).replace(/\.0$/,
|
|
59
|
+
return (num / 1000).toFixed(1).replace(/\.0$/, '');
|
|
60
60
|
}
|
|
61
61
|
return num;
|
|
62
62
|
// }
|
|
@@ -65,7 +65,7 @@ exports.getFormattedValue = getFormattedValue;
|
|
|
65
65
|
const getNumberWithCommas = x => {
|
|
66
66
|
let param = x.toString();
|
|
67
67
|
const pattern = /(-?\d+)(\d{3})/;
|
|
68
|
-
while (pattern.test(param)) param = param.replace(pattern,
|
|
68
|
+
while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
|
|
69
69
|
return param;
|
|
70
70
|
};
|
|
71
71
|
exports.getNumberWithCommas = getNumberWithCommas;
|
|
@@ -28,6 +28,7 @@ const TitleDescription = props => {
|
|
|
28
28
|
width,
|
|
29
29
|
height,
|
|
30
30
|
textcolor,
|
|
31
|
+
showDraft,
|
|
31
32
|
disabled
|
|
32
33
|
} = props;
|
|
33
34
|
const [retailersDataState, setRetailersDataState] = (0, _react.useState)(null);
|
|
@@ -172,7 +173,7 @@ const TitleDescription = props => {
|
|
|
172
173
|
onClick: props => {
|
|
173
174
|
listBoxViewCreativeOnClickHandler(props);
|
|
174
175
|
}
|
|
175
|
-
}))))), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, {
|
|
176
|
+
})))), showDraft && /*#__PURE__*/_react.default.createElement(_TitleDescription.DraftTag, null, "DRAFT")), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, {
|
|
176
177
|
id: "FilterValuesContainer"
|
|
177
178
|
}, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_TitleDescription.Retailer, {
|
|
178
179
|
id: "Retailer"
|
|
@@ -266,5 +267,6 @@ TitleDescription.defaultProps = {
|
|
|
266
267
|
width: '100%',
|
|
267
268
|
height: '100%',
|
|
268
269
|
textcolor: '#212121',
|
|
270
|
+
showDraft: true,
|
|
269
271
|
disabled: false
|
|
270
272
|
};
|
|
@@ -4,33 +4,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.ViewCreativeTextField = exports.ViewCreativeListBoxContainer = exports.ViewCreativeContainer = exports.ViewCreativeButtonAndListBoxContainer = exports.SubLineContainer = exports.Space = exports.RetailerIconContainer = exports.Retailer = exports.PeriodsContainer = exports.PeriodValue = exports.PeriodLabel = exports.PanelContainer = exports.ObjectivesTitle = exports.ObjectivesShowMore = exports.ObjectivesDescription = exports.ObjectiesContainer = exports.ObjectiesAndPeriodsContainer = exports.MainContainer = exports.FilterValuesContainer = exports.FilterValue = exports.FieldsDelimiter = exports.EventNameViewCreativeSubContainer = exports.EventNameAndViewCreativeContainer = exports.EventName = exports.DownloadButtonContainer = exports.BottonsContainer = void 0;
|
|
7
|
+
exports.ViewCreativeTextField = exports.ViewCreativeListBoxContainer = exports.ViewCreativeContainer = exports.ViewCreativeButtonAndListBoxContainer = exports.SubLineContainer = exports.Space = exports.RetailerIconContainer = exports.Retailer = exports.PeriodsContainer = exports.PeriodValue = exports.PeriodLabel = exports.PanelContainer = exports.ObjectivesTitle = exports.ObjectivesShowMore = exports.ObjectivesDescription = exports.ObjectiesContainer = exports.ObjectiesAndPeriodsContainer = exports.MainContainer = exports.FilterValuesContainer = exports.FilterValue = exports.FieldsDelimiter = exports.EventNameViewCreativeSubContainer = exports.EventNameAndViewCreativeContainer = exports.EventName = exports.DraftTag = exports.DownloadButtonContainer = exports.BottonsContainer = 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, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
|
|
11
11
|
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 1rem;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n"])), props => props.textcolor ? props.textcolor : '#000', props => props.width, props => props.height);
|
|
12
12
|
const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-radius: 12px;\n background: #ffffff;\n padding: 1rem 1rem 1rem 2.5rem;\n font-weight: 400;\n line-height: 19px;\n white-space: pre-wrap;\n //overflow: hidden;\n width: 100%;\n @media (max-width: 1536px) {\n padding: 13px 16px;\n }\n @media (max-width: 1366px) {\n padding: 12px 16px;\n }\n"])));
|
|
13
13
|
const EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n"])));
|
|
14
14
|
const EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n align-content: center;\n align-items: center;\n gap: 20px;\n"])));
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const
|
|
15
|
+
const DraftTag = exports.DraftTag = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #E41111;\n border: 2px solid #E41111;\n font-size: 20px;\n padding: 6px 18px;\n"])));
|
|
16
|
+
const EventName = exports.EventName = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n line-height: 19px;\n font-size: 16px;\n font-weight: 500;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n margin: 0; \n"])));
|
|
17
|
+
const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n border: 1px solid #ccc;\n margin-left: 10px;\n padding: 2px 10px;\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), props => props.disabled ? '#B1B1B1' : '#212121', props => !props.disabled ? 'pointer' : 'default');
|
|
18
|
+
const ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n line-height: 19px;\n font-size: 14px;\n font-weight: 400;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n margin: 3px 10px;\n"])));
|
|
19
|
+
const ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n overflow: visible;\n font-size: 18px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
20
|
+
const ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: absolute;\n \n left: ", ";\n top: ", ";\n /* height: ", ";\n width: ", "; */\n\n z-index:1000;\n"])), props => props.left, props => props.top, props => props.height, props => props.width);
|
|
21
|
+
const FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n width: 100%;\n margin: 0.5rem 0 0 0;\n"])));
|
|
22
|
+
const FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n line-height: 19px;\n font-size: 14px;\n font-weight: 400;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n margin: 0;\n"])));
|
|
23
|
+
const FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n color: #ccc;\n margin: 0;\n"])));
|
|
24
|
+
const Retailer = exports.Retailer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n margin: 0;\n margin-inline-end: 5px;\n"])));
|
|
25
|
+
const Space = exports.Space = _styledComponents.default.p(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
|
|
26
|
+
const RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
|
|
27
|
+
const ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: ", ";\n"])), props => !props.showPeriodIcon ? '100%' : '70%');
|
|
28
|
+
const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n margin: 0.5rem 0 0 0;\n"])));
|
|
29
|
+
const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n"])));
|
|
30
|
+
const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n line-height: 19px;\n font-size: 14px;\n font-weight: 400;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n margin: 0;\n"])));
|
|
31
|
+
const ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), props => props.disabled ? '#B1B1B1' : '#1b30aa', props => !props.disabled ? 'pointer' : 'default');
|
|
32
|
+
const BottonsContainer = exports.BottonsContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n\n align-items: center;\n justify-content: flex-end;\n min-height: 1.5rem;\n"])));
|
|
33
|
+
const DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
34
|
+
const PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n align-content: flex-start;\n justify-content: flex-start;\n white-space: pre-wrap;\n margin-left: 40px;\n width: 25%;\n font-size: 14px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n } \n"])));
|
|
35
|
+
const SubLineContainer = exports.SubLineContainer = _styledComponents.default.div(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n"])));
|
|
36
|
+
const PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n line-height: 19px;\n font-size: 14px;\n font-weight: 500;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n } \n"])));
|
|
37
|
+
const PeriodValue = exports.PeriodValue = _styledComponents.default.p(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n line-height: 19px;\n font-size: 14px;\n font-weight: 400;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n margin: 0 0 0 10px;\n"])));
|
|
@@ -62,7 +62,7 @@ const TotalBenchmarkBarchart = props => {
|
|
|
62
62
|
id: i,
|
|
63
63
|
title: data.title,
|
|
64
64
|
value: data.value,
|
|
65
|
-
formattedValue: data.value !== undefined && data.value != null ? currencySign.concat(
|
|
65
|
+
formattedValue: data.value !== undefined && data.value != null ? currencySign.concat((0, _CommonFunctions.getCurrencySign)(currencyType, data.value), (0, _CommonFunctions.getFormattedValue)(data.value), '', (0, _CommonFunctions.getFormattedUnits)(data.value)) : 'No Data',
|
|
66
66
|
color: data.color
|
|
67
67
|
};
|
|
68
68
|
formattedBarChartData.push(formattedData);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sag_components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.448",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"devDependencies": {
|
|
17
17
|
"@babel/cli": "^7.23.4",
|
|
18
18
|
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
19
|
-
"@babel/preset-env": "^7.23.
|
|
19
|
+
"@babel/preset-env": "^7.23.8",
|
|
20
20
|
"@babel/preset-react": "^7.23.3",
|
|
21
21
|
"@babel/preset-typescript": "^7.23.3",
|
|
22
|
-
"@storybook/addon-designs": "^7.0.
|
|
22
|
+
"@storybook/addon-designs": "^7.0.9",
|
|
23
23
|
"@storybook/addon-essentials": "^7.4.6",
|
|
24
24
|
"@storybook/addon-interactions": "^7.4.6",
|
|
25
25
|
"@storybook/addon-links": "^7.4.6",
|
|
@@ -45,13 +45,13 @@
|
|
|
45
45
|
"react-scripts": "^5.0.1",
|
|
46
46
|
"sass": "^1.69.5",
|
|
47
47
|
"sass-loader": "^13.3.3",
|
|
48
|
-
"style-loader": "^3.3.
|
|
48
|
+
"style-loader": "^3.3.4"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.11.3",
|
|
52
52
|
"@emotion/styled": "^11.11.0",
|
|
53
|
-
"@mui/icons-material": "^5.15.
|
|
54
|
-
"@mui/material": "^5.15.
|
|
53
|
+
"@mui/icons-material": "^5.15.5",
|
|
54
|
+
"@mui/material": "^5.15.5",
|
|
55
55
|
"@mui/x-date-pickers": "^6.18.6",
|
|
56
56
|
"classnames": "^2.3.2",
|
|
57
57
|
"dayjs": "^1.11.10",
|