Merge pull request #153 from FormidableLabs/bug/pie-padding

fix asymmetric padding bug
FormidableLabs · Aug 13, 2017 · 6e3c06b · 6e3c06b
2 parents bd78049 + 94613bb
commit 6e3c06b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -136,7 +136,14 @@ export default class App extends React.Component {
 
         <div style={containerStyle}>
           <VictoryPie
+            startAngle={90} endAngle={-90}
             style={{ parent: parentStyle }}
+            padding={{ bottom: 50, left: 50, right: 10 }}
+            width={400} height={200}
+          />
+          <VictoryPie
+            style={{ parent: parentStyle }}
+            padding={{ bottom: 50, left: 50, right: 10 }}
             width={400} height={200}
           />
 

diff --git a/src/components/helper-methods.js b/src/components/helper-methods.js
@@ -81,12 +81,9 @@ export default {
     const colors = Array.isArray(colorScale) ? colorScale : Style.getColorScale(colorScale);
     const padding = Helpers.getPadding(props);
     const radius = this.getRadius(props, padding);
-    const offsetWidth = width / 2 + padding.left - padding.right;
-    const offsetHeight = height / 2 + padding.top - padding.bottom;
-    const origin = {
-      x: offsetWidth + radius > width ? radius + padding.left - padding.right : offsetWidth,
-      y: offsetHeight + radius > height ? radius + padding.top - padding.bottom : offsetHeight
-    };
+    const offsetWidth = ((radius + padding.left) + (width - radius - padding.right)) / 2;
+    const offsetHeight = ((radius + padding.top) + (height - radius - padding.bottom)) / 2;
+    const origin = { x: offsetWidth, y: offsetHeight };
     const data = Data.getData(props);
     const slices = this.getSlices(props, data);
     const pathFunction = d3Shape.arc()