feat(chord): add labels, stories and cavans variant for Chord component

package.json

@@ -67,7 +67,7 @@
     "husky": "^0.14.3",
     "jest": "^20.0.4",
     "lint-staged": "^4.0.3",
-    "nivo-generators": "0.9.0",
+    "nivo-generators": "0.9.3",
     "prettier": "^1.5.3",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",

src/components/axes/Grid.js

@@ -9,7 +9,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
-import Nivo from '../../Nivo'
+import { defaultMotionDamping, defaultMotionStiffness } from '../../defaults'
 import GridLines from './GridLines'
 import { motionPropTypes } from '../../props'
 
@@ -110,8 +110,8 @@ Grid.propTypes = {
 Grid.defaultProps = {
     // motion
     animate: true,
-    motionStiffness: Nivo.defaults.motionStiffness,
-    motionDamping: Nivo.defaults.motionDamping,
+    motionStiffness: defaultMotionStiffness,
+    motionDamping: defaultMotionDamping,
 }
 
 export default pure(Grid)

src/components/axes/GridLines.js

@@ -9,7 +9,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
-import Nivo from '../../Nivo'
 import GridLine from './GridLine'
 
 export default class GridLines extends Component {

src/components/charts/bar/BarCanvas.js

@@ -14,7 +14,7 @@ import Container from '../Container'
 import BasicTooltip from '../../tooltip/BasicTooltip'
 import { BarPropTypes } from './props'
 import enhance from './enhance'
-import { getRelativeCursor, cursorInRect } from '../../../lib/interactivity'
+import { getRelativeCursor, isCursorInRect } from '../../../lib/interactivity'
 
 class BarCanvas extends Component {
     componentDidMount() {
@@ -116,7 +116,7 @@ class BarCanvas extends Component {
 
         const { margin, theme } = this.props
         const bar = this.bars.find(bar =>
-            cursorInRect(bar.x + margin.left, bar.y + margin.top, bar.width, bar.height, x, y)
+            isCursorInRect(bar.x + margin.left, bar.y + margin.top, bar.width, bar.height, x, y)
         )
 
         if (bar !== undefined) {

src/components/charts/calendar/Calendar.js

@@ -8,7 +8,7 @@
  */
 import _ from 'lodash'
 import React, { Component } from 'react'
-import Nivo from '../../../Nivo'
+import { defaultMargin } from '../../../defaults'
 import SvgWrapper from '../SvgWrapper'
 import CalendarLayout from '../../../lib/charts/calendar/CalendarLayout'
 import { calendarPropTypes, calendarDefaultProps } from './CalendarProps'
@@ -54,7 +54,7 @@ export default class Calendar extends Component {
             motionDamping,
         } = this.props
 
-        const margin = Object.assign({}, Nivo.defaults.margin, this.props.margin)
+        const margin = Object.assign({}, defaultMargin, this.props.margin)
         const width = this.props.width - margin.left - margin.right
         const height = this.props.height - margin.top - margin.bottom
 

src/components/charts/calendar/CalendarProps.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
-import Nivo from '../../../Nivo'
+import { defaultMargin, defaultMotionDamping, defaultMotionStiffness } from '../../../defaults'
 import { marginPropType, scalePropType } from '../../../props'
 import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from '../../../constants/directions'
 
@@ -34,24 +34,25 @@ export const calendarPropTypes = {
     direction: oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]),
     colorScale: scalePropType.isRequired,
     emptyColor: string.isRequired,
+
     // years
     yearSpacing: number.isRequired,
     yearLegendOffset: number.isRequired,
+
     // days
     daySpacing: number.isRequired,
     dayBorderWidth: number.isRequired,
     dayBorderColor: string.isRequired,
+
     // months
     monthBorderWidth: number.isRequired,
     monthBorderColor: string.isRequired,
     monthLegendOffset: number.isRequired,
+
     // transitions
     animate: bool.isRequired,
     motionStiffness: number.isRequired, // react-motion
     motionDamping: number.isRequired, // react-motion
-    transitionDuration: number.isRequired, // d3 transitions
-    transitionEasing: string.isRequired, // d3 transitions
-    transitionStaggering: number.isRequired, // d3 transitions
 }
 
 /**
@@ -60,26 +61,27 @@ export const calendarPropTypes = {
  * @type {object}
  */
 export const calendarDefaultProps = {
-    margin: Nivo.defaults.margin,
+    margin: defaultMargin,
     direction: DIRECTION_HORIZONTAL,
     onDayClick: () => {},
     emptyColor: '#fff',
+
     // years
     yearSpacing: 30,
     yearLegendOffset: 10,
+
     // days
     daySpacing: 0,
     dayBorderWidth: 1,
     dayBorderColor: '#000',
+
     // months
     monthBorderWidth: 2,
     monthBorderColor: '#000',
     monthLegendOffset: 6,
-    // transitions
+
+    // motion
     animate: false,
-    motionStiffness: Nivo.defaults.motionStiffness, // react-motion
-    motionDamping: Nivo.defaults.motionDamping, // react-motion
-    transitionDuration: Nivo.defaults.transitionDuration, // d3 transitions
-    transitionEasing: Nivo.defaults.transitionEasing, // d3 transitions
-    transitionStaggering: 5, // d3 transitions
+    motionStiffness: defaultMotionStiffness, // react-motion
+    motionDamping: defaultMotionDamping, // react-motion
 }

src/components/charts/chord/Chord.js

@@ -7,111 +7,60 @@
  * file that was distributed with this source code.
  */
 import React from 'react'
-import { getColorRange } from '../../../lib/colors'
 import Container from '../Container'
 import SvgWrapper from '../SvgWrapper'
 import enhance from './enhance'
 import { ChordPropTypes } from './props'
 import ChordRibbons from './ChordRibbons'
 import ChordArcs from './ChordArcs'
+import ChordLabels from './ChordLabels'
 
 const Chord = ({
-    matrix,
-    keys,
-
     // dimensions
     margin,
     width,
     height,
     outerWidth,
     outerHeight,
 
-    ribbonOpacity,
-    ribbonBorderWidth,
-    arcOpacity,
+    // arcs
     arcBorderWidth,
 
-    chord, // computed
+    // ribbons
+    ribbonBorderWidth,
+
+    // labels
+    enableLabels,
+    getLabel, // computed
+    labelOffset,
+    labelRotation,
+    getLabelTextColor,
+
     arcGenerator, // computed
     ribbonGenerator, // computed
 
     // theming
     theme,
-    colors,
 
     // interactivity
     isInteractive,
-    arcHoverOpacity,
-    arcHoverOthersOpacity,
-    ribbonHoverOpacity,
-    ribbonHoverOthersOpacity,
 
     // motion
     animate,
     motionDamping,
     motionStiffness,
 
-    currentArc,
+    ribbons, // computed
+    arcs, // computed
+    radius, // computed
     setCurrentArc,
-    currentRibbon,
     setCurrentRibbon,
+    getArcOpacity,
+    getRibbonOpacity,
 }) => {
     const centerX = width / 2
     const centerY = height / 2
 
-    const color = getColorRange(colors)
-
-    const colorById = keys.reduce((acc, key) => {
-        acc[key] = color(key)
-        return acc
-    }, {})
-
-    const ribbons = chord(matrix)
-    ribbons.forEach(ribbon => {
-        ribbon.source.id = keys[ribbon.source.index]
-        ribbon.source.color = colorById[ribbon.source.id]
-        ribbon.target.id = keys[ribbon.target.index]
-        ribbon.target.color = colorById[ribbon.target.id]
-        const ribbonKeys = [ribbon.source.id, ribbon.target.id]
-        ribbonKeys.sort()
-        ribbon.key = ribbonKeys.sort().join('.')
-    })
-
-    const arcs = ribbons.groups.map(arc => {
-        arc.key = arc.id = keys[arc.index]
-        arc.color = colorById[arc.id]
-        return arc
-    })
-
-    let getArcOpacity = () => arcOpacity
-    let getRibbonOpacity = () => ribbonOpacity
-    if (isInteractive) {
-        if (currentArc) {
-            getArcOpacity = arc => {
-                if (arc.id === currentArc.id) return arcHoverOpacity
-                return arcHoverOthersOpacity
-            }
-            getRibbonOpacity = ribbon => {
-                if (ribbon.source.id === currentArc.id) return ribbonHoverOpacity
-                return ribbonHoverOthersOpacity
-            }
-        } else if (currentRibbon) {
-            getArcOpacity = arc => {
-                if (arc.id === currentRibbon.source.id || arc.id === currentRibbon.target.id)
-                    return arcHoverOpacity
-                return arcHoverOthersOpacity
-            }
-            getRibbonOpacity = ribbon => {
-                if (
-                    ribbon.source.id === currentRibbon.source.id &&
-                    ribbon.target.id === currentRibbon.target.id
-                )
-                    return ribbonHoverOpacity
-                return ribbonHoverOthersOpacity
-            }
-        }
-    }
-
     const motionProps = {
         animate,
         motionDamping,
@@ -146,6 +95,16 @@ const Chord = ({
                                 hideTooltip={hideTooltip}
                                 {...motionProps}
                             />
+                            {enableLabels &&
+                                <ChordLabels
+                                    arcs={arcs}
+                                    radius={radius + labelOffset}
+                                    rotation={labelRotation}
+                                    getLabel={getLabel}
+                                    getColor={getLabelTextColor}
+                                    theme={theme}
+                                    {...motionProps}
+                                />}
                         </g>
                     </SvgWrapper>
                 )

src/components/charts/chord/ChordArcTooltip.js

@@ -0,0 +1,22 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import pure from 'recompose/pure'
+import BasicTooltip from '../../tooltip/BasicTooltip'
+
+const ChordArcTooltip = ({ arc, theme }) =>
+    <BasicTooltip id={arc.id} value={arc.value} color={arc.color} enableChip={true} theme={theme} />
+
+ChordArcTooltip.propTypes = {
+    arc: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+}
+
+export default pure(ChordArcTooltip)

src/components/charts/chord/ChordArcs.js

@@ -9,11 +9,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
+import pure from 'recompose/pure'
 import { colorMotionSpring, getInterpolatedColor } from '../../../lib/colors'
-import BasicTooltip from '../../tooltip/BasicTooltip'
-
-const ArcTooltip = ({ arc, theme }) =>
-    <BasicTooltip id={arc.id} value={arc.value} color={arc.color} enableChip={true} theme={theme} />
+import ChordArcTooltip from './ChordArcTooltip'
 
 const ChordArcs = ({
     arcs,
@@ -31,7 +29,7 @@ const ChordArcs = ({
     motionStiffness,
 }) => {
     const commonProps = arc => {
-        const arcTooltip = <ArcTooltip arc={arc} theme={theme} />
+        const arcTooltip = <ChordArcTooltip arc={arc} theme={theme} />
 
         return {
             strokeWidth: arcBorderWidth,
@@ -74,6 +72,7 @@ const ChordArcs = ({
     const springConfig = {
         damping: motionDamping,
         stiffness: motionStiffness,
+        precision: 0.001,
     }
 
     return (
@@ -127,4 +126,4 @@ ChordArcs.propTypes = {
     hideTooltip: PropTypes.func.isRequired,
 }
 
-export default ChordArcs
+export default pure(ChordArcs)