@antv/f2
Version:
Charts for mobile visualization.
100 lines • 2.57 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { jsx } from '../../../jsx';
export default (function (props) {
var ticks = props.ticks,
coord = props.coord,
style = props.style,
animation = props.animation;
var left = coord.left,
top = coord.top,
bottom = coord.bottom;
var grid = style.grid,
tickLine = style.tickLine,
line = style.line,
labelOffset = style.labelOffset,
label = style.label;
return jsx("group", null, grid ? ticks.map(function (tick) {
var points = tick.points,
tickValue = tick.tickValue,
gridStyle = tick.gridStyle;
var start = points[0];
var end = points[points.length - 1];
return jsx("line", {
key: tickValue,
attrs: _objectSpread(_objectSpread({
x1: start.x,
y1: start.y,
x2: end.x,
y2: end.y
}, grid), gridStyle)
});
}) : null, tickLine && tickLine.length ? ticks.map(function (tick) {
var points = tick.points,
tickValue = tick.tickValue;
var start = points[0];
return jsx("line", {
key: tickValue,
attrs: _objectSpread({
x1: start.x,
y1: start.y,
x2: start.x - tickLine.length,
y2: start.y
}, tickLine)
});
}) : null, line ? jsx("line", {
attrs: _objectSpread({
x1: left,
y1: top,
x2: left,
y2: bottom
}, line)
}) : null, label ? ticks.map(function (tick, _index) {
var tickValue = tick.tickValue,
points = tick.points,
text = tick.text,
labelStyle = tick.labelStyle;
var start = points[0];
return jsx("text", {
key: tickValue,
attrs: _objectSpread(_objectSpread({
x: start.x - labelOffset,
y: start.y,
textAlign: 'right',
textBaseline: 'middle',
text: text
}, label), labelStyle),
animation: animation || {
appear: {
easing: 'linear',
duration: 300,
delay: 0,
property: ['fillOpacity'],
start: {
fillOpacity: 0
},
end: {
fillOpacity: 1
}
},
update: {
easing: 'linear',
duration: 450,
delay: 0,
property: ['x', 'y']
},
leave: {
easing: 'linear',
duration: 450,
delay: 0,
property: ['fillOpacity'],
start: {
fillOpacity: 1
},
end: {
fillOpacity: 0
}
}
}
});
}) : null);
});