Include option for padAngle on RadialChart (#920)

* add padAngle functionality

* remove trailing comma

* include padAngle in sunburst

* include padangle in sunburst docs

* include padAngle in simple donut chart showcase

* includ clarification text to radial-chart.md

* include padAngle as function in sunburstWithTooltips

docs/arc-series.md

@@ -76,6 +76,10 @@ Type: `string|number`
 Default: 1  
 The opacity of an arc in the series, from 0 (transparent) to 1 (opaque).
 
+#### padAngle (optional)
+Type: `number|function`
+The padding to be applied between arcs.
+
 <!-- INJECT:"ClockExampleWithLink" -->
 
 ## Series API Reference

docs/radial-chart.md

@@ -67,6 +67,10 @@ SVG paths (which is what the arc series is made up of) have numerous manipulable
 Type: `string`
 The className to be added to an individual arc in the series.
 
+#### padAngle (optional)
+Type: `number|function`
+The padding to be applied between arcs. See above donut chart for an example of a padded angle.
+
 ## Api
 
 ##### angleDomain, angleRange, angleType

docs/sunburst.md

@@ -159,3 +159,7 @@ Type: `function`
 - Should accept arguments (arc node, domEvent)
 
 Pass in a function that will be called on mouseOut on a given arc.
+
+#### padAngle (optional)
+Type: `number|function`
+The padding to be applied between arcs.

showcase/radial-chart/donut-chart.js

@@ -47,7 +47,8 @@ export default class SimpleRadialChart extends Component {
         onValueMouseOver={v => this.setState({value: v})}
         onSeriesMouseOut={v => this.setState({value: false})}
         width={300}
-        height={300}>
+        height={300}
+        padAngle={0.04} >
         {value && <Hint value={value}/>}
       </RadialChart>
     );

showcase/sunbursts/sunburst-with-tooltips.js

@@ -89,7 +89,8 @@ export default class SunburstWithTooltips extends React.Component {
         getLabel={d => d.name}
         getSize={d => d.bigness}
         getColor={d => d.clr}
-        width={350}>
+        width={350}
+        padAngle={() => 0.02}>
         {hoveredCell ? <Hint value={buildValue(hoveredCell)}>
           <div style={tipStyle}>
             <div style={{...boxStyle, background: hoveredCell.clr}}/>

src/plot/series/arc-series.js

@@ -43,7 +43,8 @@ const defaultProps = {
   center: {x: 0, y: 0},
   arcClassName: '',
   className: '',
-  style: {}
+  style: {},
+  padAngle: 0
 };
 
 /**
@@ -127,6 +128,7 @@ class ArcSeries extends AbstractSeries {
       hideSeries,
       marginLeft,
       marginTop,
+      padAngle,
       style
     } = this.props;
 
@@ -179,7 +181,7 @@ class ArcSeries extends AbstractSeries {
             startAngle: angle0(row) || 0,
             endAngle: angle(row)
           };
-          const arcedData = arcBuilder();
+          const arcedData = arcBuilder().padAngle(padAngle);
           const rowStyle = row.style || {};
           const rowClassName = row.className || '';
           return (<path {...{
@@ -211,7 +213,11 @@ ArcSeries.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
-  arcClassName: PropTypes.string
+  arcClassName: PropTypes.string,
+  padAngle: PropTypes.oneOfType([
+    PropTypes.function,
+    PropTypes.number
+  ])
 };
 ArcSeries.defaultProps = defaultProps;
 ArcSeries.displayName = 'ArcSeries';

src/radial-chart/index.js

@@ -191,6 +191,10 @@ RadialChart.propTypes = {
   ).isRequired,
   getAngle: PropTypes.func,
   getAngle0: PropTypes.func,
+  padAngle: PropTypes.oneOfType([
+    PropTypes.function,
+    PropTypes.number
+  ]),
   getRadius: PropTypes.func,
   getRadius0: PropTypes.func,
   getLabel: PropTypes.func,
@@ -210,6 +214,7 @@ RadialChart.defaultProps = {
   className: '',
   colorType: 'category',
   colorRange: DISCRETE_COLOR_RANGE,
+  padAngle: 0,
   getAngle: d => d.angle,
   getAngle0: d => d.angle0,
   getRadius: d => d.radius,

src/sunburst/index.js

@@ -205,7 +205,11 @@ Sunburst.propTypes = {
   onValueMouseOver: PropTypes.func,
   onValueMouseOut: PropTypes.func,
   getSize: PropTypes.func,
-  width: PropTypes.number.isRequired
+  width: PropTypes.number.isRequired,
+  padAngle: PropTypes.oneOfType([
+    PropTypes.function,
+    PropTypes.number
+  ])
 };
 Sunburst.defaultProps = {
   getAngle: d => d.angle,
@@ -215,7 +219,8 @@ Sunburst.defaultProps = {
   getColor: d => d.color,
   hideRootNode: false,
   getLabel: d => d.label,
-  getSize: d => d.size
+  getSize: d => d.size,
+  padAngle: 0
 };
 
 export default Sunburst;

tests/components/radial-tests.js

@@ -19,7 +19,8 @@ const RADIAL_PROPS = {
   ],
   height: 300,
   showLabels: true,
-  width: 400
+  width: 400,
+  padAngle: 0.3
 };
 // make sure that the components render at all
 testRenderWithProps(RadialChart, RADIAL_PROPS);