@antv/f2
Version:
Charts for mobile visualization.
253 lines • 8.72 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import { jsx } from '../../jsx';
import { renderShape } from '../../base/diff';
import Component from '../../base/component';
import { find, isFunction } from '@antv/util';
import { getElementsByClassName, isInBBox } from '../../util';
export default (function (View) {
return /*#__PURE__*/function (_Component) {
_inherits(Legend, _Component);
var _super = _createSuper(Legend);
function Legend(props) {
var _this;
_classCallCheck(this, Legend);
_this = _super.call(this, props);
_this.state = {
filtered: {},
items: []
};
return _this;
}
_createClass(Legend, [{
key: "getOriginItems",
value: function getOriginItems() {
var chart = this.props.chart;
return chart.getLegendItems();
}
}, {
key: "getItems",
value: function getItems() {
var _props$items;
var props = this.props,
state = this.state;
var filtered = state.filtered;
var renderItems = ((_props$items = props.items) === null || _props$items === void 0 ? void 0 : _props$items.length) ? props.items : this.getOriginItems();
if (!renderItems) return null;
return renderItems.map(function (item) {
var tickValue = item.tickValue;
return _objectSpread(_objectSpread({}, item), {}, {
filtered: filtered[tickValue]
});
});
}
}, {
key: "setItems",
value: function setItems(items) {
this.setState({
items: items
});
}
}, {
key: "getMaxItemBox",
value: function getMaxItemBox(legendShape) {
var maxItemWidth = 0;
var maxItemHeight = 0;
(legendShape.get('children') || []).forEach(function (child) {
var _child$get = child.get('attrs'),
width = _child$get.width,
height = _child$get.height;
maxItemWidth = Math.max(maxItemWidth, width);
maxItemHeight = Math.max(maxItemHeight, height);
});
return {
width: maxItemWidth,
height: maxItemHeight
};
}
// 计算 legend 的位置
}, {
key: "_init",
value: function _init() {
var props = this.props,
context = this.context;
var parentLayout = props.layout,
customWidth = props.width,
customHeight = props.height,
_props$position = props.position,
position = _props$position === void 0 ? 'top' : _props$position;
var items = this.getItems();
if (!items || !items.length) return;
var left = parentLayout.left,
top = parentLayout.top,
right = parentLayout.right,
bottom = parentLayout.bottom,
layoutWidth = parentLayout.width,
layoutHeight = parentLayout.height;
var width = context.px2hd(customWidth) || layoutWidth;
var shape = renderShape(this, this.render(), false);
var _this$getMaxItemBox = this.getMaxItemBox(shape),
itemMaxWidth = _this$getMaxItemBox.width,
itemMaxHeight = _this$getMaxItemBox.height;
// 每行最多的个数
var lineMaxCount = Math.floor(width / itemMaxWidth);
var itemCount = items.length;
// legend item 的行数
var lineCount = Math.ceil(itemCount / lineMaxCount);
var itemWidth = width / lineMaxCount;
var autoHeight = itemMaxHeight * lineCount;
var style = {
left: left,
top: top,
width: width,
// height 默认自适应
height: undefined,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
justifyContent: 'flex-start'
};
// 如果只有一行，2端对齐
if (lineCount === 1) {
style.justifyContent = 'space-between';
}
if (position === 'top') {
style.height = customHeight ? customHeight : autoHeight;
}
if (position === 'left') {
style.flexDirection = 'column';
style.justifyContent = 'center';
style.width = itemMaxWidth;
style.height = customHeight ? customHeight : layoutHeight;
}
if (position === 'right') {
style.flexDirection = 'column';
style.alignItems = 'flex-start';
style.justifyContent = 'center';
style.width = itemMaxWidth;
style.height = customHeight ? customHeight : layoutHeight;
style.left = right - itemMaxWidth;
}
if (position === 'bottom') {
style.top = bottom - autoHeight;
style.height = customHeight ? customHeight : autoHeight;
}
this.itemWidth = itemWidth;
this.style = style;
shape.remove();
}
}, {
key: "updateCoord",
value: function updateCoord() {
var context = this.context,
props = this.props,
style = this.style;
var _props$position2 = props.position,
position = _props$position2 === void 0 ? 'top' : _props$position2,
_props$margin = props.margin,
margin = _props$margin === void 0 ? '30px' : _props$margin,
chart = props.chart;
var width = style.width,
height = style.height;
var marginNumber = context.px2hd(margin);
chart.updateCoordFor(this, {
position: position,
width: width + marginNumber,
height: height + marginNumber
});
}
}, {
key: "willMount",
value: function willMount() {
var items = this.getItems();
if (!items || !items.length) return;
this._init();
this.updateCoord();
}
}, {
key: "didMount",
value: function didMount() {
this._initEvent();
}
}, {
key: "willUpdate",
value: function willUpdate() {
var items = this.getItems();
if (!items || !items.length) return;
this.updateCoord();
}
}, {
key: "_initEvent",
value: function _initEvent() {
var _this2 = this;
var context = this.context,
props = this.props,
container = this.container;
var canvas = context.canvas;
var chart = props.chart,
_props$clickable = props.clickable,
clickable = _props$clickable === void 0 ? true : _props$clickable,
onClick = props.onClick;
if (!clickable) return;
// item 点击事件
canvas.on('click', function (ev) {
var points = ev.points;
var point = points[0];
var bbox = container.getBBox();
if (!isInBBox(bbox, point)) {
return;
}
var legendItems = getElementsByClassName('legend-item', container);
if (!legendItems.length) {
return;
}
var clickItem = find(legendItems, function (item) {
var itemBBox = item.getBBox();
return isInBBox(itemBBox, point);
});
if (!clickItem) {
return;
}
var dataItem = clickItem.get('data-item');
if (!dataItem) {
return;
}
if (isFunction(onClick)) {
onClick(dataItem);
}
var field = dataItem.field,
tickValue = dataItem.tickValue;
var prevFiltered = _this2.state.filtered;
var filtered = _objectSpread(_objectSpread({}, prevFiltered), {}, _defineProperty({}, tickValue, !prevFiltered[tickValue]));
_this2.setState({
filtered: filtered
});
chart.filter(field, function (value) {
return !filtered[value];
});
});
}
}, {
key: "render",
value: function render() {
var props = this.props,
itemWidth = this.itemWidth,
style = this.style;
var items = this.getItems();
if (!items || !items.length) {
return null;
}
return jsx(View, _objectSpread(_objectSpread({}, props), {}, {
items: items,
itemWidth: itemWidth,
style: _objectSpread(_objectSpread({}, style), props.style)
}));
}
}]);
return Legend;
}(Component);
});