feat(pie): ad ability to skip label if slice angle is lower than give…

…n value
plouc · Aug 5, 2017 · c0aecaa · c0aecaa
1 parent ac2bb9e
commit c0aecaa
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/src/components/charts/pie/Pie.js b/src/components/charts/pie/Pie.js
@@ -14,7 +14,7 @@ import Nivo, { defaultTheme } from '../../../Nivo'
 import { marginPropType, motionPropTypes } from '../../../props'
 import { getColorsGenerator, getInheritedColorGenerator } from '../../../lib/colorUtils'
 import { getLabelGenerator } from '../../../lib/propertiesConverters'
-import { degreesToRadians } from '../../../lib/arcUtils'
+import { degreesToRadians, radiansToDegrees } from '../../../lib/arcUtils'
 import SvgWrapper from '../SvgWrapper'
 import { pie as d3Pie, arc as d3Arc } from 'd3-shape'
 import PieRadialLabels from './PieRadialLabels'
@@ -57,7 +57,7 @@ export default class Pie extends Component {
         // slices labels
         enableSlicesLabels: PropTypes.bool.isRequired,
         sliceLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-        sliceLabelsSkipAngle: PropTypes.number,
+        slicesLabelsSkipAngle: PropTypes.number,
         slicesLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
         // theming
@@ -135,7 +135,7 @@ export default class Pie extends Component {
             // slices labels
             enableSlicesLabels,
             sliceLabel,
-            sliceLabelsSkipAngle,
+            slicesLabelsSkipAngle,
             slicesLabelsTextColor,
 
             // theming
@@ -181,7 +181,7 @@ export default class Pie extends Component {
 
         const slicesLabelsProps = {
             label: getLabelGenerator(sliceLabel),
-            skipAngle: sliceLabelsSkipAngle,
+            skipAngle: slicesLabelsSkipAngle,
             textColor: getInheritedColorGenerator(slicesLabelsTextColor, 'axis.textColor'),
         }
 
@@ -211,13 +211,19 @@ export default class Pie extends Component {
                             .cornerRadius(interpolatingStyle.cornerRadius)
                             .innerRadius(interpolatingStyle.innerRadius)
 
-                        const arcsData = interpolatedPie(data).map(d => ({
-                            ...d,
-                            data: {
-                                ...d.data,
-                                color: color(d.data),
-                            },
-                        }))
+                        const arcsData = interpolatedPie(data).map(d => {
+                            const angle = d.endAngle - d.startAngle
+
+                            return {
+                                ...d,
+                                angle,
+                                angleDegrees: radiansToDegrees(angle),
+                                data: {
+                                    ...d.data,
+                                    color: color(d.data),
+                                },
+                            }
+                        })
 
                         return (
                             <g

diff --git a/src/components/charts/pie/PieRadialLabels.js b/src/components/charts/pie/PieRadialLabels.js
@@ -48,6 +48,7 @@ export default class PieRadialLabels extends Component {
             data,
             label,
             radius,
+            skipAngle,
             linkOffset,
             linkDiagonalLength,
             linkHorizontalLength,
@@ -60,7 +61,7 @@ export default class PieRadialLabels extends Component {
 
         return (
             <g>
-                {data.map(d => {
+                {data.filter(d => skipAngle === 0 || d.angleDegrees > skipAngle).map(d => {
                     const angle = midAngle(d) - Math.PI / 2
                     const positionA = positionFromAngle(angle, radius + linkOffset)
                     const positionB = positionFromAngle(

diff --git a/src/components/charts/pie/PieSlicesLabels.js b/src/components/charts/pie/PieSlicesLabels.js
@@ -32,13 +32,13 @@ export default class PieSlicesLabels extends Component {
     }
 
     render() {
-        const { data, label, radius, innerRadius, textColor, theme } = this.props
+        const { data, label, radius, skipAngle, innerRadius, textColor, theme } = this.props
 
         const centerRadius = innerRadius + (radius - innerRadius) / 2
 
         return (
             <g>
-                {data.map(d => {
+                {data.filter(d => skipAngle === 0 || d.angleDegrees > skipAngle).map(d => {
                     const angle = midAngle(d) - Math.PI / 2
                     const position = positionFromAngle(angle, centerRadius)