1 | import React, { PureComponent, ReactElement, SVGProps } from 'react';
|
2 | import { CurveType, Point as CurvePoint } from '../shape/Curve';
|
3 | import { Props as DotProps } from '../shape/Dot';
|
4 | import { Props as XAxisProps } from './XAxis';
|
5 | import { Props as YAxisProps } from './YAxis';
|
6 | import { D3Scale, LegendType, TooltipType, AnimationTiming, ChartOffset, Coordinate, DataKey, TickItem, AnimationDuration } from '../util/types';
|
7 | export type AreaDot = ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | DotProps | boolean;
|
8 | interface AreaPointItem extends CurvePoint {
|
9 | value?: number | number[];
|
10 | payload?: any;
|
11 | }
|
12 | interface InternalAreaProps {
|
13 | xAxis?: Omit<XAxisProps, 'scale'> & {
|
14 | scale: D3Scale<string | number>;
|
15 | };
|
16 | yAxis?: Omit<YAxisProps, 'scale'> & {
|
17 | scale: D3Scale<string | number>;
|
18 | };
|
19 | top?: number;
|
20 | left?: number;
|
21 | width?: number;
|
22 | height?: number;
|
23 | points?: AreaPointItem[];
|
24 | baseLine?: number | Coordinate[];
|
25 | }
|
26 | interface AreaProps extends InternalAreaProps {
|
27 | className?: string;
|
28 | dataKey: DataKey<any>;
|
29 | data?: any[];
|
30 | type?: CurveType;
|
31 | unit?: string | number;
|
32 | name?: string | number;
|
33 | xAxisId?: string | number;
|
34 | yAxisId?: string | number;
|
35 | stackId?: string | number;
|
36 | legendType?: LegendType;
|
37 | tooltipType?: TooltipType;
|
38 | connectNulls?: boolean;
|
39 | activeDot?: AreaDot;
|
40 | dot?: AreaDot;
|
41 | label?: any;
|
42 | layout?: 'horizontal' | 'vertical';
|
43 | hide?: boolean;
|
44 | baseValue?: number | 'dataMin' | 'dataMax';
|
45 | isRange?: boolean;
|
46 | onAnimationStart?: () => void;
|
47 | onAnimationEnd?: () => void;
|
48 | isAnimationActive?: boolean;
|
49 | animateNewValues?: boolean;
|
50 | animationBegin?: number;
|
51 | animationDuration?: AnimationDuration;
|
52 | animationEasing?: AnimationTiming;
|
53 | animationId?: number;
|
54 | id?: string;
|
55 | }
|
56 | export type Props = Omit<SVGProps<SVGElement>, 'type' | 'points'> & AreaProps;
|
57 | interface State {
|
58 | prevAnimationId?: number;
|
59 | prevPoints?: AreaPointItem[];
|
60 | prevBaseLine?: number | Coordinate[];
|
61 | curPoints?: AreaPointItem[];
|
62 | curBaseLine?: number | Coordinate[];
|
63 | isAnimationFinished?: boolean;
|
64 | totalLength?: number;
|
65 | }
|
66 | export declare class Area extends PureComponent<Props, State> {
|
67 | static displayName: string;
|
68 | static defaultProps: {
|
69 | stroke: string;
|
70 | fill: string;
|
71 | fillOpacity: number;
|
72 | xAxisId: number;
|
73 | yAxisId: number;
|
74 | legendType: string;
|
75 | connectNulls: boolean;
|
76 | points: AreaPointItem[];
|
77 | dot: boolean;
|
78 | activeDot: boolean;
|
79 | hide: boolean;
|
80 | isAnimationActive: boolean;
|
81 | animationBegin: number;
|
82 | animationDuration: number;
|
83 | animationEasing: string;
|
84 | };
|
85 | static getBaseValue: (props: Props, item: Area, xAxis: Props['xAxis'], yAxis: Props['yAxis']) => number;
|
86 | static getComposedData: ({ props, item, xAxis, yAxis, xAxisTicks, yAxisTicks, bandSize, dataKey, stackedData, dataStartIndex, displayedData, offset, }: {
|
87 | props: Props;
|
88 | item: Area;
|
89 | bandSize: number;
|
90 | xAxis: InternalAreaProps['xAxis'];
|
91 | yAxis: InternalAreaProps['yAxis'];
|
92 | xAxisTicks: TickItem[];
|
93 | yAxisTicks: TickItem[];
|
94 | stackedData: number[][];
|
95 | dataStartIndex: number;
|
96 | offset: ChartOffset;
|
97 | displayedData: any[];
|
98 | dataKey: Props['dataKey'];
|
99 | }) => {
|
100 | top?: number;
|
101 | bottom?: number;
|
102 | left?: number;
|
103 | right?: number;
|
104 | width?: number;
|
105 | height?: number;
|
106 | brushBottom?: number;
|
107 | points: {
|
108 | x: number;
|
109 | y: number;
|
110 | value: any[];
|
111 | payload: any;
|
112 | }[];
|
113 | baseLine: number | {
|
114 | x: number;
|
115 | y: number;
|
116 | }[];
|
117 | layout: "horizontal" | "vertical";
|
118 | isRange: boolean;
|
119 | };
|
120 | static renderDotItem: (option: AreaDot, props: any) => React.JSX.Element;
|
121 | state: State;
|
122 | static getDerivedStateFromProps(nextProps: Props, prevState: State): State;
|
123 | id: string;
|
124 | handleAnimationEnd: () => void;
|
125 | handleAnimationStart: () => void;
|
126 | renderDots(needClip: boolean, clipDot: boolean, clipPathId: string): React.JSX.Element;
|
127 | renderHorizontalRect(alpha: number): React.JSX.Element;
|
128 | renderVerticalRect(alpha: number): React.JSX.Element;
|
129 | renderClipRect(alpha: number): React.JSX.Element;
|
130 | renderAreaStatically(points: AreaPointItem[], baseLine: Props['baseLine'], needClip: boolean, clipPathId: string): React.JSX.Element;
|
131 | renderAreaWithAnimation(needClip: boolean, clipPathId: string): React.JSX.Element;
|
132 | renderArea(needClip: boolean, clipPathId: string): React.JSX.Element;
|
133 | render(): React.JSX.Element;
|
134 | }
|
135 | export {};
|