UNPKG

4.16 kBTypeScriptView Raw
1import { IGroup } from '../dependents';
2import { AxisCfg, Condition, Datum, FacetCfg, FacetData, FacetDataFilter, Region } from '../interface';
3import View from '../chart/view';
4/**
5 * facet 基类
6 * - 定义生命周期,方便自定义 facet
7 * - 提供基础的生命流程方法
8 *
9 * 生命周期:
10 *
11 * 初始化 init
12 * 1. 初始化容器
13 * 2. 数据分面,生成分面布局信息
14 *
15 * 渲染阶段 render
16 * 1. view 创建
17 * 2. title
18 * 3. axis
19 *
20 * 清除阶段 clear
21 * 1. 清除 view
22 *
23 * 销毁阶段 destroy
24 * 1. clear
25 * 2. 清除事件
26 * 3. 清除 group
27 */
28export declare abstract class Facet<C extends FacetCfg<FacetData> = FacetCfg<FacetData>, F extends FacetData = FacetData> {
29 /** 分面所在的 view */
30 view: View;
31 /** 分面容器 */
32 container: IGroup;
33 /** 是否销毁 */
34 destroyed: boolean;
35 /** 分面的配置项 */
36 protected cfg: C;
37 /** 分面之后的所有分面数据结构 */
38 protected facets: F[];
39 constructor(view: View, cfg: C);
40 /**
41 * 初始化过程
42 */
43 init(): void;
44 /**
45 * 渲染分面,由上层 view 调用。包括:
46 * - 分面 view
47 * - 轴
48 * - title
49 *
50 * 子类可以复写,添加一些其他组件,比如滚动条等
51 */
52 render(): void;
53 /**
54 * 更新 facet
55 */
56 update(): void;
57 /**
58 * 清空,clear 之后如果还需要使用,需要重新调用 init 初始化过程
59 * 一般在数据有变更的时候调用,重新进行数据的分面逻辑
60 */
61 clear(): void;
62 /**
63 * 销毁
64 */
65 destroy(): void;
66 /**
67 * 根据 facet 生成 view,可以给上层自定义使用
68 * @param facet
69 */
70 protected facetToView(facet: F): View;
71 private createContainer;
72 /**
73 * 初始化 view
74 */
75 private renderViews;
76 /**
77 * 创建 分面 view
78 */
79 private createFacetViews;
80 /**
81 * 从 view 中清除 facetView
82 */
83 private clearFacetViews;
84 /**
85 * 获取这个字段对应的所有值,数组
86 * @protected
87 * @param data 数据
88 * @param field 字段名
89 * @return 字段对应的值
90 */
91 protected getFieldValues(data: Datum[], field: string): string[];
92 /**
93 * 获得每个分面的 region,平分区域
94 * @param rows row 总数
95 * @param cols col 总数
96 * @param xIndex x 方向 index
97 * @param yIndex y 方向 index
98 */
99 protected getRegion(rows: number, cols: number, xIndex: number, yIndex: number): Region;
100 protected getDefaultCfg(): {
101 eachView: any;
102 showTitle: boolean;
103 padding: number;
104 fields: any[];
105 };
106 /**
107 * 默认的 title 样式,因为有的分面是 title,有的分面配置是 columnTitle、rowTitle
108 */
109 protected getDefaultTitleCfg(): {
110 style: {
111 fontSize: number;
112 fill: string;
113 fontFamily: any;
114 };
115 };
116 /**
117 * 处理 axis 的默认配置
118 * @param view
119 * @param facet
120 */
121 protected processAxis(view: View, facet: F): void;
122 /**
123 * 获取分面数据
124 * @param conditions
125 */
126 protected getFacetDataFilter(conditions: Condition[]): FacetDataFilter;
127 /**
128 * @override 开始处理 eachView
129 * @param view
130 * @param facet
131 */
132 protected abstract beforeEachView(view: View, facet: F): any;
133 /**
134 * @override 处理 eachView 之后
135 * @param view
136 * @param facet
137 */
138 protected abstract afterEachView(view: View, facet: F): any;
139 /**
140 * @override 生成分面数据,包含布局
141 * @param data
142 */
143 protected abstract generateFacets(data: Datum[]): F[];
144 /**
145 * 获取 x 轴的配置
146 * @param x
147 * @param axes
148 * @param option
149 * @param facet
150 */
151 protected abstract getXAxisOption(x: string, axes: any, option: AxisCfg, facet: F): object;
152 /**
153 * 获取 y 轴的配置
154 * @param y
155 * @param axes
156 * @param option
157 * @param facet
158 */
159 protected abstract getYAxisOption(y: string, axes: any, option: AxisCfg, facet: F): object;
160}