feat(pie): add support for sliceLabelsRadiusOffset

plouc · Nov 4, 2020 · d913f50 · d913f50
1 parent 19444c7
commit d913f50
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 49 deletions.
diff --git a/packages/pie/src/Pie.js b/packages/pie/src/Pie.js
@@ -19,7 +19,7 @@ import { getInheritedColorGenerator, useInheritedColor } from '@nivo/colors'
 import { PieSvgDefaultProps, PieSvgPropTypes } from './props'
 import PieSlice from './PieSlice'
 import PieRadialLabels from './PieRadialLabels'
-import PieSliceLabels from './PieSliceLabels'
+import { PieSliceLabels } from './PieSliceLabels'
 import PieLegends from './PieLegends'
 import { useNormalizedData, usePieFromBox, usePieLayerContext } from './hooks'
 
@@ -66,6 +66,7 @@ const Pie = ({
     enableSlicesLabels,
     sliceLabelsSkipAngle,
     sliceLabelsTextColor,
+    sliceLabelsRadiusOffset,
 
     // styling
     defs,
@@ -178,6 +179,7 @@ const Pie = ({
                     innerRadius={innerRadius}
                     theme={theme}
                     label={getSliceLabel}
+                    radiusOffset={sliceLabelsRadiusOffset}
                     skipAngle={sliceLabelsSkipAngle}
                     textColor={getInheritedColorGenerator(sliceLabelsTextColor, theme)}
                 />

diff --git a/packages/pie/src/PieSliceLabels.js b/packages/pie/src/PieSliceLabels.js
@@ -6,61 +6,60 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { midAngle, positionFromAngle, labelsThemePropType } from '@nivo/core'
+import { midAngle, positionFromAngle, useTheme } from '@nivo/core'
 import { datumWithArcPropType } from './props'
 
 const sliceStyle = {
     pointerEvents: 'none',
 }
 
-export default class PieSliceLabels extends Component {
-    static propTypes = {
-        dataWithArc: PropTypes.arrayOf(datumWithArcPropType).isRequired,
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-        skipAngle: PropTypes.number.isRequired,
-        radius: PropTypes.number.isRequired,
-        innerRadius: PropTypes.number.isRequired,
-        textColor: PropTypes.func.isRequired,
-        theme: PropTypes.shape({
-            labels: labelsThemePropType.isRequired,
-        }).isRequired,
-    }
+export const PieSliceLabels = ({
+    dataWithArc,
+    label,
+    radius,
+    radiusOffset,
+    skipAngle,
+    innerRadius,
+    textColor,
+}) => {
+    const theme = useTheme()
 
-    static defaultProps = {
-        skipAngle: 0,
-    }
+    return dataWithArc
+        .filter(datumWithArc => skipAngle === 0 || datumWithArc.arc.angleDeg > skipAngle)
+        .map(datumWithArc => {
+            const angle = midAngle(datumWithArc.arc) - Math.PI / 2
+            const labelRadius = innerRadius + (radius - innerRadius) * radiusOffset
+            const position = positionFromAngle(angle, labelRadius)
 
-    render() {
-        const { dataWithArc, label, radius, skipAngle, innerRadius, textColor, theme } = this.props
-
-        const centerRadius = innerRadius + (radius - innerRadius) / 2
-
-        return dataWithArc
-            .filter(datumWithArc => skipAngle === 0 || datumWithArc.arc.angleDeg > skipAngle)
-            .map(datumWithArc => {
-                const angle = midAngle(datumWithArc.arc) - Math.PI / 2
-                const position = positionFromAngle(angle, centerRadius)
-
-                return (
-                    <g
-                        key={datumWithArc.id}
-                        transform={`translate(${position.x}, ${position.y})`}
-                        style={sliceStyle}
+            return (
+                <g
+                    key={datumWithArc.id}
+                    transform={`translate(${position.x}, ${position.y})`}
+                    style={sliceStyle}
+                >
+                    <text
+                        textAnchor="middle"
+                        dominantBaseline="central"
+                        style={{
+                            ...theme.labels.text,
+                            fill: textColor(datumWithArc, theme),
+                        }}
                     >
-                        <text
-                            textAnchor="middle"
-                            dominantBaseline="central"
-                            style={{
-                                ...theme.labels.text,
-                                fill: textColor(datumWithArc, theme),
-                            }}
-                        >
-                            {label(datumWithArc)}
-                        </text>
-                    </g>
-                )
-            })
-    }
+                        {label(datumWithArc)}
+                    </text>
+                </g>
+            )
+        })
+}
+
+PieSliceLabels.propTypes = {
+    dataWithArc: PropTypes.arrayOf(datumWithArcPropType).isRequired,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    radiusOffset: PropTypes.number.isRequired,
+    skipAngle: PropTypes.number.isRequired,
+    radius: PropTypes.number.isRequired,
+    innerRadius: PropTypes.number.isRequired,
+    textColor: PropTypes.func.isRequired,
 }
diff --git a/packages/pie/src/props.js b/packages/pie/src/props.js
@@ -66,7 +66,8 @@ export const PiePropTypes = {
     // slices labels
     enableSlicesLabels: PropTypes.bool.isRequired,
     sliceLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    sliceLabelsSkipAngle: PropTypes.number,
+    sliceLabelsSkipAngle: PropTypes.number.isRequired,
+    sliceLabelsRadiusOffset: PropTypes.number.isRequired,
     sliceLabelsTextColor: inheritedColorPropType.isRequired,
 
     // styling
@@ -136,6 +137,7 @@ export const PieDefaultProps = {
     enableSlicesLabels: true,
     sliceLabel: 'formattedValue',
     sliceLabelsSkipAngle: 0,
+    sliceLabelsRadiusOffset: 0.5,
     sliceLabelsTextColor: { theme: 'labels.text.fill' },
 
     // styling

diff --git a/website/src/data/components/pie/props.js b/website/src/data/components/pie/props.js
@@ -423,6 +423,23 @@ const props = [
             ),
         },
     },
+    {
+        key: 'sliceLabelsRadiusOffset',
+        help: `
+            Define the radius to use to determine the label position, starting from inner radius,
+            this is expressed as a ratio.
+        `,
+        type: 'number',
+        required: false,
+        defaultValue: defaults.sliceLabelsRadiusOffset,
+        controlType: 'range',
+        group: 'Slices labels',
+        controlOptions: {
+            min: 0,
+            max: 2,
+            step: 0.05,
+        },
+    },
     {
         key: 'sliceLabelsSkipAngle',
         help: `Skip label if corresponding slice's angle is lower than provided value.`,

diff --git a/website/src/pages/pie/canvas.js b/website/src/pages/pie/canvas.js
@@ -63,6 +63,7 @@ const initialProperties = {
 
     enableSlicesLabels: true,
     sliceLabel: 'value',
+    sliceLabelsRadiusOffset: 0.5,
     sliceLabelsSkipAngle: 10,
     sliceLabelsTextColor: '#333333',
 

diff --git a/website/src/pages/pie/index.js b/website/src/pages/pie/index.js
@@ -60,6 +60,7 @@ const initialProperties = {
 
     enableSlicesLabels: true,
     sliceLabel: 'value',
+    sliceLabelsRadiusOffset: 0.5,
     sliceLabelsSkipAngle: 10,
     sliceLabelsTextColor: '#333333',