feat(funnel): add support for current part

packages/funnel/src/Funnel.js

@@ -47,6 +47,7 @@ const Funnel = props => {
         layers,
 
         isInteractive,
+        currentPartSizeExtension,
         onMouseEnter,
         onMouseMove,
         onMouseLeave,
@@ -63,7 +64,14 @@ const Funnel = props => {
     const theme = useTheme()
     const { animate } = useMotionConfig()
 
-    const { areaGenerator, borderGenerator, parts, beforeSeparators, afterSeparators } = useFunnel({
+    const {
+        areaGenerator,
+        borderGenerator,
+        parts,
+        beforeSeparators,
+        afterSeparators,
+        setCurrentPartId,
+    } = useFunnel({
         data,
         width: innerWidth,
         height: innerHeight,
@@ -82,6 +90,7 @@ const Funnel = props => {
         beforeSeparatorOffset,
         afterSeparatorLength,
         afterSeparatorOffset,
+        currentPartSizeExtension,
     })
 
     const layerById = {
@@ -99,6 +108,7 @@ const Funnel = props => {
                 areaGenerator={areaGenerator}
                 borderGenerator={borderGenerator}
                 enableLabel={enableLabel}
+                setCurrentPartId={setCurrentPartId}
             />
         ),
         labels: null,

packages/funnel/src/Part.js

@@ -10,13 +10,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useSpring, animated, config } from 'react-spring'
 
-export const Part = ({ part, areaGenerator, borderGenerator }) => {
+export const Part = ({ part, areaGenerator, borderGenerator, setCurrentPartId }) => {
     const animatedProps = useSpring({
         areaPath: areaGenerator(part.areaPoints),
         areaColor: part.color,
         borderPath: borderGenerator(part.borderPoints),
         borderColor: part.borderColor,
-        config: config.molasses,
+        config: config.wobbly,
     })
 
     return (
@@ -34,6 +34,12 @@ export const Part = ({ part, areaGenerator, borderGenerator }) => {
                 d={animatedProps.areaPath}
                 fill={animatedProps.areaColor}
                 fillOpacity={part.fillOpacity}
+                onMouseEnter={() => {
+                    setCurrentPartId(part.data.id)
+                }}
+                onMouseLeave={() => {
+                    setCurrentPartId(null)
+                }}
             />
         </>
     )

packages/funnel/src/Parts.js

@@ -9,12 +9,13 @@
 import React from 'react'
 import { Part } from './Part'
 
-export const Parts = ({ parts, areaGenerator, borderGenerator }) =>
+export const Parts = ({ parts, areaGenerator, borderGenerator, setCurrentPartId }) =>
     parts.map(part => (
         <Part
             key={part.data.id}
             part={part}
             areaGenerator={areaGenerator}
             borderGenerator={borderGenerator}
+            setCurrentPartId={setCurrentPartId}
         />
     ))

packages/funnel/src/hooks.js

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useState, useCallback } from 'react'
 import { line, area, curveBasis, curveLinear } from 'd3-shape'
 import { scaleLinear } from 'd3-scale'
 import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
@@ -173,6 +173,7 @@ export const useFunnel = ({
     beforeSeparatorOffset = defaults.beforeSeparatorOffset,
     afterSeparatorLength = defaults.afterSeparatorLength,
     afterSeparatorOffset = defaults.afterSeparatorOffset,
+    currentPartSizeExtension = defaults.currentPartSizeExtension,
 }) => {
     const theme = useTheme()
     const getColor = useOrdinalColorScale(colors, 'id')
@@ -210,8 +211,12 @@ export const useFunnel = ({
         [data, direction, innerWidth, innerHeight, spacing]
     )
 
+    const [currentPartId, setCurrentPartId] = useState(null)
+
     const parts = useMemo(() => {
         const enhancedParts = data.map((datum, index) => {
+            const isCurrent = datum.id === currentPartId
+
             let partWidth
             let partHeight
             let y0, x0
@@ -242,6 +247,7 @@ export const useFunnel = ({
                 borderWidth,
                 borderOpacity,
                 formattedValue: formatValue(datum.value),
+                isCurrent,
                 x,
                 x0,
                 x1,
@@ -271,8 +277,14 @@ export const useFunnel = ({
                     part.points.push({ x: nextPart.x1, y: part.y1 })
                     part.points.push({ x: nextPart.x0, y: part.y1 })
                 } else {
-                    part.points.push({ x: part.x1, y: part.y1 })
-                    part.points.push({ x: part.x0, y: part.y1 })
+                    part.points.push({ x: part.points[1].x, y: part.y1 })
+                    part.points.push({ x: part.points[0].x, y: part.y1 })
+                }
+                if (part.isCurrent === true) {
+                    part.points[0].x -= currentPartSizeExtension
+                    part.points[1].x += currentPartSizeExtension
+                    part.points[2].x += currentPartSizeExtension
+                    part.points[3].x -= currentPartSizeExtension
                 }
 
                 part.areaPoints = [
@@ -319,6 +331,12 @@ export const useFunnel = ({
                     part.points.push({ x: part.x1, y: part.y1 })
                 }
                 part.points.push({ x: part.x0, y: part.y1 })
+                if (part.isCurrent === true) {
+                    part.points[0].y -= currentPartSizeExtension
+                    part.points[1].y -= currentPartSizeExtension
+                    part.points[2].y += currentPartSizeExtension
+                    part.points[3].y += currentPartSizeExtension
+                }
 
                 part.areaPoints = [
                     {
@@ -372,6 +390,7 @@ export const useFunnel = ({
         formatValue,
         getBorderColor,
         getLabelColor,
+        currentPartId,
     ])
 
     const [beforeSeparators, afterSeparators] = useMemo(
@@ -406,5 +425,7 @@ export const useFunnel = ({
         borderGenerator,
         beforeSeparators,
         afterSeparators,
+        setCurrentPartId,
+        currentPartId,
     }
 }

packages/funnel/src/props.js

@@ -46,6 +46,7 @@ export const FunnelPropTypes = {
     afterSeparatorOffset: PropTypes.number.isRequired,
 
     isInteractive: PropTypes.bool.isRequired,
+    currentPartSizeExtension: PropTypes.number.isRequired,
     onClick: PropTypes.func,
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
@@ -79,6 +80,7 @@ export const FunnelDefaultProps = {
     afterSeparatorOffset: 0,
 
     isInteractive: true,
+    currentPartSizeExtension: 0,
 
     animate: true,
     motionDamping: 13,

website/src/data/components/funnel/props.js

@@ -10,6 +10,23 @@ import { FunnelDefaultProps as defaults } from '@nivo/funnel'
 import { groupProperties } from '../../../lib/componentProperties'
 
 const props = [
+    {
+        key: 'data',
+        type: 'Array<Datum>',
+        group: 'Base',
+        help: 'Chart data.',
+        description: `
+            Chart data, which must conform to this structure:
+            \`\`\`
+            Array<{
+                id:    string | number
+                label: string
+                value: number
+            }>
+            \`\`\`
+        `,
+        required: true,
+    },
     {
         key: 'margin',
         group: 'Base',
@@ -269,6 +286,15 @@ const props = [
         type: 'Array<string | Function>',
         defaultValue: defaults.layers,
     },
+    {
+        key: 'isInteractive',
+        group: 'Interactivity',
+        type: 'boolean',
+        help: 'Enable/disable interactivity.',
+        required: false,
+        defaultValue: defaults.isInteractive,
+        controlType: 'switch',
+    },
 ]
 
 export const groups = groupProperties(props)

website/src/pages/funnel/index.js

@@ -46,11 +46,12 @@ const initialProperties = {
     afterSeparatorLength: 40,
     afterSeparatorOffset: 20,
 
+    isInteractive: true,
+    currentPartSizeExtension: 30,
+
     animate: true,
     motionStiffness: 90,
     motionDamping: 15,
-
-    isInteractive: true,
 }
 
 const Funnel = () => {