diff --git a/packages/funnel/src/Part.js b/packages/funnel/src/Part.js
index 0994f7c8d4..80f7b421f5 100644
--- 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 })
@@ -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
index 863356f4ab..97429991ce 100644
--- 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 => (
))
diff --git a/packages/funnel/src/props.js b/packages/funnel/src/props.js
index 493b20b61a..60d60971fc 100644
--- 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
index 1464d58012..aaa3d4a160 100644
--- 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
index dfa662673c..fa34707669 100644
--- 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,