@antv/f2
Version:
Charts for mobile visualization.
261 lines (260 loc) • 9.34 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _jsx = require("../../jsx");
var _diff = require("../../base/diff");
var _component = _interopRequireDefault(require("../../base/component"));
var _util = require("@antv/util");
var _util2 = require("../../util");
var _default = function _default(View) {
return /*#__PURE__*/function (_Component) {
(0, _inherits2.default)(Legend, _Component);
var _super = (0, _createSuper2.default)(Legend);
function Legend(props) {
var _this;
(0, _classCallCheck2.default)(this, Legend);
_this = _super.call(this, props);
_this.state = {
filtered: {},
items: []
};
return _this;
}
(0, _createClass2.default)(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 (0, _objectSpread3.default)((0, _objectSpread3.default)({}, 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 = (0, _diff.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 (!(0, _util2.isInBBox)(bbox, point)) {
return;
}
var legendItems = (0, _util2.getElementsByClassName)('legend-item', container);
if (!legendItems.length) {
return;
}
var clickItem = (0, _util.find)(legendItems, function (item) {
var itemBBox = item.getBBox();
return (0, _util2.isInBBox)(itemBBox, point);
});
if (!clickItem) {
return;
}
var dataItem = clickItem.get('data-item');
if (!dataItem) {
return;
}
if ((0, _util.isFunction)(onClick)) {
onClick(dataItem);
}
var field = dataItem.field,
tickValue = dataItem.tickValue;
var prevFiltered = _this2.state.filtered;
var filtered = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prevFiltered), {}, (0, _defineProperty2.default)({}, 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 (0, _jsx.jsx)(View, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), {}, {
items: items,
itemWidth: itemWidth,
style: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, style), props.style)
}));
}
}]);
return Legend;
}(_component.default);
};
exports.default = _default;