@antv/f2
Version:
Charts for mobile visualization.
80 lines (79 loc) • 2.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var _fEngine = require("@antv/f-engine");
var _glMatrix = require("gl-matrix");
var _default = exports.default = function _default(props) {
var originTicks = props.ticks,
coord = props.coord,
style = props.style,
gridType = props.grid;
var center = coord.center;
var grid = style.grid,
tickLine = style.tickLine,
line = style.line,
labelOffset = style.labelOffset,
label = style.label;
var ticks = originTicks.filter(function (d) {
return !isNaN(d.value);
});
return (0, _fEngine.jsx)("group", null, grid ? ticks.map(function (tick) {
var points = tick.points,
gridStyle = tick.gridStyle,
gridPoints = tick.gridPoints;
var end = points[points.length - 1];
if (gridType !== 'line') {
return (0, _fEngine.jsx)("arc", {
style: (0, _tslib.__assign)((0, _tslib.__assign)({
cx: center.x,
cy: center.y,
startAngle: 0,
endAngle: 360,
r: _glMatrix.vec2.length([end.x - center.x, end.y - center.y])
}, grid), gridStyle)
});
}
return (0, _fEngine.jsx)("polyline", {
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({
points: gridPoints.map(function (d) {
return [d.x, d.y];
})
}, grid), gridStyle)
});
}) : null, tickLine && tickLine.length ? ticks.map(function (tick) {
var points = tick.points;
var end = points[points.length - 1];
return (0, _fEngine.jsx)("line", {
attrs: (0, _tslib.__assign)({
x1: end.x,
y1: end.y,
x2: end.x - tickLine.length,
y2: end.y
}, tickLine)
});
}) : null, line ? (0, _fEngine.jsx)("line", {
attrs: (0, _tslib.__assign)({
x1: ticks[0].points[0].x,
y1: ticks[0].points[0].y,
x2: ticks[ticks.length - 1].points[0].x,
y2: ticks[ticks.length - 1].points[0].y
}, line)
}) : null, label ? ticks.map(function (tick) {
var points = tick.points,
text = tick.text,
labelStyle = tick.labelStyle;
var end = points[points.length - 1];
return (0, _fEngine.jsx)("text", {
attrs: (0, _tslib.__assign)((0, _tslib.__assign)({
x: end.x - labelOffset,
y: end.y,
text: text,
textAlign: 'right',
textBaseline: 'middle'
}, label), labelStyle)
});
}) : null);
};