sag_components 1.0.415 → 1.0.417
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.
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
|
|
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,17 @@ 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
|
-
exports.getNumberWithCommas = getNumberWithCommas;
|
|
71
|
+
exports.getNumberWithCommas = getNumberWithCommas;
|
|
72
|
+
const isNumericValue = num => {
|
|
73
|
+
if (num === undefined || num === null) {
|
|
74
|
+
return false;
|
|
75
|
+
}
|
|
76
|
+
if (isNaN(parseFloat(num))) {
|
|
77
|
+
return false;
|
|
78
|
+
}
|
|
79
|
+
return true;
|
|
80
|
+
};
|
|
81
|
+
exports.isNumericValue = isNumericValue;
|
|
@@ -10,9 +10,9 @@ var _recharts = require("recharts");
|
|
|
10
10
|
var _ArrowUpIcon = require("./icons/ArrowUpIcon");
|
|
11
11
|
var _ArrowDownIcon = require("./icons/ArrowDownIcon");
|
|
12
12
|
var _NoDataFoundMessage = require("./NoDataFoundMessage");
|
|
13
|
+
var _CommonFunctions = require("./CommonFunctions");
|
|
13
14
|
var _Benchmark = require("./Benchmark");
|
|
14
15
|
var _TotalBenchmarkAreachart = require("./TotalBenchmarkAreachart.style");
|
|
15
|
-
var _CommonFunctions = require("./CommonFunctions");
|
|
16
16
|
/* TotalBenchmarkAreachart */
|
|
17
17
|
const TotalBenchmarkAreachart = props => {
|
|
18
18
|
const {
|
|
@@ -36,14 +36,16 @@ const TotalBenchmarkAreachart = props => {
|
|
|
36
36
|
opacity,
|
|
37
37
|
value1Title,
|
|
38
38
|
value2Title,
|
|
39
|
-
noDataText
|
|
39
|
+
noDataText,
|
|
40
|
+
startWeekRange = 0,
|
|
41
|
+
endWeekRange = 0
|
|
40
42
|
} = props;
|
|
41
43
|
const DEFAULT_ROOT_FONT = 16;
|
|
42
44
|
const DEFAULT_COMPONENT_WIDTH = 250;
|
|
43
45
|
const DEFAULT_COMPONENT_HEIGHT = 280;
|
|
44
|
-
const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat(
|
|
46
|
+
const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px"));
|
|
45
47
|
const anotherRef = (0, _react.useRef)(null);
|
|
46
|
-
const [activeLabel, setActiveLabel] = (0, _react.useState)(
|
|
48
|
+
const [activeLabel, setActiveLabel] = (0, _react.useState)("");
|
|
47
49
|
const controlsContainerRef = (0, _react.useRef)();
|
|
48
50
|
(0, _react.useEffect)(() => {
|
|
49
51
|
const {
|
|
@@ -52,16 +54,16 @@ const TotalBenchmarkAreachart = props => {
|
|
|
52
54
|
setRootFont(getRootFont(offsetWidth));
|
|
53
55
|
}, [width]);
|
|
54
56
|
const getRootFont = width => {
|
|
55
|
-
const relation = width.toString().replace(
|
|
56
|
-
const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat(
|
|
57
|
+
const relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
|
|
58
|
+
const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
|
|
57
59
|
return fontRoot;
|
|
58
60
|
};
|
|
59
|
-
const getSizeFactor = () => rootFont.toString().replace(
|
|
61
|
+
const getSizeFactor = () => rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
|
|
60
62
|
const getArrowSign = arrowSign => {
|
|
61
63
|
if (!arrowSign) {
|
|
62
|
-
return
|
|
64
|
+
return "";
|
|
63
65
|
}
|
|
64
|
-
if (arrowSign ===
|
|
66
|
+
if (arrowSign === "up") {
|
|
65
67
|
return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
|
|
66
68
|
id: "DetailsRowArrowContainer",
|
|
67
69
|
value: value
|
|
@@ -78,24 +80,46 @@ const TotalBenchmarkAreachart = props => {
|
|
|
78
80
|
height: 25 * getSizeFactor()
|
|
79
81
|
}));
|
|
80
82
|
};
|
|
81
|
-
const CustomTick =
|
|
82
|
-
|
|
83
|
+
const CustomTick = item => {
|
|
84
|
+
var _payload$value, _payload$value2, _payload$value3;
|
|
85
|
+
const {
|
|
83
86
|
x,
|
|
84
87
|
y,
|
|
85
88
|
stroke,
|
|
86
89
|
payload
|
|
87
|
-
} =
|
|
90
|
+
} = item;
|
|
91
|
+
const currentWeek = (payload === null || payload === void 0 ? void 0 : (_payload$value = payload.value) === null || _payload$value === void 0 ? void 0 : _payload$value.length) > 1 ? payload === null || payload === void 0 ? void 0 : (_payload$value2 = payload.value) === null || _payload$value2 === void 0 ? void 0 : _payload$value2.substring(1, payload === null || payload === void 0 ? void 0 : (_payload$value3 = payload.value) === null || _payload$value3 === void 0 ? void 0 : _payload$value3.length) : 0;
|
|
92
|
+
console.log("payload?.value", currentWeek);
|
|
93
|
+
if (!(0, _CommonFunctions.isNumericValue)(currentWeek) || !(0, _CommonFunctions.isNumericValue)(startWeekRange) || !(0, _CommonFunctions.isNumericValue)(endWeekRange)) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
88
96
|
return /*#__PURE__*/_react.default.createElement("g", {
|
|
89
97
|
transform: "translate(".concat(x, ",").concat(y, ")")
|
|
90
|
-
},
|
|
98
|
+
}, currentWeek === startWeekRange ? /*#__PURE__*/_react.default.createElement("rect", {
|
|
91
99
|
x: -15,
|
|
92
100
|
y: 0,
|
|
93
|
-
width: "
|
|
101
|
+
width: "70",
|
|
94
102
|
height: "18",
|
|
95
103
|
rx: 9,
|
|
96
|
-
fill: xselectedColor
|
|
97
|
-
fillOpacity
|
|
98
|
-
})
|
|
104
|
+
fill: xselectedColor
|
|
105
|
+
//fillOpacity="0.30"
|
|
106
|
+
}) : currentWeek > startWeekRange && currentWeek < endWeekRange ? /*#__PURE__*/_react.default.createElement("rect", {
|
|
107
|
+
x: -30,
|
|
108
|
+
y: 0,
|
|
109
|
+
width: "80",
|
|
110
|
+
height: "18",
|
|
111
|
+
rx: 9,
|
|
112
|
+
fill: xselectedColor
|
|
113
|
+
//fillOpacity="0.30"
|
|
114
|
+
}) : currentWeek === endWeekRange ? /*#__PURE__*/_react.default.createElement("rect", {
|
|
115
|
+
x: -30,
|
|
116
|
+
y: 0,
|
|
117
|
+
width: "55",
|
|
118
|
+
height: "18",
|
|
119
|
+
rx: 9,
|
|
120
|
+
fill: xselectedColor
|
|
121
|
+
//fillOpacity="0.30"
|
|
122
|
+
}) : "", /*#__PURE__*/_react.default.createElement("text", {
|
|
99
123
|
x: 0,
|
|
100
124
|
y: 14,
|
|
101
125
|
dx: -10,
|
|
@@ -103,12 +127,12 @@ const TotalBenchmarkAreachart = props => {
|
|
|
103
127
|
fontSize: "14px"
|
|
104
128
|
}, payload.value));
|
|
105
129
|
};
|
|
106
|
-
const CustomTooltip =
|
|
130
|
+
const CustomTooltip = _ref => {
|
|
107
131
|
let {
|
|
108
132
|
active,
|
|
109
133
|
payload,
|
|
110
134
|
label
|
|
111
|
-
} =
|
|
135
|
+
} = _ref;
|
|
112
136
|
if (active && payload && payload.length) {
|
|
113
137
|
setActiveLabel(label);
|
|
114
138
|
return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipTitle, null, "".concat(label)), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipLabel, null, "".concat(value1Title, " ").concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value))), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipLabel, null, "".concat(value2Title, " ").concat((0, _CommonFunctions.getFormattedValue)(payload[1].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[1].value))));
|
|
@@ -129,9 +153,9 @@ const TotalBenchmarkAreachart = props => {
|
|
|
129
153
|
id: "Title"
|
|
130
154
|
}, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ValueAndBenchmarkContainer, {
|
|
131
155
|
id: "ValueAndBenchmarkContainer"
|
|
132
|
-
}, value !== undefined && value != null ? getArrowSign(arrowSign) :
|
|
156
|
+
}, value !== undefined && value != null ? getArrowSign(arrowSign) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
|
|
133
157
|
id: "FormattedValue"
|
|
134
|
-
}, value !== undefined && value != null ? /*#__PURE__*/_react.default.createElement("span", null, "".concat(value, " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.CurrencySign, null, "%")) :
|
|
158
|
+
}, value !== undefined && value != null ? /*#__PURE__*/_react.default.createElement("span", null, "".concat(value, " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.CurrencySign, null, "%")) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValueNoDataMessage, null, value === undefined || value === null ? "No Data" : ""), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.BenchmarkContainer, {
|
|
135
159
|
id: "BenchmarkContainer"
|
|
136
160
|
}, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
|
|
137
161
|
id: "Benchmark",
|
|
@@ -145,7 +169,7 @@ const TotalBenchmarkAreachart = props => {
|
|
|
145
169
|
linearGradientUnderAvarageColor: "#FDB1B1",
|
|
146
170
|
underAvarageColor: "#FD5959",
|
|
147
171
|
backgroundColor: "#F2F2F2"
|
|
148
|
-
})) :
|
|
172
|
+
})) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
|
|
149
173
|
ref: anotherRef,
|
|
150
174
|
id: "AreaChartContainer"
|
|
151
175
|
}, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
@@ -197,9 +221,9 @@ const TotalBenchmarkAreachart = props => {
|
|
|
197
221
|
tick: item => /*#__PURE__*/_react.default.createElement(CustomTick, item),
|
|
198
222
|
tickLine: false,
|
|
199
223
|
style: {
|
|
200
|
-
fontWeight:
|
|
201
|
-
stroke:
|
|
202
|
-
strokeWidth:
|
|
224
|
+
fontWeight: "700",
|
|
225
|
+
stroke: "#D0D0D0",
|
|
226
|
+
strokeWidth: "1px"
|
|
203
227
|
}
|
|
204
228
|
}), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
|
|
205
229
|
strokeDasharray: "3 3"
|
|
@@ -224,77 +248,77 @@ const TotalBenchmarkAreachart = props => {
|
|
|
224
248
|
exports.TotalBenchmarkAreachart = TotalBenchmarkAreachart;
|
|
225
249
|
var _default = exports.default = TotalBenchmarkAreachart;
|
|
226
250
|
TotalBenchmarkAreachart.defaultProps = {
|
|
227
|
-
title:
|
|
251
|
+
title: "String",
|
|
228
252
|
value: 300,
|
|
229
|
-
arrowSign:
|
|
253
|
+
arrowSign: "$",
|
|
230
254
|
addingBenchmark: true,
|
|
231
|
-
benchmarkTotalValue:
|
|
255
|
+
benchmarkTotalValue: "",
|
|
232
256
|
benchmarkValue: null,
|
|
233
257
|
areaChartData: [{
|
|
234
|
-
title:
|
|
258
|
+
title: "W20",
|
|
235
259
|
value1: 542366,
|
|
236
260
|
value2: 247715
|
|
237
261
|
}, {
|
|
238
|
-
title:
|
|
262
|
+
title: "W21",
|
|
239
263
|
value1: 699511,
|
|
240
264
|
value2: 252313
|
|
241
265
|
}, {
|
|
242
|
-
title:
|
|
266
|
+
title: "W22",
|
|
243
267
|
value1: 403092,
|
|
244
268
|
value2: 260822
|
|
245
269
|
}, {
|
|
246
|
-
title:
|
|
270
|
+
title: "W23",
|
|
247
271
|
value1: 396184,
|
|
248
272
|
value2: 264325
|
|
249
273
|
}, {
|
|
250
|
-
title:
|
|
274
|
+
title: "W24",
|
|
251
275
|
value1: 415317,
|
|
252
276
|
value2: 269243
|
|
253
277
|
}, {
|
|
254
|
-
title:
|
|
278
|
+
title: "W25",
|
|
255
279
|
value1: 568376,
|
|
256
280
|
value2: 269592
|
|
257
281
|
}, {
|
|
258
|
-
title:
|
|
282
|
+
title: "W26",
|
|
259
283
|
value1: 1078121,
|
|
260
284
|
value2: 269949
|
|
261
285
|
}, {
|
|
262
|
-
title:
|
|
286
|
+
title: "W27",
|
|
263
287
|
value1: 347930,
|
|
264
288
|
value2: 270735
|
|
265
289
|
}, {
|
|
266
|
-
title:
|
|
290
|
+
title: "W28",
|
|
267
291
|
value1: 346258,
|
|
268
292
|
value2: 271200
|
|
269
293
|
}, {
|
|
270
|
-
title:
|
|
294
|
+
title: "W29",
|
|
271
295
|
value1: 350184,
|
|
272
296
|
value2: 270324
|
|
273
297
|
}, {
|
|
274
|
-
title:
|
|
298
|
+
title: "W30",
|
|
275
299
|
value1: 312790,
|
|
276
300
|
value2: 266821
|
|
277
301
|
}, {
|
|
278
|
-
title:
|
|
302
|
+
title: "W31",
|
|
279
303
|
value1: 335076,
|
|
280
304
|
value2: 267064
|
|
281
305
|
}, {
|
|
282
|
-
title:
|
|
306
|
+
title: "W32",
|
|
283
307
|
value1: 311037,
|
|
284
308
|
value2: 266821
|
|
285
309
|
}],
|
|
286
|
-
width:
|
|
287
|
-
height:
|
|
288
|
-
textcolor:
|
|
289
|
-
areaChart1Color:
|
|
290
|
-
areaChart2Color:
|
|
291
|
-
xselectedColor:
|
|
292
|
-
fillChart1Color:
|
|
293
|
-
fillChart2Color:
|
|
294
|
-
startOffset:
|
|
295
|
-
endOffset:
|
|
296
|
-
opacity:
|
|
297
|
-
value1Title:
|
|
298
|
-
value2Title:
|
|
299
|
-
noDataText:
|
|
310
|
+
width: "100%",
|
|
311
|
+
height: "100%",
|
|
312
|
+
textcolor: "#212121",
|
|
313
|
+
areaChart1Color: "#BD9EFF",
|
|
314
|
+
areaChart2Color: "#96B4FF",
|
|
315
|
+
xselectedColor: "#42977A",
|
|
316
|
+
fillChart1Color: "rgba(34, 158, 56, 0.20)",
|
|
317
|
+
fillChart2Color: "rgba(255, 84, 84, 0.2)",
|
|
318
|
+
startOffset: "17.04%",
|
|
319
|
+
endOffset: "17.04%",
|
|
320
|
+
opacity: "191",
|
|
321
|
+
value1Title: "Actual Sales",
|
|
322
|
+
value2Title: "Baseline Sales",
|
|
323
|
+
noDataText: ""
|
|
300
324
|
};
|
|
@@ -20,5 +20,5 @@ const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledC
|
|
|
20
20
|
const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-end;\n width: 22px;\n @media (max-width: 1366px) {\n width: 12px;\n }\n @media (max-width: 1536px) {\n width: 14px;\n }\n"])));
|
|
21
21
|
const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n"])));
|
|
22
22
|
const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
|
|
23
|
-
const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size: 16px;\n margin: 0
|
|
23
|
+
const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size: 16px;\n margin: 0;\n"])));
|
|
24
24
|
const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1.5rem;\n"])));
|