@antv/f2
Version:
Charts for mobile visualization.
69 lines • 2.19 kB
JavaScript
import { __assign } from "tslib";
import { jsx } from '@antv/f-engine';
import { getMiddlePoint } from '../../../util/coord';
import { convertToPoints } from '../util';
// 金字塔图和漏斗图的View
export default (function (props) {
var records = props.records,
shape = props.shape,
showLabel = props.showLabel,
labelCfg = props.labelCfg,
LabelView = props.LabelView;
// 是否倒置
var overturn = false;
return jsx("group", null, records.map(function (record, index) {
var key = record.key,
children = record.children;
var isLastRecord = index === records.length - 1;
var nextRecord = isLastRecord ? record : records[index + 1];
var nextChildren = nextRecord.children;
var nextFirstPoint = convertToPoints(nextChildren[0]);
var nextLastPoints = convertToPoints(nextChildren[nextChildren.length - 1]);
if (!overturn) {
overturn = nextChildren[0].yMax > children[0].yMax;
}
if (overturn) {
nextFirstPoint.reverse();
nextLastPoints.reverse();
}
var polygonPoints = children.map(function (child, childIndex) {
var points = convertToPoints(child);
if (overturn) {
points.reverse();
}
if (isLastRecord) {
if (shape === 'pyramid') {
points = [getMiddlePoint(points[0], points[1]), points[2], points[3]];
}
} else {
if (childIndex === 0) {
points[0] = nextFirstPoint[3];
}
if (childIndex === children.length - 1) {
points[1] = nextLastPoints[2];
}
}
return __assign(__assign({}, child), {
points: points
});
});
return jsx("group", {
key: key
}, polygonPoints.map(function (child) {
var points = child.points,
color = child.color,
shape = child.shape;
return jsx("group", null, jsx("polygon", {
attrs: __assign({
points: points.map(function (d) {
return [d.x, d.y];
}),
fill: color
}, shape)
}), showLabel && LabelView ? jsx(LabelView, __assign({
record: child,
points: points
}, labelCfg)) : null);
}));
}));
});