phx-react
Version:
PHX REACT
102 lines • 6.44 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var recharts_1 = require("recharts");
function DonutChart(props) {
var _a = props.colorChart, colorChart = _a === void 0 ? ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'] : _a, dataKey = props.dataKey, withChart = props.withChart, data = props.data, _b = props.hiddenLabel, hiddenLabel = _b === void 0 ? true : _b;
var RADIAN = Math.PI / 180;
var _c = (0, react_1.useState)(null), hoveredBar = _c[0], setHoveredBar = _c[1];
var renderCustomizedLabel = function (_a) {
var cx = _a.cx, cy = _a.cy, innerRadius = _a.innerRadius, midAngle = _a.midAngle, outerRadius = _a.outerRadius, payload = _a.payload, percent = _a.percent;
var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
var labelRadius = outerRadius + 20;
var labelX = cx + labelRadius * Math.cos(-midAngle * RADIAN);
var labelY = cy + labelRadius * Math.sin(-midAngle * RADIAN);
var x = cx + radius * Math.cos(-midAngle * RADIAN);
var y = cy + radius * Math.sin(-midAngle * RADIAN);
return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("text", { dominantBaseline: 'central', fill: '#999', textAnchor: labelX > cx ? 'start' : 'end', x: labelX, y: labelY }, payload.name),
hiddenLabel && (react_1["default"].createElement("text", { dominantBaseline: 'central', fill: 'white', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, "".concat((percent * 100).toFixed(0), "%")))));
};
var CustomToolLegend = function (propsTooltip) {
var payload = propsTooltip.payload;
return (react_1["default"].createElement("div", { className: 'custom-legend mt-4' },
react_1["default"].createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, payload === null || payload === void 0 ? void 0 : payload.map(function (item) { return (react_1["default"].createElement("div", { key: item.id, style: {
backgroundColor: '#F6F6F7',
padding: 5,
borderRadius: '5px'
} },
react_1["default"].createElement("div", { style: {
display: 'flex',
alignItems: 'center',
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5
} },
react_1["default"].createElement("div", { style: {
borderRadius: '4px',
width: '18px',
height: '18px',
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
alignItems: 'center',
alignContent: 'center'
} }),
react_1["default"].createElement("p", { style: {
marginLeft: '10px',
fontSize: '14px',
marginRight: 4,
color: '#999'
} }, item === null || item === void 0 ? void 0 : item.payload.name)))); }))));
};
var CustomToolTip = function (propsTooltip) {
var _a, _b;
var payload = propsTooltip.payload;
return (react_1["default"].createElement("div", { style: {
backgroundColor: '#f5f5f5e8',
margin: 10,
width: '10rem',
padding: 3,
borderRadius: 8
} },
react_1["default"].createElement("div", { className: 'ml-2 mt-2' }, (_b = (_a = payload[0]) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name),
payload.map(function (item) { return (react_1["default"].createElement("div", { key: item.id, style: {
display: 'flex',
padding: 5,
marginTop: 4
} },
react_1["default"].createElement("div", { style: {
borderRadius: '4px',
width: '18px',
height: '18px',
background: "linear-gradient(".concat(item.payload.fill, ", ").concat(item.payload.fill, ")"),
alignItems: 'center',
alignContent: 'center'
} }),
react_1["default"].createElement("div", { className: 'ml-2' }, item.name),
react_1["default"].createElement("div", { style: {
marginLeft: 'auto'
} }, item.payload.value))); })));
};
var colors = data.reduce(function (color, _, index) {
color["color".concat(index + 1)] = colorChart[index % colorChart.length];
return color;
}, {});
var onMouseEnter = function (value) {
setHoveredBar(value.tooltipPayload[0].name);
};
var onMouseLeave = function () {
setHoveredBar(null);
};
return (react_1["default"].createElement(recharts_1.ResponsiveContainer, { height: 500, width: '100%' },
react_1["default"].createElement(recharts_1.PieChart, { height: 400, width: 400 },
react_1["default"].createElement(recharts_1.Pie
// @ts-ignore
, {
// @ts-ignore
color: colors, cx: '50%', cy: '50%', data: data,
// @ts-ignore
dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', label: renderCustomizedLabel, onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, labelLine: false, outerRadius: withChart !== null && withChart !== void 0 ? withChart : 150, style: { outline: 'none' } }, data.map(function (_entry, index) { return (react_1["default"].createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: colorChart[index % colorChart.length] })); })),
react_1["default"].createElement(recharts_1.Legend, { content: react_1["default"].createElement(CustomToolLegend, null) }),
react_1["default"].createElement(recharts_1.Tooltip, { content: react_1["default"].createElement(CustomToolTip, null) }))));
}
exports["default"] = DonutChart;
//# sourceMappingURL=DonutChart.js.map