sag_components 1.0.899 → 1.0.901
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.
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
@@ -8,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
7
|
exports.default = exports.SingleBarLineCharts = void 0;
|
|
9
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
9
|
var _recharts = require("recharts");
|
|
11
|
-
var
|
|
10
|
+
var _reactHookForm = require("react-hook-form");
|
|
12
11
|
var _NoDataFoundMessage = require("./NoDataFoundMessage");
|
|
13
12
|
var _SingleBarLineCharts = require("./SingleBarLineCharts.style");
|
|
14
13
|
var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
|
|
@@ -32,6 +31,7 @@ const SingleBarLineCharts = props => {
|
|
|
32
31
|
showSecondBar,
|
|
33
32
|
isLineChartCurrency,
|
|
34
33
|
isLineChartBolded,
|
|
34
|
+
setLineChartTooltip,
|
|
35
35
|
isTopBarPercent,
|
|
36
36
|
showPeriod,
|
|
37
37
|
currencySign,
|
|
@@ -46,11 +46,23 @@ const SingleBarLineCharts = props => {
|
|
|
46
46
|
clientX: 0,
|
|
47
47
|
clientY: 0
|
|
48
48
|
});
|
|
49
|
+
const CustomTooltipLineChart = props => {
|
|
50
|
+
const {
|
|
51
|
+
active,
|
|
52
|
+
payload
|
|
53
|
+
} = props;
|
|
54
|
+
if (active && payload && payload.length > 0) {
|
|
55
|
+
const totalValue = data.reduce((sum, item) => sum + (item.lineValue || 0), 0);
|
|
56
|
+
const currentValue = payload[0].payload.lineValue;
|
|
57
|
+
const percentage = currentValue / totalValue * 100;
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.CustomTooltip, null, `${percentage.toFixed(1)}%`);
|
|
59
|
+
}
|
|
60
|
+
return null;
|
|
61
|
+
};
|
|
49
62
|
const CustomTooltipBarChart = props => {
|
|
50
63
|
const {
|
|
51
64
|
active,
|
|
52
|
-
payload
|
|
53
|
-
coordinate
|
|
65
|
+
payload
|
|
54
66
|
} = props;
|
|
55
67
|
if (active && payload && payload.length > 0) {
|
|
56
68
|
const totalBarValue = data.reduce((sum, item) => sum + (item.barValue || 0), 0);
|
|
@@ -61,12 +73,7 @@ const SingleBarLineCharts = props => {
|
|
|
61
73
|
// Determine which bar is currently being hovered
|
|
62
74
|
const isSecondBar = payload[0].dataKey === 'secondBarValue';
|
|
63
75
|
const percentage = isSecondBar ? currentSecondBarValue / totalSecondBarValue * 100 : currentBarValue / totalBarValue * 100;
|
|
64
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
65
|
-
content: `${percentage.toFixed(1)}%`,
|
|
66
|
-
top: coordinate.y - (isSecondBar ? currentSecondBarValue : currentBarValue),
|
|
67
|
-
left: coordinate.x,
|
|
68
|
-
direction: "top"
|
|
69
|
-
});
|
|
76
|
+
return /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.CustomTooltip, null, `${percentage.toFixed(1)}%`);
|
|
70
77
|
}
|
|
71
78
|
return null;
|
|
72
79
|
};
|
|
@@ -212,7 +219,13 @@ const SingleBarLineCharts = props => {
|
|
|
212
219
|
stroke: (_legendData$find2 = legendData.find(item => item.iconType === 'LegendUnionIcon')) === null || _legendData$find2 === void 0 ? void 0 : _legendData$find2.iconColor
|
|
213
220
|
}, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
|
|
214
221
|
content: /*#__PURE__*/_react.default.createElement(CustomizedLabelROI, null)
|
|
215
|
-
}))
|
|
222
|
+
})), setLineChartTooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
|
|
223
|
+
cursor: {
|
|
224
|
+
fill: 'transparent'
|
|
225
|
+
},
|
|
226
|
+
content: CustomTooltipLineChart,
|
|
227
|
+
shared: false
|
|
228
|
+
}))), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
216
229
|
height: barChartHeight
|
|
217
230
|
}, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
218
231
|
data: data,
|
|
@@ -281,6 +294,7 @@ SingleBarLineCharts.defaultProps = {
|
|
|
281
294
|
lineChartHeight: 50,
|
|
282
295
|
isLineChartCurrency: false,
|
|
283
296
|
isLineChartBolded: false,
|
|
297
|
+
setLineChartTooltip: false,
|
|
284
298
|
isTopBarPercent: true,
|
|
285
299
|
maxRange: 1,
|
|
286
300
|
showPeriod: true,
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.Title = exports.SegmentedButtonContainer = exports.LinnerDataBoxWrap = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
|
|
7
|
+
exports.Title = exports.SegmentedButtonContainer = exports.LinnerDataBoxWrap = exports.LabelText = exports.LabelBoldText = exports.CustomTooltip = exports.ControlsContainer = exports.Controls = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
var _LinnerDataBox = require("./LinnerDataBox");
|
|
10
10
|
const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
|
|
@@ -57,4 +57,11 @@ const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan`
|
|
|
57
57
|
`;
|
|
58
58
|
const LabelText = exports.LabelText = _styledComponents.default.tspan`
|
|
59
59
|
font-size: 0.6em;
|
|
60
|
+
`;
|
|
61
|
+
const CustomTooltip = exports.CustomTooltip = _styledComponents.default.text`
|
|
62
|
+
font-size: 0.6em;
|
|
63
|
+
border-radius: 5px;
|
|
64
|
+
padding: 8px;
|
|
65
|
+
background: white;
|
|
66
|
+
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
|
|
60
67
|
`;
|
|
@@ -83,7 +83,11 @@ const TotalDoughnutChart = props => {
|
|
|
83
83
|
style: {
|
|
84
84
|
fontWeight: itemsBoldedValues ? '700' : '500'
|
|
85
85
|
}
|
|
86
|
-
}, !isPercent && row.value && currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : '', !isPercent && row.value !== undefined && row.value !== null ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside &&
|
|
86
|
+
}, !isPercent && row.value && currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : '', !isPercent && row.value !== undefined && row.value !== null ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside && /*#__PURE__*/_react.default.createElement("span", {
|
|
87
|
+
style: {
|
|
88
|
+
fontWeight: itemsBoldedValues ? '700' : '400'
|
|
89
|
+
}
|
|
90
|
+
}, ' (', `${Math.round(row.value / value * 100)}%)`), isPercent && row.value && `${row.value.toFixed(1)}%`);
|
|
87
91
|
return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.ControlsContainer, {
|
|
88
92
|
className: className,
|
|
89
93
|
height: height,
|