fix(pie): address some issues with data label prop (#967)

- Fix proptype stating label is required for PieSlice
- Fix PieLegend to use label if available, otherwise id
- Add knob to storybook to display legend

Author: wyze

packages/pie/src/PieLegends.js

@@ -45,11 +45,11 @@ class PieLegends extends Component {
 export const enhance = Component =>
     compose(
         withPropsOnChange(['arcs'], ({ arcs }) => ({
-            data: arcs.map(arc => ({
-                id: arc.data.id,
-                label: arc.data.id,
-                color: arc.color,
-                fill: arc.fill,
+            data: arcs.map(({ color, data: { id, label }, fill }) => ({
+                id: id,
+                label: label || id,
+                color,
+                fill,
             })),
         })),
         pure

packages/pie/src/PieSlice.js

@@ -35,7 +35,7 @@ const PieSlice = ({
     const handleTooltip = e =>
         showTooltip(
             <BasicTooltip
-                id={data.label}
+                id={data.label || data.id}
                 value={data.value}
                 enableChip={true}
                 color={color}
@@ -74,7 +74,7 @@ const PieSlice = ({
 PieSlice.propTypes = {
     data: PropTypes.shape({
         id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        label: PropTypes.string.isRequired,
+        label: PropTypes.string,
         value: PropTypes.number.isRequired,
     }).isRequired,
 

packages/pie/stories/pie.stories.js

@@ -1,25 +1,48 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { withKnobs } from '@storybook/addon-knobs'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
 import { generateProgrammingLanguageStats } from '@nivo/generators'
 import { Pie } from '../src'
 
 const commonProperties = {
     width: 900,
     height: 500,
     margin: { top: 80, right: 120, bottom: 80, left: 120 },
-    data: generateProgrammingLanguageStats(true, 9).map(d => ({
-        id: d.label,
+    data: generateProgrammingLanguageStats(true, 9).map(({ label, ...d }) => ({
+        id: label,
         ...d,
     })),
     animate: true,
 }
 
+const legends = [
+    {
+        anchor: 'bottom',
+        direction: 'row',
+        translateY: 56,
+        itemWidth: 100,
+        itemHeight: 18,
+        itemTextColor: '#999',
+        symbolSize: 18,
+        symbolShape: 'circle',
+        effects: [
+            {
+                on: 'hover',
+                style: {
+                    itemTextColor: '#000',
+                },
+            },
+        ],
+    },
+]
+
 const stories = storiesOf('Pie', module)
 
 stories.addDecorator(withKnobs)
 
-stories.add('default', () => <Pie {...commonProperties} />)
+stories.add('default', () => (
+    <Pie {...commonProperties} legends={boolean('legends', false) ? legends : []} />
+))
 
 stories.add('donut', () => <Pie {...commonProperties} innerRadius={0.6} />)