feat(bump): add TypeScript definitions for Bump

plouc · May 16, 2019 · eed820a · eed820a
1 parent e70c4cd
commit eed820a
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 44 deletions.
diff --git a/conf/base.yaml b/conf/base.yaml
@@ -157,18 +157,19 @@ capture:
       #  capture charts' icons
       #
       #########################################################################
-      - path: /internal/icons/
-        selector: '#area-bump-lightNeutral'
-        output: ./website/src/assets/icons/area-bump-light-neutral.png
-      - path: /internal/icons/
-        selector: '#area-bump-lightColored'
-        output: ./website/src/assets/icons/area-bump-light-colored.png
-      - path: /internal/icons/
-        selector: '#area-bump-darkNeutral'
-        output: ./website/src/assets/icons/area-bump-dark-neutral.png
-      - path: /internal/icons/
-        selector: '#area-bump-darkColored'
-        output: ./website/src/assets/icons/area-bump-dark-colored.png
+
+      # - path: /internal/icons/
+      #   selector: '#area-bump-lightNeutral'
+      #   output: ./website/src/assets/icons/area-bump-light-neutral.png
+      # - path: /internal/icons/
+      #   selector: '#area-bump-lightColored'
+      #   output: ./website/src/assets/icons/area-bump-light-colored.png
+      # - path: /internal/icons/
+      #   selector: '#area-bump-darkNeutral'
+      #   output: ./website/src/assets/icons/area-bump-dark-neutral.png
+      # - path: /internal/icons/
+      #   selector: '#area-bump-darkColored'
+      #   output: ./website/src/assets/icons/area-bump-dark-colored.png
 
       # - path: /internal/icons/
       #   selector: '#bar-lightNeutral'
@@ -196,18 +197,18 @@ capture:
       #   selector: '#bullet-darkColored'
       #   output: ./website/src/assets/icons/bullet-dark-colored.png
 
-      - path: /internal/icons/
-        selector: '#bump-lightNeutral'
-        output: ./website/src/assets/icons/bump-light-neutral.png
-      - path: /internal/icons/
-        selector: '#bump-lightColored'
-        output: ./website/src/assets/icons/bump-light-colored.png
-      - path: /internal/icons/
-        selector: '#bump-darkNeutral'
-        output: ./website/src/assets/icons/bump-dark-neutral.png
-      - path: /internal/icons/
-        selector: '#bump-darkColored'
-        output: ./website/src/assets/icons/bump-dark-colored.png
+      # - path: /internal/icons/
+      #   selector: '#bump-lightNeutral'
+      #   output: ./website/src/assets/icons/bump-light-neutral.png
+      # - path: /internal/icons/
+      #   selector: '#bump-lightColored'
+      #   output: ./website/src/assets/icons/bump-light-colored.png
+      # - path: /internal/icons/
+      #   selector: '#bump-darkNeutral'
+      #   output: ./website/src/assets/icons/bump-dark-neutral.png
+      # - path: /internal/icons/
+      #   selector: '#bump-darkColored'
+      #   output: ./website/src/assets/icons/bump-dark-colored.png
 
       # - path: /internal/icons/
       #   selector: '#circle-packing-lightNeutral'

diff --git a/packages/bump/index.d.ts b/packages/bump/index.d.ts
@@ -11,6 +11,71 @@ import { Dimensions, Box, Theme, MotionProps, CssMixBlendMode } from '@nivo/core
 import { OrdinalColorsInstruction, InheritedColorProp } from '@nivo/colors'
 
 declare module '@nivo/bump' {
+    type SerieDerivedProp<Serie, T> = (serie: Serie) => T
+
+    export interface BumpInputDatum {
+        x: string | number
+        y: string | number
+        [key: string]: any
+    }
+
+    export interface BumpInputSerie {
+        id: string
+        data: BumpInputDatum[]
+        [key: string]: any
+    }
+
+    export type BumpLabelFunction = (serie: BumpInputSerie) => string
+    export type BumpLabel = false | string | BumpLabelFunction
+
+    export type BumpMouseHandler = (serie: BumpInputSerie, event: MouseEvent<any>) => void
+
+    export interface BumpProps {
+        data: BumpInputSerie[]
+
+        margin?: Box
+
+        align?: AreaBumpAlign
+        interpolation?: AreaBumpInterpolation
+        xOuterPadding?: number
+        yOuterPadding?: number
+        xPadding?: number
+
+        theme?: Theme
+        colors?: OrdinalColorsInstruction
+        blendMode?: CssMixBlendMode
+
+        startLabel?: BumpLabel
+        startLabelPadding?: number
+        startLabelTextColor?: InheritedColorProp
+        endLabel?: BumpLabel
+        endLabelPadding?: number
+        endLabelTextColor?: InheritedColorProp
+
+        pointSize?: number
+        activePointSize?: number
+        inactivePointSize?: number
+        pointColor?: InheritedColorProp
+
+        enableGridX?: boolean
+        enableGridY?: boolean
+        axisTop?: any
+        axisRight?: any
+        axisBottom?: any
+        axisLeft?: any
+
+        isInteractive?: boolean
+        onMouseEnter?: BumpMouseHandler
+        onMouseMove?: BumpMouseHandler
+        onMouseLeave?: BumpMouseHandler
+        onClick?: BumpMouseHandler
+        tooltip?: any
+    }
+
+    export type BumpSvgProps = BumpProps & MotionProps
+    export class Bump extends Component<BumpSvgProps & Dimensions> {}
+    export class ResponsiveBump extends Component<BumpSvgProps> {}
+
     export interface AreaBumpInputDatum {
         x: string | number
         y: number
@@ -61,7 +126,7 @@ declare module '@nivo/bump' {
         event: MouseEvent<any>
     ) => void
 
-    export type AreaBumpProps = {
+    export interface AreaBumpProps {
         data: AreaBumpInputSerie[]
 
         margin?: Box
@@ -74,16 +139,16 @@ declare module '@nivo/bump' {
         theme?: Theme
         colors?: OrdinalColorsInstruction
         blendMode?: CssMixBlendMode
-        fillOpacity?: number
-        activeFillOpacity?: number
-        inactiveFillOpacity?: number
-        borderWidth?: number
-        activeBorderWidth?: number
-        inactiveBorderWidth?: number
+        fillOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
+        activeFillOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
+        inactiveFillOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
+        borderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
+        activeBorderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
+        inactiveBorderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         borderColor?: InheritedColorProp
-        borderOpacity?: number
-        activeBorderOpacity?: number
-        inactiveBorderOpacity?: number
+        borderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
+        activeBorderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
+        inactiveBorderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
 
         startLabel?: AreaBumpLabel
         startLabelPadding?: number
@@ -105,7 +170,6 @@ declare module '@nivo/bump' {
     }
 
     export type AreaBumpSvgProps = AreaBumpProps & MotionProps
-
     export class AreaBump extends Component<AreaBumpSvgProps & Dimensions> {}
     export class ResponsiveAreaBump extends Component<AreaBumpSvgProps> {}
 }
diff --git a/website/src/components/icons/AreaBumpIcon.js b/website/src/components/icons/AreaBumpIcon.js
@@ -8,10 +8,10 @@
  */
 import React from 'react'
 import { AreaBump } from '@nivo/bump'
-import bumpLightNeutralImg from '../../assets/icons/bump-light-neutral.png'
-import bumpLightColoredImg from '../../assets/icons/bump-light-colored.png'
-import bumpDarkNeutralImg from '../../assets/icons/bump-dark-neutral.png'
-import bumpDarkColoredImg from '../../assets/icons/bump-dark-colored.png'
+import areaBumpLightNeutralImg from '../../assets/icons/area-bump-light-neutral.png'
+import areaBumpLightColoredImg from '../../assets/icons/area-bump-light-colored.png'
+import areaBumpDarkNeutralImg from '../../assets/icons/area-bump-dark-neutral.png'
+import areaBumpDarkColoredImg from '../../assets/icons/area-bump-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
 
 const chartProps = {
@@ -140,13 +140,13 @@ const AreaBumpIconItem = ({ type }) => (
 const AreaBumpIcon = () => (
     <>
         <AreaBumpIconItem type="lightNeutral" />
-        <IconImg url={bumpLightNeutralImg} />
+        <IconImg url={areaBumpLightNeutralImg} />
         <AreaBumpIconItem type="lightColored" />
-        <IconImg url={bumpLightColoredImg} />
+        <IconImg url={areaBumpLightColoredImg} />
         <AreaBumpIconItem type="darkNeutral" />
-        <IconImg url={bumpDarkNeutralImg} />
+        <IconImg url={areaBumpDarkNeutralImg} />
         <AreaBumpIconItem type="darkColored" />
-        <IconImg url={bumpDarkColoredImg} />
+        <IconImg url={areaBumpDarkColoredImg} />
     </>
 )
 

diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.js
@@ -62,11 +62,11 @@ const ColorsDemo = ({ type }) => {
 
 const Icons = () => (
     <Container>
-        <AreaBumpIcon />
         <ColorsDemo type="lightNeutral" />
         <ColorsDemo type="lightColored" />
         <ColorsDemo type="darkNeutral" />
         <ColorsDemo type="darkColored" />
+        <AreaBumpIcon />
         <BumpIcon />
         <NetworkIcon />
         <BarIcon />