feat(bump): add TypeScript definitions for AreaBump

packages/bump/index.d.ts

@@ -0,0 +1,111 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { Component, MouseEvent } from 'react'
+import { Dimensions, Box, Theme, MotionProps, CssMixBlendMode } from '@nivo/core'
+import { OrdinalColorsInstruction, InheritedColorProp } from '@nivo/colors'
+
+declare module '@nivo/bump' {
+    export interface AreaBumpInputDatum {
+        x: string | number
+        y: number
+        [key: string]: any
+    }
+
+    export interface AreaBumpInputSerie {
+        id: string
+        data: AreaBumpInputDatum[]
+        [key: string]: any
+    }
+
+    export interface AreaBumpAreaPoint {
+        x: number
+        y0: number
+        y1: number
+    }
+
+    export interface AreaBumpPoint {
+        x: number
+        y: number
+        height: number
+        data: AreaBumpInputDatum
+    }
+
+    export interface AreaBumpComputedSerie extends AreaBumpInputSerie {
+        color: string
+        style: {
+            fillOpacity: number
+            borderWidth: number
+            borderColor: string
+            borderOpacity: number
+        }
+        points: AreaBumpPoint[]
+        areaPoints: AreaBumpAreaPoint[]
+    }
+
+    export type AreaBumpAlign = 'start' | 'middle' | 'end'
+    export type AreaBumpInterpolation = 'smooth' | 'linear'
+
+    export type AreaBumpLayerType = 'grid' | 'axes' | 'labels' | 'areas'
+
+    export type AreaBumpLabelFunction = (serie: AreaBumpComputedSerie) => string
+    export type AreaBumpLabel = false | string | AreaBumpLabelFunction
+
+    export type AreaBumpMouseHandler = (
+        serie: AreaBumpComputedSerie,
+        event: MouseEvent<any>
+    ) => void
+
+    export type AreaBumpProps = {
+        data: AreaBumpInputSerie[]
+
+        margin?: Box
+
+        align?: AreaBumpAlign
+        interpolation?: AreaBumpInterpolation
+        spacing?: number
+        xPadding?: number
+
+        theme?: Theme
+        colors?: OrdinalColorsInstruction
+        blendMode?: CssMixBlendMode
+        fillOpacity?: number
+        activeFillOpacity?: number
+        inactiveFillOpacity?: number
+        borderWidth?: number
+        activeBorderWidth?: number
+        inactiveBorderWidth?: number
+        borderColor?: InheritedColorProp
+        borderOpacity?: number
+        activeBorderOpacity?: number
+        inactiveBorderOpacity?: number
+
+        startLabel?: AreaBumpLabel
+        startLabelPadding?: number
+        startLabelTextColor?: InheritedColorProp
+        endLabel?: AreaBumpLabel
+        endLabelPadding?: number
+        endLabelTextColor?: InheritedColorProp
+
+        enableGridX?: boolean
+        axisTop?: any
+        axisBottom?: any
+
+        isInteractive?: boolean
+        onMouseEnter?: AreaBumpMouseHandler
+        onMouseMove?: AreaBumpMouseHandler
+        onMouseLeave?: AreaBumpMouseHandler
+        onClick?: AreaBumpMouseHandler
+        tooltip?: any
+    }
+
+    export type AreaBumpSvgProps = AreaBumpProps & MotionProps
+
+    export class AreaBump extends Component<AreaBumpSvgProps & Dimensions> {}
+    export class ResponsiveAreaBump extends Component<AreaBumpSvgProps> {}
+}

packages/bump/package.json

@@ -17,6 +17,7 @@
   ],
   "main": "./dist/nivo-bump.cjs.js",
   "module": "./dist/nivo-bump.esm.js",
+  "typings": "./index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",

packages/bump/src/area-bump/AnimatedArea.js

@@ -17,6 +17,7 @@ const AnimatedArea = ({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    onClick,
 }) => {
     const { springConfig } = useMotionConfig()
 
@@ -42,6 +43,7 @@ const AnimatedArea = ({
                     onMouseEnter={onMouseEnter}
                     onMouseMove={onMouseMove}
                     onMouseLeave={onMouseLeave}
+                    onClick={onClick}
                 />
             )}
         </SmartMotion>
@@ -64,6 +66,7 @@ AnimatedArea.propTypes = {
     onMouseEnter: PropTypes.func,
     onMouseMove: PropTypes.func,
     onMouseLeave: PropTypes.func,
+    onClick: PropTypes.func,
 }
 
 export default memo(AnimatedArea)

packages/bump/src/area-bump/Area.js

@@ -6,33 +6,35 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { memo, useCallback } from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { useMotionConfig, blendModePropType } from '@nivo/core'
-import { useTooltip } from '@nivo/tooltip'
-import AreaTooltip from './AreaTooltip'
+import { useSerieHandlers } from './hooks'
 import AnimatedArea from './AnimatedArea'
 import StaticArea from './StaticArea'
 
-const Area = ({ serie, areaGenerator, blendMode, isInteractive, setCurrentSerie }) => {
-    const { showTooltipFromEvent, hideTooltip } = useTooltip()
-    const onMouseEnter = useCallback(
-        event => {
-            showTooltipFromEvent(<AreaTooltip serie={serie} />, event)
-            setCurrentSerie(serie.id)
-        },
-        [serie, showTooltipFromEvent, setCurrentSerie]
-    )
-    const onMouseMove = useCallback(
-        event => {
-            showTooltipFromEvent(<AreaTooltip serie={serie} />, event)
-        },
-        [serie, showTooltipFromEvent]
-    )
-    const onMouseLeave = useCallback(() => {
-        hideTooltip()
-        setCurrentSerie(null)
-    }, [hideTooltip, setCurrentSerie])
+const Area = ({
+    serie,
+    areaGenerator,
+    blendMode,
+    isInteractive,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
+    onClick,
+    setCurrentSerie,
+    tooltip,
+}) => {
+    const handlers = useSerieHandlers({
+        serie,
+        isInteractive,
+        onMouseEnter,
+        onMouseMove,
+        onMouseLeave,
+        onClick,
+        setCurrent: setCurrentSerie,
+        tooltip,
+    })
 
     const { animate } = useMotionConfig()
     if (animate === true) {
@@ -41,9 +43,10 @@ const Area = ({ serie, areaGenerator, blendMode, isInteractive, setCurrentSerie
                 serie={serie}
                 areaGenerator={areaGenerator}
                 blendMode={blendMode}
-                onMouseEnter={isInteractive ? onMouseEnter : undefined}
-                onMouseMove={isInteractive ? onMouseMove : undefined}
-                onMouseLeave={isInteractive ? onMouseLeave : undefined}
+                onMouseEnter={handlers.onMouseEnter}
+                onMouseMove={handlers.onMouseMove}
+                onMouseLeave={handlers.onMouseLeave}
+                onClick={handlers.onClick}
             />
         )
     }
@@ -53,9 +56,10 @@ const Area = ({ serie, areaGenerator, blendMode, isInteractive, setCurrentSerie
             serie={serie}
             areaGenerator={areaGenerator}
             blendMode={blendMode}
-            onMouseEnter={isInteractive ? onMouseEnter : undefined}
-            onMouseMove={isInteractive ? onMouseMove : undefined}
-            onMouseLeave={isInteractive ? onMouseLeave : undefined}
+            onMouseEnter={handlers.onMouseEnter}
+            onMouseMove={handlers.onMouseMove}
+            onMouseLeave={handlers.onMouseLeave}
+            onClick={handlers.onClick}
         />
     )
 }
@@ -73,7 +77,12 @@ Area.propTypes = {
     areaGenerator: PropTypes.func.isRequired,
     blendMode: blendModePropType.isRequired,
     isInteractive: PropTypes.bool.isRequired,
+    onMouseEnter: PropTypes.func,
+    onMouseMove: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    onClick: PropTypes.func,
     setCurrentSerie: PropTypes.func.isRequired,
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 }
 
 export default memo(Area)

packages/bump/src/area-bump/AreaBump.js

@@ -54,6 +54,11 @@ const AreaBump = props => {
         axisBottom,
 
         isInteractive,
+        onMouseEnter,
+        onMouseMove,
+        onMouseLeave,
+        onClick,
+        tooltip,
     } = props
 
     const [currentSerie, setCurrentSerie] = useState(null)
@@ -112,6 +117,11 @@ const AreaBump = props => {
                         blendMode={blendMode}
                         isInteractive={isInteractive}
                         setCurrentSerie={setCurrentSerie}
+                        onMouseEnter={onMouseEnter}
+                        onMouseMove={onMouseMove}
+                        onMouseLeave={onMouseLeave}
+                        onClick={onClick}
+                        tooltip={tooltip}
                     />
                 ))}
             </Fragment>

packages/bump/src/area-bump/StaticArea.js

@@ -17,6 +17,7 @@ const StaticArea = ({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    onClick,
 }) => {
     return (
         <path
@@ -30,6 +31,7 @@ const StaticArea = ({
             onMouseEnter={onMouseEnter}
             onMouseMove={onMouseMove}
             onMouseLeave={onMouseLeave}
+            onClick={onClick}
         />
     )
 }
@@ -50,6 +52,7 @@ StaticArea.propTypes = {
     onMouseEnter: PropTypes.func,
     onMouseMove: PropTypes.func,
     onMouseLeave: PropTypes.func,
+    onClick: PropTypes.func,
 }
 
 export default memo(StaticArea)

packages/bump/src/area-bump/hooks.js

@@ -6,10 +6,11 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import { area as d3Area, curveBasis, curveLinear } from 'd3-shape'
 import { useTheme } from '@nivo/core'
 import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'
+import { useTooltip } from '@nivo/tooltip'
 import { computeSeries } from './compute'
 
 export const useAreaBumpSeries = ({ data, width, height, align, spacing, xPadding }) =>
@@ -174,3 +175,61 @@ export const useAreaBump = ({
         areaGenerator,
     }
 }
+
+export const useSerieHandlers = ({
+    serie,
+    isInteractive,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
+    onClick,
+    setCurrent,
+    tooltip,
+}) => {
+    const { showTooltipFromEvent, hideTooltip } = useTooltip()
+
+    const handleMouseEnter = useCallback(
+        event => {
+            showTooltipFromEvent(React.createElement(tooltip, { serie }), event)
+            setCurrent(serie.id)
+            onMouseEnter && onMouseEnter(serie, event)
+        },
+        [serie, onMouseEnter, showTooltipFromEvent, setCurrent]
+    )
+
+    const handleMouseMove = useCallback(
+        event => {
+            showTooltipFromEvent(React.createElement(tooltip, { serie }), event)
+            onMouseMove && onMouseMove(serie, event)
+        },
+        [serie, onMouseMove, showTooltipFromEvent]
+    )
+
+    const handleMouseLeave = useCallback(
+        event => {
+            hideTooltip()
+            setCurrent(null)
+            onMouseLeave && onMouseLeave(serie, event)
+        },
+        [serie, onMouseLeave, hideTooltip, setCurrent]
+    )
+
+    const handleClick = useCallback(
+        event => {
+            onClick && onClick(serie, event)
+        },
+        [serie, onClick]
+    )
+
+    const handlers = useMemo(
+        () => ({
+            onMouseEnter: isInteractive ? handleMouseEnter : undefined,
+            onMouseMove: isInteractive ? handleMouseMove : undefined,
+            onMouseLeave: isInteractive ? handleMouseLeave : undefined,
+            onClick: isInteractive ? handleClick : undefined,
+        }),
+        [isInteractive, handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick]
+    )
+
+    return handlers
+}