@alicloud/cloud-charts
Version:
135 lines (134 loc) • 4.88 kB
TypeScript
import { Chart } from '@antv/g2/esm';
import * as React from 'react';
import { BaseChartConfig, ChartData, Size, Language, Types, Rule } from './types';
import '../Wplaceholder/index.scss';
export declare const rootClassName: string;
export declare const rootChildClassName: string;
export interface ChartProps<ChartConfig> {
className?: string;
style?: React.CSSProperties;
width?: Size;
height?: Size;
config?: ChartConfig;
data?: ChartData;
event?: {
[eventKey: string]: Function;
};
interaction?: {
[actionName: string]: Types.LooseObject;
};
language?: Language;
/** 获取图表实例的回调 */
getChartInstance?: (chart: Chart) => void;
/** 是否响应配置项中的函数更新，默认关闭。 */
enableFunctionUpdate?: boolean;
/**
* 设置图表的内边距，使用方式参考 CSS 盒模型。
* 下图黄色区域即为 padding 的范围。
* 
*
* @example
* 1. padding: 20
* 2. padding: [ 10, 30, 30 ]
*/
padding?: Types.ViewPadding;
/**
* 设置图表的内边距在padding的基础上增加appendPadding的调整。
* @example
* 1. padding: 20
* 2. padding: [ 10, 30, 30 ]
*/
appendPadding?: Types.ViewAppendPadding;
/** 是否开启局部刷新，默认开启。 */
localRefresh?: boolean;
/** 指定渲染引擎，默认使用 canvas。 */
renderer?: 'canvas' | 'svg';
/**
* 是否同步子 view 的 padding，可以是 boolean / SyncViewPaddingFn
* 比如:
* view1 的 padding 10
* view2 的 padding 20
* 那么两个子 view 的 padding 统一变成最大的 20.
*
* 如果是 Funcion，则使用自定义的方式去计算子 view 的 padding，这个函数中去修改所有的 views autoPadding 值
*/
syncViewPadding?: boolean | Types.SyncViewPaddingFn;
/** @deprecated 该属性移至 config.animate */
animate?: boolean;
/** @deprecated 自定义图表请使用类继承 */
customChart?: any;
/** 是否使用业务配置覆盖规则，默认为否。true表示关闭所有处理 */
force?: Rule;
/** loading状态 */
loading?: boolean;
/** 错误信息，非空时直接显示图表的异常状态 */
errorInfo?: string;
/** chartRef */
chartRef?: React.MutableRefObject<any>;
}
/**
* React 图表基类
*
* @template ChartConfig 泛型 - 配置项
* @template Props 泛型 - Props参数
* */
declare class Base<ChartConfig extends BaseChartConfig, Props extends ChartProps<ChartConfig> = ChartProps<ChartConfig>> extends React.Component<Props> {
static defaultProps?: {};
static isG2Chart: boolean;
chartName: string;
legendField: string;
chart: Chart;
chartDom: HTMLDivElement;
readonly chartId: string;
defaultConfig: ChartConfig;
mergeConfig: ChartConfig;
protected language: Language;
protected rawData: ChartData;
protected dataSize: number;
private ref;
static contextType: any;
constructor(props: Props);
/** 是否自动转换数据格式 */
convertData: boolean;
/** 获取图表默认配置项 */
getDefaultConfig(): ChartConfig;
/** 初始化前对props额外处理 */
beforeInit?(props: Props): Props;
/** 初始化函数 */
init(chart: Chart, config: ChartConfig, data: ChartData): void;
/** 自定义判断配置项是否更改 */
isChangeEqual?(objValue: any, othValue: any, key: number | string): undefined | boolean;
/** 更新数据 */
changeData(chart: Chart, config: ChartConfig, data: ChartData): void;
/** 更新尺寸 */
changeSize(chart: Chart, config: ChartConfig, width: number, height: number): void;
/** @deprecated 图表渲染后回调 */
/** 销毁图表 */
destroy?(): void;
componentDidMount(): void;
protected isReRendering: boolean;
rerender(): void;
isEqualCustomizer: (objValue: any, othValue: any, key: number | string) => undefined | boolean;
checkConfigChange(newConfig: ChartConfig, oldConfig: ChartConfig): boolean;
componentDidUpdate(prevProps: Props): void;
unmountCallbacks: ((chart: Chart) => void)[];
handleDestroy(): void;
componentWillUnmount(): void;
initChart(): void;
private emitWidgetsEvent;
size: number[];
initSize(): void;
handleChangeSize(config: ChartConfig, w?: Size, h?: Size): void;
private resizeRunning;
private resizeTimer;
autoResize(): void;
setSize([w, h]: Size[]): void;
render(): JSX.Element;
}
export default Base;
export interface BaseClass<ChartConfig, Props = {}> {
new (props: Props): Base<ChartConfig, Props>;
isG2Chart: boolean;
displayName?: string;
defaultProps?: Partial<Props>;
}