phx-react
Version:
PHX REACT
76 lines • 5.54 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 PHXPieChart(props) {
var _a = props.outerRadius, outerRadius = _a === void 0 ? 150 : _a, dataKey = props.dataKey, data = props.data, _b = props.color, color = _b === void 0 ? ['#6f8fef', '#8565ed', '#dd75c1', '#FF8042'] : _b, hiddenLabel = props.hiddenLabel, hiddenLegend = props.hiddenLegend;
var _c = (0, react_1.useState)(null), activeIndex = _c[0], setActiveIndex = _c[1];
var _d = (0, react_1.useState)(null), hoveredBar = _d[0], setHoveredBar = _d[1];
var onPieEnter = function (value, index) {
setActiveIndex(index);
setHoveredBar(value.tooltipPayload[0].name);
};
var onMouseLeave = function () {
setActiveIndex(null);
setHoveredBar(null);
};
var RADIAN = Math.PI / 180;
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 renderActiveShape = function (props) {
var cx = props.cx, cy = props.cy, innerRadius = props.innerRadius, outerRadius = props.outerRadius, startAngle = props.startAngle, endAngle = props.endAngle, fill = props.fill, payload = props.payload, percent = props.percent;
return (react_1["default"].createElement("g", null,
react_1["default"].createElement("text", { x: cx, y: cy, dy: -8, textAnchor: 'middle', fill: fill, style: { fontSize: '18px' } }, payload.name),
react_1["default"].createElement("text", { x: cx, y: cy, dy: 12, textAnchor: 'middle', fill: fill }, "(".concat((percent * 100).toFixed(2), "%)")),
react_1["default"].createElement(recharts_1.Sector, { cx: cx, cy: cy, opacity: 0.5, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, fill: fill, cornerRadius: 5 })));
};
return (react_1["default"].createElement(recharts_1.ResponsiveContainer, { height: 500, width: '100%' },
react_1["default"].createElement(recharts_1.PieChart, { height: 400, onMouseLeave: onMouseLeave, width: 800 },
react_1["default"].createElement(recharts_1.Pie, tslib_1.__assign({ activeIndex: activeIndex, activeShape: renderActiveShape, cx: '50%', cy: '50%', data: data, dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', innerRadius: 130 }, (!hiddenLabel && {
label: function (_a) {
var _b;
var cx = _a.cx, cy = _a.cy, index = _a.index, innerRadius = _a.innerRadius, midAngle = _a.midAngle, outerRadius = _a.outerRadius, value = _a.value;
var radius = 25 + innerRadius + (outerRadius - innerRadius);
var x = cx + radius * Math.cos(-midAngle * RADIAN);
var y = cy + radius * Math.sin(-midAngle * RADIAN);
if (value === 0) {
return react_1["default"].createElement(react_1["default"].Fragment, null);
}
return (react_1["default"].createElement("text", { dominantBaseline: 'central', fill: '#8884d8', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, (_b = data[index]) === null || _b === void 0 ? void 0 :
_b.name,
" (",
value,
")"));
}
}), { onMouseEnter: onPieEnter, outerRadius: outerRadius, cornerRadius: 5, paddingAngle: 1, labelLine: false, style: { outline: 'none' } }), data.map(function (_entry, index) { return (react_1["default"].createElement(recharts_1.Cell, { key: "cell-".concat(index + 1), fill: color[index % color.length] })); })),
hiddenLegend && react_1["default"].createElement(recharts_1.Legend, { content: react_1["default"].createElement(CustomToolLegend, null) }))));
}
exports["default"] = PHXPieChart;
//# sourceMappingURL=PieChart.js.map