From 264ac440531800e52c1b4288479e4335acd9915f Mon Sep 17 00:00:00 2001
From: Paul Sachs <psachs21@users.noreply.github.com>
Date: Fri, 15 Jun 2018 11:29:31 -0400
Subject: [PATCH 1/2] Support Custom Rendering For Pie Charts

I'd like to be able to animate a pie chart but for most animation frameworks, we need access to the children groups in order to modify the path parameters. By adding an optional render function, we can add animation to the pie chart while allowing users to choose their own animation framework.
---
 packages/vx-shape/src/shapes/Pie.js | 45 +++++++++++++++++------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/vx-shape/src/shapes/Pie.js b/packages/vx-shape/src/shapes/Pie.js
index 5d86bba83..dde2eba4d 100644
--- a/packages/vx-shape/src/shapes/Pie.js
+++ b/packages/vx-shape/src/shapes/Pie.js
@@ -5,7 +5,7 @@ import { arc as d3Arc, pie as d3Pie } from 'd3-shape';
 import additionalProps from '../util/additionalProps';
 
 export default function Pie({
-  className = '',
+  className = "",
   top = 0,
   left = 0,
   data,
@@ -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 renderGroupArg = {
+    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 (
     <Group className="vx-pie-arcs-group" top={top} left={left}>
-      {arcs.map((arc, i) => {
-        let c;
-        if (centroid) c = path.centroid(arc);
-        return (
-          <g key={`pie-arc-${i}`}>
-            <path
-              className={cx('vx-pie-arc', className)}
-              d={path(arc)}
-              {...additionalProps(restProps, {
-                ...arc,
-                index: i,
-                centroid: c
-              })}
-            />
-            {centroid && centroid(c, arc)}
-          </g>
-        );
-      })}
+      {children
+        ? children(renderGroupArg)
+        : arcs.map((arc, i) => {
+            const pathProps = renderGroupArg.generatePathProps(arc, i);
+            return (
+              <g key={`pie-arc-${i}`}>
+                <path {...pathProps} />
+                {renderGroupArg.generateCentroid(arc)}
+              </g>
+            );
+          })}
     </Group>
   );
 }

From e2d5fe0c97fd7f41febcf2548c3322a6870f34ac Mon Sep 17 00:00:00 2001
From: Paul Sachs <paul.sachs@ibm.com>
Date: Fri, 15 Jun 2018 11:44:15 -0400
Subject: [PATCH 2/2] Fix prettier differences. Some cleanup.

---
 packages/vx-shape/src/shapes/Pie.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/vx-shape/src/shapes/Pie.js b/packages/vx-shape/src/shapes/Pie.js
index dde2eba4d..3d78d42a5 100644
--- a/packages/vx-shape/src/shapes/Pie.js
+++ b/packages/vx-shape/src/shapes/Pie.js
@@ -5,7 +5,7 @@ import { arc as d3Arc, pie as d3Pie } from 'd3-shape';
 import additionalProps from '../util/additionalProps';
 
 export default function Pie({
-  className = "",
+  className = '',
   top = 0,
   left = 0,
   data,
@@ -36,10 +36,10 @@ export default function Pie({
   if (startAngle != null) pie.startAngle(startAngle);
   if (endAngle != null) pie.endAngle(endAngle);
   const arcs = pie(data);
-  const renderGroupArg = {
+  const renderFunctionArg = {
     arcs,
     generatePathProps: (arc, index) => ({
-      className: cx("vx-pie-arc", className),
+      className: cx('vx-pie-arc', className),
       d: path(arc),
       ...additionalProps(restProps, {
         ...arc,
@@ -50,15 +50,15 @@ export default function Pie({
     generateCentroid: arc => centroid && centroid(path.centroid(arc), arc)
   };
   return (
-    <Group className="vx-pie-arcs-group" top={top} left={left}>
+    <Group className='vx-pie-arcs-group' top={top} left={left}>
       {children
-        ? children(renderGroupArg)
+        ? children(renderFunctionArg)
         : arcs.map((arc, i) => {
-            const pathProps = renderGroupArg.generatePathProps(arc, i);
+            const pathProps = renderFunctionArg.generatePathProps(arc, i);
             return (
               <g key={`pie-arc-${i}`}>
                 <path {...pathProps} />
-                {renderGroupArg.generateCentroid(arc)}
+                {renderFunctionArg.generateCentroid(arc)}
               </g>
             );
           })}