sag_components 1.0.546 → 1.0.548
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.
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.BarChartsByWeeks = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _recharts = require("recharts");
|
|
10
|
+
var _CommonFunctions = require("./CommonFunctions");
|
|
11
|
+
var _BarChartsByWeeks = require("./BarChartsByWeeks.style");
|
|
12
|
+
/* BarChartsByWeeks */
|
|
13
|
+
const BarChartsByWeeks = props => {
|
|
14
|
+
const {
|
|
15
|
+
title,
|
|
16
|
+
barChartData,
|
|
17
|
+
width,
|
|
18
|
+
height,
|
|
19
|
+
barChartColor,
|
|
20
|
+
xselectedColor,
|
|
21
|
+
tooltipTitle,
|
|
22
|
+
startWeekRange = 0,
|
|
23
|
+
endWeekRange = 0,
|
|
24
|
+
yAxisCounter,
|
|
25
|
+
isPercentValue,
|
|
26
|
+
interval
|
|
27
|
+
} = props;
|
|
28
|
+
const [BarChartContainerWidth, setBarChartContainerWidth] = (0, _react.useState)(0);
|
|
29
|
+
const [BarChartContainerHeight, setBarChartContainerHeight] = (0, _react.useState)(0);
|
|
30
|
+
const anotherRef = (0, _react.useRef)(null);
|
|
31
|
+
const [activeLabel, setActiveLabel] = (0, _react.useState)("");
|
|
32
|
+
const controlsContainerRef = (0, _react.useRef)();
|
|
33
|
+
(0, _react.useEffect)(() => {
|
|
34
|
+
const {
|
|
35
|
+
offsetWidth
|
|
36
|
+
} = controlsContainerRef.current;
|
|
37
|
+
setBarChartContainerWidth(offsetWidth - 20);
|
|
38
|
+
}, [width]);
|
|
39
|
+
(0, _react.useEffect)(() => {
|
|
40
|
+
const {
|
|
41
|
+
offsetHeight
|
|
42
|
+
} = controlsContainerRef.current;
|
|
43
|
+
setBarChartContainerHeight(offsetHeight - 40);
|
|
44
|
+
}, [height]);
|
|
45
|
+
const CustomTooltip = _ref => {
|
|
46
|
+
let {
|
|
47
|
+
active,
|
|
48
|
+
payload,
|
|
49
|
+
label
|
|
50
|
+
} = _ref;
|
|
51
|
+
if (active && payload && payload.length) {
|
|
52
|
+
setActiveLabel(label);
|
|
53
|
+
const week = label && (label === null || label === void 0 ? void 0 : label.toString().length) === 6 ? label.toString().substring(4, 6) : 0;
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipTitle, null, "Week: ".concat(week)), /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipLabel, null, "".concat(tooltipTitle, " \n ").concat(payload[0].value ? isPercentValue ? "".concat("", payload[0].value.toFixed(1), "%") : "".concat("", (0, _CommonFunctions.getFormattedValue)(payload[0].value), (0, _CommonFunctions.getFormattedUnits)(payload[0].value)) : "", " \n ")));
|
|
55
|
+
}
|
|
56
|
+
return null;
|
|
57
|
+
};
|
|
58
|
+
const displayEventWeeksElements = () => {
|
|
59
|
+
var _getWeek;
|
|
60
|
+
if (!barChartData || barChartData.length === 0) return "";
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElementsContainer, {
|
|
62
|
+
id: "EventWeeksLegendDataElementsContainer"
|
|
63
|
+
}, (_getWeek = getWeek()) === null || _getWeek === void 0 ? void 0 : _getWeek.map(item => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElement, {
|
|
64
|
+
id: "EventWeeksLegendDataElement",
|
|
65
|
+
color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : "",
|
|
66
|
+
textColor: item.title >= startWeekRange && item.title <= endWeekRange ? "#212121" : "#B1B1B1",
|
|
67
|
+
fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
|
|
68
|
+
borderLeftRadius: item.title === startWeekRange ? "12px" : "0px",
|
|
69
|
+
borderRightRadius: item.title === endWeekRange ? "12px" : "0px"
|
|
70
|
+
}, item.titleWeek)));
|
|
71
|
+
};
|
|
72
|
+
const displayEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendMainContainer, {
|
|
73
|
+
id: "EventWeeksLegendMainContainer"
|
|
74
|
+
}, displayEventWeeksElements());
|
|
75
|
+
const getWeek = () => {
|
|
76
|
+
if (!barChartData || (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) === 0) return null;
|
|
77
|
+
const newFormattedData = barChartData === null || barChartData === void 0 ? void 0 : barChartData.map(item => {
|
|
78
|
+
var _item$title;
|
|
79
|
+
return {
|
|
80
|
+
...item,
|
|
81
|
+
titleWeek: item.title && ((_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toString().length) === 6 ? item.title.toString().substring(4, 6) : 0
|
|
82
|
+
};
|
|
83
|
+
});
|
|
84
|
+
return newFormattedData;
|
|
85
|
+
};
|
|
86
|
+
return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.ControlsContainer, {
|
|
87
|
+
id: "ControlsContainer",
|
|
88
|
+
height: height,
|
|
89
|
+
width: width,
|
|
90
|
+
ref: controlsContainerRef
|
|
91
|
+
}, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Controls, {
|
|
92
|
+
id: "Controls"
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, {
|
|
94
|
+
id: "TitleAndValueContainer"
|
|
95
|
+
}, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, {
|
|
96
|
+
id: "Title"
|
|
97
|
+
}, title)), /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.AreaChartContainer, {
|
|
98
|
+
ref: anotherRef,
|
|
99
|
+
id: "AreaChartContainer"
|
|
100
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
101
|
+
id: "ResponsiveContainer",
|
|
102
|
+
width: "100%",
|
|
103
|
+
height: "100%"
|
|
104
|
+
}, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarchartContainer, {
|
|
105
|
+
id: "BarchartContainer"
|
|
106
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
107
|
+
width: BarChartContainerWidth,
|
|
108
|
+
height: BarChartContainerHeight,
|
|
109
|
+
data: barChartData,
|
|
110
|
+
margin: {
|
|
111
|
+
top: 20,
|
|
112
|
+
right: 0,
|
|
113
|
+
bottom: -25,
|
|
114
|
+
left: -5
|
|
115
|
+
}
|
|
116
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
|
|
117
|
+
strokeDasharray: "3 3",
|
|
118
|
+
vertical: false
|
|
119
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
|
|
120
|
+
dataKey: "title",
|
|
121
|
+
tick: false,
|
|
122
|
+
tickLine: false
|
|
123
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
|
|
124
|
+
tickCount: yAxisCounter,
|
|
125
|
+
interval: interval ? interval : 'preserveEnd',
|
|
126
|
+
domain: [0, "auto"],
|
|
127
|
+
tick: {
|
|
128
|
+
fill: "#B1B1B1"
|
|
129
|
+
},
|
|
130
|
+
axisLine: false,
|
|
131
|
+
fontWeight: 400,
|
|
132
|
+
fontSize: "12px",
|
|
133
|
+
tickLine: false,
|
|
134
|
+
tickFormatter: value => "".concat(value ? isPercentValue ? "".concat("", value.toFixed(0), "%") : "".concat("", (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value)) : "")
|
|
135
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
|
|
136
|
+
content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
|
|
137
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
138
|
+
dataKey: "value",
|
|
139
|
+
name: "title",
|
|
140
|
+
maxBarSize: 45,
|
|
141
|
+
radius: [4, 4, 0, 0],
|
|
142
|
+
fill: barChartColor
|
|
143
|
+
}))))), displayEventWeeksLegendData()));
|
|
144
|
+
};
|
|
145
|
+
exports.BarChartsByWeeks = BarChartsByWeeks;
|
|
146
|
+
var _default = exports.default = BarChartsByWeeks;
|
|
147
|
+
BarChartsByWeeks.defaultProps = {
|
|
148
|
+
title: "String",
|
|
149
|
+
barChartData: [{
|
|
150
|
+
title: "202320",
|
|
151
|
+
value: 542366
|
|
152
|
+
}, {
|
|
153
|
+
title: "202321",
|
|
154
|
+
value: 699511
|
|
155
|
+
}, {
|
|
156
|
+
title: "202322",
|
|
157
|
+
value: 403092
|
|
158
|
+
}, {
|
|
159
|
+
title: "202323",
|
|
160
|
+
value: 396184
|
|
161
|
+
}, {
|
|
162
|
+
title: "202324",
|
|
163
|
+
value: 415317
|
|
164
|
+
}, {
|
|
165
|
+
title: "202325",
|
|
166
|
+
value: 568376
|
|
167
|
+
}, {
|
|
168
|
+
title: "202326",
|
|
169
|
+
value: 1078121
|
|
170
|
+
}, {
|
|
171
|
+
title: "202327",
|
|
172
|
+
value: 347930
|
|
173
|
+
}, {
|
|
174
|
+
title: "202328",
|
|
175
|
+
value: 346258
|
|
176
|
+
}, {
|
|
177
|
+
title: "202329",
|
|
178
|
+
value: 350184
|
|
179
|
+
}, {
|
|
180
|
+
title: "202330",
|
|
181
|
+
value: 312790
|
|
182
|
+
}, {
|
|
183
|
+
title: "202331",
|
|
184
|
+
value: 335076
|
|
185
|
+
}, {
|
|
186
|
+
title: "202332",
|
|
187
|
+
value: 311037
|
|
188
|
+
}],
|
|
189
|
+
width: "100%",
|
|
190
|
+
height: "100%",
|
|
191
|
+
barChartColor: "#BD9EFF",
|
|
192
|
+
xselectedColor: "#42977A",
|
|
193
|
+
tooltipTitle: "Sales",
|
|
194
|
+
startWeekRange: 0,
|
|
195
|
+
endWeekRange: 0,
|
|
196
|
+
tooltipTitle: "",
|
|
197
|
+
yAxisCounter: 10,
|
|
198
|
+
isPercentValue: false,
|
|
199
|
+
interval: 'preserveEnd'
|
|
200
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.EventWeeksLegendMainContainer = exports.EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElement = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = exports.BarchartContainer = exports.AreaChartContainer = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
11
|
+
const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: #212121;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n min-width: 250px;\n"])), props => props.width, props => props.height);
|
|
12
|
+
const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n /* justify-content: space-between; */\n background: #ffffff;\n border-radius: 12px;\n flex-basis: 100%;\n"])));
|
|
13
|
+
const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n width: 100%; \n height: 85%;\n"])));
|
|
14
|
+
const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
|
|
15
|
+
const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
|
|
16
|
+
const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
|
|
17
|
+
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
|
|
18
|
+
const Title = exports.Title = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n\n"])));
|
|
19
|
+
const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1.5rem;\n"])));
|
|
20
|
+
const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 2px 0 0 0;\n padding: 0 20px 0 55px;\n align-items: center;\n\n"])));
|
|
21
|
+
const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0px;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n"])));
|
|
22
|
+
const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: ", ";\n font-size: 12px;\n line-height: 15px;\n margin: 0px;\n width: 100%;\n justify-content: center;\n align-content: center;\n color: ", ";\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n background: ", ";\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])), props => props.fontWeight, props => props.textColor, props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
|
|
23
|
+
const BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
@@ -28,7 +28,8 @@ const TotalDoughnutChart = props => {
|
|
|
28
28
|
width,
|
|
29
29
|
height,
|
|
30
30
|
textcolor,
|
|
31
|
-
noDataText
|
|
31
|
+
noDataText,
|
|
32
|
+
isPercent
|
|
32
33
|
} = props;
|
|
33
34
|
const [DoughnutChartRadius, setDoughnutChartRadius] = (0, _react.useState)(0);
|
|
34
35
|
const [zoomResolution, setZoomResolution] = (0, _react.useState)(1);
|
|
@@ -40,14 +41,14 @@ const TotalDoughnutChart = props => {
|
|
|
40
41
|
};
|
|
41
42
|
|
|
42
43
|
// Add event listener for window resize to update zoom resolution
|
|
43
|
-
window.addEventListener(
|
|
44
|
+
window.addEventListener("resize", handleResize);
|
|
44
45
|
|
|
45
46
|
// Initial update of zoom resolution
|
|
46
47
|
setZoomResolution(window.devicePixelRatio);
|
|
47
48
|
|
|
48
49
|
// Clean up the event listener when component unmounts
|
|
49
50
|
return () => {
|
|
50
|
-
window.removeEventListener(
|
|
51
|
+
window.removeEventListener("resize", handleResize);
|
|
51
52
|
};
|
|
52
53
|
}, []);
|
|
53
54
|
(0, _react.useEffect)(() => {
|
|
@@ -70,6 +71,14 @@ const TotalDoughnutChart = props => {
|
|
|
70
71
|
const radius = DoughnutChartContainerWidth > DoughnutChartContainerHeight ? DoughnutChartContainerHeight / 2 / resolutionFactor : DoughnutChartContainerWidth / 2 / resolutionFactor;
|
|
71
72
|
setDoughnutChartRadius(radius);
|
|
72
73
|
}, [height, width, DoughnutChartContainerRef === null || DoughnutChartContainerRef === void 0 ? void 0 : (_DoughnutChartContain = DoughnutChartContainerRef.current) === null || _DoughnutChartContain === void 0 ? void 0 : _DoughnutChartContain.clientWidth, DoughnutChartContainerRef === null || DoughnutChartContainerRef === void 0 ? void 0 : (_DoughnutChartContain2 = DoughnutChartContainerRef.current) === null || _DoughnutChartContain2 === void 0 ? void 0 : _DoughnutChartContain2.clientHeight, zoomResolution]);
|
|
74
|
+
const displayLegendValue = row => {
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendFormattedValue, {
|
|
76
|
+
id: "LegendFormattedValue",
|
|
77
|
+
style: {
|
|
78
|
+
fontWeight: itemsBoldedValues ? "700" : "500"
|
|
79
|
+
}
|
|
80
|
+
}, !isPercent && row.value && currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : "", !isPercent && row.value ? dotCutTrenty(row) : !isPercent && "No Data", !isPercent && row.value && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : "", !isPercent && row.value && itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)"), isPercent && row.value && "".concat(row.value.toFixed(1), "%"));
|
|
81
|
+
};
|
|
73
82
|
return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.ControlsContainer, {
|
|
74
83
|
id: "ControlsContainer",
|
|
75
84
|
height: height,
|
|
@@ -111,7 +120,8 @@ const TotalDoughnutChart = props => {
|
|
|
111
120
|
fill: row.color
|
|
112
121
|
}))), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
|
|
113
122
|
content: /*#__PURE__*/_react.default.createElement(CustomTooltip, {
|
|
114
|
-
value: value
|
|
123
|
+
value: value,
|
|
124
|
+
isPercent: isPercent
|
|
115
125
|
})
|
|
116
126
|
}), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendContainer, {
|
|
117
127
|
id: "LegendContainer"
|
|
@@ -129,12 +139,7 @@ const TotalDoughnutChart = props => {
|
|
|
129
139
|
flexDirection: itemsValuesSeparateLine ? "column" : "row",
|
|
130
140
|
alignItems: itemsValuesSeparateLine ? "baseline" : "center"
|
|
131
141
|
}
|
|
132
|
-
}, row.name,
|
|
133
|
-
id: "LegendFormattedValue",
|
|
134
|
-
style: {
|
|
135
|
-
fontWeight: itemsBoldedValues ? "700" : "500"
|
|
136
|
-
}
|
|
137
|
-
}, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : "", row.value !== undefined && row.value !== null ? dotCutTrenty(row) : "No Data", row.value !== undefined && row.value !== null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : "", itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)"))))))))));
|
|
142
|
+
}, row.name, displayLegendValue(row)))))))));
|
|
138
143
|
};
|
|
139
144
|
exports.TotalDoughnutChart = TotalDoughnutChart;
|
|
140
145
|
var _default = exports.default = TotalDoughnutChart;
|
|
@@ -152,21 +157,24 @@ TotalDoughnutChart.defaultProps = {
|
|
|
152
157
|
width: "100%",
|
|
153
158
|
height: "100%",
|
|
154
159
|
textcolor: "#212121",
|
|
155
|
-
noDataText: ""
|
|
160
|
+
noDataText: "",
|
|
161
|
+
isPercent: false
|
|
156
162
|
};
|
|
157
163
|
function CustomTooltip(_ref) {
|
|
158
164
|
let {
|
|
159
165
|
active,
|
|
160
166
|
payload,
|
|
161
|
-
value
|
|
167
|
+
value,
|
|
168
|
+
isPercent = false
|
|
162
169
|
} = _ref;
|
|
163
170
|
if (active && payload && payload.length) {
|
|
164
|
-
const percent = value && value !== 0 ? (payload[0].value / value * 100).toFixed(0) : 0;
|
|
171
|
+
const percent = value && value !== 0 && !isPercent ? (payload[0].value / value * 100).toFixed(1) : value && isPercent ? payload[0].value.toFixed(1) : 0;
|
|
165
172
|
return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TooltipLabel, null, "".concat(payload[0].name, " ").concat(percent, "%")));
|
|
166
173
|
}
|
|
167
174
|
}
|
|
168
175
|
CustomTooltip.defaultProps = {
|
|
169
176
|
active: "",
|
|
170
177
|
payload: "",
|
|
171
|
-
value: ""
|
|
178
|
+
value: "",
|
|
179
|
+
isPercent: false
|
|
172
180
|
};
|