@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
243 lines • 9.39 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var util_1 = require("@antv/util");
var g_1 = require("@antv/g");
var Quadrant = /** @class */ (function () {
function Quadrant(cfg) {
this.xBaseline = 0;
this.yBaseline = 0;
this.quadrantGroups = [];
this.regionData = [];
this.lineData = [];
this.options = cfg;
this.view = this.options.view;
this.init();
}
Quadrant.prototype.init = function () {
var _this = this;
var _a = this.options, xBaseline = _a.xBaseline, yBaseline = _a.yBaseline;
var coord = this.view.get('coord');
// TODO: xBaseline和yBaseline支持百分比
// 根据xBaseline和yBaseline分割象限
var scales = this.view.get('scales');
var xScale = scales[this.options.plotOptions.xField];
var yScale = scales[this.options.plotOptions.yField];
// 先进行x方向的分割
var xRegion;
if (xBaseline > xScale.min && xBaseline < xScale.max) {
var ratio = (xBaseline - xScale.min) / (xScale.max - xScale.min);
xRegion = [
new g_1.BBox(coord.start.x, coord.end.y, coord.width * ratio, coord.height),
new g_1.BBox(coord.start.x + coord.width * ratio, coord.end.y, coord.width * (1 - ratio), coord.height),
];
var verticalLineData = {
start: { x: coord.start.x + coord.width * ratio, y: coord.end.y },
end: { x: coord.start.x + coord.width * ratio, y: coord.start.y },
};
this.lineData.push(verticalLineData);
}
else {
xRegion = new g_1.BBox(coord.start.x, coord.start.y, coord.width, coord.height);
}
// 再进行y方向的分割
if (yBaseline > yScale.min && yBaseline < yScale.max) {
var ratio_1 = (yBaseline - yScale.min) / (yScale.max - yScale.min);
var horizontalLineData = {
start: { x: coord.start.x, y: coord.end.y + coord.height * ratio_1 },
end: { x: coord.end.x, y: coord.end.y + coord.height * ratio_1 },
};
this.lineData.push(horizontalLineData);
util_1.each(xRegion, function (region, index) {
var lastName = ['left', 'right'];
var upper = {
name: xRegion.length > 1 ? "top-" + lastName[index] : 'top',
bbox: new g_1.BBox(region.minX, region.minY, region.width, region.height * ratio_1),
};
_this.regionData.push(upper);
var lower = {
name: xRegion.length > 1 ? "bottom-" + lastName[index] : 'bottom',
bbox: new g_1.BBox(region.minX, region.minY + region.height * ratio_1, region.width, region.height * (1 - ratio_1)),
};
_this.regionData.push(lower);
});
}
else if (xRegion.length === 2) {
var left = {
name: 'left',
bbox: xRegion[0],
};
this.regionData.push(left);
var right = {
name: 'right',
bbox: xRegion[1],
};
this.regionData.push(right);
}
// 创建container
this.container = this.view.get('backgroundGroup').addGroup();
};
Quadrant.prototype.render = function () {
var _this = this;
if (this.regionData.length > 0) {
var defaultStyle_1 = this.getDefaultStyle();
var regionStyle_1 = this.getRegionStyle(this.regionData);
util_1.each(this.regionData, function (d, index) {
var group = _this.container.addGroup();
var rect = group.addShape('rect', {
attrs: tslib_1.__assign({ x: d.bbox.minX, y: d.bbox.minY, width: d.bbox.width, height: d.bbox.height }, regionStyle_1[index]),
name: 'quadrant',
});
if (_this.options.label && _this.options.label.text) {
var labelOptions = util_1.deepMix({}, defaultStyle_1.label, _this.options.label);
var labelCfg = _this.getLabelConfig(d, labelOptions, index);
var label = group.addShape('text', {
attrs: tslib_1.__assign({}, labelCfg),
});
}
rect.setSilent('data', d);
_this.quadrantGroups.push(group);
});
//绘制象限辅助线
var lineStyle_1 = util_1.deepMix({}, defaultStyle_1.line, this.options.lineStyle);
util_1.each(this.lineData, function (d) {
_this.container.addShape('path', {
attrs: tslib_1.__assign({ path: [
['M', d.start.x, d.start.y],
['L', d.end.x, d.end.y],
] }, lineStyle_1),
});
});
this.view.get('canvas').draw();
}
};
Quadrant.prototype.clear = function () {
if (this.container) {
this.container.clear();
}
};
Quadrant.prototype.destroy = function () {
if (this.container) {
this.container.remove();
}
};
Quadrant.prototype.getDefaultStyle = function () {
return {
line: {
stroke: '#9ba29a',
lineWidth: 1,
},
region_2: [
{ fill: '#000000', opacity: 0.05 },
{ fill: '#ffffff', opacity: 0 },
],
region_4: [
{ fill: '#000000', opacity: 0.05 },
{ fill: '#ffffff', opacity: 0 },
{ fill: '#ffffff', opacity: 0 },
{ fill: '#000000', opacity: 0.05 },
],
label: {
position: 'outter-inner',
offset: 10,
style: {
fontSize: 14,
fill: '#ccc',
},
},
};
};
Quadrant.prototype.getRegionStyle = function (regionData) {
var regionNum = regionData.length;
var defaultStyle = this.getDefaultStyle();
var style;
if (regionNum === 2) {
style = defaultStyle.region_2;
}
else {
style = defaultStyle.region_4;
}
if (this.options.regionStyle) {
var regionStyle_2 = this.options.regionStyle;
if (util_1.isArray(regionStyle_2)) {
style = style.map(function (s, index) {
if (regionStyle_2.length >= index) {
return regionStyle_2[index];
}
return s;
});
}
else if (util_1.isFunction(regionStyle_2)) {
util_1.each(regionData, function (d, index) {
style[index] = regionStyle_2(d);
});
}
}
return style;
};
Quadrant.prototype.getLabelConfig = function (region, labelOptions, index) {
var x = 0;
var y = 0;
var style = {};
var text = labelOptions.text;
if (util_1.isFunction(text)) {
text = text(region);
}
else if (util_1.isArray(text)) {
text = text[index];
}
var position = labelOptions.position;
var pos = position.split('-');
var dim = region.name.split('-');
// x方向
if (dim[1] === 'left') {
if (pos[0] === 'inner') {
x = region.bbox.maxX - labelOptions.offset;
style.textAlign = 'right';
}
if (pos[0] === 'outter') {
x = region.bbox.minX + labelOptions.offset;
style.textAlign = 'left';
}
}
else if (dim[1] === 'right') {
if (pos[0] === 'inner') {
x = region.bbox.minX + labelOptions.offset;
style.textAlign = 'left';
}
if (pos[0] === 'outter') {
x = region.bbox.maxX - labelOptions.offset;
style.textAlign = 'right';
}
}
// y方向
if (dim[0] === 'top') {
if (pos[1] === 'inner') {
y = region.bbox.maxY - labelOptions.offset;
style.textBaseline = 'bottom';
}
if (pos[1] === 'outter') {
y = region.bbox.minY + labelOptions.offset;
style.textBaseline = 'top';
}
}
else if (dim[0] === 'bottom') {
if (pos[1] === 'inner') {
y = region.bbox.minY + labelOptions.offset;
style.textBaseline = 'top';
}
if (pos[1] === 'outter') {
y = region.bbox.maxY - labelOptions.offset;
style.textBaseline = 'bottom';
}
}
style = util_1.deepMix({}, labelOptions.style, style);
style.lineHeight = style.fontSize;
return tslib_1.__assign({ x: x,
y: y,
text: text }, style);
};
return Quadrant;
}());
exports.default = Quadrant;
//# sourceMappingURL=quadrant.js.map