@antv/g2/esm/util/legend.js

the Grammar of Graphics in Javascript

import { deepMix, isString, each } from '@antv/util';
import { DIRECTION } from '../constant';
import { getMappingValue } from './attr';
import { MarkerSymbols } from './marker';
/** 线条形 marker symbol */
var STROKES_SYMBOLS = ['line', 'cross', 'tick', 'plus', 'hyphen'];
function adpatorMarkerStyle(marker, color) {
    var symbol = marker.symbol;
    if (isString(symbol) && STROKES_SYMBOLS.indexOf(symbol) !== -1) {
        marker.style = deepMix({}, marker.style, { lineWidth: 1, stroke: color, fill: null });
    }
}
function setMarkerSymbol(marker) {
    var symbol = marker.symbol;
    if (isString(symbol) && MarkerSymbols[symbol]) {
        marker.symbol = MarkerSymbols[symbol];
    }
}
/**
 * @ignore
 * get the legend layout from direction
 * @param direction
 * @returns layout 'horizontal' | 'vertical'
 */
export function getLegendLayout(direction) {
    return direction.startsWith(DIRECTION.LEFT) || direction.startsWith(DIRECTION.RIGHT) ? 'vertical' : 'horizontal';
}
/**
 * @ignore
 * get the legend items
 * @param view
 * @param geometry
 * @param attr
 * @param themeMarker
 * @param userMarker
 * @returns legend items
 */
export function getLegendItems(view, geometry, attr, themeMarker, userMarker) {
    var scale = attr.getScale(attr.type);
    if (scale.isCategory) {
        var field_1 = scale.field;
        var colorAttr_1 = geometry.getAttribute('color');
        var shapeAttr_1 = geometry.getAttribute('shape');
        var defaultColor_1 = view.getTheme().defaultColor;
        var isInPolar_1 = geometry.coordinate.isPolar;
        return scale.getTicks().map(function (tick) {
            var _a;
            var text = tick.text, scaleValue = tick.value;
            var name = text;
            var value = scale.invert(scaleValue);
            // 通过过滤图例项的数据，来看是否 unchecked
            var unchecked = view.filterFieldData(field_1, [(_a = {}, _a[field_1] = value, _a)]).length === 0;
            each(view.views, function (subView) {
                var _a;
                if (!subView.filterFieldData(field_1, [(_a = {}, _a[field_1] = value, _a)]).length) {
                    unchecked = true;
                }
            });
            // @ts-ignore
            var color = getMappingValue(colorAttr_1, value, defaultColor_1);
            var shape = getMappingValue(shapeAttr_1, value, 'point');
            var marker = geometry.getShapeMarker(shape, {
                color: color,
                isInPolar: isInPolar_1,
            });
            // the marker configure order should be ensure
            marker = deepMix({}, themeMarker, marker, userMarker);
            adpatorMarkerStyle(marker, color);
            setMarkerSymbol(marker);
            return { id: value, name: name, value: value, marker: marker, unchecked: unchecked };
        });
    }
    return [];
}
/**
 * @ignore
 * custom legend 的 items 获取
 * @param themeMarker
 * @param userMarker
 * @param customItems
 */
export function getCustomLegendItems(themeMarker, userMarker, customItems) {
    // 如果有自定义的 item，那么就直接使用，并合并主题的 marker 配置
    return customItems.map(function (item) {
        var marker = deepMix({}, themeMarker, userMarker, item.marker);
        setMarkerSymbol(marker);
        item.marker = marker;
        return item;
    });
}
//# sourceMappingURL=legend.js.map