feat(funnel): add support for custom event handlers

plouc · Jun 17, 2020 · bbdbc37 · bbdbc37
1 parent 9fca13c
commit bbdbc37
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 13 deletions.
diff --git a/packages/funnel/src/Part.js b/packages/funnel/src/Part.js
@@ -10,11 +10,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useSpring, animated, config } from 'react-spring'
 
-export const Part = ({ part, areaGenerator, borderGenerator, setCurrentPartId }) => {
+export const Part = ({ part, areaGenerator, borderGenerator }) => {
     const animatedProps = useSpring({
         areaPath: areaGenerator(part.areaPoints),
         areaColor: part.color,
         borderPath: borderGenerator(part.borderPoints),
+        borderWidth: part.borderWidth,
         borderColor: part.borderColor,
         config: config.wobbly,
     })
@@ -25,7 +26,7 @@ export const Part = ({ part, areaGenerator, borderGenerator, setCurrentPartId })
                 <animated.path
                     d={animatedProps.borderPath}
                     stroke={animatedProps.borderColor}
-                    strokeWidth={part.borderWidth}
+                    strokeWidth={animatedProps.borderWidth}
                     strokeOpacity={part.borderOpacity}
                     fill="none"
                 />
@@ -34,12 +35,9 @@ export const Part = ({ part, areaGenerator, borderGenerator, setCurrentPartId })
                 d={animatedProps.areaPath}
                 fill={animatedProps.areaColor}
                 fillOpacity={part.fillOpacity}
-                onMouseEnter={() => {
-                    setCurrentPartId(part.data.id)
-                }}
-                onMouseLeave={() => {
-                    setCurrentPartId(null)
-                }}
+                onMouseEnter={part.onMouseEnter}
+                onMouseLeave={part.onMouseLeave}
+                onClick={part.onClick}
             />
         </>
     )

diff --git a/packages/funnel/src/Parts.js b/packages/funnel/src/Parts.js
@@ -9,13 +9,12 @@
 import React from 'react'
 import { Part } from './Part'
 
-export const Parts = ({ parts, areaGenerator, borderGenerator, setCurrentPartId }) =>
+export const Parts = ({ parts, areaGenerator, borderGenerator }) =>
     parts.map(part => (
         <Part
             key={part.data.id}
             part={part}
             areaGenerator={areaGenerator}
             borderGenerator={borderGenerator}
-            setCurrentPartId={setCurrentPartId}
         />
     ))
diff --git a/packages/funnel/src/props.js b/packages/funnel/src/props.js
@@ -9,6 +9,7 @@
 import PropTypes from 'prop-types'
 import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors'
 import { motionPropTypes } from '@nivo/core'
+import { annotationSpecPropType } from '@nivo/annotations'
 
 export const FunnelPropTypes = {
     data: PropTypes.arrayOf(
@@ -20,7 +21,10 @@ export const FunnelPropTypes = {
     ).isRequired,
 
     layers: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.oneOf(['separators', 'parts', 'labels']), PropTypes.func])
+        PropTypes.oneOfType([
+            PropTypes.oneOf(['separators', 'parts', 'labels', 'annotations']),
+            PropTypes.func,
+        ])
     ).isRequired,
 
     direction: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
@@ -45,8 +49,11 @@ export const FunnelPropTypes = {
     afterSeparatorLength: PropTypes.number.isRequired,
     afterSeparatorOffset: PropTypes.number.isRequired,
 
+    annotations: PropTypes.arrayOf(annotationSpecPropType).isRequired,
+
     isInteractive: PropTypes.bool.isRequired,
     currentPartSizeExtension: PropTypes.number.isRequired,
+    currentBorderWidth: PropTypes.number,
     onClick: PropTypes.func,
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
@@ -55,7 +62,7 @@ export const FunnelPropTypes = {
 }
 
 export const FunnelDefaultProps = {
-    layers: ['separators', 'parts', 'labels'],
+    layers: ['separators', 'parts', 'labels', 'annotations'],
 
     direction: 'vertical',
     interpolation: 'smooth',
@@ -79,6 +86,8 @@ export const FunnelDefaultProps = {
     afterSeparatorLength: 0,
     afterSeparatorOffset: 0,
 
+    annotations: [],
+
     isInteractive: true,
     currentPartSizeExtension: 0,
 

diff --git a/website/src/data/components/funnel/props.js b/website/src/data/components/funnel/props.js
@@ -295,6 +295,64 @@ const props = [
         defaultValue: defaults.isInteractive,
         controlType: 'switch',
     },
+    {
+        key: 'currentPartSizeExtension',
+        help: `
+            Expand part size by this amount of pixels on each side
+            when it's active 
+        `,
+        required: false,
+        defaultValue: defaults.currentPartSizeExtension,
+        type: 'number',
+        controlType: 'range',
+        group: 'Interactivity',
+        controlOptions: {
+            unit: 'px',
+            min: 0,
+            max: 100,
+        },
+    },
+    {
+        key: 'currentBorderWidth',
+        help: `Override default border width when a part is active.`,
+        required: false,
+        type: 'number',
+        controlType: 'range',
+        group: 'Interactivity',
+        controlOptions: {
+            unit: 'px',
+            min: 0,
+            max: 100,
+        },
+    },
+    {
+        key: 'onMouseEnter',
+        group: 'Interactivity',
+        help: 'onMouseEnter handler.',
+        type: '(part, event) => void',
+        required: false,
+    },
+    {
+        key: 'onMouseMove',
+        group: 'Interactivity',
+        help: 'onMouseMove handler.',
+        type: '(part, event) => void',
+        required: false,
+    },
+    {
+        key: 'onMouseLeave',
+        group: 'Interactivity',
+        help: 'onMouseLeave handler.',
+        type: '(part, event) => void',
+        required: false,
+    },
+    {
+        key: 'onClick',
+        group: 'Interactivity',
+        help: 'onClick handler.',
+        type: '(part, event) => void',
+        required: false,
+    },
 ]
 
 export const groups = groupProperties(props)
diff --git a/website/src/pages/funnel/index.js b/website/src/pages/funnel/index.js
@@ -47,7 +47,8 @@ const initialProperties = {
     afterSeparatorOffset: 20,
 
     isInteractive: true,
-    currentPartSizeExtension: 30,
+    currentPartSizeExtension: 10,
+    currentBorderWidth: 40,
 
     animate: true,
     motionStiffness: 90,