diff --git a/packages/bump/src/bump/Bump.tsx b/packages/bump/src/bump/Bump.tsx index 1b979aac9..ec615ed74 100644 --- a/packages/bump/src/bump/Bump.tsx +++ b/packages/bump/src/bump/Bump.tsx @@ -5,7 +5,9 @@ import { BumpCustomLayerProps, BumpDatum, BumpLayerId, + BumpPointMouseHandler, BumpSerieExtraProps, + BumpSerieMouseHandler, BumpSvgProps, DefaultBumpDatum, } from './types' @@ -82,22 +84,18 @@ const InnerBump = ['lineTooltip'] >, pointTooltip = bumpSvgDefaultProps.pointTooltip as NonNullable< BumpSvgProps['pointTooltip'] >, - debugMesh = bumpSvgDefaultProps.debugMesh, role = bumpSvgDefaultProps.role, }: InnerBumpProps) => { const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions( @@ -191,10 +189,10 @@ const InnerBump = } + onMouseMove={onMouseMove as BumpSerieMouseHandler} + onMouseLeave={onMouseLeave as BumpSerieMouseHandler} + onClick={onClick as BumpSerieMouseHandler} lineTooltip={lineTooltip} useMesh={useMesh} /> @@ -213,10 +211,10 @@ const InnerBump = } + onMouseMove={onMouseMove as BumpPointMouseHandler} + onMouseLeave={onMouseLeave as BumpPointMouseHandler} + onClick={onClick as BumpPointMouseHandler} tooltip={pointTooltip} debug={debugMesh} /> diff --git a/packages/bump/src/bump/Line.tsx b/packages/bump/src/bump/Line.tsx index 32429742c..139569b8a 100644 --- a/packages/bump/src/bump/Line.tsx +++ b/packages/bump/src/bump/Line.tsx @@ -1,7 +1,13 @@ import { useSpring, animated } from '@react-spring/web' import { Line as D3Line } from 'd3-shape' import { useAnimatedPath, useMotionConfig } from '@nivo/core' -import { BumpCommonProps, BumpComputedSerie, BumpDatum, BumpSerieExtraProps } from './types' +import { + BumpCommonProps, + BumpComputedSerie, + BumpDatum, + BumpSerieExtraProps, + BumpSerieMouseHandler, +} from './types' import { useBumpSerieHandlers } from './hooks' interface LineProps { @@ -9,10 +15,10 @@ interface LineProps yStep: number isInteractive: BumpCommonProps['isInteractive'] - onMouseEnter?: BumpCommonProps['onSerieMouseEnter'] - onMouseMove?: BumpCommonProps['onSerieMouseMove'] - onMouseLeave?: BumpCommonProps['onSerieMouseLeave'] - onClick?: BumpCommonProps['onSerieClick'] + onMouseEnter?: BumpSerieMouseHandler + onMouseMove?: BumpSerieMouseHandler + onMouseLeave?: BumpSerieMouseHandler + onClick?: BumpSerieMouseHandler setActiveSerieIds: (serieIds: string[]) => void lineTooltip: BumpCommonProps['lineTooltip'] useMesh: BumpCommonProps['useMesh'] diff --git a/packages/bump/src/bump/Mesh.tsx b/packages/bump/src/bump/Mesh.tsx index 2c58d442c..1310d40d4 100644 --- a/packages/bump/src/bump/Mesh.tsx +++ b/packages/bump/src/bump/Mesh.tsx @@ -3,7 +3,13 @@ import { createElement, memo, useCallback } from 'react' import { Margin } from '@nivo/core' import { useTooltip } from '@nivo/tooltip' import { Mesh as BaseMesh } from '@nivo/voronoi' -import { BumpCommonProps, BumpDatum, BumpPoint, BumpSerieExtraProps } from './types' +import { + BumpCommonProps, + BumpDatum, + BumpPoint, + BumpPointMouseHandler, + BumpSerieExtraProps, +} from './types' interface MeshProps { points: BumpPoint[] @@ -12,10 +18,10 @@ interface MeshProps void setActiveSerieIds: (ids: string[]) => void - onMouseEnter?: BumpCommonProps['onPointMouseEnter'] - onMouseMove?: BumpCommonProps['onPointMouseMove'] - onMouseLeave?: BumpCommonProps['onPointMouseLeave'] - onClick?: BumpCommonProps['onPointClick'] + onMouseEnter?: BumpPointMouseHandler + onMouseMove?: BumpPointMouseHandler + onMouseLeave?: BumpPointMouseHandler + onClick?: BumpPointMouseHandler tooltip: BumpCommonProps['pointTooltip'] debug: boolean } diff --git a/packages/bump/src/bump/ResponsiveBump.tsx b/packages/bump/src/bump/ResponsiveBump.tsx index 79f82ebae..433b5d693 100644 --- a/packages/bump/src/bump/ResponsiveBump.tsx +++ b/packages/bump/src/bump/ResponsiveBump.tsx @@ -1,12 +1,12 @@ import { ResponsiveWrapper } from '@nivo/core' -import { BumpDatum, BumpSerieExtraProps, BumpSvgProps, DefaultBumpDatum } from './types' +import { BumpDatum, BumpResponsiveProps, BumpSerieExtraProps, DefaultBumpDatum } from './types' import { Bump } from './Bump' export const ResponsiveBump = < Datum extends BumpDatum = DefaultBumpDatum, ExtraProps extends BumpSerieExtraProps = Record >( - props: Omit, 'width' | 'height'> + props: BumpResponsiveProps ) => ( {({ width, height }) => ( diff --git a/packages/bump/src/bump/defaults.ts b/packages/bump/src/bump/defaults.ts index 1e0a58115..dc9ffc781 100644 --- a/packages/bump/src/bump/defaults.ts +++ b/packages/bump/src/bump/defaults.ts @@ -6,14 +6,10 @@ import PointTooltip from './PointTooltip' const commonDefaultProps: Omit< BumpCommonProps>, - | 'onPointMouseEnter' - | 'onPointClick' - | 'onPointMouseMove' - | 'onPointMouseLeave' - | 'onSerieMouseEnter' - | 'onSerieClick' - | 'onSerieMouseMove' - | 'onSerieMouseLeave' + | 'onMouseEnter' + | 'onClick' + | 'onMouseMove' + | 'onMouseLeave' | 'margin' | 'theme' | 'axisRight' diff --git a/packages/bump/src/bump/hooks.ts b/packages/bump/src/bump/hooks.ts index 387f0ce3a..c10d497f2 100644 --- a/packages/bump/src/bump/hooks.ts +++ b/packages/bump/src/bump/hooks.ts @@ -14,6 +14,8 @@ import { BumpLabel, BumpLabelData, BumpSerieExtraProps, + BumpPointMouseHandler, + BumpSerieMouseHandler, } from './types' import { computeSeries } from './compute' @@ -321,10 +323,10 @@ export const useBumpSerieHandlers = < }: { serie: BumpComputedSerie isInteractive: BumpCommonProps['isInteractive'] - onMouseEnter?: BumpCommonProps['onSerieMouseEnter'] - onMouseMove?: BumpCommonProps['onSerieMouseMove'] - onMouseLeave?: BumpCommonProps['onSerieMouseLeave'] - onClick?: BumpCommonProps['onSerieClick'] + onMouseEnter?: BumpSerieMouseHandler + onMouseMove?: BumpSerieMouseHandler + onMouseLeave?: BumpSerieMouseHandler + onClick?: BumpSerieMouseHandler setActiveSerieIds: (serieIds: string[]) => void lineTooltip: BumpCommonProps['lineTooltip'] }) => { @@ -390,10 +392,10 @@ export const useBumpPointHandlers = < }: { point: BumpPoint isInteractive: BumpCommonProps['isInteractive'] - onMouseEnter?: BumpCommonProps['onPointMouseEnter'] - onMouseMove?: BumpCommonProps['onPointMouseMove'] - onMouseLeave?: BumpCommonProps['onPointMouseLeave'] - onClick?: BumpCommonProps['onPointClick'] + onMouseEnter?: BumpPointMouseHandler + onMouseMove?: BumpPointMouseHandler + onMouseLeave?: BumpPointMouseHandler + onClick?: BumpPointMouseHandler setActivePointIds: (pointIds: string[]) => void setActiveSerieIds: (pointIds: string[]) => void pointTooltip: BumpCommonProps['pointTooltip'] diff --git a/packages/bump/src/bump/types.ts b/packages/bump/src/bump/types.ts index 8971d1b53..fd4183f33 100644 --- a/packages/bump/src/bump/types.ts +++ b/packages/bump/src/bump/types.ts @@ -133,7 +133,10 @@ export type BumpPointTooltip< point: BumpPoint }> -export interface BumpCommonProps { +export interface BumpBaseCommonProps< + Datum extends BumpDatum, + ExtraProps extends BumpSerieExtraProps +> { margin: Box interpolation: BumpInterpolation @@ -175,29 +178,46 @@ export interface BumpCommonProps - onSerieMouseMove: BumpSerieMouseHandler - onSerieMouseLeave: BumpSerieMouseHandler - onSerieClick: BumpSerieMouseHandler - onPointMouseEnter: BumpPointMouseHandler - onPointMouseMove: BumpPointMouseHandler - onPointMouseLeave: BumpPointMouseHandler - onPointClick: BumpPointMouseHandler lineTooltip: BumpLineTooltip pointTooltip: BumpPointTooltip + role: string + layers: BumpLayer[] + renderWrapper: boolean useMesh: boolean debugMesh: boolean - role: string +} - layers: BumpLayer[] +interface BumpMeshCommonProps + extends BumpBaseCommonProps { + useMesh: true + onMouseEnter?: BumpPointMouseHandler + onMouseMove?: BumpPointMouseHandler + onMouseLeave?: BumpPointMouseHandler + onClick?: BumpPointMouseHandler +} - renderWrapper: boolean +interface BumpSerieCommonProps + extends BumpBaseCommonProps { + useMesh: false + onMouseEnter?: BumpSerieMouseHandler + onMouseMove?: BumpSerieMouseHandler + onMouseLeave?: BumpSerieMouseHandler + onClick?: BumpSerieMouseHandler } -export type BumpSvgProps = Partial< - BumpCommonProps -> & +export type BumpCommonProps = + | BumpMeshCommonProps + | BumpSerieCommonProps + +export type BumpResponsiveProps< + Datum extends BumpDatum, + ExtraProps extends BumpSerieExtraProps +> = BumpCommonProps & BumpDataProps & { pointComponent?: BumpPointComponent - } & Dimensions & - MotionProps + } & MotionProps + +export type BumpSvgProps< + Datum extends BumpDatum, + ExtraProps extends BumpSerieExtraProps +> = BumpResponsiveProps & Dimensions diff --git a/website/src/pages/bump/index.tsx b/website/src/pages/bump/index.tsx index 420677411..d669db83a 100644 --- a/website/src/pages/bump/index.tsx +++ b/website/src/pages/bump/index.tsx @@ -157,6 +157,7 @@ const Bump = () => { data={data} {...properties} theme={theme} + useMesh={false} onClick={serie => logAction({ type: 'click',