@antv/f2
Version:
Charts for mobile visualization.
41 lines • 1.37 kB
JavaScript
import { jsx } from '@antv/f-engine';
import { isFunction, mix } from '@antv/util';
import { getMiddlePoint } from '../../../util/coord';
var DEFAULT_LABEL_CFG = {
textBaseline: 'middle',
fill: '#808080'
};
export default function LabelView(props) {
var _a;
var record = props.record,
offsetX = props.offsetX,
offsetY = props.offsetY,
points = props.points,
label = props.label,
guide = props.guide;
var origin = record.origin,
color = record.color;
var labelAttrs, guideAttrs;
if (isFunction(label)) {
var point = points.length === 4 // 如果是金字塔图，顶部只有 3 个点
? getMiddlePoint(points[1], points[2]) : getMiddlePoint(points[0], points[1]);
labelAttrs = mix({
x: point.x + offsetX,
y: point.y + offsetY
}, DEFAULT_LABEL_CFG, label(origin, color));
}
if (isFunction(guide)) {
var point = getMiddlePoint(points.length === 4 ? getMiddlePoint(points[0], points[1]) : points[0], getMiddlePoint(points[2], (_a = points[3]) !== null && _a !== void 0 ? _a : points[1]));
guideAttrs = mix({
x: point.x,
y: point.y,
textBaseline: 'middle',
textAlign: 'center'
}, DEFAULT_LABEL_CFG, guide(origin, color));
}
return jsx("group", null, labelAttrs && jsx("text", {
attrs: labelAttrs
}), guideAttrs && jsx("text", {
attrs: guideAttrs
}));
}