phx-react
Version:
PHX REACT
72 lines • 4.71 kB
JavaScript
import React, { useState } from 'react';
import { ResponsiveContainer, PieChart, Pie, Cell, Legend, Sector } from 'recharts';
function PHXPieChart(props) {
const { outerRadius = 150, dataKey, data, color = ['#6f8fef', '#8565ed', '#dd75c1', '#FF8042'], hiddenLabel, hiddenLegend, } = props;
const [activeIndex, setActiveIndex] = useState(null);
const [hoveredBar, setHoveredBar] = useState(null);
const onPieEnter = (value, index) => {
setActiveIndex(index);
setHoveredBar(value.tooltipPayload[0].name);
};
const onMouseLeave = () => {
setActiveIndex(null);
setHoveredBar(null);
};
const RADIAN = Math.PI / 180;
const CustomToolLegend = (propsTooltip) => {
const { payload } = propsTooltip;
return (React.createElement("div", { className: 'custom-legend mt-4' },
React.createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, payload === null || payload === void 0 ? void 0 : payload.map((item) => (React.createElement("div", { key: item.id, style: {
backgroundColor: '#F6F6F7',
padding: 5,
borderRadius: '5px',
} },
React.createElement("div", { style: {
display: 'flex',
alignItems: 'center',
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5,
} },
React.createElement("div", { style: {
borderRadius: '4px',
width: '18px',
height: '18px',
background: `linear-gradient(${item.color}, ${item.color})`,
alignItems: 'center',
alignContent: 'center',
} }),
React.createElement("p", { style: {
marginLeft: '10px',
fontSize: '14px',
marginRight: 4,
color: '#999',
} }, item === null || item === void 0 ? void 0 : item.payload.name))))))));
};
const renderActiveShape = (props) => {
const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, payload, percent } = props;
return (React.createElement("g", null,
React.createElement("text", { x: cx, y: cy, dy: -8, textAnchor: 'middle', fill: fill, style: { fontSize: '18px' } }, payload.name),
React.createElement("text", { x: cx, y: cy, dy: 12, textAnchor: 'middle', fill: fill }, `(${(percent * 100).toFixed(2)}%)`),
React.createElement(Sector, { cx: cx, cy: cy, opacity: 0.5, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, fill: fill, cornerRadius: 5 })));
};
return (React.createElement(ResponsiveContainer, { height: 500, width: '100%' },
React.createElement(PieChart, { height: 400, onMouseLeave: onMouseLeave, width: 800 },
React.createElement(Pie, { activeIndex: activeIndex, activeShape: renderActiveShape, cx: '50%', cy: '50%', data: data, dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', innerRadius: 130, ...(!hiddenLabel && {
label: ({ cx, cy, index, innerRadius, midAngle, outerRadius, value }) => {
var _a;
const radius = 25 + innerRadius + (outerRadius - innerRadius);
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
if (value === 0) {
return React.createElement(React.Fragment, null);
}
return (React.createElement("text", { dominantBaseline: 'central', fill: '#8884d8', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, (_a = data[index]) === null || _a === void 0 ? void 0 :
_a.name,
" (",
value,
")"));
},
}), onMouseEnter: onPieEnter, outerRadius: outerRadius, cornerRadius: 5, paddingAngle: 1, labelLine: false, style: { outline: 'none' } }, data.map((_entry, index) => (React.createElement(Cell, { key: `cell-${index + 1}`, fill: color[index % color.length] })))),
hiddenLegend && React.createElement(Legend, { content: React.createElement(CustomToolLegend, null) }))));
}
export default PHXPieChart;
//# sourceMappingURL=PieChart.js.map