@nivo/funnel
Version:
117 lines • 4.34 kB
TypeScript
import { AriaAttributes, FunctionComponent, MouseEvent } from 'react';
import { Area, Line } from 'd3-shape';
import { Box, Dimensions, MotionProps, ValueFormat } from '@nivo/core';
import { PartialTheme } from '@nivo/theming';
import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors';
import { AnnotationMatcher } from '@nivo/annotations';
import { PartTooltipProps } from './PartTooltip';
export type SizeSpecCustomFunction<Datum> = (d: Datum) => number;
export type SizeSpecCustomSizes = number[];
export interface SizeSpecDatumProperty {
datum: string;
}
export type SizeSpec<Datum = any> = SizeSpecCustomFunction<Datum> | SizeSpecCustomSizes | SizeSpecDatumProperty;
type BaseFunnelDatum = {
id: string | number;
value: number;
label?: string;
};
export type FunnelDatum<T = Record<string, string | number>> = BaseFunnelDatum & {
[P in keyof T]: T[P];
};
export interface Position {
x: number;
y: number;
}
export interface BoxPosition extends Position {
x0: number;
x1: number;
y0: number;
y1: number;
}
export type FunnelDirection = 'horizontal' | 'vertical';
export type FunnelAreaPoint = BoxPosition;
export type FunnelAreaGenerator = Area<FunnelAreaPoint>;
export type FunnelBorderGenerator = Line<Position | null>;
export interface FunnelPart<D extends FunnelDatum = BaseFunnelDatum> extends BoxPosition {
data: D;
width: number;
height: number;
color: string;
fillOpacity: number;
borderWidth: number;
borderColor: string;
borderOpacity: number;
labelColor: string;
formattedValue: number | string;
isCurrent: boolean;
points: Position[];
areaPoints: FunnelAreaPoint[];
borderPoints: (Position | null)[];
}
export interface SeparatorProps extends Omit<BoxPosition, 'x' | 'y'> {
partId: string | number;
}
export interface FunnelDataProps<D extends FunnelDatum> {
data: D[];
}
export type FunnelPartEventHandler<D extends FunnelDatum> = (part: FunnelPart<D>, event: MouseEvent) => void;
export interface FunnelPartWithHandlers<D extends FunnelDatum> extends FunnelPart<D> {
onMouseEnter?: () => void;
onMouseLeave?: () => void;
onMouseMove?: () => void;
onClick?: () => void;
}
export type FunnelLayerId = 'separators' | 'parts' | 'labels' | 'annotations';
export interface FunnelCustomLayerProps<D extends FunnelDatum> {
width: number;
height: number;
parts: FunnelPartWithHandlers<D>[];
areaGenerator: FunnelAreaGenerator;
borderGenerator: FunnelBorderGenerator;
beforeSeparators: SeparatorProps[];
afterSeparators: SeparatorProps[];
setCurrentPartId: (id: string | number) => void;
}
export type FunnelCustomLayer<D extends FunnelDatum> = FunctionComponent<FunnelCustomLayerProps<D>>;
export interface FunnelCommonProps<D extends FunnelDatum> {
margin: Box;
layers: (FunnelLayerId | FunnelCustomLayer<D>)[];
valueFormat: ValueFormat<number>;
direction: FunnelDirection;
interpolation: 'smooth' | 'linear';
spacing: number;
shapeBlending: number;
theme: PartialTheme;
colors: OrdinalColorScaleConfig<D>;
size: SizeSpec<D>;
fillOpacity: number;
borderWidth: number;
borderColor: InheritedColorConfig<FunnelPart<D>>;
borderOpacity: number;
enableLabel: boolean;
labelColor: InheritedColorConfig<FunnelPart<D>>;
enableBeforeSeparators: boolean;
beforeSeparatorLength: number;
beforeSeparatorOffset: number;
enableAfterSeparators: boolean;
afterSeparatorLength: number;
afterSeparatorOffset: number;
isInteractive: boolean;
currentPartSizeExtension: number;
currentBorderWidth: number;
onMouseEnter: FunnelPartEventHandler<D>;
onMouseLeave: FunnelPartEventHandler<D>;
onMouseMove: FunnelPartEventHandler<D>;
onClick: FunnelPartEventHandler<D>;
tooltip: (props: PartTooltipProps<D>) => JSX.Element;
renderWrapper: boolean;
role: string;
ariaLabel: AriaAttributes['aria-label'];
ariaLabelledBy: AriaAttributes['aria-labelledby'];
ariaDescribedBy: AriaAttributes['aria-describedby'];
annotations: AnnotationMatcher<FunnelPart<D>>[];
}
export type FunnelSvgProps<D extends FunnelDatum> = Partial<FunnelCommonProps<D>> & FunnelDataProps<D> & Dimensions & MotionProps;
export {};
//# sourceMappingURL=types.d.ts.map