feat(scatterplot): add support for mix-blend-mode

plouc · Jun 8, 2019 · 4b667da · 4b667da
1 parent 4397dab
commit 4b667da
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 7 deletions.
diff --git a/packages/scatterplot/src/AnimatedNodes.js b/packages/scatterplot/src/AnimatedNodes.js
@@ -9,7 +9,7 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
-import { useMotionConfig } from '@nivo/core'
+import { useMotionConfig, blendModePropType } from '@nivo/core'
 import { NodePropType } from './props'
 import NodeWrapper from './NodeWrapper'
 
@@ -22,6 +22,7 @@ const AnimatedNodes = ({
     onMouseLeave,
     onClick,
     tooltip,
+    blendMode,
 }) => {
     const { springConfig } = useMotionConfig()
 
@@ -54,6 +55,7 @@ const AnimatedNodes = ({
                             onMouseLeave={onMouseLeave}
                             onClick={onClick}
                             tooltip={tooltip}
+                            blendMode={blendMode}
                         />
                     ))}
                 </>
@@ -79,6 +81,8 @@ AnimatedNodes.propTypes = {
         PropTypes.func,
         PropTypes.object
     ]).isRequired,
+
+    blendMode: blendModePropType.isRequired,
 }
 
 export default memo(AnimatedNodes)
diff --git a/packages/scatterplot/src/Node.js b/packages/scatterplot/src/Node.js
@@ -8,12 +8,14 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
+import { blendModePropType } from '@nivo/core'
 
 const Node = ({
     x,
     y,
     size,
     color,
+    blendMode,
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
@@ -24,6 +26,7 @@ const Node = ({
         cy={y}
         r={size / 2}
         fill={color}
+        style={{ mixBlendMode: blendMode }}
         onMouseEnter={onMouseEnter}
         onMouseMove={onMouseMove}
         onMouseLeave={onMouseLeave}
@@ -51,6 +54,7 @@ Node.propTypes = {
     y: PropTypes.number.isRequired,
     size: PropTypes.number.isRequired,
     color: PropTypes.string.isRequired,
+    blendMode: blendModePropType.isRequired,
 
     onMouseEnter: PropTypes.func,
     onMouseMove: PropTypes.func,

diff --git a/packages/scatterplot/src/NodeWrapper.js b/packages/scatterplot/src/NodeWrapper.js
@@ -8,6 +8,7 @@
  */
 import React, { memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
+import { blendModePropType } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
 import { NodePropType } from './props'
 
@@ -24,6 +25,7 @@ const NodeWrapper = ({
     onMouseLeave,
     onClick,
     tooltip,
+    blendMode,
 }) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
@@ -64,6 +66,7 @@ const NodeWrapper = ({
         y,
         size,
         color,
+        blendMode,
         onMouseEnter: isInteractive ? handleMouseEnter : undefined,
         onMouseMove: isInteractive ? handleMouseMove : undefined,
         onMouseLeave: isInteractive ? handleMouseLeave : undefined,
@@ -89,6 +92,8 @@ NodeWrapper.propTypes = {
         PropTypes.func,
         PropTypes.object
     ]).isRequired,
+
+    blendMode: blendModePropType.isRequired,
 }
 
 export default memo(NodeWrapper)
diff --git a/packages/scatterplot/src/ScatterPlot.js b/packages/scatterplot/src/ScatterPlot.js
@@ -30,6 +30,7 @@ const ScatterPlot = props => {
         layers,
 
         colors,
+        blendMode,
 
         size,
         renderNode,
@@ -113,6 +114,7 @@ const ScatterPlot = props => {
             onMouseLeave,
             onClick,
             tooltip,
+            blendMode,
         }),
         markers: null,
         mesh: null,

diff --git a/packages/scatterplot/src/StaticNodes.js b/packages/scatterplot/src/StaticNodes.js
@@ -8,6 +8,7 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
+import { blendModePropType } from '@nivo/core'
 import { NodePropType } from './props'
 import NodeWrapper from './NodeWrapper'
 
@@ -20,6 +21,7 @@ const StaticNodes = ({
     onMouseLeave,
     onClick,
     tooltip,
+    blendMode,
 }) => {
     return (
         <>
@@ -38,6 +40,7 @@ const StaticNodes = ({
                     onMouseLeave={onMouseLeave}
                     onClick={onClick}
                     tooltip={tooltip}
+                    blendMode={blendMode}
                 />
             ))}
         </>
@@ -61,6 +64,8 @@ StaticNodes.propTypes = {
         PropTypes.func,
         PropTypes.object
     ]).isRequired,
+
+    blendMode: blendModePropType.isRequired,
 }
 
 export default memo(StaticNodes)
diff --git a/packages/scatterplot/src/props.js b/packages/scatterplot/src/props.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
-import { noop, motionPropTypes } from '@nivo/core'
+import { noop, motionPropTypes, blendModePropType } from '@nivo/core'
 import { ordinalColorsPropType } from '@nivo/colors'
 import { axisPropType } from '@nivo/axes'
 import { LegendPropShape } from '@nivo/legends'
@@ -75,6 +75,7 @@ const commonPropTypes = {
     ),
 
     colors: ordinalColorsPropType.isRequired,
+    blendMode: blendModePropType.isRequired,
 
     isInteractive: PropTypes.bool.isRequired,
     useMesh: PropTypes.bool.isRequired,
@@ -121,10 +122,11 @@ const commonDefaultProps = {
     axisBottom: {},
     axisLeft: {},
 
-    size: 6,
+    size: 9,
     renderNode: Node,
 
     colors: { scheme: 'nivo' },
+    blendMode: 'normal',
 
     isInteractive: true,
     useMesh: false,

diff --git a/website/src/data/components/scatterplot/props.js b/website/src/data/components/scatterplot/props.js
@@ -233,12 +233,27 @@ const props = [
     },
     {
         key: 'colors',
+        group: 'Style',
         help: 'Defines color range.',
         type: 'string | Function | string[]',
         required: false,
         defaultValue: defaults.colors,
         controlType: 'ordinalColors',
+    },
+    {
+        key: 'blendMode',
         group: 'Style',
+        flavors: ['svg'],
+        help: 'Defines CSS mix-blend-mode property.',
+        description: `
+            Defines CSS \`mix-blend-mode\` property for nodes,
+            see
+            [MDN documentation](https://developer.mozilla.org/fr/docs/Web/CSS/mix-blend-mode).
+        `,
+        type: 'string',
+        required: false,
+        defaultValue: defaults.blendMode,
+        controlType: 'blendMode',
     },
     {
         key: 'layers',

diff --git a/website/src/pages/scatterplot/index.js b/website/src/pages/scatterplot/index.js
@@ -33,12 +33,13 @@ const initialProperties = {
         max: 'auto',
     },
 
-    colors: { scheme: 'nivo' },
+    colors: ScatterPlotDefaultProps.colors,
+    blendMode: 'multiply',
 
-    size: 6,
+    size: ScatterPlotDefaultProps.size,
 
-    enableGridX: true,
-    enableGridY: true,
+    enableGridX: ScatterPlotDefaultProps.enableGridX,
+    enableGridY: ScatterPlotDefaultProps.enableGridY,
     axisTop: {
         enable: false,
         orient: 'top',