@antv/f2
Version:
Charts for mobile visualization.
215 lines (214 loc) • 7.68 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _jsx = require("../../jsx");
var _util = require("@antv/util");
var _component = _interopRequireDefault(require("../../base/component"));
var _equal = _interopRequireDefault(require("../../base/equal"));
var _default = function _default(View) {
return /*#__PURE__*/function (_Component) {
(0, _inherits2.default)(Tooltip, _Component);
var _super = (0, _createSuper2.default)(Tooltip);
function Tooltip(props) {
var _this;
(0, _classCallCheck2.default)(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 = (0, _assertThisInitialized2.default)(_this),
_assertThisInitialize2 = _assertThisInitialize.props.alwaysShow,
alwaysShow = _assertThisInitialize2 === void 0 ? false : _assertThisInitialize2;
if (!alwaysShow) {
_this.hide();
}
};
_this.state = {
records: null
};
return _this;
}
(0, _createClass2.default)(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 (!(0, _equal.default)(nextDefaultItem, lastDefaultItem) || !(0, _equal.default)(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 = (0, _util.find)(legendItems, function (item) {
var field = item.field,
tickValue = item.tickValue;
return origin[field] === tickValue;
});
if (item && item.name) {
name = item.name;
}
}
}
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, record), {}, {
name: name,
value: value
});
});
if (!(0, _util.isArray)(records) || !records.length) {
return;
}
this.setState({
records: records
});
if ((0, _util.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 (0, _jsx.jsx)(View, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
records: records
}));
}
}]);
return Tooltip;
}(_component.default);
};
exports.default = _default;