@antv/f2
Version:
Charts for mobile visualization.
99 lines • 2.53 kB
JavaScript
import { __assign } from "tslib";
import { isFunction } from '@antv/util';
import { jsx } from '@antv/f-engine';
var Marker = function Marker(_a) {
var type = _a.type,
color = _a.color;
if (type === 'square') {
return jsx("rect", {
style: {
width: '12px',
height: '12px',
marginRight: '10px'
},
attrs: {
fill: color
}
});
}
if (type === 'line') {
return jsx("line", {
style: {
width: '19px',
marginRight: '10px'
},
attrs: {
stroke: color,
lineCap: 'round',
lineWidth: '4px'
}
});
}
return jsx("circle", {
style: {
width: '12px',
height: '12px',
marginRight: '10px',
fill: color
}
});
};
export default (function (props) {
var items = props.items,
itemWidth = props.itemWidth,
itemFormatter = props.itemFormatter,
style = props.style,
_a = props.marker,
marker = _a === void 0 ? 'circle' : _a,
// 图例标记默认为 circle
itemStyle = props.itemStyle,
nameStyle = props.nameStyle,
valueStyle = props.valueStyle,
valuePrefix = props.valuePrefix,
onClick = props.onClick;
var formatValue = function formatValue(value, valuePrefix) {
if (valuePrefix === void 0) {
valuePrefix = ': ';
}
return "".concat(valuePrefix).concat(value);
};
return jsx("group", {
style: __assign({
display: 'flex'
}, style)
}, items.map(function (item) {
var color = item.color,
name = item.name,
value = item.value,
filtered = item.filtered,
tickValue = item.tickValue;
var valueText = isFunction(itemFormatter) ? itemFormatter(value, tickValue) : value;
return jsx("group", {
className: "legend-item",
style: __assign({
width: itemWidth,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
//TODO: padding改为’12px‘ 就和原来一致了
padding: ['6px', '6px', '6px', 0]
}, itemStyle),
"data-item": item,
onClick: onClick
}, Marker({
color: filtered ? '#bfbfbf' : color,
type: marker
}), jsx("text", {
attrs: __assign({
fill: filtered ? '#bfbfbf' : '#808080',
text: name
}, nameStyle)
}), valueText ? jsx("text", {
attrs: __assign({
fill: '#808080',
text: formatValue(valueText, valuePrefix)
}, valueStyle)
}) : null);
}));
});