feat(chord): add support for ribbon blendmode

plouc · Oct 25, 2018 · 2b0cfec · 2b0cfec
1 parent 787341a
commit 2b0cfec
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 67 deletions.
diff --git a/packages/chord/src/Chord.js b/packages/chord/src/Chord.js
@@ -17,22 +17,19 @@ import ChordArcs from './ChordArcs'
 import ChordLabels from './ChordLabels'
 
 const Chord = ({
-    // dimensions
     margin,
     width,
     height,
     outerWidth,
     outerHeight,
 
-    // arcs
     arcBorderWidth,
     getArcBorderColor,
 
-    // ribbons
     ribbonBorderWidth,
+    ribbonBlendMode,
     getRibbonBorderColor,
 
-    // labels
     enableLabel,
     getLabel, // computed
     labelOffset,
@@ -42,14 +39,11 @@ const Chord = ({
     arcGenerator, // computed
     ribbonGenerator, // computed
 
-    // theming
     theme,
 
-    // interactivity
     isInteractive,
     tooltipFormat,
 
-    // motion
     animate,
     motionDamping,
     motionStiffness,
@@ -96,6 +90,7 @@ const Chord = ({
                                 borderWidth={ribbonBorderWidth}
                                 getBorderColor={getRibbonBorderColor}
                                 getOpacity={getRibbonOpacity}
+                                blendMode={ribbonBlendMode}
                                 setCurrent={setCurrentRibbon}
                                 theme={theme}
                                 tooltipFormat={tooltipFormat}

diff --git a/packages/chord/src/ChordRibbons.js b/packages/chord/src/ChordRibbons.js
@@ -15,10 +15,15 @@ import { format as d3Format } from 'd3-format'
 import compose from 'recompose/compose'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
-import { colorMotionSpring, getInterpolatedColor } from '@nivo/core'
-import { midAngle } from '@nivo/core'
-import { TableTooltip, Chip } from '@nivo/core'
-import { motionPropTypes } from '@nivo/core'
+import {
+    colorMotionSpring,
+    getInterpolatedColor,
+    blendModePropType,
+    midAngle,
+    TableTooltip,
+    Chip,
+    motionPropTypes,
+} from '@nivo/core'
 
 /**
  * Used to get ribbon angles, instead of using source and target arcs,
@@ -86,6 +91,7 @@ const ChordRibbons = ({
     borderWidth,
     getBorderColor,
     getOpacity,
+    blendMode,
     theme,
     tooltipFormat,
     setCurrent,
@@ -146,6 +152,7 @@ const ChordRibbons = ({
                             fillOpacity={opacity}
                             stroke={getBorderColor({ ...ribbon, color: ribbon.source.color })}
                             strokeOpacity={opacity}
+                            style={{ mixBlendMode: blendMode }}
                             {...commonProps(ribbon)}
                         />
                     )
@@ -204,6 +211,7 @@ const ChordRibbons = ({
                                 fillOpacity={style.opacity}
                                 stroke={getBorderColor({ ...ribbon, color })}
                                 strokeOpacity={style.opacity}
+                                style={{ mixBlendMode: blendMode }}
                                 {...commonProps(ribbon)}
                             />
                         )
@@ -220,6 +228,7 @@ ChordRibbons.propTypes = {
     borderWidth: PropTypes.number.isRequired,
     getBorderColor: PropTypes.func.isRequired,
     getOpacity: PropTypes.func.isRequired,
+    blendMode: blendModePropType.isRequired,
     setCurrent: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,
     showTooltip: PropTypes.func.isRequired,

diff --git a/packages/chord/src/props.js b/packages/chord/src/props.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
+import { blendModePropType } from '@nivo/core'
 import { LegendPropShape } from '@nivo/legends'
 
 export const ChordPropTypes = {
@@ -17,19 +18,17 @@ export const ChordPropTypes = {
     innerRadiusRatio: PropTypes.number.isRequired,
     innerRadiusOffset: PropTypes.number.isRequired,
 
-    // arcs
     arcOpacity: PropTypes.number.isRequired,
     arcBorderWidth: PropTypes.number.isRequired,
     arcBorderColor: PropTypes.any.isRequired,
     getArcBorderColor: PropTypes.func.isRequired,
 
-    // ribbons
     ribbonOpacity: PropTypes.number.isRequired,
     ribbonBorderWidth: PropTypes.number.isRequired,
     ribbonBorderColor: PropTypes.any.isRequired,
+    ribbonBlendMode: blendModePropType.isRequired,
     getRibbonBorderColor: PropTypes.func.isRequired,
 
-    // labels
     enableLabel: PropTypes.bool.isRequired,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getLabel: PropTypes.func.isRequired, // computed
@@ -38,18 +37,15 @@ export const ChordPropTypes = {
     labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getLabelTextColor: PropTypes.func.isRequired, // computed
 
-    // colors
     colors: PropTypes.any.isRequired,
 
-    // interactivity
     isInteractive: PropTypes.bool.isRequired,
     arcHoverOpacity: PropTypes.number.isRequired,
     arcHoverOthersOpacity: PropTypes.number.isRequired,
     ribbonHoverOpacity: PropTypes.number.isRequired,
     ribbonHoverOthersOpacity: PropTypes.number.isRequired,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-    // canvas specific
     pixelRatio: PropTypes.number.isRequired,
 
     legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
@@ -60,34 +56,29 @@ export const ChordDefaultProps = {
     innerRadiusRatio: 0.9,
     innerRadiusOffset: 0,
 
-    // arcs
     arcOpacity: 1,
     arcBorderWidth: 1,
     arcBorderColor: 'inherit:darker(0.4)',
 
-    // ribbons
     ribbonOpacity: 0.5,
     ribbonBorderWidth: 1,
     ribbonBorderColor: 'inherit:darker(0.4)',
+    ribbonBlendMode: 'normal',
 
-    // labels
     enableLabel: true,
     label: 'id',
     labelOffset: 12,
     labelRotation: 0,
     labelTextColor: 'inherit:darker(1)',
 
-    // colors
     colors: 'nivo',
 
-    // interactivity
     isInteractive: true,
     arcHoverOpacity: 1,
     arcHoverOthersOpacity: 0.15,
     ribbonHoverOpacity: 0.85,
     ribbonHoverOthersOpacity: 0.15,
 
-    // canvas specific
     pixelRatio:
         global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,
 

diff --git a/packages/core/src/props/index.js b/packages/core/src/props/index.js
@@ -27,6 +27,25 @@ export const motionPropTypes = {
     motionDamping: PropTypes.number.isRequired,
 }
 
+export const blendModePropType = PropTypes.oneOf([
+    'normal',
+    'multiply',
+    'screen',
+    'overlay',
+    'darken',
+    'lighten',
+    'color-dodge',
+    'color-burn',
+    'hard-light',
+    'soft-light',
+    'difference',
+    'exclusion',
+    'hue',
+    'saturation',
+    'color',
+    'luminosity',
+])
+
 export * from './colors'
 export * from './curve'
 export * from './defs'

diff --git a/packages/sankey/src/Sankey.js b/packages/sankey/src/Sankey.js
@@ -25,14 +25,12 @@ const Sankey = ({
 
     align,
 
-    // dimensions
     margin,
     width,
     height,
     outerWidth,
     outerHeight,
 
-    // nodes
     nodeOpacity,
     nodeHoverOpacity,
     nodeHoverOthersOpacity,
@@ -44,7 +42,6 @@ const Sankey = ({
     setCurrentNode, // injected
     currentNode, // injected
 
-    // links
     linkOpacity,
     linkHoverOpacity,
     linkHoverOthersOpacity,
@@ -55,28 +52,23 @@ const Sankey = ({
     setCurrentLink, // injected
     currentLink, // injected
 
-    // labels
     enableLabels,
     getLabel,
     labelPosition,
     labelPadding,
     labelOrientation,
     getLabelTextColor, // computed
 
-    // theming
     theme,
     getColor, // computed
 
-    // tooltip
     nodeTooltip,
     linkTooltip,
 
-    // motion
     animate,
     motionDamping,
     motionStiffness,
 
-    // interactivity
     isInteractive,
     onClick,
     tooltipFormat,

diff --git a/packages/sankey/src/SankeyLinks.js b/packages/sankey/src/SankeyLinks.js
@@ -10,29 +10,25 @@ import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
 import { sankeyLinkHorizontal } from 'd3-sankey'
-import { motionPropTypes, SmartMotion } from '@nivo/core'
-import { blendModePropType } from './props'
+import { motionPropTypes, SmartMotion, blendModePropType } from '@nivo/core'
 import SankeyLinksItem from './SankeyLinksItem'
 
 const getLinkPath = sankeyLinkHorizontal()
 
 const SankeyLinks = ({
     links,
 
-    // links
     linkOpacity,
     linkHoverOpacity,
     linkHoverOthersOpacity,
     linkContract,
     linkBlendMode,
     enableLinkGradient,
 
-    // motion
     animate,
     motionDamping,
     motionStiffness,
 
-    // interactivity
     showTooltip,
     hideTooltip,
     setCurrentLink,

diff --git a/packages/sankey/src/SankeyLinksItem.js b/packages/sankey/src/SankeyLinksItem.js
@@ -12,8 +12,7 @@ import compose from 'recompose/compose'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import withHandlers from 'recompose/withHandlers'
 import pure from 'recompose/pure'
-import { BasicTooltip, Chip } from '@nivo/core'
-import { blendModePropType } from './props'
+import { BasicTooltip, Chip, blendModePropType } from '@nivo/core'
 
 const tooltipStyles = {
     container: {