feat(chord): add support for legends on Chord component

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

Hide file tree

Showing 4 changed files with 40 additions and 1 deletion.
diff --git a/packages/nivo-chord/package.json b/packages/nivo-chord/package.json
@@ -7,6 +7,7 @@
   "jsnext:main": "es/index.js",
   "dependencies": {
     "@nivo/core": "0.32.0",
+    "@nivo/legends": "0.33.0-2",
     "d3-chord": "^1.0.4",
     "d3-format": "^1.2.0",
     "d3-shape": "^1.2.0",

diff --git a/packages/nivo-chord/src/Chord.js b/packages/nivo-chord/src/Chord.js
@@ -8,6 +8,7 @@
  */
 import React from 'react'
 import { Container, SvgWrapper } from '@nivo/core'
+import { BoxLegendSvg } from '@nivo/legends'
 import enhance from './enhance'
 import setDisplayName from 'recompose/setDisplayName'
 import { ChordPropTypes } from './props'
@@ -60,6 +61,8 @@ const Chord = ({
     setCurrentRibbon,
     getArcOpacity,
     getRibbonOpacity,
+
+    legends,
 }) => {
     const centerX = width / 2
     const centerY = height / 2
@@ -70,6 +73,11 @@ const Chord = ({
         motionStiffness,
     }
 
+    const legendData = arcs.map(arc => ({
+        label: arc.id,
+        fill: arc.color,
+    }))
+
     return (
         <Container isInteractive={isInteractive} theme={theme}>
             {({ showTooltip, hideTooltip }) => {
@@ -114,6 +122,15 @@ const Chord = ({
                                 />
                             )}
                         </g>
+                        {legends.map((legend, i) => (
+                            <BoxLegendSvg
+                                key={i}
+                                {...legend}
+                                containerWidth={width}
+                                containerHeight={height}
+                                data={legendData}
+                            />
+                        ))}
                     </SvgWrapper>
                 )
             }}

diff --git a/packages/nivo-chord/src/props.js b/packages/nivo-chord/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 ChordPropTypes = {
     matrix: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
@@ -50,6 +51,8 @@ export const ChordPropTypes = {
 
     // canvas specific
     pixelRatio: PropTypes.number.isRequired,
+
+    legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 }
 
 export const ChordDefaultProps = {
@@ -87,4 +90,6 @@ export const ChordDefaultProps = {
     // canvas specific
     pixelRatio:
         global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,
+
+    legends: [],
 }
diff --git a/website/src/components/charts/chord/Chord.js b/website/src/components/charts/chord/Chord.js
@@ -30,7 +30,7 @@ export default class Chord extends Component {
             margin: {
                 top: 60,
                 right: 60,
-                bottom: 60,
+                bottom: 90,
                 left: 60,
             },
 
@@ -77,6 +77,18 @@ export default class Chord extends Component {
             animate: true,
             motionStiffness: 90,
             motionDamping: 7,
+
+            legends: [
+                {
+                    anchor: 'bottom',
+                    direction: 'row',
+                    translateY: 70,
+                    itemWidth: 80,
+                    itemHeight: 14,
+                    symbolSize: 14,
+                    symbolShape: 'circle',
+                },
+            ],
         },
     }
 
@@ -148,6 +160,10 @@ export default class Chord extends Component {
                     </a>{' '}
                     or <Link to="/chord/api">try it using the API client</Link>.
                 </p>
+                <p className="description">
+                    See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
+                    legends for this component.
+                </p>
             </div>
         )