Skip to content

Commit

Permalink
feat(chord): add support for legends on Chord component
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte committed Dec 7, 2017
1 parent 3cfe7ec commit 9708b53
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/nivo-chord/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 17 additions & 0 deletions packages/nivo-chord/src/Chord.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -60,6 +61,8 @@ const Chord = ({
setCurrentRibbon,
getArcOpacity,
getRibbonOpacity,

legends,
}) => {
const centerX = width / 2
const centerY = height / 2
Expand All @@ -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 }) => {
Expand Down Expand Up @@ -114,6 +122,15 @@ const Chord = ({
/>
)}
</g>
{legends.map((legend, i) => (
<BoxLegendSvg
key={i}
{...legend}
containerWidth={width}
containerHeight={height}
data={legendData}
/>
))}
</SvgWrapper>
)
}}
Expand Down
5 changes: 5 additions & 0 deletions packages/nivo-chord/src/props.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -50,6 +51,8 @@ export const ChordPropTypes = {

// canvas specific
pixelRatio: PropTypes.number.isRequired,

legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
}

export const ChordDefaultProps = {
Expand Down Expand Up @@ -87,4 +90,6 @@ export const ChordDefaultProps = {
// canvas specific
pixelRatio:
global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,

legends: [],
}
18 changes: 17 additions & 1 deletion website/src/components/charts/chord/Chord.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default class Chord extends Component {
margin: {
top: 60,
right: 60,
bottom: 60,
bottom: 90,
left: 60,
},

Expand Down Expand Up @@ -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',
},
],
},
}

Expand Down Expand Up @@ -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>
)

Expand Down

0 comments on commit 9708b53

Please sign in to comment.