feat(pie): homogeneize sliceLabels properties

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

Hide file tree

Showing 5 changed files with 24 additions and 21 deletions.
diff --git a/packages/pie/src/Pie.js b/packages/pie/src/Pie.js
@@ -64,8 +64,8 @@ const Pie = ({
     // slices labels
     sliceLabel,
     enableSlicesLabels,
-    slicesLabelsSkipAngle,
-    slicesLabelsTextColor,
+    sliceLabelsSkipAngle,
+    sliceLabelsTextColor,
 
     // styling
     defs,
@@ -178,8 +178,8 @@ const Pie = ({
                     innerRadius={innerRadius}
                     theme={theme}
                     label={getSliceLabel}
-                    skipAngle={slicesLabelsSkipAngle}
-                    textColor={getInheritedColorGenerator(slicesLabelsTextColor, theme)}
+                    skipAngle={sliceLabelsSkipAngle}
+                    textColor={getInheritedColorGenerator(sliceLabelsTextColor, theme)}
                 />
             </g>
         )

diff --git a/packages/pie/src/props.js b/packages/pie/src/props.js
@@ -66,8 +66,8 @@ export const PiePropTypes = {
     // slices labels
     enableSlicesLabels: PropTypes.bool.isRequired,
     sliceLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    slicesLabelsSkipAngle: PropTypes.number,
-    slicesLabelsTextColor: inheritedColorPropType.isRequired,
+    sliceLabelsSkipAngle: PropTypes.number,
+    sliceLabelsTextColor: inheritedColorPropType.isRequired,
 
     // styling
     colors: ordinalColorsPropType.isRequired,
@@ -134,8 +134,9 @@ export const PieDefaultProps = {
 
     // slices labels
     enableSlicesLabels: true,
-    sliceLabel: 'value',
-    slicesLabelsTextColor: { theme: 'labels.text.fill' },
+    sliceLabel: 'formattedValue',
+    sliceLabelsSkipAngle: 0,
+    sliceLabelsTextColor: { theme: 'labels.text.fill' },
 
     // styling
     colors: { scheme: 'nivo' },

diff --git a/website/src/data/components/pie/props.js b/website/src/data/components/pie/props.js
@@ -411,22 +411,24 @@ const props = [
             'Defines how to get label text, can be a string (used to access current node data property) or a function which will receive the actual node data.',
         type: 'string | Function',
         required: false,
-        defaultValue: 'value',
+        defaultValue: defaults.sliceLabel,
         controlType: 'choices',
         group: 'Slices labels',
         controlOptions: {
-            choices: ['id', 'value', `d => \`\${d.id} (\${d.value})\``].map(choice => ({
-                label: choice,
-                value: choice,
-            })),
+            choices: ['id', 'value', 'formattedValue', `d => \`\${d.id} (\${d.value})\``].map(
+                choice => ({
+                    label: choice,
+                    value: choice,
+                })
+            ),
         },
     },
     {
-        key: 'slicesLabelsSkipAngle',
+        key: 'sliceLabelsSkipAngle',
         help: `Skip label if corresponding slice's angle is lower than provided value.`,
         type: 'number',
         required: false,
-        defaultValue: 0,
+        defaultValue: defaults.sliceLabelsSkipAngle,
         controlType: 'range',
         group: 'Slices labels',
         controlOptions: {
@@ -437,11 +439,11 @@ const props = [
         },
     },
     {
-        key: 'slicesLabelsTextColor',
+        key: 'sliceLabelsTextColor',
         help: 'Defines how to compute slice label text color.',
         type: 'string | object | Function',
         required: false,
-        defaultValue: defaults.slicesLabelsTextColor,
+        defaultValue: defaults.sliceLabelsTextColor,
         controlType: 'inheritedColor',
         group: 'Slices labels',
     },

diff --git a/website/src/pages/pie/canvas.js b/website/src/pages/pie/canvas.js
@@ -63,8 +63,8 @@ const initialProperties = {
 
     enableSlicesLabels: true,
     sliceLabel: 'value',
-    slicesLabelsSkipAngle: 10,
-    slicesLabelsTextColor: '#333333',
+    sliceLabelsSkipAngle: 10,
+    sliceLabelsTextColor: '#333333',
 
     animate: true,
     motionStiffness: 90,

diff --git a/website/src/pages/pie/index.js b/website/src/pages/pie/index.js
@@ -60,8 +60,8 @@ const initialProperties = {
 
     enableSlicesLabels: true,
     sliceLabel: 'value',
-    slicesLabelsSkipAngle: 10,
-    slicesLabelsTextColor: '#333333',
+    sliceLabelsSkipAngle: 10,
+    sliceLabelsTextColor: '#333333',
 
     animate: true,
     motionStiffness: 90,