phx-react
Version:
PHX REACT
74 lines • 5.41 kB
JavaScript
import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
import DonutChartStyles from './DonutChartStyles';
function DonutChart(props) {
const { colorChart = ['#7857FF', '#00C49F', '#FFBB28', '#FF8042'], dataKey, withChart, data, hiddenLabel = true, pieType, } = props;
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({ cx, cy, innerRadius, midAngle, outerRadius, payload, percent }) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const labelRadius = outerRadius + 20;
const labelRadiusY = outerRadius + 30;
const labelX = cx + labelRadius * Math.cos(-midAngle * RADIAN);
const labelY = cy + labelRadiusY * Math.sin(-midAngle * RADIAN);
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
const maxWidth = 100;
return (React.createElement(React.Fragment, null,
pieType === 'pie-custom-label' ? (React.createElement("foreignObject", { className: 'hidden xl:block', x: labelX > cx ? labelX : labelX - maxWidth, y: labelY - 20, width: maxWidth, height: 60 },
React.createElement("div", { className: `
text-[#999] text-xs leading-[1.2] break-words overflow-wrap-anywhere
${labelX > cx ? 'text-left' : 'text-right'}
`, style: {
wordWrap: 'break-word',
overflowWrap: 'break-word',
hyphens: 'auto',
} }, payload.name))) : (React.createElement("text", { className: 'hidden sm:block', dominantBaseline: 'central', fill: '#999', textAnchor: labelX > cx ? 'start' : 'end', x: labelX, y: labelY }, payload.name)),
hiddenLabel && (React.createElement("text", { dominantBaseline: 'central', fill: 'white', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, `${(percent * 100).toFixed(0)}%`))));
};
const CustomToolLegend = (propsTooltip) => {
const { payload } = propsTooltip;
return (React.createElement("div", { className: 'custom-legend relative mt-4 h-20' },
React.createElement("div", { className: `absolute bottom-0 right-0 flex flex-wrap gap-2 xl:justify-start xl:justify-end
${pieType === 'pie-custom-label' ? 'sm:justify-start' : ''}` }, payload === null || payload === void 0 ? void 0 : payload.map((item) => (React.createElement("div", { key: item.id, className: 'p-1 rounded-md' },
React.createElement("div", { className: 'flex items-center' },
React.createElement("div", { className: 'rounded w-[14px] h-[14px] flex items-center', style: {
background: `linear-gradient(${item.color}, ${item.color})`,
} }),
React.createElement("p", { className: 'ml-1 mr-1 text-xs text-[#999]' }, item === null || item === void 0 ? void 0 : item.payload.name))))))));
};
const CustomToolTip = (propsTooltip) => {
var _a, _b;
const { payload } = propsTooltip;
return (React.createElement("div", { style: {
backgroundColor: '#f5f5f5e8',
margin: 10,
width: '10rem',
padding: 3,
borderRadius: 8,
} },
React.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((item) => (React.createElement("div", { key: item.id, className: 'flex items-start gap-2 p-1 ml-1' },
React.createElement("div", { className: 'rounded w-[14px] h-[14px] flex-shrink-0 mt-1', style: { backgroundColor: item.payload.fill } }),
React.createElement("div", { className: 'flex-1 leading-normal break-words mt-0.5' }, item.name),
React.createElement("div", { className: 'ml-auto' }, item.payload.value))))));
};
const colors = data.reduce((color, _, index) => {
color[`color${index + 1}`] = colorChart[index % colorChart.length];
return color;
}, {});
return (React.createElement(React.Fragment, null,
React.createElement(DonutChartStyles, null),
React.createElement(ResponsiveContainer, { height: 410, width: '100%' },
React.createElement(PieChart, { height: 400, width: 400 },
React.createElement(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, labelLine: false, outerRadius: withChart !== null && withChart !== void 0 ? withChart : 150, style: { outline: 'none' }, strokeWidth: 2, isAnimationActive: false }, data.map((_entry, index) => (React.createElement(Cell, { key: `cell-${index}`, fill: colorChart[index % colorChart.length] })))),
React.createElement(Legend, { content: React.createElement(CustomToolLegend, null) }),
React.createElement(Tooltip, { content: React.createElement(CustomToolTip, null) })))));
}
export default DonutChart;
//# sourceMappingURL=DonutChart.js.map