From bbdbc373686b44675c9dd6cbd0d4bcb6a7f672ec Mon Sep 17 00:00:00 2001 From: plouc Date: Tue, 16 Jun 2020 06:19:04 +0900 Subject: [PATCH] feat(funnel): add support for custom event handlers --- packages/funnel/src/Part.js | 14 +++-- packages/funnel/src/Parts.js | 3 +- packages/funnel/src/props.js | 13 ++++- website/src/data/components/funnel/props.js | 58 +++++++++++++++++++++ website/src/pages/funnel/index.js | 3 +- 5 files changed, 78 insertions(+), 13 deletions(-) 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,