@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
213 lines • 8.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var _ = tslib_1.__importStar(require("@antv/util"));
var global_1 = require("../../base/global");
var layer_1 = tslib_1.__importDefault(require("../pie/layer"));
var apply_responsive_1 = tslib_1.__importDefault(require("./apply-responsive"));
require("./apply-responsive/theme");
var statisticTemplate = tslib_1.__importStar(require("./component/statistic-template"));
var EventParser = tslib_1.__importStar(require("./event"));
var G2_GEOM_MAP = {
ring: 'interval',
};
var PLOT_GEOM_MAP = {
interval: 'ring',
};
var RingLayer = /** @class */ (function (_super) {
tslib_1.__extends(RingLayer, _super);
function RingLayer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'ring';
return _this;
}
RingLayer.getDefaultOptions = function () {
return _.deepMix({}, _super.getDefaultOptions.call(this), {
radius: 0.8,
innerRadius: 0.64,
statistic: {
visible: true,
triggerOn: 'mouseenter',
triggerOff: 'mouseleave',
},
});
};
RingLayer.prototype.getOptions = function (props) {
var options = _super.prototype.getOptions.call(this, props);
// @ts-ignore
var defaultOptions = this.constructor.getDefaultOptions();
return _.deepMix({}, options, defaultOptions, props);
};
RingLayer.prototype.beforeInit = function () {
_super.prototype.beforeInit.call(this);
RingLayer.centralId++;
this.statisticClass = "statisticClassId" + RingLayer.centralId;
var props = this.options;
/** 响应式图形 */
if (props.responsive && props.padding !== 'auto') {
this.applyResponsive('preRender');
}
};
RingLayer.prototype.afterInit = function () {
var _this = this;
_super.prototype.afterInit.call(this);
/** 处理环图中心文本响应交互的问题 */
if (this.statistic && this.statistic.visible && this.statistic.triggerOn) {
var triggerOnEvent = this.statistic.triggerOn;
this.view.on("interval:" + triggerOnEvent, _.debounce(function (e) {
var displayData = _this.parseStatisticData(e.data._origin);
var htmlString = _this.getStatisticHtmlString(displayData);
document.getElementsByClassName(_this.statisticClass)[0].innerHTML = htmlString;
}, 150));
var triggerOffEvent = this.statistic.triggerOff ? this.statistic.triggerOff : 'mouseleave';
this.view.on("interval:" + triggerOffEvent, _.debounce(function (e) {
var totalValue = _this.getTotalValue();
var displayData = _this.parseStatisticData(totalValue);
var htmlString = _this.getStatisticHtmlString(displayData);
document.getElementsByClassName(_this.statisticClass)[0].innerHTML = htmlString;
}, 150));
}
};
RingLayer.prototype.geometryParser = function (dim, type) {
if (dim === 'g2') {
return G2_GEOM_MAP[type];
}
return PLOT_GEOM_MAP[type];
};
RingLayer.prototype.coord = function () {
var props = this.options;
var coordConfig = {
type: 'theta',
cfg: {
radius: props.radius,
innerRadius: props.innerRadius,
},
};
this.setConfig('coord', coordConfig);
};
RingLayer.prototype.annotation = function () {
var annotationConfigs = [];
var props = this.options;
if (props.statistic && props.statistic.visible) {
var statistic = this.drawStatistic(props.statistic);
annotationConfigs.push(statistic);
this.statistic = statistic;
}
this.setConfig('annotations', annotationConfigs);
};
RingLayer.prototype.parseEvents = function (eventParser) {
_super.prototype.parseEvents.call(this, EventParser);
};
RingLayer.prototype.drawStatistic = function (config) {
var statistic = _.deepMix({}, {
type: 'html',
top: true,
position: ['50%', '50%'],
triggerOn: 'mouseenter',
}, config);
/** 中心文本内容 */
var displayData;
if (config.content) {
displayData = config.content;
}
else {
/** 用户没有指定文本内容时，默认显示总计 */
var data = this.getTotalValue();
displayData = this.parseStatisticData(data);
}
/** 中心文本显示 */
var htmlString;
if (config.htmlContent) {
htmlString = config.htmlContent(displayData);
}
else {
htmlString = this.getStatisticTemplate(displayData);
}
statistic.html = htmlString;
/** 是否响应状态量 */
if (statistic.triggerOn) {
this.setConfig('tooltip', false);
}
return statistic;
};
/** 获取总计数据 */
RingLayer.prototype.getTotalValue = function () {
var _a;
var props = this.options;
var total = 0;
_.each(props.data, function (item) {
if (typeof item[props.angleField] === 'number') {
total += item[props.angleField];
}
});
var data = (_a = {},
_a[props.angleField] = total,
_a[props.colorField] = '总计',
_a);
return data;
};
RingLayer.prototype.parseStatisticData = function (data) {
var props = this.options;
var angleField = props.angleField;
return props.colorField ? { name: data[props.colorField], value: data[angleField] } : data[angleField];
};
RingLayer.prototype.getStatisticTemplate = function (displayData) {
var size = this.getStatisticSize();
var htmlString;
/** 如果文本内容为string或单条数据 */
if (_.isString(displayData)) {
htmlString = statisticTemplate.getSingleDataTemplate(displayData, this.statisticClass, size);
}
else if (_.isObject(displayData) && _.keys(displayData).length === 2) {
/** 如果文本内容为两条数据 */
var content = displayData;
htmlString = statisticTemplate.getTwoDataTemplate(content.name, content.value, this.statisticClass, size);
}
/** 更为复杂的文本要求用户自行制定html模板 */
return htmlString;
};
/** 获取中心文本的htmlString */
RingLayer.prototype.getStatisticHtmlString = function (_displayData) {
var triggerOnConfig = this.statistic.triggerOn;
var htmlString;
if (_.isString(triggerOnConfig)) {
htmlString = this.getStatisticTemplate(_displayData);
}
if (_.isFunction(triggerOnConfig)) {
htmlString = triggerOnConfig(_displayData);
htmlString = "<div class=\"ring-guide-html " + this.statisticClass + "\">" + htmlString + "</div>";
}
return htmlString;
};
RingLayer.prototype.applyResponsive = function (stage) {
var _this = this;
var methods = apply_responsive_1.default[stage];
_.each(methods, function (r) {
var responsive = r;
responsive.method(_this);
});
};
RingLayer.prototype.getStatisticSize = function () {
return this.width * this.options.radius;
};
/** @override 调整 label 默认 options */
RingLayer.prototype.adjustLabelDefaultOptions = function (options) {
var labelConfig = tslib_1.__assign({}, options.label);
if (labelConfig && labelConfig.type === 'inner') {
var labelStyleConfig = (labelConfig.style || {});
if (!labelStyleConfig.textAlign) {
labelStyleConfig.textAlign = 'center';
}
labelConfig.style = labelStyleConfig;
if (!labelConfig.offset) {
labelConfig.offset = ((options.innerRadius - 1) / 2) * 100 + "%";
}
}
return labelConfig;
};
RingLayer.centralId = 0;
return RingLayer;
}(layer_1.default));
exports.default = RingLayer;
global_1.registerPlotType('ring', RingLayer);
//# sourceMappingURL=layer.js.map