sag_components 1.0.23 → 1.0.24
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.
package/dist/App.js
CHANGED
|
@@ -12,6 +12,8 @@ var _react = require("react");
|
|
|
12
12
|
var _Button = _interopRequireDefault(require("./stories/components/Button"));
|
|
13
13
|
var _Dropdown = _interopRequireDefault(require("./stories/components/Dropdown"));
|
|
14
14
|
var _SegmentedButton = _interopRequireDefault(require("./stories/components/SegmentedButton"));
|
|
15
|
+
var _TotalDoughnutChart = _interopRequireDefault(require("./stories/components/TotalDoughnutChart"));
|
|
16
|
+
var _OneColumnContainer = _interopRequireDefault(require("./stories/components/OneColumnContainer"));
|
|
15
17
|
var onChangehandler = function onChangehandler(event, newValue) {
|
|
16
18
|
console.log("Dropdown onChange event returned:");
|
|
17
19
|
console.log(newValue);
|
|
@@ -79,42 +81,31 @@ function App() {
|
|
|
79
81
|
setSelectedValue2 = _useState4[1];
|
|
80
82
|
return /*#__PURE__*/React.createElement("div", {
|
|
81
83
|
className: "App"
|
|
82
|
-
}, /*#__PURE__*/React.createElement(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
})
|
|
107
|
-
className: "selected-item"
|
|
108
|
-
}, "Selected: ", selectedValue1), /*#__PURE__*/React.createElement(_SegmentedButton.default, {
|
|
109
|
-
name: "group2",
|
|
110
|
-
onClick: function onClick(val) {
|
|
111
|
-
return setSelectedValue2(val);
|
|
112
|
-
},
|
|
113
|
-
defaultIndex: 1,
|
|
114
|
-
segments: segmentsArr2
|
|
115
|
-
}), /*#__PURE__*/React.createElement("p", {
|
|
116
|
-
className: "selected-item"
|
|
117
|
-
}, "Selected: ", selectedValue2));
|
|
84
|
+
}, /*#__PURE__*/React.createElement(_OneColumnContainer.default, {
|
|
85
|
+
height: "250px",
|
|
86
|
+
infoText: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
|
|
87
|
+
width: "250px"
|
|
88
|
+
}), /*#__PURE__*/React.createElement(_TotalDoughnutChart.default, {
|
|
89
|
+
currency: true,
|
|
90
|
+
currencyType: "USD",
|
|
91
|
+
dotCut: true,
|
|
92
|
+
height: 374,
|
|
93
|
+
legendData: [{
|
|
94
|
+
color: "#85A1D2",
|
|
95
|
+
currency: "USD",
|
|
96
|
+
name: "Package Cost",
|
|
97
|
+
value: 30000
|
|
98
|
+
}, {
|
|
99
|
+
color: "#9AE6FF",
|
|
100
|
+
currency: "USD",
|
|
101
|
+
name: "Redemption Cost",
|
|
102
|
+
value: 6500
|
|
103
|
+
}],
|
|
104
|
+
textColor: "#212121",
|
|
105
|
+
title: "Total Cost",
|
|
106
|
+
value: 36500,
|
|
107
|
+
width: 336
|
|
108
|
+
}));
|
|
118
109
|
}
|
|
119
110
|
var _default = App;
|
|
120
111
|
exports.default = _default;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.TotalCost3rows = exports.TotalCost = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _TotalDoughnutChart = require("./components/TotalDoughnutChart");
|
|
10
|
+
var arrLegendData = [{
|
|
11
|
+
name: "Package Cost",
|
|
12
|
+
value: 30000,
|
|
13
|
+
color: "#85A1D2"
|
|
14
|
+
}, {
|
|
15
|
+
name: "Redemption Cost",
|
|
16
|
+
value: 6500,
|
|
17
|
+
color: "#9AE6FF"
|
|
18
|
+
}];
|
|
19
|
+
var arrLegendDat3rows = [{
|
|
20
|
+
name: "Package Cost",
|
|
21
|
+
value: 30000,
|
|
22
|
+
color: "#85A1D2"
|
|
23
|
+
}, {
|
|
24
|
+
name: "Redemption Cost",
|
|
25
|
+
value: 6500,
|
|
26
|
+
color: "#9AE6FF"
|
|
27
|
+
}, {
|
|
28
|
+
name: "Others",
|
|
29
|
+
value: 20000,
|
|
30
|
+
color: "#FD5959"
|
|
31
|
+
}
|
|
32
|
+
// { name: "My test 2", value: 35000, color: "#79DB95"},
|
|
33
|
+
];
|
|
34
|
+
var _default = {
|
|
35
|
+
title: "SAG/TotalDoughnutChart",
|
|
36
|
+
component: _TotalDoughnutChart.TotalDoughnutChart,
|
|
37
|
+
tags: ["autodocs"],
|
|
38
|
+
argTypes: {
|
|
39
|
+
title: {
|
|
40
|
+
name: "title",
|
|
41
|
+
control: {
|
|
42
|
+
type: "text"
|
|
43
|
+
},
|
|
44
|
+
description: "title on top of the component"
|
|
45
|
+
},
|
|
46
|
+
value: {
|
|
47
|
+
name: "value",
|
|
48
|
+
control: {
|
|
49
|
+
type: "number",
|
|
50
|
+
min: 0,
|
|
51
|
+
max: 100000000000000
|
|
52
|
+
},
|
|
53
|
+
description: "value (total) "
|
|
54
|
+
},
|
|
55
|
+
dotCut: {
|
|
56
|
+
name: "dotCut",
|
|
57
|
+
control: {
|
|
58
|
+
type: "boolean"
|
|
59
|
+
},
|
|
60
|
+
description: "true/false - format total value with dot cut"
|
|
61
|
+
},
|
|
62
|
+
currency: {
|
|
63
|
+
name: "currency",
|
|
64
|
+
control: {
|
|
65
|
+
type: "boolean"
|
|
66
|
+
},
|
|
67
|
+
description: "true/false - show/hide currency before total value"
|
|
68
|
+
},
|
|
69
|
+
currencyType: {
|
|
70
|
+
name: "currencyType",
|
|
71
|
+
options: ["USD", "EUR", "ILS", "GBP", "JPY"],
|
|
72
|
+
control: {
|
|
73
|
+
type: "select"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
width: {
|
|
77
|
+
name: "width",
|
|
78
|
+
control: {
|
|
79
|
+
type: "number",
|
|
80
|
+
min: 0,
|
|
81
|
+
max: 600
|
|
82
|
+
},
|
|
83
|
+
description: "width of the control (in px)"
|
|
84
|
+
},
|
|
85
|
+
height: {
|
|
86
|
+
name: "height",
|
|
87
|
+
control: {
|
|
88
|
+
type: "number",
|
|
89
|
+
min: 0,
|
|
90
|
+
max: 600
|
|
91
|
+
},
|
|
92
|
+
description: "height of the control (in px)"
|
|
93
|
+
},
|
|
94
|
+
textColor: {
|
|
95
|
+
name: "textColor",
|
|
96
|
+
description: "Sets the text color",
|
|
97
|
+
control: {
|
|
98
|
+
type: "color",
|
|
99
|
+
presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
legendData: {
|
|
103
|
+
description: "array [] of objects: {displayName: string, value:number} to fill the pie chart "
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
exports.default = _default;
|
|
108
|
+
var Template = function Template(args) {
|
|
109
|
+
return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, args);
|
|
110
|
+
};
|
|
111
|
+
var TotalCost = Template.bind({});
|
|
112
|
+
exports.TotalCost = TotalCost;
|
|
113
|
+
TotalCost.args = {
|
|
114
|
+
title: "Total Cost",
|
|
115
|
+
value: 36500,
|
|
116
|
+
dotCut: true,
|
|
117
|
+
currency: true,
|
|
118
|
+
currencyType: "USD",
|
|
119
|
+
legendData: arrLegendData,
|
|
120
|
+
width: 336,
|
|
121
|
+
height: 374,
|
|
122
|
+
textColor: "#212121"
|
|
123
|
+
};
|
|
124
|
+
var TotalCost3rows = Template.bind({});
|
|
125
|
+
exports.TotalCost3rows = TotalCost3rows;
|
|
126
|
+
TotalCost3rows.args = {
|
|
127
|
+
title: "Total Cost",
|
|
128
|
+
value: 56500,
|
|
129
|
+
dotCut: true,
|
|
130
|
+
currency: true,
|
|
131
|
+
currencyType: "USD",
|
|
132
|
+
legendData: arrLegendDat3rows,
|
|
133
|
+
width: 336,
|
|
134
|
+
height: 374,
|
|
135
|
+
textColor: "#212121"
|
|
136
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.Title = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendCurrencySign = exports.LegendControls = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChart = exports.CurrencySign = exports.ControlsContainer = exports.Controls = 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;
|
|
11
|
+
var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
|
|
12
|
+
return props.textColor;
|
|
13
|
+
}, function (props) {
|
|
14
|
+
return props.width.toString().concat("", "px");
|
|
15
|
+
}, function (props) {
|
|
16
|
+
return props.height.toString().concat("", "px");
|
|
17
|
+
});
|
|
18
|
+
exports.ControlsContainer = ControlsContainer;
|
|
19
|
+
var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n background: #ffffff;\n //border: 1px solid blue;\n"])), function (props) {
|
|
20
|
+
return props.width.toString().concat("", "px");
|
|
21
|
+
}, function (props) {
|
|
22
|
+
return props.height.toString().concat("", "px");
|
|
23
|
+
});
|
|
24
|
+
exports.Controls = Controls;
|
|
25
|
+
var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 150px;\n height: 22px;\n left: 40px;\n top: 81px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
|
|
26
|
+
exports.Title = Title;
|
|
27
|
+
var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 22px;\n left: 42px;\n top: 135px;\n font-weight: 500;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
|
|
28
|
+
exports.CurrencySign = CurrencySign;
|
|
29
|
+
var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 200px;\n height: 48px;\n left: 57px;\n top: 115px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])));
|
|
30
|
+
exports.FormattedValue = FormattedValue;
|
|
31
|
+
var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 95px;\n height: 95px;\n left: 40px;\n top: 221px;\n //border: 1px solid red;\n"])));
|
|
32
|
+
exports.DoughnutChart = DoughnutChart;
|
|
33
|
+
var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: 180px;\n height: 47px;\n left: 150px;\n top: 221px; \n background: #ffffff;\n //border: 1px solid blue;\n"])));
|
|
34
|
+
exports.LegendControls = LegendControls;
|
|
35
|
+
var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 16px;\n height: 16px;\n left: 14px;\n top: 14px;\n background: ", ";\n"])), function (props) {
|
|
36
|
+
return props.color;
|
|
37
|
+
});
|
|
38
|
+
exports.LegendColorRectangle = LegendColorRectangle;
|
|
39
|
+
var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 120px;\n height: 18px;\n left: 40px;\n top: 1px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
|
|
40
|
+
exports.LegendTitle = LegendTitle;
|
|
41
|
+
var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 19px;\n left: 42px;\n top: 21px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
|
|
42
|
+
exports.LegendCurrencySign = LegendCurrencySign;
|
|
43
|
+
var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 100px;\n height: 19px;\n left: 52px;\n top: 21px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
|
|
44
|
+
exports.LegendFormattedValue = LegendFormattedValue;
|
|
@@ -33,24 +33,20 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
|
|
|
33
33
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
34
34
|
clicked = _useState2[0],
|
|
35
35
|
setClicked = _useState2[1];
|
|
36
|
-
var _useDroppable = (0, _core.useDroppable)({
|
|
37
|
-
refId: refId
|
|
38
|
-
}),
|
|
39
|
-
over = _useDroppable.over,
|
|
40
|
-
isOver = _useDroppable.isOver,
|
|
41
|
-
setNodeRef = _useDroppable.setNodeRef;
|
|
42
36
|
var onInfoClick = function onInfoClick() {
|
|
43
37
|
setClicked(!clicked);
|
|
44
38
|
};
|
|
45
39
|
return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
|
|
46
|
-
className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, droppedStyle),
|
|
40
|
+
className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle),
|
|
47
41
|
width: width,
|
|
48
42
|
height: height
|
|
49
43
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
50
44
|
ref: nodeRef,
|
|
51
45
|
style: {
|
|
52
46
|
width: "100%",
|
|
53
|
-
height: "100%"
|
|
47
|
+
height: "100%",
|
|
48
|
+
display: "grid",
|
|
49
|
+
gridTemplateColumns: "repeat(2, 1fr)"
|
|
54
50
|
}
|
|
55
51
|
}, children, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
|
|
56
52
|
clicked: clicked,
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.TotalDoughnutChart = void 0;
|
|
8
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _recharts = require("recharts");
|
|
11
|
+
var _TotalDoughnutChartStyle = require("../TotalDoughnutChart.style.js");
|
|
12
|
+
var _excluded = ["title", "value", "dotCut", "currency", "currencyType", "legendData", "width", "height", "textColor"];
|
|
13
|
+
/*TotalDoughnutChart*/
|
|
14
|
+
var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
|
|
15
|
+
var _ref$title = _ref.title,
|
|
16
|
+
title = _ref$title === void 0 ? "Total Cost" : _ref$title,
|
|
17
|
+
_ref$value = _ref.value,
|
|
18
|
+
value = _ref$value === void 0 ? 0 : _ref$value,
|
|
19
|
+
_ref$dotCut = _ref.dotCut,
|
|
20
|
+
dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
|
|
21
|
+
_ref$currency = _ref.currency,
|
|
22
|
+
currency = _ref$currency === void 0 ? true : _ref$currency,
|
|
23
|
+
_ref$currencyType = _ref.currencyType,
|
|
24
|
+
currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
|
|
25
|
+
legendData = _ref.legendData,
|
|
26
|
+
_ref$width = _ref.width,
|
|
27
|
+
width = _ref$width === void 0 ? 336 : _ref$width,
|
|
28
|
+
_ref$height = _ref.height,
|
|
29
|
+
height = _ref$height === void 0 ? 374 : _ref$height,
|
|
30
|
+
_ref$textColor = _ref.textColor,
|
|
31
|
+
textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
|
|
32
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
33
|
+
var getCurrencySign = function getCurrencySign(currencyTypeToConvert) {
|
|
34
|
+
if (!currencyTypeToConvert) return "";
|
|
35
|
+
var currencySign = "";
|
|
36
|
+
var currencyFormatter = new Intl.NumberFormat("en-US", {
|
|
37
|
+
style: "currency",
|
|
38
|
+
currency: currencyTypeToConvert
|
|
39
|
+
});
|
|
40
|
+
currencySign = currencyFormatter.format(value).substring(0, 1);
|
|
41
|
+
return currencySign;
|
|
42
|
+
};
|
|
43
|
+
var getFormattedUnits = function getFormattedUnits(num) {
|
|
44
|
+
if (Math.abs(num) >= 1000000000) {
|
|
45
|
+
return "B";
|
|
46
|
+
}
|
|
47
|
+
if (Math.abs(num) >= 1000000) {
|
|
48
|
+
return "M";
|
|
49
|
+
}
|
|
50
|
+
if (Math.abs(num) >= 1000) {
|
|
51
|
+
return "K";
|
|
52
|
+
}
|
|
53
|
+
return "";
|
|
54
|
+
};
|
|
55
|
+
var getFormattedValue = function getFormattedValue(num) {
|
|
56
|
+
if (Math.abs(num) >= 1000000000) {
|
|
57
|
+
return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
|
|
58
|
+
}
|
|
59
|
+
if (Math.abs(num) >= 1000000) {
|
|
60
|
+
return (num / 1000000).toFixed(1).replace(/\.0$/, "");
|
|
61
|
+
}
|
|
62
|
+
if (Math.abs(num) >= 1000) {
|
|
63
|
+
return (num / 1000).toFixed(1).replace(/\.0$/, "");
|
|
64
|
+
}
|
|
65
|
+
return num;
|
|
66
|
+
};
|
|
67
|
+
var getNumberWithCommas = function getNumberWithCommas(x) {
|
|
68
|
+
x = x.toString();
|
|
69
|
+
var pattern = /(-?\d+)(\d{3})/;
|
|
70
|
+
while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
|
|
71
|
+
return x;
|
|
72
|
+
};
|
|
73
|
+
var onPieEnterHandler = function onPieEnterHandler() {};
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
|
|
75
|
+
height: height,
|
|
76
|
+
width: width,
|
|
77
|
+
textColor: textColor
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
|
|
79
|
+
height: height,
|
|
80
|
+
width: width
|
|
81
|
+
}, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, null, "".concat(dotCut ? getFormattedValue(value) : getNumberWithCommas(value)), "".concat(dotCut ? getFormattedUnits(value) : "")), legendData.map(function (row, index) {
|
|
82
|
+
return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControls, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
|
|
83
|
+
color: row.color
|
|
84
|
+
}), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, null, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, null, "".concat(dotCut ? getFormattedValue(row.value) : getNumberWithCommas(row.value)), "".concat(dotCut ? getFormattedUnits(row.value) : "")));
|
|
85
|
+
}), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
|
|
86
|
+
width: 93,
|
|
87
|
+
height: 93,
|
|
88
|
+
onMouseEnter: onPieEnterHandler
|
|
89
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
|
|
90
|
+
data: legendData,
|
|
91
|
+
innerRadius: 32,
|
|
92
|
+
outerRadius: 47,
|
|
93
|
+
fill: "#8884d8",
|
|
94
|
+
dataKey: "value"
|
|
95
|
+
}, legendData.map(function (row, index) {
|
|
96
|
+
return /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
|
|
97
|
+
key: "cell-".concat(index),
|
|
98
|
+
fill: row.color
|
|
99
|
+
});
|
|
100
|
+
})), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))));
|
|
101
|
+
};
|
|
102
|
+
exports.TotalDoughnutChart = TotalDoughnutChart;
|
|
103
|
+
var _default = TotalDoughnutChart;
|
|
104
|
+
exports.default = _default;
|