@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
155 lines • 6.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var g2_1 = require("@antv/g2");
var _ = tslib_1.__importStar(require("@antv/util"));
var color_1 = require("../../../../util/color");
var TOP_MARGIN = 20;
var ColumnLabels = /** @class */ (function (_super) {
tslib_1.__extends(ColumnLabels, _super);
function ColumnLabels() {
return _super !== null && _super.apply(this, arguments) || this;
}
ColumnLabels.prototype.setLabelPosition = function (point, originPoint, index, originPosition) {
var position = originPosition;
if (_.isFunction(position)) {
position = position(originPoint);
}
var coord = this.get('coord');
var point0 = coord.convertPoint(originPoint.points[0]);
var point1 = coord.convertPoint(originPoint.points[2]);
var negative = point0.y < point1.y;
var width = (point0.x - point1.x) / 2;
var height = (point0.y - point1.y) / 2;
switch (position) {
case 'right':
point.x -= width;
point.y += height;
point.textAlign = point.textAlign || 'left';
break;
case 'left':
point.x += width;
point.y += height;
point.textAlign = point.textAlign || 'right';
break;
case 'bottom':
point.y += height * 2;
point.textAlign = point.textAlign || 'center';
break;
case 'middle':
point.y += height;
point.textAlign = point.textAlign || 'center';
break;
case 'top':
point.textAlign = point.textAlign || 'center';
break;
default:
break;
}
};
ColumnLabels.prototype.adjustOffset = function (points, shapes) {
var renderer = this.get('labelsRenderer');
var items = renderer.get('items');
var labels = renderer.get('group').get('children');
var coord = this.get('coord');
_.each(items, function (item, idx) {
var label = labels[idx];
var point0 = coord.convertPoint(points[idx].points[0]);
var point1 = coord.convertPoint(points[idx].points[2]);
var negative = point0.y < point1.y;
if (negative) {
item.y += item.offset * 2;
label.attr('textBaseline', 'top');
label.attr('y', label.attr('y') + item.offset * 2);
}
});
};
ColumnLabels.prototype.showLabels = function (points, shapes) {
var _this = this;
_super.prototype.showLabels.call(this, points, shapes);
this.adjustOffset(points, shapes);
var renderer = this.get('labelsRenderer');
var labels = renderer.get('group').get('children');
var items = renderer.get('items');
var view = this.get('element').get('view');
_.each(labels, function (label, index) {
var l = label;
var item = items[index];
var origin = l.get('origin');
var shapeId = _this.get('element').getShapeId(origin);
var shape = _this._getShape(shapeId, shapes);
var _a = _this.get('labelOptions'), adjustColor = _a.adjustColor, adjustPosition = _a.adjustPosition;
if (adjustPosition) {
_this.adjustPosition(l, shape, item);
}
if (adjustColor) {
_this.adjustColor(l, shape);
}
});
view.get('canvas').draw();
};
ColumnLabels.prototype._getShape = function (shapeId, shapes) {
var target;
_.each(shapes, function (shape) {
var s = shape;
var id = s.id;
if (id === shapeId) {
target = s;
}
});
return target;
};
ColumnLabels.prototype.adjustPosition = function (label, shape, item) {
var labelRange = label.getBBox();
var shapeRange = shape.getBBox();
if (shapeRange.height <= labelRange.height && item.position !== 'top') {
var yPosition = shapeRange.minY - TOP_MARGIN;
label.attr('y', yPosition);
}
};
ColumnLabels.prototype.adjustColor = function (label, shape) {
var labelRange = label.getBBox();
var shapeRange = shape.getBBox();
if (labelRange.minY >= shapeRange.minY && labelRange.maxY <= shapeRange.maxY) {
var shapeColor = shape.attr('fill');
var shapeOpacity = shape.attr('opacity') ? shape.attr('opacity') : 1;
var rgb = color_1.rgb2arr(shapeColor);
var gray = Math.round(rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) / shapeOpacity;
var colorBand = [
{ from: 0, to: 85, color: 'white' },
{ from: 85, to: 170, color: '#F6F6F6' },
{ from: 170, to: 255, color: 'black' },
];
var reflect = this._mappingColor(colorBand, gray);
label.attr('fill', reflect);
if (reflect !== 'black') {
label.attr('stroke', null);
label.attr('lineWidth', 0);
}
else {
label.attr('stroke', 'white');
label.attr('lineWidth', 2);
}
}
else if (labelRange.maxY < shapeRange.minY) {
// 非 shape 范围内的 label 需要考虑主题背景
var theme = this.get('theme');
var labelTextColor = _.get(theme, 'label.textStyle.fill', 'black');
label.attr('fill', labelTextColor);
}
};
ColumnLabels.prototype._mappingColor = function (band, gray) {
var reflect;
_.each(band, function (b) {
var map = b;
if (gray >= map.from && gray < map.to) {
reflect = map.color;
}
});
return reflect;
};
return ColumnLabels;
}(g2_1.ElementLabels));
exports.ColumnLabels = ColumnLabels;
g2_1.registerElementLabels('columnLabel', ColumnLabels);
//# sourceMappingURL=column-label.js.map