@antv/f2
Version:
Charts for mobile visualization.
160 lines • 5.1 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx, Component, isEqual } from '@antv/f-engine';
import { isArray, isFunction, find } from '@antv/util';
export default (function (View) {
return /** @class */function (_super) {
__extends(Tooltip, _super);
function Tooltip(props) {
var _this = _super.call(this, props) || this;
_this._triggerOn = function (ev) {
var x = ev.x,
y = ev.y;
_this.show({
x: x,
y: y
}, ev);
};
_this._triggerOff = function () {
var _a = _this.props.alwaysShow,
alwaysShow = _a === void 0 ? false : _a;
if (!alwaysShow) {
_this.hide();
}
};
_this.state = {
records: null
};
return _this;
}
Tooltip.prototype.updateCoord = function () {
var _a = this,
props = _a.props,
context = _a.context;
var _b = props.padding,
padding = _b === void 0 ? '10px' : _b,
chart = props.chart;
chart.updateCoordFor(this, {
position: 'top',
width: 0,
height: context.px2hd(padding)
});
};
Tooltip.prototype.willMount = function () {
this.updateCoord();
};
Tooltip.prototype.didMount = function () {
this._initShow();
this._initEvent();
};
Tooltip.prototype._initEvent = function () {
var _a = this.props,
chart = _a.chart,
_b = _a.triggerOn,
triggerOn = _b === void 0 ? 'press' : _b,
_c = _a.triggerOff,
triggerOff = _c === void 0 ? 'pressend' : _c;
chart.on(triggerOn, this._triggerOn);
chart.on(triggerOff, this._triggerOff);
};
Tooltip.prototype.willReceiveProps = function (nextProps) {
var nextDefaultItem = nextProps.defaultItem,
nextCoord = nextProps.coord;
var _a = this.props,
lastDefaultItem = _a.defaultItem,
lastCoord = _a.coord;
// 默认元素或坐标有变动，均需重新渲染
if (!isEqual(nextDefaultItem, lastDefaultItem) || !isEqual(nextCoord, lastCoord)) {
this._showByData(nextDefaultItem);
}
};
Tooltip.prototype._initShow = function () {
var props = this.props;
var defaultItem = props.defaultItem;
this._showByData(defaultItem);
};
Tooltip.prototype._showByData = function (dataItem) {
var _this = this;
if (!dataItem) return;
var props = this.props;
var chart = props.chart;
// 因为 tooltip 有可能在 geometry 之前，所以需要等 geometry render 完后再执行
setTimeout(function () {
var snapRecords = chart.getRecords(dataItem, 'xfield');
_this.showSnapRecords(snapRecords);
}, 0);
};
Tooltip.prototype.show = function (point, _ev) {
var props = this.props;
var chart = props.chart;
var snapRecords = chart.getSnapRecords(point, true); // 超出边界会自动调整
if (!snapRecords || !snapRecords.length) return;
this.showSnapRecords(snapRecords);
};
Tooltip.prototype.showSnapRecords = function (snapRecords) {
var _a = this.props,
chart = _a.chart,
onChange = _a.onChange;
var legendItems = chart.getLegendItems();
var _b = snapRecords[0],
xField = _b.xField,
yField = _b.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 = isArray(origin[yField]) ? origin[yField].map(function (v) {
return yScale.getText(v);
}) : 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 __assign(__assign({}, record), {
name: name,
value: "".concat(value)
});
});
if (!isArray(records) || !records.length) {
return;
}
this.setState({
records: records
});
if (isFunction(onChange)) {
onChange(records);
}
};
Tooltip.prototype.hide = function () {
this.setState({
records: null
});
};
Tooltip.prototype.render = function () {
var _a = this,
props = _a.props,
state = _a.state;
var visible = props.visible;
if (visible === false) {
return null;
}
var records = state.records;
return records && records.length && jsx(View, __assign({}, props, {
records: records
}));
};
return Tooltip;
}(Component);
});