@antv/f2
Version:
Charts for mobile visualization.
93 lines • 2.47 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { isFunction } from '@antv/util';
import { jsx } from '../../jsx';
var Marker = function Marker(_ref) {
var type = _ref.type,
color = _ref.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: {
strokeStyle: color,
lineCap: 'round',
lineWidth: '4px'
}
});
}
return jsx("circle", {
style: {
width: '12px',
height: '12px',
marginRight: '10px'
},
attrs: {
fill: color
}
});
};
export default (function (props) {
var items = props.items,
itemWidth = props.itemWidth,
itemFormatter = props.itemFormatter,
style = props.style,
_props$marker = props.marker,
marker = _props$marker === void 0 ? 'circle' : _props$marker,
itemStyle = props.itemStyle,
nameStyle = props.nameStyle,
valueStyle = props.valueStyle,
valuePrefix = props.valuePrefix;
var formatValue = function formatValue(value) {
var valuePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ': ';
return "".concat(valuePrefix).concat(value);
};
return jsx("group", {
style: 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: _objectSpread({
width: itemWidth,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
padding: ['6px', '6px', '6px', 0]
}, itemStyle),
"data-item": item
}, jsx(Marker, {
color: filtered ? '#bfbfbf' : color,
type: marker
}), jsx("text", {
attrs: _objectSpread({
fill: filtered ? '#bfbfbf' : '#808080',
text: name
}, nameStyle)
}), valueText ? jsx("text", {
attrs: _objectSpread({
fill: '#808080',
text: formatValue(valueText, valuePrefix)
}, valueStyle)
}) : null);
}));
});