@antv/f2
Version:
Charts for mobile visualization.
207 lines • 7.07 kB
JavaScript
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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import { jsx } from '../../jsx';
import { isArray, isFunction, find } from '@antv/util';
import Component from '../../base/component';
import equal from '../../base/equal';
export default (function (View) {
return /*#__PURE__*/function (_Component) {
_inherits(Tooltip, _Component);
var _super = _createSuper(Tooltip);
function Tooltip(props) {
var _this;
_classCallCheck(this, Tooltip);
_this = _super.call(this, props);
_this._triggerOn = function (ev) {
var points = ev.points;
_this.show(points[0], ev);
};
_this._triggerOff = function () {
var _assertThisInitialize = _assertThisInitialized(_this),
_assertThisInitialize2 = _assertThisInitialize.props.alwaysShow,
alwaysShow = _assertThisInitialize2 === void 0 ? false : _assertThisInitialize2;
if (!alwaysShow) {
_this.hide();
}
};
_this.state = {
records: null
};
return _this;
}
_createClass(Tooltip, [{
key: "updateCoord",
value: function updateCoord() {
var props = this.props,
context = this.context;
var _props$padding = props.padding,
padding = _props$padding === void 0 ? '10px' : _props$padding,
chart = props.chart;
chart.updateCoordFor(this, {
position: 'top',
width: 0,
height: context.px2hd(padding)
});
}
}, {
key: "willMount",
value: function willMount() {
this.updateCoord();
}
}, {
key: "didMount",
value: function didMount() {
this._initShow();
this._initEvent();
}
}, {
key: "willReceiveProps",
value: function willReceiveProps(nextProps) {
var nextDefaultItem = nextProps.defaultItem,
nextCoord = nextProps.coord;
var _this$props = this.props,
lastDefaultItem = _this$props.defaultItem,
lastCoord = _this$props.coord;
// 默认元素或坐标有变动，均需重新渲染
if (!equal(nextDefaultItem, lastDefaultItem) || !equal(nextCoord, lastCoord)) {
this._showByData(nextDefaultItem);
}
}
}, {
key: "_initShow",
value: function _initShow() {
var props = this.props;
var defaultItem = props.defaultItem;
this._showByData(defaultItem);
}
}, {
key: "_showByData",
value: function _showByData(dataItem) {
var _this2 = this;
if (!dataItem) return;
var props = this.props;
var chart = props.chart;
// 因为 tooltip 有可能在 geometry 之前，所以需要等 geometry render 完后再执行
setTimeout(function () {
var snapRecords = chart.getRecords(dataItem, 'xfield');
_this2.showSnapRecords(snapRecords);
}, 0);
}
}, {
key: "_initEvent",
value: function _initEvent() {
var context = this.context,
props = this.props;
var canvas = context.canvas;
var _props$triggerOn = props.triggerOn,
triggerOn = _props$triggerOn === void 0 ? 'press' : _props$triggerOn,
_props$triggerOff = props.triggerOff,
triggerOff = _props$triggerOff === void 0 ? 'pressend' : _props$triggerOff;
canvas.on(triggerOn, this._triggerOn);
canvas.on(triggerOff, this._triggerOff);
}
}, {
key: "didUnmount",
value: function didUnmount() {
this._clearEvents();
}
}, {
key: "_clearEvents",
value: function _clearEvents() {
var context = this.context,
props = this.props;
var canvas = context.canvas;
var _props$triggerOn2 = props.triggerOn,
triggerOn = _props$triggerOn2 === void 0 ? 'press' : _props$triggerOn2,
_props$triggerOff2 = props.triggerOff,
triggerOff = _props$triggerOff2 === void 0 ? 'pressend' : _props$triggerOff2;
// 解绑事件
canvas.off(triggerOn, this._triggerOn);
canvas.off(triggerOff, this._triggerOff);
}
}, {
key: "show",
value: function show(point, _ev) {
var props = this.props;
var chart = props.chart;
var snapRecords = chart.getSnapRecords(point, true); // 超出边界会自动调整
this.showSnapRecords(snapRecords);
}
}, {
key: "showSnapRecords",
value: function showSnapRecords(snapRecords) {
if (!snapRecords || !snapRecords.length) return;
var _this$props2 = this.props,
chart = _this$props2.chart,
onChange = _this$props2.onChange;
var legendItems = chart.getLegendItems();
var _snapRecords$ = snapRecords[0],
xField = _snapRecords$.xField,
yField = _snapRecords$.yField;
var xScale = chart.getScale(xField);
var yScale = chart.getScale(yField);
var records = snapRecords.map(function (record) {
var origin = record.origin,
xField = record.xField,
yField = record.yField;
var value = yScale.getText(origin[yField]);
// 默认取 alias 的配置
var name = yScale.alias;
if (!name) {
name = xScale.getText(origin[xField]);
if (legendItems && legendItems.length) {
var item = find(legendItems, function (item) {
var field = item.field,
tickValue = item.tickValue;
return origin[field] === tickValue;
});
if (item && item.name) {
name = item.name;
}
}
}
return _objectSpread(_objectSpread({}, record), {}, {
name: name,
value: value
});
});
if (!isArray(records) || !records.length) {
return;
}
this.setState({
records: records
});
if (isFunction(onChange)) {
onChange(records);
}
}
}, {
key: "hide",
value: function hide() {
this.setState({
records: null
});
}
}, {
key: "render",
value: function render() {
var props = this.props,
state = this.state;
var visible = props.visible;
if (visible === false) {
return null;
}
var records = state.records;
if (!records || !records.length) return null;
return jsx(View, _objectSpread(_objectSpread({}, props), {}, {
records: records
}));
}
}]);
return Tooltip;
}(Component);
});