swOperation/node_modules/@antv/g2plot/lib/plots/bidirectional-bar/adaptor.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.adaptor = exports.animation = exports.theme = exports.limitInPlot = exports.interaction = void 0;
var tslib_1 = require("tslib");
var util_1 = require("@antv/util");
var common_1 = require("../../adaptor/common");
var geometries_1 = require("../../adaptor/geometries");
var utils_1 = require("../../utils");
var constant_1 = require("./constant");
var utils_2 = require("./utils");
/**
 * geometry 处理
 * @param params
 */
function geometry(params) {
    var chart = params.chart, options = params.options;
    var data = options.data, xField = options.xField, yField = options.yField, color = options.color, barStyle = options.barStyle, widthRatio = options.widthRatio, legend = options.legend, layout = options.layout;
    // 处理数据
    var groupData = (0, utils_2.transformData)(xField, yField, constant_1.SERIES_FIELD_KEY, data, (0, utils_2.isHorizontal)(layout));
    // 在创建子 view 执行后不行，需要在前面处理 legend
    if (legend) {
        chart.legend(constant_1.SERIES_FIELD_KEY, legend);
    }
    else if (legend === false) {
        chart.legend(false);
    }
    // 创建 view
    var firstView;
    var secondView;
    var firstViewData = groupData[0], secondViewData = groupData[1];
    // 横向
    if ((0, utils_2.isHorizontal)(layout)) {
        firstView = chart.createView({
            region: {
                start: { x: 0, y: 0 },
                end: { x: 0.5, y: 1 },
            },
            id: constant_1.FIRST_AXES_VIEW,
        });
        firstView.coordinate().transpose().reflect('x');
        secondView = chart.createView({
            region: {
                start: { x: 0.5, y: 0 },
                end: { x: 1, y: 1 },
            },
            id: constant_1.SECOND_AXES_VIEW,
        });
        secondView.coordinate().transpose();
        // @说明: 测试发现，横向因为轴的反转，需要数据也反转，不然会图形渲染是反的(翻转操作进入到 transform 中处理)
        firstView.data(firstViewData);
        secondView.data(secondViewData);
    }
    else {
        // 纵向
        firstView = chart.createView({
            region: {
                start: { x: 0, y: 0 },
                end: { x: 1, y: 0.5 },
            },
            id: constant_1.FIRST_AXES_VIEW,
        });
        secondView = chart.createView({
            region: {
                start: { x: 0, y: 0.5 },
                end: { x: 1, y: 1 },
            },
            id: constant_1.SECOND_AXES_VIEW,
        });
        secondView.coordinate().reflect('y');
        firstView.data(firstViewData);
        secondView.data(secondViewData);
    }
    var left = (0, utils_1.deepAssign)({}, params, {
        chart: firstView,
        options: {
            widthRatio: widthRatio,
            xField: xField,
            yField: yField[0],
            seriesField: constant_1.SERIES_FIELD_KEY,
            interval: {
                color: color,
                style: barStyle,
            },
        },
    });
    (0, geometries_1.interval)(left);
    var right = (0, utils_1.deepAssign)({}, params, {
        chart: secondView,
        options: {
            xField: xField,
            yField: yField[1],
            seriesField: constant_1.SERIES_FIELD_KEY,
            widthRatio: widthRatio,
            interval: {
                color: color,
                style: barStyle,
            },
        },
    });
    (0, geometries_1.interval)(right);
    return params;
}
/**
 * meta 配置
 * - 对称条形图对数据进行了处理，通过 SERIES_FIELD_KEY 来对两条 yField 数据进行分类
 * @param params
 */
function meta(params) {
    var _a, _b, _c;
    var options = params.options, chart = params.chart;
    var xAxis = options.xAxis, yAxis = options.yAxis, xField = options.xField, yField = options.yField;
    var firstView = (0, utils_1.findViewById)(chart, constant_1.FIRST_AXES_VIEW);
    var secondView = (0, utils_1.findViewById)(chart, constant_1.SECOND_AXES_VIEW);
    var aliasMap = {};
    (0, util_1.keys)((options === null || options === void 0 ? void 0 : options.meta) || {}).map(function (metaKey) {
        if ((0, util_1.get)(options === null || options === void 0 ? void 0 : options.meta, [metaKey, 'alias'])) {
            aliasMap[metaKey] = options.meta[metaKey].alias;
        }
    });
    chart.scale((_a = {},
        _a[constant_1.SERIES_FIELD_KEY] = {
            sync: true,
            formatter: function (v) {
                return (0, util_1.get)(aliasMap, v, v);
            },
        },
        _a));
    (0, common_1.scale)((_b = {},
        _b[xField] = xAxis,
        _b[yField[0]] = yAxis[yField[0]],
        _b))((0, utils_1.deepAssign)({}, params, { chart: firstView }));
    (0, common_1.scale)((_c = {},
        _c[xField] = xAxis,
        _c[yField[1]] = yAxis[yField[1]],
        _c))((0, utils_1.deepAssign)({}, params, { chart: secondView }));
    return params;
}
/**
 * axis 配置
 * @param params
 */
function axis(params) {
    var chart = params.chart, options = params.options;
    var xAxis = options.xAxis, yAxis = options.yAxis, xField = options.xField, yField = options.yField, layout = options.layout;
    var firstView = (0, utils_1.findViewById)(chart, constant_1.FIRST_AXES_VIEW);
    var secondView = (0, utils_1.findViewById)(chart, constant_1.SECOND_AXES_VIEW);
    // 第二个 view axis 始终隐藏; 注意 bottom 的时候，只隐藏 label，其他共用配置
    // @ts-ignore
    if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.position) === 'bottom') {
        // fixme 直接设置 label: null 会导致 tickLine 无法显示
        secondView.axis(xField, tslib_1.__assign(tslib_1.__assign({}, xAxis), { label: { formatter: function () { return ''; } } }));
    }
    else {
        secondView.axis(xField, false);
    }
    // 为 false 则是不显示 firstView 轴
    if (xAxis === false) {
        firstView.axis(xField, false);
    }
    else {
        firstView.axis(xField, tslib_1.__assign({ 
            // 不同布局 firstView 的坐标轴显示位置
            position: (0, utils_2.isHorizontal)(layout) ? 'top' : 'bottom' }, xAxis));
    }
    if (yAxis === false) {
        firstView.axis(yField[0], false);
        secondView.axis(yField[1], false);
    }
    else {
        firstView.axis(yField[0], yAxis[yField[0]]);
        secondView.axis(yField[1], yAxis[yField[1]]);
    }
    /**
     *  这个注入，主要是在syncViewPadding时候拿到相对应的配置：布局和轴的位置
     *  TODO 之后希望 g2 View 对象可以开放 setter 可以设置一些需要的东西
     */
    //@ts-ignore
    chart.__axisPosition = {
        position: firstView.getOptions().axes[xField].position,
        layout: layout,
    };
    return params;
}
/**
 * interaction 配置
 * @param params
 */
function interaction(params) {
    var chart = params.chart;
    (0, common_1.interaction)((0, utils_1.deepAssign)({}, params, { chart: (0, utils_1.findViewById)(chart, constant_1.FIRST_AXES_VIEW) }));
    (0, common_1.interaction)((0, utils_1.deepAssign)({}, params, { chart: (0, utils_1.findViewById)(chart, constant_1.SECOND_AXES_VIEW) }));
    return params;
}
exports.interaction = interaction;
/**
 * limitInPlot
 * @param params
 */
function limitInPlot(params) {
    var chart = params.chart, options = params.options;
    var yField = options.yField, yAxis = options.yAxis;
    (0, common_1.limitInPlot)((0, utils_1.deepAssign)({}, params, {
        chart: (0, utils_1.findViewById)(chart, constant_1.FIRST_AXES_VIEW),
        options: {
            yAxis: yAxis[yField[0]],
        },
    }));
    (0, common_1.limitInPlot)((0, utils_1.deepAssign)({}, params, {
        chart: (0, utils_1.findViewById)(chart, constant_1.SECOND_AXES_VIEW),
        options: {
            yAxis: yAxis[yField[1]],
        },
    }));
    return params;
}
exports.limitInPlot = limitInPlot;
/**
 * theme
 * @param params
 */
function theme(params) {
    var chart = params.chart;
    (0, common_1.theme)((0, utils_1.deepAssign)({}, params, { chart: (0, utils_1.findViewById)(chart, constant_1.FIRST_AXES_VIEW) }));
    (0, common_1.theme)((0, utils_1.deepAssign)({}, params, { chart: (0, utils_1.findViewById)(chart, constant_1.SECOND_AXES_VIEW) }));
    (0, common_1.theme)(params);
    return params;
}
exports.theme = theme;
/**
 * animation
 * @param params
 */
function animation(params) {
    var chart = params.chart;
    (0, common_1.animation)((0, utils_1.deepAssign)({}, params, { chart: (0, utils_1.findViewById)(chart, constant_1.FIRST_AXES_VIEW) }));
    (0, common_1.animation)((0, utils_1.deepAssign)({}, params, { chart: (0, utils_1.findViewById)(chart, constant_1.SECOND_AXES_VIEW) }));
    return params;
}
exports.animation = animation;
/**
 * label 配置 (1. 设置 offset 偏移量默认值 2. leftView 偏移量需要 *= -1)
 * @param params
 */
function label(params) {
    var _this = this;
    var _a, _b;
    var chart = params.chart, options = params.options;
    var label = options.label, yField = options.yField, layout = options.layout;
    var firstView = (0, utils_1.findViewById)(chart, constant_1.FIRST_AXES_VIEW);
    var secondView = (0, utils_1.findViewById)(chart, constant_1.SECOND_AXES_VIEW);
    var leftGeometry = (0, utils_1.findGeometry)(firstView, 'interval');
    var rightGeometry = (0, utils_1.findGeometry)(secondView, 'interval');
    if (!label) {
        leftGeometry.label(false);
        rightGeometry.label(false);
    }
    else {
        var callback = label.callback, cfg_1 = tslib_1.__rest(label, ["callback"]);
        /** ---- 设置默认配置 ---- */
        // 默认居中
        if (!cfg_1.position) {
            cfg_1.position = 'middle';
        }
        if (cfg_1.offset === undefined) {
            cfg_1.offset = 2;
        }
        /** ---- leftView label 设置 ---- */
        var leftLabelCfg = tslib_1.__assign({}, cfg_1);
        if ((0, utils_2.isHorizontal)(layout)) {
            // 设置 textAlign 默认值
            var textAlign = ((_a = leftLabelCfg.style) === null || _a === void 0 ? void 0 : _a.textAlign) || (cfg_1.position === 'middle' ? 'center' : 'left');
            cfg_1.style = (0, utils_1.deepAssign)({}, cfg_1.style, { textAlign: textAlign });
            var textAlignMap = { left: 'right', right: 'left', center: 'center' };
            leftLabelCfg.style = (0, utils_1.deepAssign)({}, leftLabelCfg.style, { textAlign: textAlignMap[textAlign] });
        }
        else {
            var positionMap_1 = { top: 'bottom', bottom: 'top', middle: 'middle' };
            if (typeof cfg_1.position === 'string') {
                cfg_1.position = positionMap_1[cfg_1.position];
            }
            else if (typeof cfg_1.position === 'function') {
                cfg_1.position = function () {
                    var args = [];
                    for (var _i = 0; _i < arguments.length; _i++) {
                        args[_i] = arguments[_i];
                    }
                    return positionMap_1[cfg_1.position.apply(_this, args)];
                };
            }
            // 设置 textBaseline 默认值
            var textBaseline = ((_b = leftLabelCfg.style) === null || _b === void 0 ? void 0 : _b.textBaseline) || 'bottom';
            leftLabelCfg.style = (0, utils_1.deepAssign)({}, leftLabelCfg.style, { textBaseline: textBaseline });
            var textBaselineMap = { top: 'bottom', bottom: 'top', middle: 'middle' };
            cfg_1.style = (0, utils_1.deepAssign)({}, cfg_1.style, { textBaseline: textBaselineMap[textBaseline] });
        }
        leftGeometry.label({
            fields: [yField[0]],
            callback: callback,
            cfg: (0, utils_1.transformLabel)(leftLabelCfg),
        });
        rightGeometry.label({
            fields: [yField[1]],
            callback: callback,
            cfg: (0, utils_1.transformLabel)(cfg_1),
        });
    }
    return params;
}
/**
 * 对称条形图适配器
 * @param chart
 * @param options
 */
function adaptor(params) {
    // flow 的方式处理所有的配置到 G2 API
    return (0, utils_1.flow)(geometry, meta, axis, limitInPlot, theme, label, common_1.tooltip, interaction, animation)(params);
}
exports.adaptor = adaptor;
//# sourceMappingURL=adaptor.js.map