From eed820ad8674244d564a1a08cb3cdf1e48a44708 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Wed, 15 May 2019 12:25:52 +0900 Subject: [PATCH] feat(bump): add TypeScript definitions for Bump --- conf/base.yaml | 49 +++++------ packages/bump/index.d.ts | 86 +++++++++++++++++--- website/src/components/icons/AreaBumpIcon.js | 16 ++-- website/src/components/icons/Icons.js | 2 +- 4 files changed, 109 insertions(+), 44 deletions(-) diff --git a/conf/base.yaml b/conf/base.yaml index 55e8eed94..2be9bf3df 100644 --- 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 index 8c079eabc..36803bba4 100644 --- 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: 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) => 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 {} + export class ResponsiveBump extends Component {} + export interface AreaBumpInputDatum { x: string | number y: number @@ -61,7 +126,7 @@ declare module '@nivo/bump' { event: MouseEvent ) => 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 + activeFillOpacity?: number | SerieDerivedProp + inactiveFillOpacity?: number | SerieDerivedProp + borderWidth?: number | SerieDerivedProp + activeBorderWidth?: number | SerieDerivedProp + inactiveBorderWidth?: number | SerieDerivedProp borderColor?: InheritedColorProp - borderOpacity?: number - activeBorderOpacity?: number - inactiveBorderOpacity?: number + borderOpacity?: number | SerieDerivedProp + activeBorderOpacity?: number | SerieDerivedProp + inactiveBorderOpacity?: number | SerieDerivedProp startLabel?: AreaBumpLabel startLabelPadding?: number @@ -105,7 +170,6 @@ declare module '@nivo/bump' { } export type AreaBumpSvgProps = AreaBumpProps & MotionProps - export class AreaBump extends Component {} export class ResponsiveAreaBump extends Component {} } diff --git a/website/src/components/icons/AreaBumpIcon.js b/website/src/components/icons/AreaBumpIcon.js index 7432da029..8d908323d 100644 --- 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 = () => ( <> - + - + - + - + ) diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.js index d32457fee..735421b62 100644 --- a/website/src/components/icons/Icons.js +++ b/website/src/components/icons/Icons.js @@ -62,11 +62,11 @@ const ColorsDemo = ({ type }) => { const Icons = () => ( - +