@visactor/vchart-extension 1.13.5-alpha.1 → 1.13.5-alpha.10

package/build/index.js

@@ -338,6 +338,673 @@
         }
     };
 
+    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,
+        animation: {
+            type: 'both',
+            interval: 4000,
+            duration: 2000,
+            easing: 'linear'
+        }
+    };
+
+    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 { data: arr, scrollSize = 1, pageSize = 5 } = spec;
+                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;
+                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, i) => {
+                                    return Object.assign(Object.assign({}, d), { [DATA_KEY]: order + '_' + i + '_' + new Date().getTime() });
+                                })
+                            },
+                            {
+                                id: 'order',
+                                values: [
+                                    {
+                                        order
+                                    }
+                                ]
+                            }
+                        ]
+                    });
+                });
+                if (result.length === 1) {
+                    result.push({
+                        data: [
+                            {
+                                id: 'datas',
+                                values: pagerData['page1'].map((d, i) => {
+                                    return Object.assign(Object.assign({}, d), { [DATA_KEY]: 'page2' + '_' + i + '_' + new Date().getTime() });
+                                })
+                            },
+                            {
+                                id: 'order',
+                                values: [
+                                    {
+                                        order: 'page2'
+                                    }
+                                ]
+                            }
+                        ]
+                    });
+                }
+                return result;
+            };
+        }
+        isSpecValid(spec) {
+            var _a, _b, _c, _d;
+            const { xField, yField, data } = 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 || data.length === 0) {
+                (_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
+                return false;
+            }
+            return true;
+        }
+        transformSpec(spec) {
+            var _a;
+            super.transformSpec(spec);
+            if (!this.isSpecValid(spec)) {
+                return;
+            }
+            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);
+            (_a = spec.customTransformSpec) === null || _a === void 0 ? void 0 : _a.call(spec, 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.dataSpecs = this.processRankingData(spec);
+                this.originalData = spec.data;
+                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) {
+            const totalDuration = spec.animation.duration;
+            if (spec.animation) {
+                spec.player = Object.assign(Object.assign({}, spec.player), { specs: this.dataSpecs, auto: true, visible: false, interval: spec.animation.interval + spec.animation.duration / 2, loop: true });
+                spec.animationExit = this.getAnimationExit(spec, totalDuration);
+                spec.animationAppear = this.getAnimationEnter(spec, 'rect', totalDuration);
+                spec.animationEnter = this.getAnimationEnter(spec, 'rect', totalDuration);
+            }
+        }
+        transformAxesSpec(spec) {
+            const { min, max } = computeDataRange(this.originalData, spec.xField);
+            spec.axes = [
+                {
+                    orient: 'left',
+                    type: 'band',
+                    visible: false,
+                    inverse: true
+                },
+                {
+                    orient: 'bottom',
+                    label: { visible: true },
+                    type: 'linear',
+                    visible: false,
+                    min,
+                    max
+                }
+            ];
+        }
+        generateBarBackground(spec) {
+            var _a;
+            const totalDuration = spec.animation.duration;
+            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: Boolean(spec.animation),
+                animationEnter: this.getAnimationEnter(spec, 'barBack', totalDuration),
+                animationExit: this.getAnimationExit(spec, totalDuration),
+                animationAppear: this.getAnimationEnter(spec, 'barBack', totalDuration)
+            };
+        }
+        generateDecorateHaloIcons(spec) {
+            var _a;
+            const totalDuration = spec.animation.duration;
+            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: Boolean(spec.animation),
+                    animationEnter: this.getAnimationEnter(spec, 'symbol', totalDuration),
+                    animationExit: this.getAnimationExit(spec, totalDuration),
+                    animationAppear: this.getAnimationEnter(spec, 'symbol', totalDuration)
+                };
+            });
+        }
+        generateRankingIcon(spec) {
+            const totalDuration = spec.animation.duration;
+            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: Boolean(spec.animation),
+                animationEnter: this.getAnimationEnter(spec, 'text', totalDuration),
+                animationExit: this.getAnimationExit(spec, totalDuration),
+                animationAppear: this.getAnimationEnter(spec, 'text', totalDuration)
+            };
+        }
+        generateNameLabel(spec) {
+            var _a;
+            const totalDuration = spec.animation.duration;
+            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: Boolean(spec.animation),
+                animationEnter: this.getAnimationEnter(spec, 'text', totalDuration),
+                animationExit: this.getAnimationExit(spec, totalDuration),
+                animationAppear: this.getAnimationEnter(spec, 'text', totalDuration)
+            };
+        }
+        generateOrderLabel(spec) {
+            var _a;
+            const totalDuration = spec.animation.duration;
+            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: Boolean(spec.animation),
+                animationEnter: this.getAnimationEnter(spec, 'text', totalDuration),
+                animationExit: this.getAnimationExit(spec, totalDuration),
+                animationAppear: this.getAnimationEnter(spec, 'text', totalDuration)
+            };
+        }
+        generateValueLabel(spec) {
+            const totalDuration = spec.animation.duration;
+            return {
+                type: 'text',
+                dataId: 'data',
+                visible: true,
+                dataKey: DATA_KEY,
+                state: {
+                    blur: {
+                        opacity: 0.2
+                    }
+                },
+                style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(spec.xField, datum), x: (datum, ctx) => {
+                        if (spec.labelLayout === 'bothEnd') {
+                            return (ctx.getRegion().getLayoutRect().width +
+                                this.getMaxDataLabelLens(spec, spec.xField, this.nameLabelTextMeasure) +
+                                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: Boolean(spec.animation),
+                animationEnter: this.getAnimationEnter(spec, 'text', totalDuration),
+                animationExit: this.getAnimationExit(spec, totalDuration),
+                animationAppear: this.getAnimationEnter(spec, 'text', totalDuration)
+            };
+        }
+        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.yField, 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, duration) {
+            if (spec.animation.type === 'grow') {
+                return {};
+            }
+            return {
+                type: 'moveOut',
+                options: {
+                    direction: 'y',
+                    orient: 'negative',
+                    point: (datum, element, opt) => {
+                        const channelAttr = element.getGraphicAttribute('y');
+                        const barSpace = (spec.height / spec.pageSize - spec.bar.height) / 2;
+                        return { y: channelAttr - opt.height + barSpace };
+                    }
+                },
+                duration: spec.animation.type === 'both' ? duration / 2 : duration,
+                easing: spec.animation.easing
+            };
+        }
+        getAnimationEnter(spec, markType, totalDuration) {
+            const { animation } = spec;
+            const { type: animationType, easing } = animation;
+            const scrollDuration = animationType === 'both' ? totalDuration / 2 : totalDuration;
+            const growDuration = animationType === 'grow' ? totalDuration : totalDuration / 2;
+            const result = [];
+            if (animationType === 'scroll' || animationType === 'both') {
+                result.push({
+                    type: 'moveIn',
+                    options: {
+                        direction: 'y',
+                        orient: 'negative',
+                        excludeChannels: ['y'],
+                        point: (datum, element, opt) => {
+                            const channelAttr = element.getGraphicAttribute('y');
+                            const barSpace = (spec.height / spec.pageSize - spec.bar.height) / 2;
+                            return { y: channelAttr + opt.height - barSpace };
+                        }
+                    },
+                    duration: scrollDuration,
+                    easing
+                });
+            }
+            if ((animationType === 'grow' || animationType === 'both') && markType !== 'text' && markType !== 'barBack') {
+                result.push({
+                    channel: {
+                        x: {
+                            from: 0,
+                            to: (datum, element) => {
+                                return element.getGraphicItem().attribute.x;
+                            }
+                        }
+                    },
+                    duration: growDuration,
+                    delay: animationType === 'both' ? scrollDuration : 0,
+                    easing
+                });
+            }
+            return result;
+        }
+    }
+
+    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 || data.length === 0) {
+                (_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;
@@ -2237,7 +2904,7 @@
           default:
             if (this._t <= 0) this.context.lineTo(this._x, y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);else {
               const x1 = this._x * (1 - this._t) + x * this._t;
-              .5 === this._t ? this.context.lineTo(x1, this._y, !1 !== this._lastDefined, this.lastPoint) : this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
+              this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
             }
         }
         this._lastDefined = p.defined, this._x = x, this._y = y, this.lastPoint = p;
@@ -3827,7 +4494,7 @@
         let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
         let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
         let slience = arguments.length > 2 ? arguments[2] : undefined;
-        this.id = id, this.timeline = timeline || defaultTimeline, this.status = AnimateStatus.INITIAL, this.tailAnimate = new SubAnimate(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
+        this.id = id, this.timeline = timeline, this.status = AnimateStatus.INITIAL, this.tailAnimate = new SubAnimate(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
       }
       setTimeline(timeline) {
         timeline !== this.timeline && (this.timeline.removeAnimate(this, !1), timeline.addAnimate(this));
@@ -4361,7 +5028,7 @@
       }
       static GetFile(url, type) {
         let data = ResourceLoader.cache.get(url);
-        return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+        return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
           type: type,
           loadState: "init"
         }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
@@ -6453,7 +7120,7 @@
         this._draw(line, lineAttribute, !1, drawContext, params);
       }
       drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         if (!cache) return;
         context.beginPath();
         const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
@@ -6466,7 +7133,27 @@
           x: originX = 0,
           x: originY = 0
         } = attribute;
-        return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke())), !1;
+        !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke()));
+        let {
+          connectedType: connectedType,
+          connectedX: connectedX,
+          connectedY: connectedY,
+          connectedStyle: connectedStyle
+        } = attribute;
+        if (vutils.isArray(defaultAttribute) ? (connectedType = null !== (_b = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _b ? _b : defaultAttribute[1].connectedType, connectedX = null !== (_c = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _c ? _c : defaultAttribute[1].connectedX, connectedY = null !== (_d = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _d ? _d : defaultAttribute[1].connectedY, connectedStyle = null !== (_e = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _e ? _e : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), "none" !== connectedType) {
+          context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
+            offsetX: offsetX,
+            offsetY: offsetY,
+            offsetZ: z,
+            drawConnect: !0,
+            mode: connectedType,
+            zeroX: connectedX,
+            zeroY: connectedY
+          });
+          const da = [];
+          vutils.isArray(defaultAttribute) ? defaultAttribute.forEach(i => da.push(i)) : da.push(defaultAttribute), da.push(attribute), !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.fill())), !1 !== stroke && (strokeCb ? strokeCb(context, attribute, defaultAttribute) : strokeOpacity && (context.setStrokeStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da), context.stroke()));
+        }
+        return !1;
       }
       drawLinearLineHighPerformance(line, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, lineAttribute, drawContext, params, fillCb, strokeCb) {
         var _a;
@@ -6498,8 +7185,7 @@
             segments: segments,
             points: points,
             closePath: closePath,
-            curveTension = lineAttribute.curveTension,
-            connectedType = lineAttribute.connectedType
+            curveTension = lineAttribute.curveTension
           } = line.attribute;
         if (!this.valid(line, lineAttribute, fillCb, strokeCb)) return;
         let {
@@ -6511,9 +7197,6 @@
           clipRangeByDimension = lineAttribute.clipRangeByDimension
         } = line.attribute;
         if (1 === clipRange && !segments && !points.some(p => !1 === p.defined) && "linear" === curveType) return this.drawLinearLineHighPerformance(line, context, !!fill, !!stroke, fillOpacity, strokeOpacity, x, y, lineAttribute, drawContext, params, fillCb, strokeCb);
-        function parsePoint(points, connectedType) {
-          return "none" === connectedType ? points : points.filter(p => !1 !== p.defined);
-        }
         if (line.shouldUpdateShape()) {
           const {
               points: points,
@@ -6535,7 +7218,7 @@
                 y: lastSeg.endY,
                 defined: lastSeg.curves[lastSeg.curves.length - 1].defined
               } : index > 1 && (startPoint.x = lastSeg.endX, startPoint.y = lastSeg.endY, startPoint.defined = lastSeg.curves[lastSeg.curves.length - 1].defined);
-              const data = calcLineCache(parsePoint(seg.points, connectedType), curveType, {
+              const data = calcLineCache(seg.points, curveType, {
                 startPoint: startPoint,
                 curveTension: curveTension
               });
@@ -6554,7 +7237,7 @@
             }
           } else {
             if (!points || !points.length) return line.cache = null, void line.clearUpdateShapeTag();
-            line.cache = calcLineCache(parsePoint(_points, connectedType), curveType, {
+            line.cache = calcLineCache(_points, curveType, {
               curveTension: curveTension
             });
           }
@@ -7974,7 +8657,7 @@
           } = attribute,
           b = aabbBounds;
         return points.forEach(p => {
-          !1 === p.defined && "connect" !== connectedType || b.add(p.x, p.y);
+          !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
         }), b;
       }
       updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) {
@@ -7985,7 +8668,7 @@
           b = aabbBounds;
         return segments.forEach(s => {
           s.points.forEach(p => {
-            !1 === p.defined && "connect" !== connectedType || b.add(p.x, p.y);
+            !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
           });
         }), b;
       }
@@ -8365,17 +9048,10 @@
           this.render(), this.bindEvents();
         });
       }
-      setAttribute(key, value, forceUpdateTag, context) {
-        const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
-          [key]: value
-        }, this.attribute, key, context);
-        if (params) return this._setAttributes(params, forceUpdateTag);
+      setAttribute(key, value, forceUpdateTag) {
         vutils.isPlainObject(this.attribute[key]) && vutils.isPlainObject(value) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(value) ? vutils.merge(this.attribute[key], value) : this.attribute[key] = value, GROUP_ATTRIBUTES.includes(key) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
       }
-      setAttributes(params, forceUpdateTag, context) {
-        return params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this._setAttributes(params, forceUpdateTag);
-      }
-      _setAttributes(params, forceUpdateTag) {
+      setAttributes(params, forceUpdateTag) {
         const keys = Object.keys(params);
         this._mergeAttributes(params, keys), keys.every(key => GROUP_ATTRIBUTES.includes(key)) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTags(keys) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
       }
@@ -10166,6 +10842,7 @@
     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;
@@ -10178,6 +10855,7 @@
     exports.registerBarLink = registerBarLink;
     exports.registerConversionFunnelChart = registerConversionFunnelChart;
     exports.registerRankingBarChart = registerRankingBarChart;
+    exports.registerRankingList = registerRankingList;
     exports.registerSeriesBreak = registerSeriesBreak;
     exports.registerSeriesLabel = registerSeriesLabel;