feat(pie): add support for legends on Pie component

plouc · Dec 7, 2017 · 7092fbe · 7092fbe
1 parent b229fe9
commit 7092fbe
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 26 deletions.
diff --git a/packages/nivo-pie/package.json b/packages/nivo-pie/package.json
@@ -7,6 +7,7 @@
   "jsnext:main": "es/index.js",
   "dependencies": {
     "@nivo/core": "0.32.0",
+    "@nivo/legends": "0.33.0-1",
     "d3-shape": "^1.2.0",
     "react-motion": "^0.5.2",
     "recompose": "^0.26.0"

diff --git a/packages/nivo-pie/src/Pie.js b/packages/nivo-pie/src/Pie.js
@@ -7,14 +7,15 @@
  * file that was distributed with this source code.
  */
 import React from 'react'
+import { pie as d3Pie, arc as d3Arc } from 'd3-shape'
 import { Motion, TransitionMotion, spring } from 'react-motion'
 import { getInheritedColorGenerator } from '@nivo/core'
 import { getLabelGenerator } from '@nivo/core'
 import { degreesToRadians, radiansToDegrees } from '@nivo/core'
 import { bindDefs } from '@nivo/core'
 import { Container, SvgWrapper } from '@nivo/core'
 import { BasicTooltip } from '@nivo/core'
-import { pie as d3Pie, arc as d3Arc } from 'd3-shape'
+import { BoxLegendSvg } from '@nivo/legends'
 import PieRadialLabels from './PieRadialLabels'
 import PieSlicesLabels from './PieSlicesLabels'
 import { PiePropTypes } from './props'
@@ -71,6 +72,8 @@ const Pie = ({
     // interactivity
     isInteractive,
     tooltipFormat,
+
+    legends
 }) => {
     const centerX = width / 2
     const centerY = height / 2
@@ -113,10 +116,15 @@ const Pie = ({
     const arc = d3Arc()
     arc.outerRadius(radius)
 
-    const enhancedData = data.map(d => {
-        const color = getColor(d)
-        return { ...d, color }
-    })
+    const enhancedData = data.map(d => ({
+        ...d,
+        color: getColor(d)
+    }))
+
+    const legendData = enhancedData.map(d => ({
+        label: d.label,
+        fill: d.color
+    }))
 
     const boundDefs = bindDefs(defs, enhancedData, fill)
 
@@ -209,6 +217,15 @@ const Pie = ({
                             )
                         }}
                     </Motion>
+                    {legends.map((legend, i) => (
+                        <BoxLegendSvg
+                            key={i}
+                            {...legend}
+                            containerWidth={width}
+                            containerHeight={height}
+                            data={legendData}
+                        />
+                    ))}
                 </SvgWrapper>
             )}
         </Container>

diff --git a/packages/nivo-pie/src/props.js b/packages/nivo-pie/src/props.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
+import { LegendPropShape } from '@nivo/legends'
 
 export const PiePropTypes = {
     data: PropTypes.arrayOf(
@@ -60,6 +61,8 @@ export const PiePropTypes = {
     // interactivity
     isInteractive: PropTypes.bool,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 }
 
 export const PieDefaultProps = {
@@ -89,4 +92,6 @@ export const PieDefaultProps = {
 
     // interactivity
     isInteractive: true,
+
+    legends: []
 }
diff --git a/website/package.json b/website/package.json
@@ -9,19 +9,19 @@
         "source-map-explorer": "^1.5.0"
     },
     "dependencies": {
-        "@nivo/bar": "0.33.0-0",
-        "@nivo/calendar": "0.33.0-0",
-        "@nivo/chord": "0.33.0-0",
+        "@nivo/bar": "0.33.0-1",
+        "@nivo/calendar": "0.33.0-1",
+        "@nivo/chord": "0.33.0-1",
         "@nivo/circle-packing": "0.32.0",
         "@nivo/core": "0.32.0",
         "@nivo/generators": "0.32.0",
-        "@nivo/heatmap": "0.33.0-0",
-        "@nivo/legends": "0.33.0-0",
-        "@nivo/line": "0.33.0-0",
+        "@nivo/heatmap": "0.33.0-1",
+        "@nivo/legends": "0.33.0-1",
+        "@nivo/line": "0.33.0-1",
         "@nivo/pie": "0.32.0",
-        "@nivo/radar": "0.33.0-0",
+        "@nivo/radar": "0.33.0-1",
         "@nivo/sankey": "0.32.0",
-        "@nivo/stream": "0.32.0",
+        "@nivo/stream": "0.33.0-1",
         "@nivo/sunburst": "0.32.0",
         "@nivo/treemap": "0.32.0",
         "@nivo/voronoi": "0.32.0",

diff --git a/website/src/components/charts/pie/Pie.js b/website/src/components/charts/pie/Pie.js
@@ -13,7 +13,7 @@ import MediaQuery from 'react-responsive'
 import ChartHeader from '../../ChartHeader'
 import ChartTabs from '../../ChartTabs'
 import PieControls from './PieControls'
-import { ResponsivePie } from '@nivo/pie'
+import { ResponsivePie, PieDefaultProps } from '@nivo/pie'
 import generateCode from '../../../lib/generateChartCode'
 import ComponentPropsDocumentation from '../../properties/ComponentPropsDocumentation'
 import properties from './props'
@@ -24,7 +24,20 @@ import defaultProps from './defaultProps'
 
 export default class Pie extends Component {
     state = {
-        settings: omit(defaultProps, ['width', 'height']),
+        settings: {
+            ...omit(defaultProps, ['width', 'height']),
+            legends: [
+                {
+                    anchor: 'bottom',
+                    direction: 'row',
+                    translateY: 56,
+                    itemWidth: 100,
+                    itemHeight: 14,
+                    symbolSize: 14,
+                    symbolShape: 'circle',
+                },
+            ],
+        },
     }
 
     handleSettingsUpdate = settings => {
@@ -37,7 +50,7 @@ export default class Pie extends Component {
 
         const mappedSettings = propsMapper(settings)
 
-        const code = generateCode('Pie', mappedSettings, { pkg: '@nivo/pie' })
+        const code = generateCode('Pie', mappedSettings, { pkg: '@nivo/pie', defaults: PieDefaultProps })
 
         const header = (
             <ChartHeader
@@ -90,27 +103,27 @@ export default class Pie extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
                     <ChartTabs chartClass="pie" code={code} data={data}>
                         <ResponsivePie data={data} {...mappedSettings} theme={nivoTheme} />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <PieControls
                         scope="Pie"
                         settings={settings}
                         onChange={this.handleSettingsUpdate}
                     />
                     <ComponentPropsDocumentation chartClass="Pie" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }

diff --git a/website/src/components/charts/pie/PiePage.js b/website/src/components/charts/pie/PiePage.js
@@ -11,7 +11,7 @@ import Helmet from 'react-helmet'
 import { generateProgrammingLanguageStats } from '@nivo/generators'
 
 const generateData = () => {
-    return generateProgrammingLanguageStats(true, 9).map(d => ({
+    return generateProgrammingLanguageStats(true, 7).map(d => ({
         id: d.label,
         ...d,
     }))

diff --git a/website/src/components/charts/pie/defaultProps.js b/website/src/components/charts/pie/defaultProps.js
@@ -12,7 +12,7 @@ export default {
     height: 800,
 
     margin: {
-        top: 80,
+        top: 40,
         right: 80,
         bottom: 80,
         left: 80,
@@ -24,7 +24,7 @@ export default {
     cornerRadius: 3,
 
     // Styling
-    colors: 'nivo',
+    colors: 'd320c',
     colorBy: 'id',
 
     // border