sag_components 1.0.331 → 1.0.333
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.
- package/.history/package_20231116165916.json +83 -0
- package/.history/package_20231119113637.json +83 -0
- package/dist/stories/components/PerformanceAnalytics.js +109 -24
- package/dist/stories/components/PerformanceAnalytics.style.js +9 -4
- package/dist/stories/components/PerformanceAnalyticsOneColumn.js +13 -29
- package/dist/stories/components/PerformanceAnalyticsOneColumn.style.js +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sag_components",
|
|
3
|
+
"version": "1.0.332",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "react-scripts start",
|
|
8
|
+
"lint": "eslint .",
|
|
9
|
+
"build": "cross-env BABEL_ENV=production babel src -d dist ",
|
|
10
|
+
"storybook": "storybook dev -p 6006",
|
|
11
|
+
"build-storybook": "storybook build"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [],
|
|
14
|
+
"author": "SAG",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@babel/cli": "^7.23.0",
|
|
18
|
+
"@babel/preset-env": "^7.23.3",
|
|
19
|
+
"@babel/preset-react": "^7.23.3",
|
|
20
|
+
"@babel/preset-typescript": "^7.23.3",
|
|
21
|
+
"@storybook/addon-a11y": "^7.4.6",
|
|
22
|
+
"@storybook/addon-essentials": "^7.4.6",
|
|
23
|
+
"@storybook/addon-interactions": "^7.4.6",
|
|
24
|
+
"@storybook/addon-links": "^7.4.6",
|
|
25
|
+
"@storybook/addon-storysource": "^7.4.6",
|
|
26
|
+
"@storybook/blocks": "^7.4.6",
|
|
27
|
+
"@storybook/preset-scss": "^1.0.3",
|
|
28
|
+
"@storybook/react": "^7.4.6",
|
|
29
|
+
"@storybook/react-webpack5": "^7.4.6",
|
|
30
|
+
"@storybook/testing-library": "^0.2.2",
|
|
31
|
+
"cross-env": "^7.0.3",
|
|
32
|
+
"css-loader": "^6.8.1",
|
|
33
|
+
"eslint": "^8.53.0",
|
|
34
|
+
"eslint-config-airbnb": "^19.0.4",
|
|
35
|
+
"eslint-plugin-import": "^2.29.0",
|
|
36
|
+
"eslint-plugin-jsx-a11y": "^6.8.0",
|
|
37
|
+
"eslint-plugin-react": "^7.33.2",
|
|
38
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
39
|
+
"react-dom": "^18.2.0",
|
|
40
|
+
"sass": "^1.69.5",
|
|
41
|
+
"sass-loader": "^13.3.2",
|
|
42
|
+
"style-loader": "^3.3.3"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
46
|
+
"@dnd-kit/core": "^6.0.8",
|
|
47
|
+
"@emotion/react": "^11.11.1",
|
|
48
|
+
"@emotion/styled": "^11.11.0",
|
|
49
|
+
"@fontsource/roboto": "^5.0.8",
|
|
50
|
+
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
51
|
+
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
|
52
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
53
|
+
"@mui/icons-material": "^5.14.18",
|
|
54
|
+
"@mui/material": "^5.14.18",
|
|
55
|
+
"@mui/styled-engine-sc": "^5.14.12",
|
|
56
|
+
"@mui/x-date-pickers": "^6.18.1",
|
|
57
|
+
"@storybook/addon-designs": "^7.0.5",
|
|
58
|
+
"babel-plugin-react-css-modules": "^5.2.6",
|
|
59
|
+
"classnames": "^2.3.2",
|
|
60
|
+
"dayjs": "^1.11.10",
|
|
61
|
+
"hoopy": "^0.1.4",
|
|
62
|
+
"prop-types": "^15.8.1",
|
|
63
|
+
"react": "^18.2.0",
|
|
64
|
+
"react-css-modules": "^4.7.11",
|
|
65
|
+
"react-loading-skeleton": "^3.3.1",
|
|
66
|
+
"react-scripts": "5.0.1",
|
|
67
|
+
"recharts": "^2.9.3",
|
|
68
|
+
"storybook": "^7.4.6",
|
|
69
|
+
"styled-components": "^5.3.1"
|
|
70
|
+
},
|
|
71
|
+
"browserslist": {
|
|
72
|
+
"production": [
|
|
73
|
+
">0.2%",
|
|
74
|
+
"not dead",
|
|
75
|
+
"not op_mini all"
|
|
76
|
+
],
|
|
77
|
+
"development": [
|
|
78
|
+
"last 1 chrome version",
|
|
79
|
+
"last 1 firefox version",
|
|
80
|
+
"last 1 safari version"
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sag_components",
|
|
3
|
+
"version": "1.0.333",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "react-scripts start",
|
|
8
|
+
"lint": "eslint .",
|
|
9
|
+
"build": "cross-env BABEL_ENV=production babel src -d dist ",
|
|
10
|
+
"storybook": "storybook dev -p 6006",
|
|
11
|
+
"build-storybook": "storybook build"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [],
|
|
14
|
+
"author": "SAG",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@babel/cli": "^7.23.0",
|
|
18
|
+
"@babel/preset-env": "^7.23.3",
|
|
19
|
+
"@babel/preset-react": "^7.23.3",
|
|
20
|
+
"@babel/preset-typescript": "^7.23.3",
|
|
21
|
+
"@storybook/addon-a11y": "^7.4.6",
|
|
22
|
+
"@storybook/addon-essentials": "^7.4.6",
|
|
23
|
+
"@storybook/addon-interactions": "^7.4.6",
|
|
24
|
+
"@storybook/addon-links": "^7.4.6",
|
|
25
|
+
"@storybook/addon-storysource": "^7.4.6",
|
|
26
|
+
"@storybook/blocks": "^7.4.6",
|
|
27
|
+
"@storybook/preset-scss": "^1.0.3",
|
|
28
|
+
"@storybook/react": "^7.4.6",
|
|
29
|
+
"@storybook/react-webpack5": "^7.4.6",
|
|
30
|
+
"@storybook/testing-library": "^0.2.2",
|
|
31
|
+
"cross-env": "^7.0.3",
|
|
32
|
+
"css-loader": "^6.8.1",
|
|
33
|
+
"eslint": "^8.53.0",
|
|
34
|
+
"eslint-config-airbnb": "^19.0.4",
|
|
35
|
+
"eslint-plugin-import": "^2.29.0",
|
|
36
|
+
"eslint-plugin-jsx-a11y": "^6.8.0",
|
|
37
|
+
"eslint-plugin-react": "^7.33.2",
|
|
38
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
39
|
+
"react-dom": "^18.2.0",
|
|
40
|
+
"sass": "^1.69.5",
|
|
41
|
+
"sass-loader": "^13.3.2",
|
|
42
|
+
"style-loader": "^3.3.3"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
46
|
+
"@dnd-kit/core": "^6.0.8",
|
|
47
|
+
"@emotion/react": "^11.11.1",
|
|
48
|
+
"@emotion/styled": "^11.11.0",
|
|
49
|
+
"@fontsource/roboto": "^5.0.8",
|
|
50
|
+
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
51
|
+
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
|
52
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
53
|
+
"@mui/icons-material": "^5.14.18",
|
|
54
|
+
"@mui/material": "^5.14.18",
|
|
55
|
+
"@mui/styled-engine-sc": "^5.14.12",
|
|
56
|
+
"@mui/x-date-pickers": "^6.18.1",
|
|
57
|
+
"@storybook/addon-designs": "^7.0.5",
|
|
58
|
+
"babel-plugin-react-css-modules": "^5.2.6",
|
|
59
|
+
"classnames": "^2.3.2",
|
|
60
|
+
"dayjs": "^1.11.10",
|
|
61
|
+
"hoopy": "^0.1.4",
|
|
62
|
+
"prop-types": "^15.8.1",
|
|
63
|
+
"react": "^18.2.0",
|
|
64
|
+
"react-css-modules": "^4.7.11",
|
|
65
|
+
"react-loading-skeleton": "^3.3.1",
|
|
66
|
+
"react-scripts": "5.0.1",
|
|
67
|
+
"recharts": "^2.9.3",
|
|
68
|
+
"storybook": "^7.4.6",
|
|
69
|
+
"styled-components": "^5.3.1"
|
|
70
|
+
},
|
|
71
|
+
"browserslist": {
|
|
72
|
+
"production": [
|
|
73
|
+
">0.2%",
|
|
74
|
+
"not dead",
|
|
75
|
+
"not op_mini all"
|
|
76
|
+
],
|
|
77
|
+
"development": [
|
|
78
|
+
"last 1 chrome version",
|
|
79
|
+
"last 1 firefox version",
|
|
80
|
+
"last 1 safari version"
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
}
|
|
@@ -18,7 +18,7 @@ var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
|
|
|
18
18
|
var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
|
|
19
19
|
var _CommonFunctions = require("./CommonFunctions");
|
|
20
20
|
var _PerformanceAnalytics = require("./PerformanceAnalytics.style");
|
|
21
|
-
var _excluded = ["totalsData", "data", "currencyType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textcolor", "width", "height", "dotCut", "lineChartHeight", "noDataText"];
|
|
21
|
+
var _excluded = ["totalsData", "data", "legendData", "currencyType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textcolor", "width", "height", "dotCut", "lineChartHeight", "noDataText"];
|
|
22
22
|
var INDIVIDUAL_PERFORMANCE_STR = 'Individual Performance';
|
|
23
23
|
var PERCENT_INCREMENTAL_GROWTH_STR = '% Incremental Growth';
|
|
24
24
|
var PERCENT_CONTRIBUTION_OF_TOTAL_STR = '% Contribution of Total';
|
|
@@ -57,6 +57,12 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
57
57
|
existingShoppersValue: _propTypes.number | null,
|
|
58
58
|
existingShoppersPercentValue: _propTypes.number | null
|
|
59
59
|
}] : _ref$data,
|
|
60
|
+
_ref$legendData = _ref.legendData,
|
|
61
|
+
legendData = _ref$legendData === void 0 ? [{
|
|
62
|
+
iconColor: string | null,
|
|
63
|
+
iconType: string | null,
|
|
64
|
+
title: string | null
|
|
65
|
+
}] : _ref$legendData,
|
|
60
66
|
_ref$currencyType = _ref.currencyType,
|
|
61
67
|
currencyType = _ref$currencyType === void 0 ? 'USD' : _ref$currencyType,
|
|
62
68
|
_ref$colorGraphROI = _ref.colorGraphROI,
|
|
@@ -136,7 +142,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
136
142
|
return null;
|
|
137
143
|
};
|
|
138
144
|
var CustomTooltipBarChart = function CustomTooltipBarChart(_ref3) {
|
|
139
|
-
var _payload$0$payload$In
|
|
145
|
+
var _payload$0$payload$In;
|
|
140
146
|
var active = _ref3.active,
|
|
141
147
|
payload = _ref3.payload;
|
|
142
148
|
if (active && payload && payload.length > 0) {
|
|
@@ -146,11 +152,96 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
146
152
|
var redemptionCostPercent = totalCostValue ? ((_payload$0$payload5 = payload[0].payload) === null || _payload$0$payload5 === void 0 ? void 0 : _payload$0$payload5.redemptionCostValue) / totalCostValue * 100 : 0;
|
|
147
153
|
switch (segmentedButtonsFilter) {
|
|
148
154
|
case INDIVIDUAL_PERFORMANCE_STR:
|
|
149
|
-
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer,
|
|
155
|
+
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer, {
|
|
156
|
+
id: "TooltipContainer"
|
|
157
|
+
}, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipBarchart1Container, {
|
|
158
|
+
id: "ToolTipBarchart1Container"
|
|
159
|
+
}, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LegendColorRectangle, {
|
|
160
|
+
id: "LegendColorRectangle",
|
|
161
|
+
color: colorBarchart1
|
|
162
|
+
}), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipBarchart1LabelAndValueContainer, {
|
|
163
|
+
id: "ToolTipBarchart1LabelAndValueContainer"
|
|
164
|
+
}, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
|
|
165
|
+
id: "ToolTipLabelAndValueContainer"
|
|
166
|
+
}, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
|
|
167
|
+
id: "TooltipLabel"
|
|
168
|
+
}, "Package Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
|
|
169
|
+
id: "TooltipValue"
|
|
170
|
+
}, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.packageCostValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.packageCostValue), " (").concat(packageCostPercent.toFixed(1), "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
|
|
171
|
+
id: "ToolTipLabelAndValueContainer"
|
|
172
|
+
}, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
|
|
173
|
+
id: "TooltipLabel"
|
|
174
|
+
}, "Redemption Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
|
|
175
|
+
id: "TooltipValue"
|
|
176
|
+
}, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.redemptionCostValue), " \n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.redemptionCostValue), " (").concat(redemptionCostPercent.toFixed(1), "%) "))))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
|
|
177
|
+
id: "ToolTipLabelAndValueContainer"
|
|
178
|
+
}, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LegendColorRectangle, {
|
|
179
|
+
id: "LegendColorRectangle",
|
|
180
|
+
color: colorBarchart2
|
|
181
|
+
}), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
|
|
182
|
+
id: "TooltipLabel"
|
|
183
|
+
}, "Incremental Sales:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
|
|
184
|
+
id: "TooltipValue"
|
|
185
|
+
}, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.incrementalSalesValue), " \n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.incrementalSalesValue), " "))));
|
|
150
186
|
case PERCENT_INCREMENTAL_GROWTH_STR:
|
|
151
|
-
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer,
|
|
152
|
-
|
|
153
|
-
|
|
187
|
+
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer, {
|
|
188
|
+
id: "TooltipContainer"
|
|
189
|
+
}, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
|
|
190
|
+
id: "ToolTipLabelAndValueContainer"
|
|
191
|
+
}, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LegendColorRectangle, {
|
|
192
|
+
id: "LegendColorRectangle",
|
|
193
|
+
color: colorBarchart2
|
|
194
|
+
}), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
|
|
195
|
+
id: "TooltipLabel"
|
|
196
|
+
}, "Incremental Growth Value:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
|
|
197
|
+
id: "TooltipValue"
|
|
198
|
+
}, "".concat((_payload$0$payload$In = payload[0].payload.IncrementalGrowthValue) === null || _payload$0$payload$In === void 0 ? void 0 : _payload$0$payload$In.toFixed(1), "% "))));
|
|
199
|
+
// case PERCENT_CONTRIBUTION_OF_TOTAL_STR:
|
|
200
|
+
// return (
|
|
201
|
+
// <TooltipContainer id="TooltipContainer">
|
|
202
|
+
// {/* <TooltipTitle>{`${payload[0].payload.retailer}`}</TooltipTitle> */}
|
|
203
|
+
|
|
204
|
+
// <ToolTipBarchart1Container id="ToolTipBarchart1Container">
|
|
205
|
+
// <LegendColorRectangle
|
|
206
|
+
// id="LegendColorRectangle"
|
|
207
|
+
// color={colorBarchart1}
|
|
208
|
+
// />
|
|
209
|
+
|
|
210
|
+
// <ToolTipBarchart1LabelAndValueContainer id="ToolTipBarchart1LabelAndValueContainer">
|
|
211
|
+
// <ToolTipLabelAndValueContainer id="ToolTipLabelAndValueContainer">
|
|
212
|
+
// <TooltipLabel id="TooltipLabel">
|
|
213
|
+
// Contribution of Total Package Cost:
|
|
214
|
+
// </TooltipLabel>
|
|
215
|
+
// <TooltipValue id="TooltipValue">
|
|
216
|
+
// {`${payload[0].payload.contributionPackageCostValue?.toFixed(1)}%`}
|
|
217
|
+
// </TooltipValue>
|
|
218
|
+
// </ToolTipLabelAndValueContainer>
|
|
219
|
+
|
|
220
|
+
// <ToolTipLabelAndValueContainer>
|
|
221
|
+
// <TooltipLabel id="TooltipLabel">
|
|
222
|
+
// Contribution of Total Redemption Cost:
|
|
223
|
+
// </TooltipLabel>
|
|
224
|
+
// <TooltipValue id="TooltipValue">
|
|
225
|
+
// {`${payload[0].payload.contributionRedemptionCostValue?.toFixed(1)}%`}
|
|
226
|
+
// </TooltipValue>
|
|
227
|
+
// </ToolTipLabelAndValueContainer>
|
|
228
|
+
// </ToolTipBarchart1LabelAndValueContainer>
|
|
229
|
+
// </ToolTipBarchart1Container>
|
|
230
|
+
|
|
231
|
+
// <ToolTipLabelAndValueContainer id="ToolTipLabelAndValueContainer">
|
|
232
|
+
// <LegendColorRectangle
|
|
233
|
+
// id="LegendColorRectangle"
|
|
234
|
+
// color={colorBarchart2}
|
|
235
|
+
// />
|
|
236
|
+
// <TooltipLabel id="TooltipLabel">
|
|
237
|
+
// Contribution of Total Incremental Sales:
|
|
238
|
+
// </TooltipLabel>
|
|
239
|
+
// <TooltipValue id="TooltipValue">
|
|
240
|
+
// {`${payload[0].payload.contributionIncrementalSalesValue?.toFixed(1)}%`}
|
|
241
|
+
// </TooltipValue>
|
|
242
|
+
// </ToolTipLabelAndValueContainer>
|
|
243
|
+
// </TooltipContainer>
|
|
244
|
+
// );
|
|
154
245
|
default:
|
|
155
246
|
return null;
|
|
156
247
|
}
|
|
@@ -252,7 +343,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
252
343
|
var formatedData = data.map(function (item) {
|
|
253
344
|
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
|
|
254
345
|
totalValue: item.packageCostValue + item.redemptionCostValue,
|
|
255
|
-
contributionTotalCostValue: item.
|
|
346
|
+
contributionTotalCostValue: item.contributionTotalCostValue
|
|
256
347
|
});
|
|
257
348
|
});
|
|
258
349
|
return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
@@ -261,6 +352,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
261
352
|
width: width
|
|
262
353
|
}, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
263
354
|
data: formatedData,
|
|
355
|
+
maxBarSize: 60,
|
|
264
356
|
margin: {
|
|
265
357
|
top: 30,
|
|
266
358
|
right: 30,
|
|
@@ -274,6 +366,9 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
274
366
|
height: 120,
|
|
275
367
|
stroke: isNegativeValueFound() === true ? '#D0D0D0' : '#000'
|
|
276
368
|
}), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
|
|
369
|
+
cursor: {
|
|
370
|
+
fill: 'transparent'
|
|
371
|
+
},
|
|
277
372
|
content: CustomTooltipBarChart
|
|
278
373
|
}), /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
|
|
279
374
|
y: 0,
|
|
@@ -312,28 +407,18 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
312
407
|
switch (segmentedButtonsFilter) {
|
|
313
408
|
case INDIVIDUAL_PERFORMANCE_STR:
|
|
314
409
|
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
|
|
315
|
-
legendData:
|
|
316
|
-
iconColor: '#1F7677',
|
|
317
|
-
iconType: 'Square',
|
|
318
|
-
title: 'Total Cost'
|
|
319
|
-
}, {
|
|
320
|
-
iconColor: '#90CE9C',
|
|
321
|
-
iconType: 'Square',
|
|
322
|
-
title: 'Incremental Sales'
|
|
323
|
-
}, {
|
|
324
|
-
iconColor: '#9CCB3B',
|
|
325
|
-
iconType: 'LegendUnionIcon',
|
|
326
|
-
title: 'Incremental Sales ROI'
|
|
327
|
-
}]
|
|
410
|
+
legendData: legendData
|
|
328
411
|
});
|
|
329
412
|
case PERCENT_INCREMENTAL_GROWTH_STR:
|
|
330
413
|
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
|
|
331
414
|
legendData: [{
|
|
332
|
-
iconColor:
|
|
415
|
+
iconColor: colorBarchart2,
|
|
333
416
|
iconType: 'Square',
|
|
334
417
|
title: '% Incremental Growth'
|
|
335
418
|
}, {
|
|
336
|
-
iconColor:
|
|
419
|
+
iconColor: {
|
|
420
|
+
colorGraphROI: colorGraphROI
|
|
421
|
+
},
|
|
337
422
|
iconType: 'LegendUnionIcon',
|
|
338
423
|
title: 'Incremental Sales ROI'
|
|
339
424
|
}]
|
|
@@ -341,11 +426,11 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
341
426
|
case PERCENT_CONTRIBUTION_OF_TOTAL_STR:
|
|
342
427
|
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
|
|
343
428
|
legendData: [{
|
|
344
|
-
iconColor:
|
|
429
|
+
iconColor: colorBarchart1,
|
|
345
430
|
iconType: 'Square',
|
|
346
431
|
title: '% Contribution to the Total Cost'
|
|
347
432
|
}, {
|
|
348
|
-
iconColor:
|
|
433
|
+
iconColor: colorBarchart2,
|
|
349
434
|
iconType: 'Square',
|
|
350
435
|
title: '% Contribution to the Inc. Sales'
|
|
351
436
|
}]
|
|
@@ -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.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.SegmentedButtonContainer = exports.ControlsContainer = exports.Controls = void 0;
|
|
7
|
+
exports.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.ToolTipBarchart1LabelAndValueContainer = exports.ToolTipBarchart1Container = exports.SegmentedButtonContainer = exports.LegendColorRectangle = 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;
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
11
11
|
var 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
|
var 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 align-self: center;\n\n > * {\n box-sizing: border-box;\n }\n"])), function (props) {
|
|
13
13
|
return props.rootFont;
|
|
@@ -18,10 +18,15 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
|
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.height;
|
|
20
20
|
});
|
|
21
|
-
var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n padding: 14px 28px;\n background: white;\n ", "\n @media (max-width: 1536px) {\n padding: 12px 24px;\n }
|
|
21
|
+
var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n padding: 14px 28px;\n background: white;\n ", "\n @media (max-width: 1536px) {\n padding: 12px 24px;\n }\n > #SegmentedButtonContainer {\n padding-left: 0;\n margin-bottom: 16px;\n > #Controls {\n background: #f2f2f2;\n }\n }\n"])), scrollableStyles);
|
|
22
22
|
var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 10px 0 0 10px;\n"])));
|
|
23
23
|
var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n border-radius: 5px;\n background: #fff;\n font-family: \"Poppins\", sans-serif;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
|
|
24
24
|
var TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n margin: 0 6px 0 0;\n"])));
|
|
25
25
|
var TooltipValue = exports.TooltipValue = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n width: fit-content;\n margin: 0;\n"])));
|
|
26
26
|
var TooltipTitle = exports.TooltipTitle = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin: 0;\n"])));
|
|
27
|
-
var
|
|
27
|
+
var ToolTipBarchart1Container = exports.ToolTipBarchart1Container = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n"])));
|
|
28
|
+
var ToolTipBarchart1LabelAndValueContainer = exports.ToolTipBarchart1LabelAndValueContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n /* display: flex;\n flex-direction: column; */\n // align-items: center;\n gap: 8px;\n"])));
|
|
29
|
+
var ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
30
|
+
var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.875rem;\n min-width: 0.875rem;\n height: 0.875rem;\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
|
|
31
|
+
return props.color;
|
|
32
|
+
});
|
|
@@ -14,15 +14,15 @@ var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
|
|
|
14
14
|
var _PerformanceAnalyticsOneColumn = require("./PerformanceAnalyticsOneColumn.style");
|
|
15
15
|
var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
|
|
16
16
|
var _CommonFunctions = require("./CommonFunctions");
|
|
17
|
-
var _excluded = ["totalsData", "data", "colorBarchart1", "colorBarchart2", "width", "height", "lineChartHeight", "lineChartValueType", "lineChartValueBold", "topBarPercentSigning", "topBarSigning", "noDataText"];
|
|
17
|
+
var _excluded = ["totalsData", "data", "legendData", "colorBarchart1", "colorBarchart2", "width", "height", "lineChartHeight", "lineChartValueType", "lineChartValueBold", "topBarPercentSigning", "topBarSigning", "noDataText"];
|
|
18
18
|
var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = function PerformanceAnalyticsOneColumn(_ref) {
|
|
19
19
|
var _ref$totalsData = _ref.totalsData,
|
|
20
20
|
totalsData = _ref$totalsData === void 0 ? [{
|
|
21
|
-
title: '
|
|
21
|
+
title: 'title',
|
|
22
22
|
value: 13,
|
|
23
23
|
dotCut: true,
|
|
24
24
|
currency: true,
|
|
25
|
-
currencyType: '
|
|
25
|
+
currencyType: 'USD',
|
|
26
26
|
growthPercent: 14,
|
|
27
27
|
showGrowthPercentSign: true
|
|
28
28
|
}] : _ref$totalsData,
|
|
@@ -37,6 +37,12 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
|
|
|
37
37
|
existingShoppersValue: 66,
|
|
38
38
|
existingShoppersPercentValue: 45
|
|
39
39
|
}] : _ref$data,
|
|
40
|
+
_ref$legendData = _ref.legendData,
|
|
41
|
+
legendData = _ref$legendData === void 0 ? [{
|
|
42
|
+
iconColor: string | null,
|
|
43
|
+
iconType: string | null,
|
|
44
|
+
title: string | null
|
|
45
|
+
}] : _ref$legendData,
|
|
40
46
|
_ref$colorBarchart = _ref.colorBarchart1,
|
|
41
47
|
colorBarchart1 = _ref$colorBarchart === void 0 ? '#1F7677' : _ref$colorBarchart,
|
|
42
48
|
_ref$colorBarchart2 = _ref.colorBarchart2,
|
|
@@ -50,22 +56,16 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
|
|
|
50
56
|
topBarSigning = _ref.topBarSigning,
|
|
51
57
|
noDataText = _ref.noDataText,
|
|
52
58
|
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
53
|
-
// const {
|
|
54
|
-
// totalsData,
|
|
55
|
-
// noDataText,
|
|
56
|
-
// height,
|
|
57
|
-
// width,
|
|
58
|
-
// } = props;
|
|
59
59
|
var CustomTooltipBarChart = function CustomTooltipBarChart(_ref2) {
|
|
60
60
|
var active = _ref2.active,
|
|
61
61
|
payload = _ref2.payload;
|
|
62
62
|
if (active && payload && payload.length > 0) {
|
|
63
63
|
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
|
|
64
64
|
id: "LegendColorRectangle",
|
|
65
|
-
color:
|
|
65
|
+
color: colorBarchart1
|
|
66
66
|
}), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "New Shoppers"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.newShoppersValue), "\n (").concat(payload[0].payload.newShoppersPercentValue.toFixed(2), "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
|
|
67
67
|
id: "LegendColorRectangle",
|
|
68
|
-
color:
|
|
68
|
+
color: colorBarchart2
|
|
69
69
|
}), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "Existing Shoppers"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.existingShoppersValue), "\n (").concat(payload[0].payload.existingShoppersPercentValue.toFixed(2), "%) "))));
|
|
70
70
|
}
|
|
71
71
|
return null;
|
|
@@ -95,7 +95,7 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
|
|
|
95
95
|
fontSize: "16px",
|
|
96
96
|
textAnchor: "middle",
|
|
97
97
|
dominantBaseline: "middle"
|
|
98
|
-
}, "".concat(getTopBarSigning(topBarSigning)).concat(totalValue).concat(topBarPercentSigning ? '%' : '')));
|
|
98
|
+
}, "".concat(getTopBarSigning(topBarSigning), "\n ").concat((0, _CommonFunctions.getFormattedValue)(totalValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(totalValue), "\n ").concat(topBarPercentSigning ? '%' : '')));
|
|
99
99
|
};
|
|
100
100
|
var CustomizedTickBarChart = function CustomizedTickBarChart(props) {
|
|
101
101
|
var x = props.x,
|
|
@@ -187,23 +187,7 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
|
|
|
187
187
|
};
|
|
188
188
|
var displayLegendData = function displayLegendData() {
|
|
189
189
|
return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
|
|
190
|
-
legendData:
|
|
191
|
-
iconColor: '#1F7677',
|
|
192
|
-
iconType: 'Square',
|
|
193
|
-
title: '% New Shoppers'
|
|
194
|
-
}, {
|
|
195
|
-
iconColor: '#1F7677',
|
|
196
|
-
iconType: 'LegendUnionIcon',
|
|
197
|
-
title: '% New Shoppers'
|
|
198
|
-
}, {
|
|
199
|
-
iconColor: '#90CE9C',
|
|
200
|
-
iconType: 'Square',
|
|
201
|
-
title: '# Existing Shoppers'
|
|
202
|
-
}, {
|
|
203
|
-
iconColor: '#9CCB3B',
|
|
204
|
-
iconType: 'LegendUnionIcon',
|
|
205
|
-
title: '# Existing Shoppers'
|
|
206
|
-
}]
|
|
190
|
+
legendData: legendData
|
|
207
191
|
});
|
|
208
192
|
};
|
|
209
193
|
var CustomizedLabelROI = function CustomizedLabelROI(props) {
|
|
@@ -8,7 +8,7 @@ exports.TotalsDataContainer = exports.TooltipValue = exports.TooltipTitle = expo
|
|
|
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;
|
|
11
|
-
var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family:
|
|
11
|
+
var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-self: center;\n\n > * {\n box-sizing: border-box;\n }\n"])), function (props) {
|
|
12
12
|
return props.rootFont;
|
|
13
13
|
}, function (props) {
|
|
14
14
|
return props.textColor;
|
|
@@ -19,7 +19,7 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
|
|
|
19
19
|
});
|
|
20
20
|
var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n padding: 24px 40px;\n background: white;\n @media (max-width: 1536px) {\n padding: 12px 32px;\n }\n"])));
|
|
21
21
|
var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 10px 0 0 10px;\n"])));
|
|
22
|
-
var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["
|
|
22
|
+
var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
23
23
|
var LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
|
|
24
24
|
var LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 10px;\n }\n @media (max-width: 1366px) {\n font-size: 8px;\n }\n"])));
|
|
25
25
|
var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n border-radius: 5px;\n background: #fff;\n font-family: \"Poppins\", sans-serif;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
|