@antv/g2plot
Version:
An interactive and responsive charting library
255 lines • 9.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DrillDownAction = exports.HIERARCHY_DATA_TRANSFORM_PARAMS = exports.DEFAULT_BREAD_CRUMB_CONFIG = exports.BREAD_CRUMB_NAME = exports.PADDING_TOP = void 0;
var tslib_1 = require("tslib");
var g2_1 = require("@antv/g2");
var util_1 = require("@antv/util");
var deep_assign_1 = require("../../utils/deep-assign");
// 面包屑文字和分割符'/'之间的距离
var PADDING = 4;
// 面包屑位置距离树图的距离
var PADDING_LEFT = 0;
// 面包屑位置距离树图的顶部距离
exports.PADDING_TOP = 5;
/** Group name of breadCrumb: 面包屑 */
exports.BREAD_CRUMB_NAME = 'drilldown-bread-crumb';
// 面包屑默认配置
exports.DEFAULT_BREAD_CRUMB_CONFIG = {
/** 位置，默认：左上角 */
position: 'top-left',
dividerText: '/',
textStyle: {
fontSize: 12,
fill: 'rgba(0, 0, 0, 0.65)',
cursor: 'pointer',
},
activeTextStyle: {
fill: '#87B5FF',
},
};
/**
* hierarchy 数据转换的参数
*/
exports.HIERARCHY_DATA_TRANSFORM_PARAMS = 'hierarchy-data-transform-params';
/**
* @description 下钻交互的 action
* @author liuzhenying
*
* 适用于：hierarchy plot
*/
var DrillDownAction = /** @class */ (function (_super) {
tslib_1.__extends(DrillDownAction, _super);
function DrillDownAction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
/** Action name */
_this.name = 'drill-down';
// 存储历史下钻数据
_this.historyCache = [];
// 面包屑 group
_this.breadCrumbGroup = null;
// 面包屑基础配置
_this.breadCrumbCfg = exports.DEFAULT_BREAD_CRUMB_CONFIG;
return _this;
}
/**
* 点击事件, 下钻数据，并绘制面包屑
*/
DrillDownAction.prototype.click = function () {
var data = (0, util_1.get)(this.context, ['event', 'data', 'data']);
if (!data)
return false;
this.drill(data);
this.drawBreadCrumb();
};
/**
* 重置位置，初始化及触发 chart afterchangesize 回调时使用
*/
DrillDownAction.prototype.resetPosition = function () {
// 当在第一层级未绘制面包屑，此时 changedata 触发 resetPosition 函数，需判断 this.breadCrumbGroup 是否存在
if (!this.breadCrumbGroup)
return;
var coordinate = this.context.view.getCoordinate();
var breadCrumbGroup = this.breadCrumbGroup;
var bbox = breadCrumbGroup.getBBox();
var position = this.getButtonCfg().position;
// @todo 后续抽取一个函数来处理，以及增加 margin 或者 padding 的设置
// 非 polar 的，需要使用 coordinate，除却图表组件
var point = { x: coordinate.start.x, y: coordinate.end.y - (bbox.height + exports.PADDING_TOP * 2) };
if (coordinate.isPolar) {
// 默认，左上角直接出发
point = { x: 0, y: 0 };
}
if (position === 'bottom-left') {
// 涉及到坐标反转的问题
point = { x: coordinate.start.x, y: coordinate.start.y };
}
/** PADDING_LEFT, PADDING_TOP 与画布边缘的距离 */
var matrix = g2_1.Util.transform(null, [['t', point.x + PADDING_LEFT, point.y + bbox.height + exports.PADDING_TOP]]);
breadCrumbGroup.setMatrix(matrix);
};
/**
* 返回上一层
*/
DrillDownAction.prototype.back = function () {
if ((0, util_1.size)(this.historyCache)) {
this.backTo(this.historyCache.slice(0, -1));
}
};
/**
* 重置
*/
DrillDownAction.prototype.reset = function () {
if (this.historyCache[0]) {
this.backTo(this.historyCache.slice(0, 1));
}
// 清空
this.historyCache = [];
this.hideCrumbGroup();
};
/**
* 下钻数据并更新 view 显示层
* @param nodeInfo 下钻数据
*/
DrillDownAction.prototype.drill = function (nodeInfo) {
var view = this.context.view;
var transformData = (0, util_1.get)(view, ['interactions', 'drill-down', 'cfg', 'transformData'], function (v) { return v; });
// 重新 update 数据
var drillData = transformData(tslib_1.__assign({ data: nodeInfo.data }, nodeInfo[exports.HIERARCHY_DATA_TRANSFORM_PARAMS]));
view.changeData(drillData);
// 存储历史记录
var historyCache = [];
var node = nodeInfo;
while (node) {
var nodeData = node.data;
historyCache.unshift({
id: "".concat(nodeData.name, "_").concat(node.height, "_").concat(node.depth),
name: nodeData.name,
// children 是实际数据
children: transformData(tslib_1.__assign({ data: nodeData }, nodeInfo[exports.HIERARCHY_DATA_TRANSFORM_PARAMS])),
});
node = node.parent;
}
this.historyCache = (this.historyCache || []).slice(0, -1).concat(historyCache);
};
/**
* 回退事件，点击面包屑时触发
* @param historyCache 当前要回退到的历史
*/
DrillDownAction.prototype.backTo = function (historyCache) {
if (!historyCache || historyCache.length <= 0) {
return;
}
var view = this.context.view;
var data = (0, util_1.last)(historyCache).children; // 处理后的数组
view.changeData(data);
if (historyCache.length > 1) {
this.historyCache = historyCache;
this.drawBreadCrumb();
}
else {
// 清空
this.historyCache = [];
this.hideCrumbGroup();
}
};
/**
* 获取 mix 默认的配置和用户配置
*/
DrillDownAction.prototype.getButtonCfg = function () {
var view = this.context.view;
var drillDownConfig = (0, util_1.get)(view, ['interactions', 'drill-down', 'cfg', 'drillDownConfig']);
return (0, deep_assign_1.deepAssign)(this.breadCrumbCfg, drillDownConfig === null || drillDownConfig === void 0 ? void 0 : drillDownConfig.breadCrumb, this.cfg);
};
/**
* 显示面包屑
*/
DrillDownAction.prototype.drawBreadCrumb = function () {
this.drawBreadCrumbGroup();
this.resetPosition();
this.breadCrumbGroup.show();
};
/**
* 绘制 Button 和 文本
*/
DrillDownAction.prototype.drawBreadCrumbGroup = function () {
var _this = this;
var config = this.getButtonCfg();
var cache = this.historyCache;
// 初始化面包屑 group
if (!this.breadCrumbGroup) {
this.breadCrumbGroup = this.context.view.foregroundGroup.addGroup({
name: exports.BREAD_CRUMB_NAME,
});
}
else {
this.breadCrumbGroup.clear();
}
// 绘制面包屑
var left = 0;
cache.forEach(function (record, index) {
// 添加文本
var textShape = _this.breadCrumbGroup.addShape({
type: 'text',
id: record.id,
name: "".concat(exports.BREAD_CRUMB_NAME, "_").concat(record.name, "_text"),
attrs: tslib_1.__assign(tslib_1.__assign({ text: index === 0 && !(0, util_1.isNil)(config.rootText) ? config.rootText : record.name }, config.textStyle), { x: left, y: 0 }),
});
var textShapeBox = textShape.getBBox();
left += textShapeBox.width + PADDING;
// 增加文本事件
textShape.on('click', function (event) {
var _a;
var targetId = event.target.get('id');
if (targetId !== ((_a = (0, util_1.last)(cache)) === null || _a === void 0 ? void 0 : _a.id)) {
var newHistoryCache = cache.slice(0, cache.findIndex(function (d) { return d.id === targetId; }) + 1);
_this.backTo(newHistoryCache);
}
});
// active 效果内置
textShape.on('mouseenter', function (event) {
var _a;
var targetId = event.target.get('id');
if (targetId !== ((_a = (0, util_1.last)(cache)) === null || _a === void 0 ? void 0 : _a.id)) {
textShape.attr(config.activeTextStyle);
}
else {
textShape.attr({ cursor: 'default' });
}
});
textShape.on('mouseleave', function () {
textShape.attr(config.textStyle);
});
if (index < cache.length - 1) {
// 添加反斜杠
var dividerShape = _this.breadCrumbGroup.addShape({
type: 'text',
name: "".concat(config.name, "_").concat(record.name, "_divider"),
attrs: tslib_1.__assign(tslib_1.__assign({ text: config.dividerText }, config.textStyle), { x: left, y: 0 }),
});
var dividerBox = dividerShape.getBBox();
left += dividerBox.width + PADDING;
}
});
};
/**
* 隐藏面包屑
*/
DrillDownAction.prototype.hideCrumbGroup = function () {
if (this.breadCrumbGroup) {
this.breadCrumbGroup.hide();
}
};
/**
* @override
* destroy: 销毁资源
*/
DrillDownAction.prototype.destroy = function () {
if (this.breadCrumbGroup) {
this.breadCrumbGroup.remove();
}
_super.prototype.destroy.call(this);
};
return DrillDownAction;
}(g2_1.Action));
exports.DrillDownAction = DrillDownAction;
//# sourceMappingURL=drill-down.js.map