UNPKG

4.25 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 * 解析 spacing
86 */
87 private parseSpacing;
88 /**
89 * 获取这个字段对应的所有值,数组
90 * @protected
91 * @param data 数据
92 * @param field 字段名
93 * @return 字段对应的值
94 */
95 protected getFieldValues(data: Datum[], field: string): string[];
96 /**
97 * 获得每个分面的 region,平分区域
98 * @param rows row 总数
99 * @param cols col 总数
100 * @param xIndex x 方向 index
101 * @param yIndex y 方向 index
102 */
103 protected getRegion(rows: number, cols: number, xIndex: number, yIndex: number): Region;
104 protected getDefaultCfg(): {
105 eachView: any;
106 showTitle: boolean;
107 spacing: number[];
108 padding: number;
109 fields: any[];
110 };
111 /**
112 * 默认的 title 样式,因为有的分面是 title,有的分面配置是 columnTitle、rowTitle
113 */
114 protected getDefaultTitleCfg(): {
115 style: {
116 fontSize: number;
117 fill: string;
118 fontFamily: any;
119 };
120 };
121 /**
122 * 处理 axis 的默认配置
123 * @param view
124 * @param facet
125 */
126 protected processAxis(view: View, facet: F): void;
127 /**
128 * 获取分面数据
129 * @param conditions
130 */
131 protected getFacetDataFilter(conditions: Condition[]): FacetDataFilter;
132 /**
133 * @override 开始处理 eachView
134 * @param view
135 * @param facet
136 */
137 protected abstract beforeEachView(view: View, facet: F): any;
138 /**
139 * @override 处理 eachView 之后
140 * @param view
141 * @param facet
142 */
143 protected abstract afterEachView(view: View, facet: F): any;
144 /**
145 * @override 生成分面数据,包含布局
146 * @param data
147 */
148 protected abstract generateFacets(data: Datum[]): F[];
149 /**
150 * 获取 x 轴的配置
151 * @param x
152 * @param axes
153 * @param option
154 * @param facet
155 */
156 protected abstract getXAxisOption(x: string, axes: any, option: AxisCfg, facet: F): object;
157 /**
158 * 获取 y 轴的配置
159 * @param y
160 * @param axes
161 * @param option
162 * @param facet
163 */
164 protected abstract getYAxisOption(y: string, axes: any, option: AxisCfg, facet: F): object;
165}