@antv/g2plot/esm/combo-plots/util/globalTooltip.js

G2 Plot, a market of plots built with the Grammar of Graphics'

import { each, contains, isArray, isObject, indexOf, isNil, has, keys } from '@antv/util';
import { Tooltip } from '@antv/component';
import { getShapeFactory } from '@antv/g2';
import { getGlobalTheme } from '../../theme/global';
var TYPE_SHOW_MARKERS = ['line', 'area', 'path', 'areaStack'];
export 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 };
        each(layers, function (layer) {
            var view = layer.view;
            if (view && layer.visibility) {
                var coord_1 = view.get('coord');
                var geoms = view.get('elements');
                each(geoms, function (geom) {
                    var type = geom.get('type');
                    var dataArray = geom.get('dataArray');
                    if (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);
                        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;
}
function getTooltipItems(point, geom, type, dataArray, coord) {
    var items = [];
    each(dataArray, function (data) {
        var tmpPoint = geom.findPoint(point, data);
        if (tmpPoint) {
            var subItems = geom.getTooltipItems(tmpPoint, null);
            each(subItems, function (v) {
                // tslint:disable-next-line: no-shadowed-variable
                var point = v.point;
                if (!isNil(point) && !isNil(point.x) && !isNil(point.y)) {
                    var x = isArray(point.x) ? point.x[point.x.length - 1] : point.x;
                    var y = 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 (indexOf(TYPE_SHOW_MARKERS, type) !== -1) {
                        items.push(v);
                    }
                }
            });
            items.push.apply(items, subItems);
        }
    });
    return items;
}
function renderTooltip(layer, canvas) {
    var tooltipTheme = 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 Tooltip.Html(options);
}
function getItemMarker(geom, color) {
    var shapeType = geom.get('shapeType') || 'point';
    var shape = geom.getDefaultValue('shape') || 'circle';
    var shapeObject = getShapeFactory(shapeType);
    var cfg = { color: color };
    var marker = shapeObject.getMarkerStyle(shape, cfg);
    return marker;
}
function getUniqueItems(items) {
    var tmp = [];
    each(items, function (item) {
        var index = indexOfArray(tmp, item);
        if (index === -1) {
            tmp.push(item);
        }
    });
    return tmp;
}
function indexOfArray(items, item) {
    var rst = -1;
    each(items, function (sub, index) {
        var isEqual = true;
        for (var key in item) {
            if (has(item, key)) {
                if (!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 (isArray(target.get('origin'))) {
            data_1 = getDataByTitle(items[0].title, target.get('origin')).data;
        }
        else {
            data_1 = target.get('origin')._origin;
        }
        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 = 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');
    each(children, function (c) {
        var bbox = c.getBBox();
        if (bbox.minX < x && bbox.maxX > x) {
            shapes.push(c);
        }
    });
    return shapes;
}
//# sourceMappingURL=globalTooltip.js.map