@antv/f2
Version:
Charts for mobile visualization.
50 lines • 1.38 kB
JavaScript
import { __assign } from "tslib";
import { jsx } from '@antv/f-engine';
export default (function (props, context) {
var coord = props.coord,
range = props.range,
position = props.position,
layout = props.layout,
style = props.style,
background = props.background,
barStyle = props.barStyle;
var left = coord.left,
width = coord.width;
var top = layout.top,
height = layout.height;
var _a = (range === null || range === void 0 ? void 0 : range.x) || (range === null || range === void 0 ? void 0 : range.y),
start = _a[0],
end = _a[1];
var barLeft = width * start;
var barWidth = width * (end - start);
if (isNaN(barWidth)) return;
return jsx("group", {
style: __assign({
display: 'flex',
left: left,
top: position === 'top' ? top - context.px2hd('8px') : top + height
}, style)
}, jsx("line", {
style: __assign({
display: 'flex',
position: 'absolute',
left: 0,
width: width,
height: 0,
stroke: 'rgba(202, 215, 239, .2)',
lineCap: 'round',
lineWidth: '8px'
}, background)
}), jsx("line", {
style: __assign({
display: 'flex',
position: 'absolute',
left: barLeft,
width: barWidth,
height: 0,
stroke: 'rgba(202, 215, 239, .5)',
lineCap: 'round',
lineWidth: '8px'
}, barStyle)
}));
});