feat(line): add support for mix-blend-mode on areas

plouc · Oct 26, 2018 · c434148 · c434148
1 parent ff9399f
commit c434148
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 5 deletions.
diff --git a/packages/line/index.d.ts b/packages/line/index.d.ts
@@ -67,6 +67,7 @@ declare module '@nivo/line' {
 
         enableArea?: boolean
         areaOpacity?: number
+        areaBlendMode?: string
         areaBaselineValue?: number | string | Date
 
         markers?: CartesianMarkerProps[]

diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js
@@ -56,6 +56,7 @@ const Line = ({
     lineWidth,
     enableArea,
     areaOpacity,
+    areaBlendMode,
 
     enableDots,
     dotSymbol,
@@ -127,6 +128,7 @@ const Line = ({
                         <LineAreas
                             areaGenerator={areaGenerator}
                             areaOpacity={areaOpacity}
+                            areaBlendMode={areaBlendMode}
                             lines={computedData.series}
                             {...motionProps}
                         />

diff --git a/packages/line/src/LineAreas.js b/packages/line/src/LineAreas.js
@@ -9,12 +9,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
-import { motionPropTypes } from '@nivo/core'
-import { SmartMotion } from '@nivo/core'
+import { motionPropTypes, SmartMotion, blendModePropType } from '@nivo/core'
 
 const LineAreas = ({
     areaGenerator,
     areaOpacity,
+    areaBlendMode,
     lines,
     animate,
     motionStiffness,
@@ -33,6 +33,9 @@ const LineAreas = ({
                             fill={areaColor}
                             fillOpacity={areaOpacity}
                             strokeWidth={0}
+                            style={{
+                                mixBlendMode: areaBlendMode,
+                            }}
                         />
                     ))}
             </g>
@@ -64,6 +67,7 @@ const LineAreas = ({
                                 fill={areaColor}
                                 fillOpacity={areaOpacity}
                                 strokeWidth={0}
+                                style={{ mixBlendMode: areaBlendMode }}
                             />
                         )}
                     </SmartMotion>
@@ -74,7 +78,7 @@ const LineAreas = ({
 
 LineAreas.propTypes = {
     areaOpacity: PropTypes.number.isRequired,
-    // motion
+    areaBlendMode: blendModePropType.isRequired,
     ...motionPropTypes,
 }
 

diff --git a/packages/line/src/props.js b/packages/line/src/props.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
-import { lineCurvePropType } from '@nivo/core'
+import { lineCurvePropType, blendModePropType } from '@nivo/core'
 import { axisPropType } from '@nivo/axes'
 import { scalePropType } from '@nivo/scales'
 import { LegendPropShape } from '@nivo/legends'
@@ -71,6 +71,7 @@ export const LinePropTypes = {
     getColor: PropTypes.func.isRequired,
     enableArea: PropTypes.bool.isRequired,
     areaOpacity: PropTypes.number.isRequired,
+    areaBlendMode: blendModePropType.isRequired,
     areaBaselineValue: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string,
@@ -120,6 +121,7 @@ export const LineDefaultProps = {
     enableArea: false,
     areaBaselineValue: 0,
     areaOpacity: 0.2,
+    areaBlendMode: 'normal',
     lineWidth: 2,
     defs: [],
 

diff --git a/website/src/components/charts/line/defaultProps.js b/website/src/components/charts/line/defaultProps.js
@@ -89,7 +89,8 @@ export default {
     dotLabel: 'y',
     dotLabelYOffset: -12,
 
-    enableArea: false,
+    enableArea: true,
+    areaBlendMode: 'normal',
     areaBaselineValue: 0,
     areaOpacity: 0.2,
 

diff --git a/website/src/components/charts/line/props.js b/website/src/components/charts/line/props.js
@@ -290,6 +290,51 @@ export default [
             step: 0.05,
         },
     },
+    {
+        key: 'areaBlendMode',
+        scopes: '*',
+        description: (
+            <span>
+                Defines CSS <code>mix-blend-mode</code> property for areas, see{' '}
+                <a
+                    href="https://developer.mozilla.org/fr/docs/Web/CSS/mix-blend-mode"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    MDN documentation
+                </a>
+                .
+            </span>
+        ),
+        type: '{string}',
+        required: false,
+        default: defaults.areaBlendMode,
+        controlType: 'choices',
+        controlGroup: 'Style',
+        controlOptions: {
+            choices: [
+                'normal',
+                'multiply',
+                'screen',
+                'overlay',
+                'darken',
+                'lighten',
+                'color-dodge',
+                'color-burn',
+                'hard-light',
+                'soft-light',
+                'difference',
+                'exclusion',
+                'hue',
+                'saturation',
+                'color',
+                'luminosity',
+            ].map(key => ({
+                label: key,
+                value: key,
+            })),
+        },
+    },
     ...marginProperties,
     {
         key: 'enableDots',