feat(sankey): add support for legends on Sankey component

plouc · Dec 7, 2017 · feccf22 · feccf22
1 parent d5da774
commit feccf22
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 17 deletions.
diff --git a/packages/nivo-pie/src/Pie.js b/packages/nivo-pie/src/Pie.js
@@ -73,7 +73,7 @@ const Pie = ({
     isInteractive,
     tooltipFormat,
 
-    legends
+    legends,
 }) => {
     const centerX = width / 2
     const centerY = height / 2
@@ -118,12 +118,12 @@ const Pie = ({
 
     const enhancedData = data.map(d => ({
         ...d,
-        color: getColor(d)
+        color: getColor(d),
     }))
 
     const legendData = enhancedData.map(d => ({
         label: d.label,
-        fill: d.color
+        fill: d.color,
     }))
 
     const boundDefs = bindDefs(defs, enhancedData, fill)

diff --git a/packages/nivo-pie/src/props.js b/packages/nivo-pie/src/props.js
@@ -93,5 +93,5 @@ export const PieDefaultProps = {
     // interactivity
     isInteractive: true,
 
-    legends: []
+    legends: [],
 }
diff --git a/packages/nivo-sankey/package.json b/packages/nivo-sankey/package.json
@@ -7,6 +7,7 @@
   "jsnext:main": "es/index.js",
   "dependencies": {
     "@nivo/core": "0.32.0",
+    "@nivo/legends": "0.33.0-2",
     "d3-sankey": "^0.7.1",
     "react-motion": "^0.5.2",
     "recompose": "^0.26.0"

diff --git a/packages/nivo-sankey/src/Sankey.js b/packages/nivo-sankey/src/Sankey.js
@@ -10,6 +10,7 @@ import React from 'react'
 import { cloneDeep, uniq } from 'lodash'
 import { sankey as d3Sankey } from 'd3-sankey'
 import { Container, SvgWrapper } from '@nivo/core'
+import { BoxLegendSvg } from '@nivo/legends'
 import SankeyNodes from './SankeyNodes'
 import SankeyLinks from './SankeyLinks'
 import SankeyLabels from './SankeyLabels'
@@ -76,6 +77,8 @@ const Sankey = ({
     isInteractive,
     onClick,
     tooltipFormat,
+
+    legends,
 }) => {
     const sankey = d3Sankey()
         .nodeAlign(sankeyAlignmentFromProp(align))
@@ -101,6 +104,11 @@ const Sankey = ({
         link.color = getLinkColor(link)
     })
 
+    const legendData = data.nodes.map(node => ({
+        label: node.label,
+        fill: node.color,
+    }))
+
     const motionProps = {
         animate,
         motionDamping,
@@ -187,6 +195,15 @@ const Sankey = ({
                             {...motionProps}
                         />
                     )}
+                    {legends.map((legend, i) => (
+                        <BoxLegendSvg
+                            key={i}
+                            {...legend}
+                            containerWidth={width}
+                            containerHeight={height}
+                            data={legendData}
+                        />
+                    ))}
                 </SvgWrapper>
             )}
         </Container>

diff --git a/packages/nivo-sankey/src/props.js b/packages/nivo-sankey/src/props.js
@@ -9,6 +9,7 @@
 import PropTypes from 'prop-types'
 import { sankeyCenter, sankeyJustify, sankeyLeft, sankeyRight } from 'd3-sankey'
 import { noop } from '@nivo/core'
+import { LegendPropShape } from '@nivo/legends'
 
 export const sankeyAlignmentPropMapping = {
     center: sankeyCenter,
@@ -75,6 +76,8 @@ export const SankeyPropTypes = {
     isInteractive: PropTypes.bool.isRequired,
     onClick: PropTypes.func.isRequired,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 }
 
 export const SankeyDefaultProps = {
@@ -107,4 +110,6 @@ export const SankeyDefaultProps = {
     // interactivity
     isInteractive: true,
     onClick: noop,
+
+    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-1",
-        "@nivo/calendar": "0.33.0-1",
-        "@nivo/chord": "0.33.0-1",
+        "@nivo/bar": "0.33.0-2",
+        "@nivo/calendar": "0.33.0-2",
+        "@nivo/chord": "0.33.0-2",
         "@nivo/circle-packing": "0.32.0",
         "@nivo/core": "0.32.0",
         "@nivo/generators": "0.32.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-1",
+        "@nivo/heatmap": "0.33.0-2",
+        "@nivo/legends": "0.33.0-2",
+        "@nivo/line": "0.33.0-2",
+        "@nivo/pie": "0.33.0-2",
+        "@nivo/radar": "0.33.0-2",
         "@nivo/sankey": "0.32.0",
-        "@nivo/stream": "0.33.0-1",
+        "@nivo/stream": "0.33.0-2",
         "@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
@@ -50,7 +50,10 @@ export default class Pie extends Component {
 
         const mappedSettings = propsMapper(settings)
 
-        const code = generateCode('Pie', mappedSettings, { pkg: '@nivo/pie', defaults: PieDefaultProps })
+        const code = generateCode('Pie', mappedSettings, {
+            pkg: '@nivo/pie',
+            defaults: PieDefaultProps,
+        })
 
         const header = (
             <ChartHeader
@@ -98,6 +101,10 @@ export default class Pie extends Component {
                         the storybook
                     </a>.
                 </p>
+                <p className="description">
+                    See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
+                    legends for this component.
+                </p>
             </div>
         )
 

diff --git a/website/src/components/charts/radar/Radar.js b/website/src/components/charts/radar/Radar.js
@@ -148,6 +148,10 @@ export default class Radar extends Component {
                         the storybook
                     </a>.
                 </p>
+                <p className="description">
+                    See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
+                    legends for this component.
+                </p>
             </div>
         )
 

diff --git a/website/src/components/charts/sankey/Sankey.js b/website/src/components/charts/sankey/Sankey.js
@@ -25,9 +25,9 @@ export default class Sankey extends Component {
         settings: {
             margin: {
                 top: 40,
-                right: 60,
+                right: 160,
                 bottom: 40,
-                left: 60,
+                left: 50,
             },
 
             align: 'justify',
@@ -68,6 +68,19 @@ export default class Sankey extends Component {
 
             // interactivity
             isInteractive: true,
+
+            legends: [
+                {
+                    anchor: 'bottom-right',
+                    direction: 'column',
+                    translateX: 130,
+                    itemWidth: 100,
+                    itemHeight: 14,
+                    itemDirection: 'right-to-left',
+                    itemsSpacing: 2,
+                    symbolSize: 14,
+                },
+            ],
         },
     }
 
@@ -143,6 +156,10 @@ export default class Sankey extends Component {
                         the storybook
                     </a>.
                 </p>
+                <p className="description">
+                    See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
+                    legends for this component.
+                </p>
             </div>
         )
 

diff --git a/website/src/components/charts/sankey/SankeyPage.js b/website/src/components/charts/sankey/SankeyPage.js
@@ -11,7 +11,7 @@ import Helmet from 'react-helmet'
 import random from 'lodash/random'
 import { generateSankeyData } from '@nivo/generators'
 
-const generateData = () => generateSankeyData({ nodeCount: 11, maxIterations: 2 })
+const generateData = () => generateSankeyData({ nodeCount: 9, maxIterations: 2 })
 
 export default class SankeyPage extends Component {
     state = {