256 lines
7.4 KiB
Java
256 lines
7.4 KiB
Java
![]() |
import { deepMix, each, every, get, isNil } from '@antv/util';
|
|||
|
import { LAYER } from '../constant';
|
|||
|
import { getAxisOption } from '../util/axis';
|
|||
|
/**
|
|||
|
* facet 基类
|
|||
|
* - 定义生命周期,方便自定义 facet
|
|||
|
* - 提供基础的生命流程方法
|
|||
|
*
|
|||
|
* 生命周期:
|
|||
|
*
|
|||
|
* 初始化 init
|
|||
|
* 1. 初始化容器
|
|||
|
* 2. 数据分面,生成分面布局信息
|
|||
|
*
|
|||
|
* 渲染阶段 render
|
|||
|
* 1. view 创建
|
|||
|
* 2. title
|
|||
|
* 3. axis
|
|||
|
*
|
|||
|
* 清除阶段 clear
|
|||
|
* 1. 清除 view
|
|||
|
*
|
|||
|
* 销毁阶段 destroy
|
|||
|
* 1. clear
|
|||
|
* 2. 清除事件
|
|||
|
* 3. 清除 group
|
|||
|
*/
|
|||
|
var Facet = /** @class */ (function () {
|
|||
|
function Facet(view, cfg) {
|
|||
|
/** 是否销毁 */
|
|||
|
this.destroyed = false;
|
|||
|
/** 分面之后的所有分面数据结构 */
|
|||
|
this.facets = [];
|
|||
|
this.view = view;
|
|||
|
this.cfg = deepMix({}, this.getDefaultCfg(), cfg);
|
|||
|
}
|
|||
|
/**
|
|||
|
* 初始化过程
|
|||
|
*/
|
|||
|
Facet.prototype.init = function () {
|
|||
|
// 初始化容器
|
|||
|
if (!this.container) {
|
|||
|
this.container = this.createContainer();
|
|||
|
}
|
|||
|
// 生成分面布局信息
|
|||
|
var data = this.view.getData();
|
|||
|
this.facets = this.generateFacets(data);
|
|||
|
};
|
|||
|
/**
|
|||
|
* 渲染分面,由上层 view 调用。包括:
|
|||
|
* - 分面 view
|
|||
|
* - 轴
|
|||
|
* - title
|
|||
|
*
|
|||
|
* 子类可以复写,添加一些其他组件,比如滚动条等
|
|||
|
*/
|
|||
|
Facet.prototype.render = function () {
|
|||
|
this.renderViews();
|
|||
|
};
|
|||
|
/**
|
|||
|
* 更新 facet
|
|||
|
*/
|
|||
|
Facet.prototype.update = function () {
|
|||
|
// 其实不用做任何事情,因为 facet 最终生成的 View 和 Geometry 都在父 view 的更新中处理了
|
|||
|
};
|
|||
|
/**
|
|||
|
* 清空,clear 之后如果还需要使用,需要重新调用 init 初始化过程
|
|||
|
* 一般在数据有变更的时候调用,重新进行数据的分面逻辑
|
|||
|
*/
|
|||
|
Facet.prototype.clear = function () {
|
|||
|
this.clearFacetViews();
|
|||
|
};
|
|||
|
/**
|
|||
|
* 销毁
|
|||
|
*/
|
|||
|
Facet.prototype.destroy = function () {
|
|||
|
this.clear();
|
|||
|
if (this.container) {
|
|||
|
this.container.remove(true);
|
|||
|
this.container = undefined;
|
|||
|
}
|
|||
|
this.destroyed = true;
|
|||
|
this.view = undefined;
|
|||
|
this.facets = [];
|
|||
|
};
|
|||
|
/**
|
|||
|
* 根据 facet 生成 view,可以给上层自定义使用
|
|||
|
* @param facet
|
|||
|
*/
|
|||
|
Facet.prototype.facetToView = function (facet) {
|
|||
|
var region = facet.region, data = facet.data, _a = facet.padding, padding = _a === void 0 ? this.cfg.padding : _a;
|
|||
|
var view = this.view.createView({
|
|||
|
region: region,
|
|||
|
padding: padding,
|
|||
|
});
|
|||
|
// 设置分面的数据
|
|||
|
view.data(data || []);
|
|||
|
facet.view = view;
|
|||
|
// 前置钩子
|
|||
|
this.beforeEachView(view, facet);
|
|||
|
var eachView = this.cfg.eachView;
|
|||
|
if (eachView) {
|
|||
|
eachView(view, facet);
|
|||
|
}
|
|||
|
// 后置钩子
|
|||
|
this.afterEachView(view, facet);
|
|||
|
return view;
|
|||
|
};
|
|||
|
// 创建容器
|
|||
|
Facet.prototype.createContainer = function () {
|
|||
|
var foregroundGroup = this.view.getLayer(LAYER.FORE);
|
|||
|
return foregroundGroup.addGroup();
|
|||
|
};
|
|||
|
/**
|
|||
|
* 初始化 view
|
|||
|
*/
|
|||
|
Facet.prototype.renderViews = function () {
|
|||
|
this.createFacetViews();
|
|||
|
};
|
|||
|
/**
|
|||
|
* 创建 分面 view
|
|||
|
*/
|
|||
|
Facet.prototype.createFacetViews = function () {
|
|||
|
var _this = this;
|
|||
|
// 使用分面数据 创建分面 view
|
|||
|
return this.facets.map(function (facet) {
|
|||
|
return _this.facetToView(facet);
|
|||
|
});
|
|||
|
};
|
|||
|
/**
|
|||
|
* 从 view 中清除 facetView
|
|||
|
*/
|
|||
|
Facet.prototype.clearFacetViews = function () {
|
|||
|
var _this = this;
|
|||
|
// 从 view 中移除分面 view
|
|||
|
each(this.facets, function (facet) {
|
|||
|
if (facet.view) {
|
|||
|
_this.view.removeView(facet.view);
|
|||
|
facet.view = undefined;
|
|||
|
}
|
|||
|
});
|
|||
|
};
|
|||
|
// 其他一些提供给子类使用的方法
|
|||
|
/**
|
|||
|
* 获取这个字段对应的所有值,数组
|
|||
|
* @protected
|
|||
|
* @param data 数据
|
|||
|
* @param field 字段名
|
|||
|
* @return 字段对应的值
|
|||
|
*/
|
|||
|
Facet.prototype.getFieldValues = function (data, field) {
|
|||
|
var rst = [];
|
|||
|
var cache = {};
|
|||
|
// 去重、去除 Nil 值
|
|||
|
each(data, function (d) {
|
|||
|
var value = d[field];
|
|||
|
if (!isNil(value) && !cache[value]) {
|
|||
|
rst.push(value);
|
|||
|
cache[value] = true;
|
|||
|
}
|
|||
|
});
|
|||
|
return rst;
|
|||
|
};
|
|||
|
/**
|
|||
|
* 获得每个分面的 region,平分区域
|
|||
|
* @param rows row 总数
|
|||
|
* @param cols col 总数
|
|||
|
* @param xIndex x 方向 index
|
|||
|
* @param yIndex y 方向 index
|
|||
|
*/
|
|||
|
Facet.prototype.getRegion = function (rows, cols, xIndex, yIndex) {
|
|||
|
// x, y 方向均分 100% 宽高
|
|||
|
var xRatio = 1 / (cols === 0 ? 1 : cols);
|
|||
|
var yRatio = 1 / (rows === 0 ? 1 : rows);
|
|||
|
var start = {
|
|||
|
x: xRatio * xIndex,
|
|||
|
y: yRatio * yIndex,
|
|||
|
};
|
|||
|
var end = {
|
|||
|
x: xRatio * (xIndex + 1),
|
|||
|
y: yRatio * (yIndex + 1),
|
|||
|
};
|
|||
|
return {
|
|||
|
start: start,
|
|||
|
end: end,
|
|||
|
};
|
|||
|
};
|
|||
|
Facet.prototype.getDefaultCfg = function () {
|
|||
|
return {
|
|||
|
eachView: undefined,
|
|||
|
showTitle: true,
|
|||
|
padding: 10,
|
|||
|
fields: [],
|
|||
|
};
|
|||
|
};
|
|||
|
/**
|
|||
|
* 默认的 title 样式,因为有的分面是 title,有的分面配置是 columnTitle、rowTitle
|
|||
|
*/
|
|||
|
Facet.prototype.getDefaultTitleCfg = function () {
|
|||
|
// @ts-ignore
|
|||
|
var fontFamily = this.view.getTheme().fontFamily;
|
|||
|
return {
|
|||
|
style: {
|
|||
|
fontSize: 14,
|
|||
|
fill: '#666',
|
|||
|
fontFamily: fontFamily,
|
|||
|
}
|
|||
|
};
|
|||
|
};
|
|||
|
/**
|
|||
|
* 处理 axis 的默认配置
|
|||
|
* @param view
|
|||
|
* @param facet
|
|||
|
*/
|
|||
|
Facet.prototype.processAxis = function (view, facet) {
|
|||
|
var options = view.getOptions();
|
|||
|
var coordinateOption = options.coordinate;
|
|||
|
var geometries = view.geometries;
|
|||
|
var coordinateType = get(coordinateOption, 'type', 'rect');
|
|||
|
if (coordinateType === 'rect' && geometries.length) {
|
|||
|
if (isNil(options.axes)) {
|
|||
|
// @ts-ignore
|
|||
|
options.axes = {};
|
|||
|
}
|
|||
|
var axes = options.axes;
|
|||
|
var _a = geometries[0].getXYFields(), x = _a[0], y = _a[1];
|
|||
|
var xOption = getAxisOption(axes, x);
|
|||
|
var yOption = getAxisOption(axes, y);
|
|||
|
if (xOption !== false) {
|
|||
|
options.axes[x] = this.getXAxisOption(x, axes, xOption, facet);
|
|||
|
}
|
|||
|
if (yOption !== false) {
|
|||
|
options.axes[y] = this.getYAxisOption(y, axes, yOption, facet);
|
|||
|
}
|
|||
|
}
|
|||
|
};
|
|||
|
/**
|
|||
|
* 获取分面数据
|
|||
|
* @param conditions
|
|||
|
*/
|
|||
|
Facet.prototype.getFacetDataFilter = function (conditions) {
|
|||
|
return function (datum) {
|
|||
|
// 过滤出全部满足条件的数据
|
|||
|
return every(conditions, function (condition) {
|
|||
|
var field = condition.field, value = condition.value;
|
|||
|
if (!isNil(value) && field) {
|
|||
|
return datum[field] === value;
|
|||
|
}
|
|||
|
return true;
|
|||
|
});
|
|||
|
};
|
|||
|
};
|
|||
|
return Facet;
|
|||
|
}());
|
|||
|
export { Facet };
|
|||
|
//# sourceMappingURL=facet.js.map
|