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 |