sag_components 1.0.757 → 1.0.758
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.
|
@@ -29,9 +29,9 @@ const TotalHorizontalCharts = props => {
|
|
|
29
29
|
height,
|
|
30
30
|
textColor,
|
|
31
31
|
chartsData,
|
|
32
|
-
showOutgoingBanner,
|
|
33
32
|
noDataText,
|
|
34
|
-
|
|
33
|
+
isDollar,
|
|
34
|
+
showDollarSign
|
|
35
35
|
} = props;
|
|
36
36
|
const barBackgrounds = chartsData.map(bg => bg.color);
|
|
37
37
|
const [widthChartContainer, setWidthChartContainer] = (0, _react.useState)(0);
|
|
@@ -49,6 +49,31 @@ const TotalHorizontalCharts = props => {
|
|
|
49
49
|
setHeightChartContainer(chartContainerRef.current.clientHeight);
|
|
50
50
|
}
|
|
51
51
|
}, [width, height]);
|
|
52
|
+
const displayFormattedValue = value => {
|
|
53
|
+
if (!value) return '';
|
|
54
|
+
let formattedValue = '';
|
|
55
|
+
formattedValue = !isDollar ? ''.concat('X', value.toFixed(1)) : ''.concat(showDollarSign ? '$' : '', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
|
|
56
|
+
return formattedValue;
|
|
57
|
+
};
|
|
58
|
+
const CustomizedLabel = props => {
|
|
59
|
+
const {
|
|
60
|
+
x,
|
|
61
|
+
y,
|
|
62
|
+
width,
|
|
63
|
+
height,
|
|
64
|
+
stroke,
|
|
65
|
+
value
|
|
66
|
+
} = props;
|
|
67
|
+
return /*#__PURE__*/_react.default.createElement("text", {
|
|
68
|
+
x: x + width + 35,
|
|
69
|
+
y: y + 4,
|
|
70
|
+
dy: height / 2,
|
|
71
|
+
dx: -8,
|
|
72
|
+
fill: stroke,
|
|
73
|
+
fontSize: 12,
|
|
74
|
+
textAnchor: "middle"
|
|
75
|
+
}, displayFormattedValue(value));
|
|
76
|
+
};
|
|
52
77
|
const CustomizedTickBarChart = props => {
|
|
53
78
|
const {
|
|
54
79
|
x,
|
|
@@ -109,11 +134,7 @@ const TotalHorizontalCharts = props => {
|
|
|
109
134
|
id: "FormattedValue"
|
|
110
135
|
}, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
|
|
111
136
|
id: "CurrencySign"
|
|
112
|
-
}, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : '', AvgROI ? 'AVG OF X ' : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '')),
|
|
113
|
-
onClick: onBannerClick
|
|
114
|
-
}, /*#__PURE__*/_react.default.createElement(_ExportIcon.default, {
|
|
115
|
-
color: textColor
|
|
116
|
-
}), "View By Banner")), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
|
|
137
|
+
}, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : '', AvgROI ? 'AVG OF X ' : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''))), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
|
|
117
138
|
ref: chartContainerRef
|
|
118
139
|
}, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
119
140
|
height: heightChartContainer - 10,
|
|
@@ -130,7 +151,7 @@ const TotalHorizontalCharts = props => {
|
|
|
130
151
|
}
|
|
131
152
|
}, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
|
|
132
153
|
type: "number",
|
|
133
|
-
domain: [0,
|
|
154
|
+
domain: [0, dataMax => dataMax * 1.25],
|
|
134
155
|
allowDataOverflow: true,
|
|
135
156
|
hide: true
|
|
136
157
|
}), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
|
|
@@ -149,15 +170,11 @@ const TotalHorizontalCharts = props => {
|
|
|
149
170
|
barSize: 20,
|
|
150
171
|
fill: "#8884d8",
|
|
151
172
|
barCategoryGap: 0,
|
|
152
|
-
barGap: 5
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
fill: '#212121',
|
|
158
|
-
formatter: valueBar => "".concat(valueBar)
|
|
159
|
-
}
|
|
160
|
-
}, chartsData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
|
|
173
|
+
barGap: 5
|
|
174
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
|
|
175
|
+
dataKey: "value",
|
|
176
|
+
content: CustomizedLabel
|
|
177
|
+
}), chartsData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
|
|
161
178
|
key: "cell-".concat(index),
|
|
162
179
|
fill: barBackgrounds[index % 20]
|
|
163
180
|
}))), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
|
|
@@ -182,10 +199,10 @@ TotalHorizontalCharts.defaultProps = {
|
|
|
182
199
|
currencySign: false,
|
|
183
200
|
currencyType: 'USD',
|
|
184
201
|
chartsData: [],
|
|
202
|
+
isDollar: true,
|
|
203
|
+
showDollarSign: true,
|
|
185
204
|
width: '100%',
|
|
186
205
|
height: '100%',
|
|
187
206
|
textColor: '#212121',
|
|
188
|
-
|
|
189
|
-
noDataText: 'No Data',
|
|
190
|
-
onBannerClick: () => {}
|
|
207
|
+
noDataText: 'No Data'
|
|
191
208
|
};
|