diff --git a/packages/vx-shape/src/shapes/Pie.js b/packages/vx-shape/src/shapes/Pie.js index 5d86bba83..3d78d42a5 100644 --- a/packages/vx-shape/src/shapes/Pie.js +++ b/packages/vx-shape/src/shapes/Pie.js @@ -20,6 +20,7 @@ export default function Pie({ pieSort, pieSortValues, pieValue, + children, ...restProps }) { const path = d3Arc(); @@ -35,26 +36,32 @@ export default function Pie({ if (startAngle != null) pie.startAngle(startAngle); if (endAngle != null) pie.endAngle(endAngle); const arcs = pie(data); + const renderFunctionArg = { + arcs, + generatePathProps: (arc, index) => ({ + className: cx('vx-pie-arc', className), + d: path(arc), + ...additionalProps(restProps, { + ...arc, + index, + centroid: centroid ? path.centroid(arc) : undefined + }) + }), + generateCentroid: arc => centroid && centroid(path.centroid(arc), arc) + }; return ( - - {arcs.map((arc, i) => { - let c; - if (centroid) c = path.centroid(arc); - return ( - - - {centroid && centroid(c, arc)} - - ); - })} + + {children + ? children(renderFunctionArg) + : arcs.map((arc, i) => { + const pathProps = renderFunctionArg.generatePathProps(arc, i); + return ( + + + {renderFunctionArg.generateCentroid(arc)} + + ); + })} ); }