sag_components 1.0.204 → 1.0.206
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.
|
@@ -48,30 +48,50 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
|
|
|
48
48
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
49
49
|
heightFactor = _useState4[0],
|
|
50
50
|
setHeightFactor = _useState4[1];
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
setFormattedBarChartData = _useState6[1];
|
|
51
|
+
|
|
52
|
+
//const [formattedBarChartData, setFormattedBarChartData] = useState([]);
|
|
53
|
+
|
|
55
54
|
var controlsContainerRef = (0, _react.useRef)();
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
55
|
+
|
|
56
|
+
// useEffect(() => {
|
|
57
|
+
// let tempFormattedBarChartData = [];
|
|
58
|
+
|
|
59
|
+
// const currencySign =
|
|
60
|
+
// currency == true ? getCurrencySign(currencyType).toString() : "";
|
|
61
|
+
|
|
62
|
+
// if (barChartData && barChartData.length === 2) {
|
|
63
|
+
// tempFormattedBarChartData.push({
|
|
64
|
+
// title1: barChartData[0].title,
|
|
65
|
+
// value1: barChartData[0].value,
|
|
66
|
+
// formattedValue1: currencySign.concat(
|
|
67
|
+
// "",
|
|
68
|
+
// getFormattedValue(barChartData[0].value),
|
|
69
|
+
// "",
|
|
70
|
+
// getFormattedUnits(barChartData[0].value)
|
|
71
|
+
// ),
|
|
72
|
+
|
|
73
|
+
// color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
|
|
74
|
+
|
|
75
|
+
// title2: barChartData[1].title,
|
|
76
|
+
// value2: barChartData[1].value,
|
|
77
|
+
// formattedValue2: currencySign.concat(
|
|
78
|
+
// "",
|
|
79
|
+
// getFormattedValue(barChartData[1].value),
|
|
80
|
+
// "",
|
|
81
|
+
// getFormattedUnits(barChartData[1].value)
|
|
82
|
+
// ),
|
|
83
|
+
// color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF",
|
|
84
|
+
// });
|
|
85
|
+
|
|
86
|
+
// console.log("barChartData changed", barChartData);
|
|
87
|
+
// setFormattedBarChartData(tempFormattedBarChartData);
|
|
88
|
+
// console.log(
|
|
89
|
+
// "tempFormattedBarChartData changed",
|
|
90
|
+
// tempFormattedBarChartData
|
|
91
|
+
// );
|
|
92
|
+
// }
|
|
93
|
+
// }, [barChartData, currency, currencyType]);
|
|
94
|
+
|
|
75
95
|
(0, _react.useEffect)(function () {
|
|
76
96
|
var offsetWidth = controlsContainerRef.current.offsetWidth;
|
|
77
97
|
setRootFont(getRootFont(offsetWidth));
|
|
@@ -89,6 +109,27 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
|
|
|
89
109
|
var getSizeFactor = function getSizeFactor() {
|
|
90
110
|
return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
|
|
91
111
|
};
|
|
112
|
+
var getFormattedBarChartData = function getFormattedBarChartData() {
|
|
113
|
+
var tempFormattedBarChartData = [];
|
|
114
|
+
var currencySign = currency == true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : "";
|
|
115
|
+
if (barChartData && barChartData.length === 2) {
|
|
116
|
+
tempFormattedBarChartData.push({
|
|
117
|
+
title1: barChartData[0].title,
|
|
118
|
+
value1: barChartData[0].value,
|
|
119
|
+
formattedValue1: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)),
|
|
120
|
+
color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
|
|
121
|
+
title2: barChartData[1].title,
|
|
122
|
+
value2: barChartData[1].value,
|
|
123
|
+
formattedValue2: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)),
|
|
124
|
+
color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
//console.log("barChartData changed", barChartData);
|
|
128
|
+
//setFormattedBarChartData(tempFormattedBarChartData);
|
|
129
|
+
console.log("tempFormattedBarChartData changed", tempFormattedBarChartData);
|
|
130
|
+
return tempFormattedBarChartData;
|
|
131
|
+
}
|
|
132
|
+
};
|
|
92
133
|
return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ControlsContainer, {
|
|
93
134
|
id: "ControlsContainer",
|
|
94
135
|
height: height,
|
|
@@ -123,10 +164,10 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
|
|
|
123
164
|
backgroundColor: "#F2F2F2"
|
|
124
165
|
})) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
|
|
125
166
|
id: "BarchartContainer"
|
|
126
|
-
},
|
|
167
|
+
}, getFormattedBarChartData().length === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
127
168
|
width: 224 * getSizeFactor(),
|
|
128
169
|
height: 150 * heightFactor,
|
|
129
|
-
data:
|
|
170
|
+
data: getFormattedBarChartData(),
|
|
130
171
|
margin: {
|
|
131
172
|
top: 40 * heightFactor,
|
|
132
173
|
right: -25 * getSizeFactor(),
|
|
@@ -138,7 +179,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
|
|
|
138
179
|
vertical: false
|
|
139
180
|
}), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
140
181
|
dataKey: "value1",
|
|
141
|
-
fill:
|
|
182
|
+
fill: getFormattedBarChartData()[0].color1,
|
|
142
183
|
name: "Actual",
|
|
143
184
|
maxBarSize: 60 * getSizeFactor(),
|
|
144
185
|
radius: [5, 5, 0, 0]
|
|
@@ -148,7 +189,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
|
|
|
148
189
|
fill: textColor
|
|
149
190
|
})), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
150
191
|
dataKey: "value2",
|
|
151
|
-
fill:
|
|
192
|
+
fill: getFormattedBarChartData()[0].color2,
|
|
152
193
|
name: "Base Line",
|
|
153
194
|
maxBarSize: 60 * getSizeFactor(),
|
|
154
195
|
radius: [5, 5, 0, 0],
|
|
@@ -157,13 +198,13 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
|
|
|
157
198
|
dataKey: "formattedValue2",
|
|
158
199
|
position: "top",
|
|
159
200
|
fill: textColor
|
|
160
|
-
}))),
|
|
201
|
+
}))), getFormattedBarChartData().length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
|
|
161
202
|
id: "BottomDetailsRowContainer"
|
|
162
203
|
}, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
|
|
163
204
|
id: "BottomDetailsRowTitle1"
|
|
164
|
-
},
|
|
205
|
+
}, getFormattedBarChartData()[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
|
|
165
206
|
id: "BottomDetailsRowTitle2"
|
|
166
|
-
},
|
|
207
|
+
}, getFormattedBarChartData()[0].title2)) : "")) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
|
|
167
208
|
noDataText: noDataText
|
|
168
209
|
}));
|
|
169
210
|
};
|