NuclearDispersionSystem/ant-design-vue-jeecg/node_modules/@antv/g2/esm/facet/facet.js

256 lines
7.4 KiB
Java
Raw Normal View History

2023-09-14 14:47:11 +08:00
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有的分面配置是 columnTitlerowTitle
*/
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