feat(bar): add support for legends on Bar component

plouc · Dec 7, 2017 · 09b0a2a · 09b0a2a
1 parent 005e21a
commit 09b0a2a
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 5 deletions.
diff --git a/packages/nivo-bar/package.json b/packages/nivo-bar/package.json
@@ -7,6 +7,7 @@
   "jsnext:main": "es/index.js",
   "dependencies": {
     "@nivo/core": "0.32.0",
+    "@nivo/legends": "0.33.0-3",
     "d3-scale": "^1.0.6",
     "d3-shape": "^1.2.0",
     "react-motion": "^0.5.2",

diff --git a/packages/nivo-bar/src/Bar.js b/packages/nivo-bar/src/Bar.js
@@ -9,13 +9,14 @@
 import React from 'react'
 import { TransitionMotion, spring } from 'react-motion'
 import { bindDefs } from '@nivo/core'
+import { Container, SvgWrapper } from '@nivo/core'
+import { Grid, Axes } from '@nivo/core'
+import { CartesianMarkers } from '@nivo/core'
+import { BoxLegendSvg } from '@nivo/legends'
 import { generateGroupedBars, generateStackedBars } from './compute'
 import setDisplayName from 'recompose/setDisplayName'
 import enhance from './enhance'
 import { BarPropTypes } from './props'
-import { Container, SvgWrapper } from '@nivo/core'
-import { Grid, Axes } from '@nivo/core'
-import { CartesianMarkers } from '@nivo/core'
 
 const barWillEnterHorizontal = ({ style }) => ({
     x: style.x.val,
@@ -103,6 +104,8 @@ const Bar = ({
     isInteractive,
     tooltipFormat,
     onClick,
+
+    legends,
 }) => {
     const options = {
         layout,
@@ -150,6 +153,19 @@ const Bar = ({
         targetKey: 'data.fill',
     })
 
+    const legendDataForKeys = result.bars
+        .filter(bar => bar.data.index === 0)
+        .map(bar => ({
+            label: bar.data.id,
+            fill: bar.data.fill ? bar.data.fill : bar.color,
+        }))
+        .reverse()
+
+    const legendDataForIndexes = result.bars.filter(bar => bar.data.id === keys[0]).map(bar => ({
+        label: bar.data.indexValue,
+        fill: bar.data.fill ? bar.data.fill : bar.color,
+    }))
+
     return (
         <Container isInteractive={isInteractive} theme={theme}>
             {({ showTooltip, hideTooltip }) => {
@@ -254,6 +270,26 @@ const Bar = ({
                             yScale={result.yScale}
                             theme={theme}
                         />
+                        {legends.map((legend, i) => {
+                            let legendData
+                            if (legend.dataFrom === 'keys') {
+                                legendData = legendDataForKeys
+                            } else if (legend.dataFrom === 'indexes') {
+                                legendData = legendDataForIndexes
+                            }
+
+                            if (legendData === undefined) return null
+
+                            return (
+                                <BoxLegendSvg
+                                    key={i}
+                                    {...legend}
+                                    containerWidth={width}
+                                    containerHeight={height}
+                                    data={legendData}
+                                />
+                            )
+                        })}
                     </SvgWrapper>
                 )
             }}

diff --git a/packages/nivo-bar/src/props.js b/packages/nivo-bar/src/props.js
@@ -9,6 +9,7 @@
 import PropTypes from 'prop-types'
 import { noop } from '@nivo/core'
 import { defsPropTypes } from '@nivo/core'
+import { LegendPropShape } from '@nivo/legends'
 import BarItem from './BarItem'
 
 export const BarPropTypes = {
@@ -65,6 +66,13 @@ export const BarPropTypes = {
 
     // canvas specific
     pixelRatio: PropTypes.number.isRequired,
+
+    legends: PropTypes.arrayOf(
+        PropTypes.shape({
+            dataFrom: PropTypes.oneOf(['indexes', 'keys']).isRequired,
+            ...LegendPropShape,
+        })
+    ).isRequired,
 }
 
 export const BarDefaultProps = {
@@ -110,4 +118,6 @@ export const BarDefaultProps = {
     // canvas specific
     pixelRatio:
         global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,
+
+    legends: [],
 }
diff --git a/website/src/components/charts/bar/Bar.js b/website/src/components/charts/bar/Bar.js
@@ -31,12 +31,12 @@ export default class Bar extends Component {
 
             margin: {
                 top: 50,
-                right: 60,
+                right: 130,
                 bottom: 50,
                 left: 60,
             },
 
-            padding: 0.2,
+            padding: 0.3,
             innerPadding: 0,
             minValue: 'auto',
             maxValue: 'auto',
@@ -132,6 +132,19 @@ export default class Bar extends Component {
 
             // interactivity
             isInteractive: true,
+
+            legends: [
+                {
+                    dataFrom: 'keys',
+                    anchor: 'bottom-right',
+                    direction: 'column',
+                    translateX: 120,
+                    itemWidth: 100,
+                    itemHeight: 20,
+                    itemsSpacing: 2,
+                    symbolSize: 20,
+                },
+            ],
         },
     }
 
@@ -218,6 +231,15 @@ export default class Bar extends Component {
                         the storybook
                     </a>.
                 </p>
+                <p>
+                    See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
+                    legends for this component.<br />
+                    However it requires an extra property for each legend configuration you pass to{' '}
+                    <code>legends</code> property: <code>dataFrom</code>, it defines how to compute
+                    legend's data and accept <code>indexes</code> or <code>keys</code>.<br />
+                    <code>indexes</code> is suitable for simple bar chart with a single data serie
+                    while <code>keys</code> may be used if you have several ones (groups).
+                </p>
             </div>
         )