@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
174 lines • 6.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var util_1 = require("@antv/util");
var component_1 = require("@antv/component");
var g2_1 = require("@antv/g2");
var global_1 = require("../../theme/global");
var TYPE_SHOW_MARKERS = ['line', 'area', 'path', 'areaStack'];
function showTooltip(canvas, layers, tooltipCfg) {
var tooltip = renderTooltip(layers[0], canvas);
canvas.on('mousemove', function (ev) {
var tooltipItems = [];
var point = { x: ev.x / 2, y: ev.y / 2 };
util_1.each(layers, function (layer) {
var view = layer.view;
if (view && layer.visibility) {
var coord_1 = view.get('coord');
var geoms = view.get('elements');
util_1.each(geoms, function (geom) {
var type = geom.get('type');
var dataArray = geom.get('dataArray');
if (util_1.contains(['area', 'line', 'path', 'interval'], type)) {
var items = getTooltipItems(point, geom, type, dataArray, coord_1);
tooltipItems.push.apply(tooltipItems, items);
}
else {
var shapeContainer = geom.get('shapeContainer');
var shapes = getShapeByX(shapeContainer, point.x);
util_1.each(shapes, function (shape) {
if (shape.get('visible') && shape.get('origin')) {
var items = geom.getTooltipItems(shape.get('origin'), null);
tooltipItems.push.apply(tooltipItems, items);
}
});
}
});
}
});
adjustItems(tooltipItems, ev.target, tooltipCfg);
if (tooltipItems.length > 0) {
tooltip.setContent('', getUniqueItems(tooltipItems));
tooltip.setPosition(point.x, point.y, ev.target);
tooltip.show();
}
else if (tooltip.get('visible')) {
tooltip.hide();
}
});
return tooltip;
}
exports.showTooltip = showTooltip;
function getTooltipItems(point, geom, type, dataArray, coord) {
var items = [];
util_1.each(dataArray, function (data) {
var tmpPoint = geom.findPoint(point, data);
if (tmpPoint) {
var subItems = geom.getTooltipItems(tmpPoint, null);
util_1.each(subItems, function (v) {
// tslint:disable-next-line: no-shadowed-variable
var point = v.point;
if (!util_1.isNil(point) && !util_1.isNil(point.x) && !util_1.isNil(point.y)) {
var x = util_1.isArray(point.x) ? point.x[point.x.length - 1] : point.x;
var y = util_1.isArray(point.y) ? point.y[point.y.length - 1] : point.y;
point = coord.applyMatrix(x, y, 1);
v.x = point[0];
v.y = point[1];
v.showMarker = true;
var itemMarker = getItemMarker(geom, v.color);
itemMarker.radius = 40;
v.marker = itemMarker;
if (util_1.indexOf(TYPE_SHOW_MARKERS, type) !== -1) {
items.push(v);
}
}
});
items.push.apply(items, subItems);
}
});
return items;
}
function renderTooltip(layer, canvas) {
var tooltipTheme = global_1.getGlobalTheme().tooltip;
var options = {
panelGroup: layer.view.get('panelGroup'),
panelRange: layer.view.get('panelRange'),
capture: false,
canvas: canvas,
frontgroundGroup: layer.view.get('frontgroundGroup'),
theme: tooltipTheme,
backgroundGroup: layer.view.get('backgroundGroup'),
};
return new component_1.Tooltip.Html(options);
}
function getItemMarker(geom, color) {
var shapeType = geom.get('shapeType') || 'point';
var shape = geom.getDefaultValue('shape') || 'circle';
var shapeObject = g2_1.getShapeFactory(shapeType);
var cfg = { color: color };
var marker = shapeObject.getMarkerStyle(shape, cfg);
return marker;
}
function getUniqueItems(items) {
var tmp = [];
util_1.each(items, function (item) {
var index = indexOfArray(tmp, item);
if (index === -1) {
tmp.push(item);
}
});
return tmp;
}
function indexOfArray(items, item) {
var rst = -1;
util_1.each(items, function (sub, index) {
var isEqual = true;
for (var key in item) {
if (util_1.has(item, key)) {
if (!util_1.isObject(item[key]) && item[key] !== sub[key]) {
isEqual = false;
break;
}
}
}
if (isEqual) {
rst = index;
return false;
}
});
return rst;
}
function adjustItems(items, target, cfg) {
if (target.get('origin')) {
var data_1;
if (util_1.isArray(target.get('origin'))) {
data_1 = getDataByTitle(items[0].title, target.get('origin')).data;
}
else {
data_1 = target.get('origin')._origin;
}
util_1.each(items, function (item) {
if (item.point._origin !== data_1) {
item.color = '#ccc';
}
});
}
if (cfg.sort) {
items.sort(function (a, b) {
return parseFloat(b.value) - parseFloat(a.value);
});
}
}
function getDataByTitle(title, data) {
for (var i in data) {
var d = data[i]._origin;
var ks = util_1.keys(d);
for (var j in ks) {
var key = ks[j];
if (d[key] === title) {
return { data: d, key: key };
}
}
}
}
function getShapeByX(container, x) {
var shapes = [];
var children = container.get('children');
util_1.each(children, function (c) {
var bbox = c.getBBox();
if (bbox.minX < x && bbox.maxX > x) {
shapes.push(c);
}
});
return shapes;
}
//# sourceMappingURL=globalTooltip.js.map