@visactor/vchart-extension 1.15.5-alpha.8 → 2.0.0-alpha.0

package/build/index.js

@@ -338,678 +338,6 @@
         }
     };
 
-    const defaultSpec = {
-        width: 400,
-        height: 225,
-        labelLayout: 'top',
-        bar: {
-            height: 100,
-            style: {
-                cornerRadius: 5
-            }
-        },
-        barBackground: {
-            type: 'rect',
-            style: {
-                fill: 'rgba(255,255,255,0.1)',
-                cornerRadius: 5
-            }
-        },
-        rankingIcon: {
-            visible: true,
-            style: {
-                fill: 'rgba(253,253,253,0.5)',
-                size: 12
-            }
-        },
-        nameLabel: {
-            visible: true,
-            style: {
-                fontSize: 20,
-                fontWeight: 'normal',
-                fill: 'rgba(255,255,255,0.7)',
-                textBaseline: 'middle'
-            }
-        },
-        orderLabel: {
-            visible: true,
-            style: {
-                fontSize: 20,
-                fontWeight: 'normal',
-                fill: 'rgba(255,255,255,0.7)',
-                textBaseline: 'middle'
-            }
-        },
-        valueLabel: {
-            visible: true,
-            style: {
-                fontSize: 14,
-                fontWeight: 'normal',
-                fill: 'rgba(255,255,255,1)',
-                textBaseline: 'middle'
-            }
-        },
-        pageSize: 5,
-        scrollSize: 1,
-        animationAppear: {
-            enable: true,
-            type: 'grow',
-            duration: 1000,
-            easing: 'linear'
-        },
-        animationUpdate: {
-            enable: true,
-            type: 'grow',
-            duration: 1000,
-            easing: 'linear'
-        },
-        animationNormal: {
-            interval: 1000
-        }
-    };
-
-    const applyVisible = (spec, keyList) => {
-        keyList.forEach(key => {
-            var _a, _b, _c, _d, _e, _f;
-            if (vutils.isArray(spec[key])) {
-                spec[key].forEach((s, i) => {
-                    var _a, _b, _c;
-                    spec[key][i] = Object.assign(Object.assign({}, s), { style: Object.assign(Object.assign({}, s === null || s === void 0 ? void 0 : s.style), { visible: (_c = (_b = (_a = s === null || s === void 0 ? void 0 : s.style) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : s === null || s === void 0 ? void 0 : s.visible) !== null && _c !== void 0 ? _c : true }) });
-                });
-            }
-            else {
-                spec[key] = Object.assign(Object.assign({}, spec[key]), { style: Object.assign(Object.assign({}, (_a = spec[key]) === null || _a === void 0 ? void 0 : _a.style), { visible: (_f = (_d = (_c = (_b = spec[key]) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.visible) !== null && _d !== void 0 ? _d : (_e = spec[key]) === null || _e === void 0 ? void 0 : _e.visible) !== null && _f !== void 0 ? _f : true }) });
-            }
-        });
-    };
-    const mergeObjects = (objA, objB) => {
-        function recursiveMerge(target, source) {
-            for (const key in source) {
-                if (typeof source[key] === 'object' && source[key] !== null) {
-                    if (!target.hasOwnProperty(key)) {
-                        target[key] = Array.isArray(source[key]) ? [] : {};
-                    }
-                    recursiveMerge(target[key], source[key]);
-                }
-                else if (!target.hasOwnProperty(key) && typeof target === 'object') {
-                    target[key] = source[key];
-                }
-            }
-            return target;
-        }
-        return recursiveMerge(objA, objB);
-    };
-    const computeDataRange = (data, field) => {
-        let dataMin, dataMax;
-        const datumX = data.map(d => d[field]).filter(d => typeof d !== 'undefined' && d !== null);
-        if (datumX.length === 0) {
-            dataMin = 0;
-            dataMax = 1;
-        }
-        else {
-            dataMin = Math.min(...datumX) - (Math.max(...datumX) - Math.min(...datumX)) / 3;
-            dataMax = (Math.max(...datumX) - dataMin) / 0.8 + dataMin;
-            const delta_value = 10;
-            const data = dataMin;
-            if (dataMin === dataMax) {
-                dataMin = data - delta_value;
-                dataMax = (4 * data + delta_value) / 4;
-            }
-        }
-        return { min: dataMin, max: dataMax };
-    };
-
-    const DATA_KEY = 'dataKey';
-    const ORDER_KEY = 'VCHART_ORDER';
-    const SUPPLY_DATA_KEY = 'SUPPLY_DATA_KEY';
-    const NAME_LABEL_PADDING_RIGHT = 10;
-    const NAME_ORDER_PADDING_RIGHT = 5;
-    const NAME_SYMBOL_PADDING_RIGHT = 8;
-    const CHART_PADDING_LEFT = 5;
-    const CHART_PADDING_RIGHT = 5;
-    const VALUE_LABEL_PADDING_LEFT = 5;
-    const LABEL_PADDING_BOTTOM = 5;
-    class RankingListChartSpecTransformer extends vchart.CommonChartSpecTransformer {
-        constructor() {
-            super(...arguments);
-            this.formatMap = {};
-            this.paginateDataArr = (spec) => {
-                const { scrollSize = 1, pageSize = 5 } = spec;
-                const arr = this.originalData;
-                const result = {};
-                let pageOrder = 0;
-                for (let i = 0; i < arr.length; i += scrollSize) {
-                    pageOrder++;
-                    result[`page${pageOrder}`] = arr.slice(i, i + pageSize);
-                    if (i + pageSize - 1 >= arr.length - 1) {
-                        arr.push(...Array.from({ length: i + pageSize - arr.length }, _ => {
-                            return {
-                                [spec.yField]: Math.random() * 100,
-                                [spec.xField]: null,
-                                [SUPPLY_DATA_KEY]: true
-                            };
-                        }));
-                        break;
-                    }
-                }
-                return {
-                    orderCount: pageOrder,
-                    result: result
-                };
-            };
-            this.processRankingData = (spec) => {
-                const result = [];
-                spec.data.forEach((datum, index) => (datum[ORDER_KEY] = index + 1 < 10 ? `0${index + 1}` : index + 1));
-                const pagerData = this.paginateDataArr(spec).result;
-                const orderCount = this.paginateDataArr(spec).orderCount;
-                this.orderCount = orderCount;
-                const supplyCount = spec.pageSize - pagerData[`page${orderCount}`].length;
-                pagerData[`page${orderCount}`].push(...Array.from({ length: supplyCount }, _ => {
-                    return {
-                        [spec.yField]: Math.random() * 100,
-                        [spec.xField]: null,
-                        [SUPPLY_DATA_KEY]: true
-                    };
-                }));
-                Object.keys(pagerData).forEach(order => {
-                    result.push({
-                        data: [
-                            {
-                                id: 'datas',
-                                values: pagerData[order].map(d => {
-                                    return Object.assign(Object.assign({}, d), { [DATA_KEY]: d[spec.yField] });
-                                })
-                            },
-                            {
-                                id: 'order',
-                                values: [
-                                    {
-                                        order
-                                    }
-                                ]
-                            }
-                        ]
-                    });
-                });
-                return result;
-            };
-        }
-        transformSpec(spec) {
-            super.transformSpec(spec);
-            this.normalizeSpec(spec);
-            this.upgradeTextMeasure(spec);
-            this.upgradeFormatMap(spec);
-            this.processData(spec);
-            this.transformBaseSpec(spec);
-            this.transformAnimationSpec(spec);
-            this.transformAxesSpec(spec);
-            spec.extensionMark = [
-                this.generateBarBackground(spec),
-                ...this.generateDecorateHaloIcons(spec),
-                this.generateRankingIcon(spec),
-                this.generateNameLabel(spec),
-                this.generateOrderLabel(spec),
-                this.generateValueLabel(spec)
-            ];
-            this.transformPaddingSpec(spec);
-            super.transformSpec(spec);
-        }
-        normalizeSpec(spec) {
-            mergeObjects(spec, defaultSpec);
-            applyVisible(spec, [
-                'barBackground',
-                'rankingIcon',
-                'decorateHaloIcons',
-                'orderLabel',
-                'nameLabel',
-                'valueLabel'
-            ]);
-        }
-        upgradeTextMeasure(spec) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            (_a = this.nameLabelTextMeasure) === null || _a === void 0 ? void 0 : _a.release();
-            (_b = this.valueLabelTextMeasure) === null || _b === void 0 ? void 0 : _b.release();
-            (_c = this.orderLabelTextMeasure) === null || _c === void 0 ? void 0 : _c.release();
-            this.nameLabelTextMeasure = new vutils.TextMeasure({
-                defaultFontParams: (_e = (_d = spec.nameLabel) === null || _d === void 0 ? void 0 : _d.style) !== null && _e !== void 0 ? _e : {}
-            });
-            this.valueLabelTextMeasure = new vutils.TextMeasure({
-                defaultFontParams: (_g = (_f = spec.valueLabel) === null || _f === void 0 ? void 0 : _f.style) !== null && _g !== void 0 ? _g : {}
-            });
-            this.orderLabelTextMeasure = new vutils.TextMeasure({
-                defaultFontParams: (_j = (_h = spec.orderLabel) === null || _h === void 0 ? void 0 : _h.style) !== null && _j !== void 0 ? _j : {}
-            });
-        }
-        upgradeFormatMap(spec) {
-            this.formatMap[spec.yField] = spec.nameLabel.formatMethod;
-            this.formatMap[spec.xField] = spec.valueLabel.formatMethod;
-            this.formatMap[ORDER_KEY] = spec.orderLabel.formatMethod;
-        }
-        processData(spec) {
-            var _a;
-            if (!((_a = spec.data[0]) === null || _a === void 0 ? void 0 : _a.values)) {
-                this.originalData = spec.data;
-                this.originalSpec = vutils.cloneDeep(spec);
-                this.dataSpecs = this.processRankingData(spec);
-                spec.data = this.dataSpecs[0].data;
-            }
-        }
-        transformBaseSpec(spec) {
-            var _a, _b, _c;
-            spec.type = 'common';
-            spec.dataKey = DATA_KEY;
-            spec.series = [
-                {
-                    type: 'bar',
-                    direction: 'horizontal',
-                    xField: spec.xField,
-                    yField: spec.yField,
-                    barWidth: (_b = (_a = spec.bar) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 10,
-                    bar: Object.assign(Object.assign({}, spec.bar), { style: Object.assign(Object.assign({}, (_c = spec.bar) === null || _c === void 0 ? void 0 : _c.style), { x1: 0, visible: (datum) => {
-                                var _a, _b;
-                                if (datum[SUPPLY_DATA_KEY]) {
-                                    return false;
-                                }
-                                return (_b = (_a = spec.bar) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : true;
-                            } }) })
-                }
-            ];
-        }
-        transformAnimationSpec(spec) {
-            var _a, _b, _c;
-            if (spec.animationUpdate.enable && this.orderCount > 1) {
-                spec.player = Object.assign({ specs: this.dataSpecs, auto: true, visible: false, interval: ((_b = (_a = spec.animationNormal) === null || _a === void 0 ? void 0 : _a.interval) !== null && _b !== void 0 ? _b : 1000) + ((_c = spec.animationUpdate.duration) !== null && _c !== void 0 ? _c : 1000) / 2, loop: true }, spec.player);
-                spec.animationExit = this.getAnimationExit(this.originalSpec);
-                spec.animationEnter = this.getAnimationEnter(this.originalSpec);
-                spec.animationUpdate = this.getAnimationUpdate(this.originalSpec);
-            }
-            spec.animationNormal = this.originalSpec.animationNormal;
-            spec.animationAppear = this.getAnimationAppear(this.originalSpec, 'rect');
-        }
-        transformAxesSpec(spec) {
-            const { min, max } = computeDataRange(this.originalData, spec.xField);
-            spec.axes = [
-                {
-                    orient: 'left',
-                    type: 'band',
-                    visible: false,
-                    inverse: true,
-                    paddingOuter: 0.5
-                },
-                {
-                    orient: 'bottom',
-                    label: { visible: true },
-                    type: 'linear',
-                    visible: false,
-                    min,
-                    max
-                }
-            ];
-        }
-        generateBarBackground(spec) {
-            var _a;
-            return {
-                type: spec.barBackground.type,
-                dataId: 'data',
-                visible: true,
-                dataKey: DATA_KEY,
-                zIndex: -99,
-                state: (_a = spec.barBackground) === null || _a === void 0 ? void 0 : _a.state,
-                style: Object.assign(Object.assign({ x: (datum, ctx) => spec.barBackground.type === 'symbol' ? ctx.getRegion().getLayoutRect().width / 2 : 0, y: (datum, ctx) => {
-                        return (ctx.valueToY([datum[spec.yField]]) +
-                            ctx.yBandwidth() / 2 -
-                            (spec.barBackground.type === 'symbol' ? 0 : spec.bar.height / 2));
-                    }, size: (datum, ctx) => [ctx.getRegion().getLayoutRect().width, spec.bar.height], width: (datum, ctx) => ctx.getRegion().getLayoutRect().width, height: spec.bar.height }, spec.barBackground.style), { visible: (datum) => {
-                        if (datum[SUPPLY_DATA_KEY]) {
-                            return false;
-                        }
-                        return spec.barBackground.style.visible;
-                    } }),
-                animation: true,
-                animationEnter: this.getAnimationEnter(this.originalSpec),
-                animationExit: this.getAnimationExit(this.originalSpec),
-                animationAppear: this.getAnimationAppear(this.originalSpec, 'barBack'),
-                animationUpdate: this.getAnimationUpdate(this.originalSpec)
-            };
-        }
-        generateDecorateHaloIcons(spec) {
-            var _a;
-            return (_a = spec.decorateHaloIcons) === null || _a === void 0 ? void 0 : _a.map((decorateHaloIcon) => {
-                return {
-                    type: 'symbol',
-                    dataId: 'data',
-                    visible: true,
-                    dataKey: DATA_KEY,
-                    state: decorateHaloIcon === null || decorateHaloIcon === void 0 ? void 0 : decorateHaloIcon.state,
-                    style: Object.assign(Object.assign({ x: (datum, ctx) => {
-                            if (datum[spec.xField] === undefined || datum[spec.xField] === null) {
-                                return undefined;
-                            }
-                            return ctx.valueToX([datum[spec.xField]]);
-                        }, y: (datum, ctx) => {
-                            return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2;
-                        } }, decorateHaloIcon.style), { visible: (datum) => {
-                            if (datum[SUPPLY_DATA_KEY]) {
-                                return false;
-                            }
-                            return decorateHaloIcon.style.visible;
-                        } }),
-                    animation: true,
-                    animationEnter: this.getAnimationEnter(this.originalSpec),
-                    animationExit: this.getAnimationExit(this.originalSpec),
-                    animationAppear: this.getAnimationAppear(this.originalSpec, 'symbol'),
-                    animationUpdate: this.getAnimationUpdate(this.originalSpec)
-                };
-            });
-        }
-        generateRankingIcon(spec) {
-            return {
-                type: 'symbol',
-                dataId: 'data',
-                visible: true,
-                dataKey: DATA_KEY,
-                state: spec.rankingIcon.state,
-                style: Object.assign(Object.assign({ x: (datum) => {
-                        if (spec.labelLayout === 'bothEnd') {
-                            return -(NAME_LABEL_PADDING_RIGHT +
-                                this.nameLabelTextMeasure.fullMeasure(this.formatDatum(spec.yField, datum)).width +
-                                (spec.orderLabel.style.visible
-                                    ? NAME_ORDER_PADDING_RIGHT +
-                                        this.orderLabelTextMeasure.fullMeasure(this.formatDatum(ORDER_KEY, datum)).width
-                                    : 0) +
-                                NAME_SYMBOL_PADDING_RIGHT);
-                        }
-                        return CHART_PADDING_LEFT;
-                    }, y: (datum, ctx) => {
-                        if (spec.labelLayout === 'bothEnd') {
-                            return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2;
-                        }
-                        return (ctx.valueToY([datum[spec.yField]]) +
-                            ctx.yBandwidth() / 2 -
-                            spec.bar.height / 2 -
-                            LABEL_PADDING_BOTTOM -
-                            Math.max(this.nameLabelTextMeasure.fullMeasure(this.formatDatum(spec.yField, datum)).height, this.orderLabelTextMeasure.fullMeasure(this.formatDatum(ORDER_KEY, datum)).height) /
-                                2);
-                    } }, spec.rankingIcon.style), { lineWidth: 0, stroke: null, visible: (datum) => {
-                        if (datum[SUPPLY_DATA_KEY]) {
-                            return false;
-                        }
-                        return spec.rankingIcon.style.visible;
-                    } }),
-                animation: true,
-                animationEnter: this.getAnimationEnter(this.originalSpec),
-                animationExit: this.getAnimationExit(this.originalSpec),
-                animationAppear: this.getAnimationAppear(this.originalSpec, 'text'),
-                animationUpdate: this.getAnimationUpdate(this.originalSpec)
-            };
-        }
-        generateNameLabel(spec) {
-            var _a;
-            return {
-                type: 'text',
-                dataId: 'data',
-                dataKey: DATA_KEY,
-                state: (_a = spec.nameLabel) === null || _a === void 0 ? void 0 : _a.state,
-                style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(spec.yField, datum), x: () => {
-                        var _a;
-                        if (spec.labelLayout === 'bothEnd') {
-                            return -NAME_LABEL_PADDING_RIGHT;
-                        }
-                        return ((spec.rankingIcon.style.visible ? NAME_SYMBOL_PADDING_RIGHT + ((_a = spec.rankingIcon.style.size) !== null && _a !== void 0 ? _a : 10) : 0) +
-                            (spec.orderLabel.style.visible
-                                ? NAME_ORDER_PADDING_RIGHT + this.getMaxDataLabelLens(spec, ORDER_KEY, this.orderLabelTextMeasure)
-                                : 0));
-                    }, y: (datum, ctx) => {
-                        if (spec.labelLayout === 'bothEnd') {
-                            return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2;
-                        }
-                        return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2 - spec.bar.height / 2 - LABEL_PADDING_BOTTOM;
-                    } }, spec.nameLabel.style), { textAlign: spec.labelLayout === 'bothEnd' ? 'right' : 'left', textBaseline: spec.labelLayout === 'bothEnd' ? 'middle' : 'bottom', visible: (datum) => {
-                        if (datum[SUPPLY_DATA_KEY]) {
-                            return false;
-                        }
-                        return spec.nameLabel.style.visible;
-                    } }),
-                animation: true,
-                animationEnter: this.getAnimationEnter(this.originalSpec),
-                animationExit: this.getAnimationExit(this.originalSpec),
-                animationAppear: this.getAnimationAppear(this.originalSpec, 'text'),
-                animationUpdate: this.getAnimationUpdate(this.originalSpec)
-            };
-        }
-        generateOrderLabel(spec) {
-            var _a;
-            return {
-                type: 'text',
-                dataId: 'data',
-                dataKey: DATA_KEY,
-                state: (_a = spec.orderLabel) === null || _a === void 0 ? void 0 : _a.state,
-                style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(ORDER_KEY, datum), x: (datum) => {
-                        var _a;
-                        if (spec.labelLayout === 'bothEnd') {
-                            return -(NAME_LABEL_PADDING_RIGHT +
-                                this.nameLabelTextMeasure.fullMeasure(this.formatDatum(spec.yField, datum)).width +
-                                NAME_ORDER_PADDING_RIGHT);
-                        }
-                        else {
-                            return spec.rankingIcon.style.visible ? NAME_SYMBOL_PADDING_RIGHT + ((_a = spec.rankingIcon.style.size) !== null && _a !== void 0 ? _a : 10) : 0;
-                        }
-                    }, y: (datum, ctx) => {
-                        if (spec.labelLayout === 'bothEnd') {
-                            return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2;
-                        }
-                        return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2 - spec.bar.height / 2 - LABEL_PADDING_BOTTOM;
-                    } }, spec.orderLabel.style), { textAlign: spec.labelLayout === 'bothEnd' ? 'right' : 'left', textBaseline: spec.labelLayout === 'bothEnd' ? 'middle' : 'bottom', visible: (datum) => {
-                        if (datum[SUPPLY_DATA_KEY]) {
-                            return false;
-                        }
-                        return spec.orderLabel.style.visible;
-                    } }),
-                animation: true,
-                animationEnter: this.getAnimationEnter(this.originalSpec),
-                animationExit: this.getAnimationExit(this.originalSpec),
-                animationAppear: this.getAnimationAppear(this.originalSpec, 'text'),
-                animationUpdate: this.getAnimationUpdate(this.originalSpec)
-            };
-        }
-        generateValueLabel(spec) {
-            var _a;
-            return {
-                type: 'text',
-                dataId: 'data',
-                visible: true,
-                dataKey: DATA_KEY,
-                state: (_a = spec.valueLabel) === null || _a === void 0 ? void 0 : _a.state,
-                style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(spec.xField, datum), x: (datum, ctx) => {
-                        if (spec.labelLayout === 'bothEnd') {
-                            return (ctx.getRegion().getLayoutRect().width +
-                                VALUE_LABEL_PADDING_LEFT);
-                        }
-                        else {
-                            return ctx.getRegion().getLayoutRect().width;
-                        }
-                    }, y: (datum, ctx) => {
-                        if (spec.labelLayout === 'bothEnd') {
-                            return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2;
-                        }
-                        return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2 - spec.bar.height / 2 - LABEL_PADDING_BOTTOM;
-                    } }, spec.valueLabel.style), { textAlign: spec.labelLayout === 'bothEnd' ? 'left' : 'right', textBaseline: spec.labelLayout === 'bothEnd' ? 'middle' : 'bottom', visible: (datum) => {
-                        if (datum[SUPPLY_DATA_KEY]) {
-                            return false;
-                        }
-                        return spec.valueLabel.style.visible;
-                    } }),
-                animation: true,
-                animationEnter: this.getAnimationEnter(this.originalSpec),
-                animationExit: this.getAnimationExit(this.originalSpec),
-                animationAppear: this.getAnimationAppear(this.originalSpec, 'text'),
-                animationUpdate: this.getAnimationUpdate(this.originalSpec)
-            };
-        }
-        transformPaddingSpec(spec) {
-            var _a;
-            const maxHaloIconSize = spec.decorateHaloIcons.length > 0
-                ? Math.max(...spec.decorateHaloIcons.map((icon) => { var _a, _b; return (_b = (_a = icon.style) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 18; }))
-                : 0;
-            spec.padding = Object.assign({ left: spec.labelLayout === 'bothEnd'
-                    ? NAME_LABEL_PADDING_RIGHT +
-                        this.getMaxDataLabelLens(spec, spec.yField, this.nameLabelTextMeasure) +
-                        (spec.orderLabel.style.visible
-                            ? NAME_ORDER_PADDING_RIGHT + this.getMaxDataLabelLens(spec, ORDER_KEY, this.orderLabelTextMeasure)
-                            : 0) +
-                        (spec.rankingIcon.style.visible ? NAME_SYMBOL_PADDING_RIGHT + ((_a = spec.rankingIcon.style.size) !== null && _a !== void 0 ? _a : 10) : 0) +
-                        CHART_PADDING_LEFT
-                    : CHART_PADDING_LEFT + maxHaloIconSize / 2, right: spec.labelLayout === 'bothEnd'
-                    ? VALUE_LABEL_PADDING_LEFT +
-                        this.getMaxDataLabelLens(spec, spec.xField, this.valueLabelTextMeasure) +
-                        CHART_PADDING_RIGHT
-                    : CHART_PADDING_RIGHT + 10, top: 0, bottom: 0 }, spec.padding);
-        }
-        getMaxDataLabelLens(spec, field, textMeasure) {
-            const textWidths = this.originalData.map(datum => datum[SUPPLY_DATA_KEY] ? 0 : textMeasure.fullMeasure(this.formatDatum(field, datum)).width);
-            return Math.max(...textWidths);
-        }
-        formatDatum(field, datum) {
-            var _a;
-            if ((_a = this.formatMap) === null || _a === void 0 ? void 0 : _a[field]) {
-                return this.formatMap[field](datum[field], datum);
-            }
-            else {
-                return datum[field];
-            }
-        }
-        getLabelWidth(padding, width) {
-            return width + padding;
-        }
-        getAnimationExit(spec) {
-            var _a, _b, _c, _d, _e;
-            if (((_a = spec.animationUpdate) === null || _a === void 0 ? void 0 : _a.enable) === false) {
-                return false;
-            }
-            return {
-                type: 'moveOut',
-                options: {
-                    direction: 'y',
-                    orient: 'negative',
-                    point: (datum, element) => {
-                        const channelAttr = element.getGraphicAttribute('y');
-                        const barSpace = spec.height / (spec.pageSize + 1);
-                        return { y: channelAttr - barSpace * Math.min(spec.scrollSize, spec.pageSize) };
-                    }
-                },
-                duration: (_c = (_b = spec.animationUpdate) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 1000,
-                easing: (_e = (_d = spec.animationUpdate) === null || _d === void 0 ? void 0 : _d.easing) !== null && _e !== void 0 ? _e : 'linear'
-            };
-        }
-        getAnimationEnter(spec) {
-            var _a, _b, _c, _d, _e;
-            if (((_a = spec.animationUpdate) === null || _a === void 0 ? void 0 : _a.enable) === false) {
-                return false;
-            }
-            return {
-                type: 'moveIn',
-                options: {
-                    direction: 'y',
-                    orient: 'negative',
-                    excludeChannels: ['y'],
-                    point: (datum, element) => {
-                        const channelAttr = element.getGraphicAttribute('y');
-                        return { y: channelAttr + (spec.height / (spec.pageSize + 1)) * Math.min(spec.scrollSize, spec.pageSize) };
-                    }
-                },
-                duration: (_c = (_b = spec.animationUpdate) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 1000,
-                easing: (_e = (_d = spec.animationUpdate) === null || _d === void 0 ? void 0 : _d.easing) !== null && _e !== void 0 ? _e : 'linear'
-            };
-        }
-        getAnimationAppear(spec, markType) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            if (((_a = spec.animationAppear) === null || _a === void 0 ? void 0 : _a.enable) === false) {
-                return false;
-            }
-            if (markType === 'rect') {
-                return {
-                    type: 'growWidthIn',
-                    oneByOne: false,
-                    duration: (_c = (_b = spec.animationAppear) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 1000,
-                    easing: (_e = (_d = spec.animationAppear) === null || _d === void 0 ? void 0 : _d.easing) !== null && _e !== void 0 ? _e : 'linear',
-                    options: {}
-                };
-            }
-            else if (markType === 'symbol') {
-                return {
-                    channel: {
-                        x: {
-                            from: 0,
-                            to: (datum, element) => {
-                                return element.getGraphicItem().attribute.x;
-                            }
-                        }
-                    },
-                    duration: (_g = (_f = spec.animationAppear) === null || _f === void 0 ? void 0 : _f.duration) !== null && _g !== void 0 ? _g : 1000,
-                    easing: (_j = (_h = spec.animationAppear) === null || _h === void 0 ? void 0 : _h.easing) !== null && _j !== void 0 ? _j : 'linear'
-                };
-            }
-            else {
-                return {
-                    channel: {
-                        opacity: {
-                            from: 0,
-                            to: 1
-                        }
-                    },
-                    duration: (_l = (_k = spec.animationAppear) === null || _k === void 0 ? void 0 : _k.duration) !== null && _l !== void 0 ? _l : 1000,
-                    easing: (_o = (_m = spec.animationAppear) === null || _m === void 0 ? void 0 : _m.easing) !== null && _o !== void 0 ? _o : 'linear'
-                };
-            }
-        }
-        getAnimationUpdate(spec) {
-            var _a, _b, _c, _d;
-            if (spec.animationUpdate.enable === false) {
-                return false;
-            }
-            return {
-                duration: (_b = (_a = spec.animationUpdate) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 1000,
-                easing: (_d = (_c = spec.animationUpdate) === null || _c === void 0 ? void 0 : _c.easing) !== null && _d !== void 0 ? _d : 'linear'
-            };
-        }
-    }
-
-    class RankingList extends vchart.BaseChart {
-        constructor() {
-            super(...arguments);
-            this.type = 'rankingList';
-            this.transformerConstructor = RankingListChartSpecTransformer;
-        }
-        init() {
-            if (!this.isValid()) {
-                return;
-            }
-            super.init();
-        }
-        isValid() {
-            var _a, _b, _c, _d;
-            const { xField, yField, data } = this._spec;
-            if (!xField || !yField) {
-                (_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Missing Required Config: `xField`, `yField` ');
-                return false;
-            }
-            if (!data) {
-                (_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
-                return false;
-            }
-            return true;
-        }
-    }
-    RankingList.type = 'rankingList';
-    RankingList.view = 'singleDefault';
-    RankingList.transformerConstructor = RankingListChartSpecTransformer;
-    const registerRankingList = (option) => {
-        const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
-        if (vchartConstructor) {
-            vchartConstructor.useChart([RankingList, vchart.BarChart]);
-        }
-    };
-
     const fields = (data, options) => {
       var _a, _b;
       if (!(null == options ? void 0 : options.fields)) return data;
@@ -1594,7 +922,7 @@
                 rightGroup.getMarks().forEach(mark => {
                     mark.setDataView(this._arrowData);
                     mark.compileData();
-                    mark.getProduct().transform([
+                    mark.setTransform([
                         {
                             type: 'filter',
                             callback: datum => datum.position === 'right'
@@ -1607,7 +935,7 @@
                 leftGroup.getMarks().forEach(mark => {
                     mark.setDataView(this._arrowData);
                     mark.compileData();
-                    mark.getProduct().transform([
+                    mark.setTransform([
                         {
                             type: 'filter',
                             callback: datum => datum.position === 'left'
@@ -1618,6 +946,7 @@
         }
     }
     const registerConversionFunnelChart = (option) => {
+        vchart.registerMarkFilterTransform();
         const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
         if (vchartConstructor) {
             vchartConstructor.useChart([ConversionFunnelChart]);
@@ -2077,12 +1406,15 @@
               serviceIdentifier: injectIdentifier,
               constructorArgsMetadata: constructorArgsMetadata
             },
-            request = {
+            bindings = (this._bindingDictionary.get(injectIdentifier) || []).filter(b => b.constraint(target));
+          if (bindings.length) {
+            const request = {
               injectIdentifier: injectIdentifier,
               metadata: constructorArgsMetadata,
-              bindings: this._bindingDictionary.get(injectIdentifier).filter(b => b.constraint(target))
+              bindings: bindings
             };
-          arr.push(request);
+            arr.push(request);
+          }
         }
         return arr;
       }
@@ -9083,6 +8415,7 @@
       contains(graphic, point, params) {
         if (!graphic.AABBBounds.containsPoint(point)) return !1;
         if ("imprecise" === graphic.attribute.pickMode) return !0;
+        if (!this.canvasRenderer) return !0;
         const {
           pickContext: pickContext
         } = null != params ? params : {};
@@ -9582,131 +8915,6 @@
       }
     };
 
-    class GlyphMeta {
-      constructor(marks, encoders, defaultEncoder, progressiveChannels) {
-        this.channelEncoder = {}, this.marks = marks, encoders && this.registerChannelEncoder(encoders), defaultEncoder && this.registerDefaultEncoder(defaultEncoder), this.progressiveChannels && this.registerProgressiveChannels(progressiveChannels);
-      }
-      getMarks() {
-        return this.marks;
-      }
-      registerChannelEncoder(channel, encoder) {
-        return vutils.isString(channel) ? this.channelEncoder[channel] = encoder : Object.assign(this.channelEncoder, channel), this;
-      }
-      registerFunctionEncoder(encoder) {
-        return this.functionEncoder = encoder, this;
-      }
-      registerDefaultEncoder(encoder) {
-        return this.defaultEncoder = encoder, this;
-      }
-      registerProgressiveChannels(channels) {
-        return this.progressiveChannels = vutils.array(channels), this;
-      }
-      getChannelEncoder() {
-        return this.channelEncoder;
-      }
-      getFunctionEncoder() {
-        return this.functionEncoder;
-      }
-      getDefaultEncoder() {
-        return this.defaultEncoder;
-      }
-      getProgressiveChannels() {
-        return this.progressiveChannels;
-      }
-    }
-
-    class Factory {
-      static registerPlotMarks(key, mark) {
-        Factory._plotMarks[key] = mark;
-      }
-      static createPlotMark(type, id) {
-        if (!Factory._plotMarks[type]) return null;
-        return new (Factory._plotMarks[type])(id);
-      }
-      static registerMark(key, mark) {
-        Factory._marks[key] = mark;
-      }
-      static createMark(type, view, group) {
-        if (!Factory._marks[type]) return null;
-        return new (Factory._marks[type])(view, type, group);
-      }
-      static hasMark(type) {
-        return !!Factory._marks[type];
-      }
-      static getMark(type) {
-        return Factory._marks[type];
-      }
-      static registerComponent(key, component) {
-        Factory._components[key] = component;
-      }
-      static createComponent(componentType, view, group, mode) {
-        const Ctor = Factory._components[componentType];
-        return Ctor ? new Ctor(view, group, mode) : null;
-      }
-      static hasComponent(componentType) {
-        return !!Factory._components[componentType];
-      }
-      static registerGraphicComponent(key, creator) {
-        Factory._graphicComponents[key] = creator;
-      }
-      static createGraphicComponent(componentType, attrs, options) {
-        const compCreator = Factory._graphicComponents[componentType];
-        return compCreator ? compCreator(attrs, options) : null;
-      }
-      static registerTransform(type, transform, isBuiltIn) {
-        Factory._transforms[type] = Object.assign(transform, {
-          type: type,
-          isBuiltIn: !!isBuiltIn
-        });
-      }
-      static getTransform(type) {
-        return Factory._transforms[type];
-      }
-      static unregisterRuntimeTransforms() {
-        Object.keys(Factory._transforms).forEach(type => {
-          Factory._transforms[type] && !Factory._transforms[type].isBuiltIn && (Factory._transforms[type] = null);
-        });
-      }
-      static registerGrammar(type, grammarClass, specKey) {
-        Factory._grammars[type] = {
-          grammarClass: grammarClass,
-          specKey: null != specKey ? specKey : type
-        };
-      }
-      static createGrammar(type, view, grammarType) {
-        var _a;
-        const Ctor = null === (_a = Factory._grammars[type]) || void 0 === _a ? void 0 : _a.grammarClass;
-        return Ctor ? new Ctor(view, grammarType) : null;
-      }
-      static getGrammars() {
-        return this._grammars;
-      }
-      static getGlyph(glyphType) {
-        return Factory._glyphs[glyphType];
-      }
-      static createInteraction(interactionType, view, options) {
-        const Ctor = Factory._interactions[interactionType];
-        return Ctor ? new Ctor(view, options) : null;
-      }
-      static hasInteraction(interactionType) {
-        return !!Factory._interactions[interactionType];
-      }
-    }
-    Factory._plotMarks = {}, Factory._marks = {}, Factory._components = {}, Factory._graphicComponents = {}, Factory._transforms = {}, Factory._grammars = {}, Factory._glyphs = {}, Factory._animations = {}, Factory._interactions = {}, Factory._graphics = {}, Factory._stageEventPlugins = {}, Factory.registerGlyph = (glyphType, marks, encoders, defaultEncoder, progressiveChannels) => (Factory._glyphs[glyphType] = new GlyphMeta(marks, encoders, defaultEncoder, progressiveChannels), Factory._glyphs[glyphType]), Factory.registerAnimationType = (animationType, animation) => {
-      Factory._animations[animationType] = animation;
-    }, Factory.getAnimationType = animationType => Factory._animations[animationType], Factory.registerInteraction = (interactionType, interaction) => {
-      Factory._interactions[interactionType] = interaction;
-    }, Factory.registerGraphic = (graphicType, creator) => {
-      Factory._graphics[graphicType] = creator;
-    }, Factory.getGraphicType = graphicType => Factory._graphics[graphicType], Factory.createGraphic = (graphicType, attributes) => {
-      const creator = Factory._graphics[graphicType];
-      return creator ? creator(attributes) : null;
-    }, Factory.registerDefaultLayout = layout => {
-      Factory.defaultLayout = layout;
-    }, Factory.getDefaultLayout = () => Factory.defaultLayout, Factory.registerStageEventPlugin = (type, Plugin) => {
-      Factory._stageEventPlugins[type] = Plugin;
-    }, Factory.getStageEventPlugin = type => Factory._stageEventPlugins[type];
-
     const SERIES_BREAK = 'seriesBreak';
 
     function generateZigzagPath(start, end, size, angle, isVertical = false) {
@@ -9839,7 +9047,7 @@
         }
     }
     const registerSeriesBreak = () => {
-        Factory.registerGraphicComponent('seriesBreak', (attrs) => new SeriesBreakComponent(attrs));
+        vchart.Factory.registerGraphicComponent('seriesBreak', (attrs) => new SeriesBreakComponent(attrs));
     };
 
     function getAllRegionBounds(regions) {
@@ -9907,9 +9115,9 @@
                             chart.getAllSeries().forEach((s) => {
                                 if (s.type === 'bar' || s.type === 'waterfall') {
                                     const mark = s.getMarkInName('bar');
-                                    const vgrammarElements = mark.getProduct().elements;
-                                    vgrammarElements.forEach((element) => {
-                                        const elementBounds = element.getBounds();
+                                    const graphics = mark.getGraphics();
+                                    graphics.forEach((element) => {
+                                        const elementBounds = element.AABBBounds;
                                         let shouldDrawBreak = false;
                                         let startX;
                                         let startY;
@@ -9953,9 +9161,8 @@
                                 }
                                 else if (s.type === 'line') {
                                     const mark = s.getMarkInName(s.type);
-                                    const vgrammarElements = mark.getProduct().elements;
-                                    vgrammarElements.forEach((element) => {
-                                        const graphicItem = element.graphicItem;
+                                    const graphics = mark.getGraphics();
+                                    graphics.forEach(graphicItem => {
                                         const points = getAreaOrLinePathPoints(graphicItem, 'line');
                                         points.forEach(linePoints => {
                                             const intersections = getIntersectionsFromLineAndPolyline(isHorizontal
@@ -10004,9 +9211,8 @@
                                 }
                                 else if (s.type === 'area') {
                                     const mark = s.getMarkInName('area');
-                                    const vgrammarElements = mark.getProduct().elements;
-                                    vgrammarElements.forEach((element) => {
-                                        const graphicItem = element.graphicItem;
+                                    const graphics = mark.getGraphics();
+                                    graphics.forEach(graphicItem => {
                                         const points = getAreaOrLinePathPoints(graphicItem, 'area');
                                         points.forEach(areaPoints => {
                                             const intersections = getIntersectionsFromLineAndPolyline(isHorizontal
@@ -10172,6 +9378,131 @@
         return false;
     };
 
+    class GlyphMeta {
+      constructor(marks, encoders, defaultEncoder, progressiveChannels) {
+        this.channelEncoder = {}, this.marks = marks, encoders && this.registerChannelEncoder(encoders), defaultEncoder && this.registerDefaultEncoder(defaultEncoder), this.progressiveChannels && this.registerProgressiveChannels(progressiveChannels);
+      }
+      getMarks() {
+        return this.marks;
+      }
+      registerChannelEncoder(channel, encoder) {
+        return vutils.isString(channel) ? this.channelEncoder[channel] = encoder : Object.assign(this.channelEncoder, channel), this;
+      }
+      registerFunctionEncoder(encoder) {
+        return this.functionEncoder = encoder, this;
+      }
+      registerDefaultEncoder(encoder) {
+        return this.defaultEncoder = encoder, this;
+      }
+      registerProgressiveChannels(channels) {
+        return this.progressiveChannels = vutils.array(channels), this;
+      }
+      getChannelEncoder() {
+        return this.channelEncoder;
+      }
+      getFunctionEncoder() {
+        return this.functionEncoder;
+      }
+      getDefaultEncoder() {
+        return this.defaultEncoder;
+      }
+      getProgressiveChannels() {
+        return this.progressiveChannels;
+      }
+    }
+
+    class Factory {
+      static registerPlotMarks(key, mark) {
+        Factory._plotMarks[key] = mark;
+      }
+      static createPlotMark(type, id) {
+        if (!Factory._plotMarks[type]) return null;
+        return new (Factory._plotMarks[type])(id);
+      }
+      static registerMark(key, mark) {
+        Factory._marks[key] = mark;
+      }
+      static createMark(type, view, group) {
+        if (!Factory._marks[type]) return null;
+        return new (Factory._marks[type])(view, type, group);
+      }
+      static hasMark(type) {
+        return !!Factory._marks[type];
+      }
+      static getMark(type) {
+        return Factory._marks[type];
+      }
+      static registerComponent(key, component) {
+        Factory._components[key] = component;
+      }
+      static createComponent(componentType, view, group, mode) {
+        const Ctor = Factory._components[componentType];
+        return Ctor ? new Ctor(view, group, mode) : null;
+      }
+      static hasComponent(componentType) {
+        return !!Factory._components[componentType];
+      }
+      static registerGraphicComponent(key, creator) {
+        Factory._graphicComponents[key] = creator;
+      }
+      static createGraphicComponent(componentType, attrs, options) {
+        const compCreator = Factory._graphicComponents[componentType];
+        return compCreator ? compCreator(attrs, options) : null;
+      }
+      static registerTransform(type, transform, isBuiltIn) {
+        Factory._transforms[type] = Object.assign(transform, {
+          type: type,
+          isBuiltIn: !!isBuiltIn
+        });
+      }
+      static getTransform(type) {
+        return Factory._transforms[type];
+      }
+      static unregisterRuntimeTransforms() {
+        Object.keys(Factory._transforms).forEach(type => {
+          Factory._transforms[type] && !Factory._transforms[type].isBuiltIn && (Factory._transforms[type] = null);
+        });
+      }
+      static registerGrammar(type, grammarClass, specKey) {
+        Factory._grammars[type] = {
+          grammarClass: grammarClass,
+          specKey: null != specKey ? specKey : type
+        };
+      }
+      static createGrammar(type, view, grammarType) {
+        var _a;
+        const Ctor = null === (_a = Factory._grammars[type]) || void 0 === _a ? void 0 : _a.grammarClass;
+        return Ctor ? new Ctor(view, grammarType) : null;
+      }
+      static getGrammars() {
+        return this._grammars;
+      }
+      static getGlyph(glyphType) {
+        return Factory._glyphs[glyphType];
+      }
+      static createInteraction(interactionType, view, options) {
+        const Ctor = Factory._interactions[interactionType];
+        return Ctor ? new Ctor(view, options) : null;
+      }
+      static hasInteraction(interactionType) {
+        return !!Factory._interactions[interactionType];
+      }
+    }
+    Factory._plotMarks = {}, Factory._marks = {}, Factory._components = {}, Factory._graphicComponents = {}, Factory._transforms = {}, Factory._grammars = {}, Factory._glyphs = {}, Factory._animations = {}, Factory._interactions = {}, Factory._graphics = {}, Factory._stageEventPlugins = {}, Factory.registerGlyph = (glyphType, marks, encoders, defaultEncoder, progressiveChannels) => (Factory._glyphs[glyphType] = new GlyphMeta(marks, encoders, defaultEncoder, progressiveChannels), Factory._glyphs[glyphType]), Factory.registerAnimationType = (animationType, animation) => {
+      Factory._animations[animationType] = animation;
+    }, Factory.getAnimationType = animationType => Factory._animations[animationType], Factory.registerInteraction = (interactionType, interaction) => {
+      Factory._interactions[interactionType] = interaction;
+    }, Factory.registerGraphic = (graphicType, creator) => {
+      Factory._graphics[graphicType] = creator;
+    }, Factory.getGraphicType = graphicType => Factory._graphics[graphicType], Factory.createGraphic = (graphicType, attributes) => {
+      const creator = Factory._graphics[graphicType];
+      return creator ? creator(attributes) : null;
+    }, Factory.registerDefaultLayout = layout => {
+      Factory.defaultLayout = layout;
+    }, Factory.getDefaultLayout = () => Factory.defaultLayout, Factory.registerStageEventPlugin = (type, Plugin) => {
+      Factory._stageEventPlugins[type] = Plugin;
+    }, Factory.getStageEventPlugin = type => Factory._stageEventPlugins[type];
+
     const BAR_LINK = 'barLink';
 
     class BarLinkComponent extends AbstractComponent {
@@ -10838,7 +10169,6 @@
     exports.DEFAULT_ARROW_TEXT_MARK_STYLE = DEFAULT_ARROW_TEXT_MARK_STYLE;
     exports.DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE = DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE;
     exports.RankingBar = RankingBar;
-    exports.RankingList = RankingList;
     exports.SERIES_BREAK = SERIES_BREAK;
     exports.SeriesBreakComponent = SeriesBreakComponent;
     exports.SeriesLabelComponent = SeriesLabelComponent;
@@ -10851,7 +10181,6 @@
     exports.registerBarLink = registerBarLink;
     exports.registerConversionFunnelChart = registerConversionFunnelChart;
     exports.registerRankingBarChart = registerRankingBarChart;
-    exports.registerRankingList = registerRankingList;
     exports.registerSeriesBreak = registerSeriesBreak;
     exports.registerSeriesLabel = registerSeriesLabel;