@visactor/vchart 1.10.1-alpha.0 → 1.10.1

package/build/index.js

@@ -54099,6 +54099,36 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._viewListeners = new Map();
             this._windowListeners = new Map();
             this._canvasListeners = new Map();
+            this._onDelegate = (listenerParams) => {
+                var _a;
+                const chart = this.globalInstance.getChart();
+                const model = (isValid$3(listenerParams.modelId) && (chart === null || chart === void 0 ? void 0 : chart.getModelById(listenerParams.modelId))) || undefined;
+                const mark = (isValid$3(listenerParams.markId) && (chart === null || chart === void 0 ? void 0 : chart.getMarkById(listenerParams.markId))) || null;
+                const itemMap = new Map();
+                let targetMark = (_a = listenerParams.item) === null || _a === void 0 ? void 0 : _a.mark;
+                if (targetMark && isValid$3(targetMark.id())) {
+                    itemMap.set(targetMark.id(), listenerParams.item);
+                }
+                while (targetMark === null || targetMark === void 0 ? void 0 : targetMark.elements) {
+                    const id = targetMark.id();
+                    if (isValid$3(id) && !itemMap.has(id)) {
+                        itemMap.set(id, targetMark.elements[0]);
+                    }
+                    targetMark = targetMark.group;
+                }
+                const params = {
+                    event: listenerParams.event,
+                    item: listenerParams.item,
+                    datum: listenerParams.datum,
+                    source: listenerParams.source,
+                    itemMap,
+                    chart,
+                    model,
+                    mark: mark !== null && mark !== void 0 ? mark : undefined,
+                    node: get$1(listenerParams.event, 'target')
+                };
+                this.dispatch(listenerParams.type, params);
+            };
             this.globalInstance = vchart;
             this._compiler = compiler;
         }
@@ -54113,9 +54143,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const bubble = bubbles.get(eType);
             bubble.addHandler(handler, (_c = handler.filter) === null || _c === void 0 ? void 0 : _c.level);
             if (this._isValidEvent(eType) && !listeners.has(eType)) {
-                const callback = this._onDelegate.bind(this);
-                this._compiler.addEventListener((_d = handler.filter) === null || _d === void 0 ? void 0 : _d.source, eType, callback);
-                listeners.set(eType, callback);
+                this._compiler.addEventListener((_d = handler.filter) === null || _d === void 0 ? void 0 : _d.source, eType, this._onDelegate);
+                listeners.set(eType, this._onDelegate);
             }
             return this;
         }
@@ -54246,36 +54275,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return Object.assign({}, params);
         }
-        _onDelegate(listenerParams) {
-            var _a;
-            const chart = this.globalInstance.getChart();
-            const model = (isValid$3(listenerParams.modelId) && (chart === null || chart === void 0 ? void 0 : chart.getModelById(listenerParams.modelId))) || undefined;
-            const mark = (isValid$3(listenerParams.markId) && (chart === null || chart === void 0 ? void 0 : chart.getMarkById(listenerParams.markId))) || null;
-            const itemMap = new Map();
-            let targetMark = (_a = listenerParams.item) === null || _a === void 0 ? void 0 : _a.mark;
-            if (targetMark && isValid$3(targetMark.id())) {
-                itemMap.set(targetMark.id(), listenerParams.item);
-            }
-            while (targetMark === null || targetMark === void 0 ? void 0 : targetMark.elements) {
-                const id = targetMark.id();
-                if (isValid$3(id) && !itemMap.has(id)) {
-                    itemMap.set(id, targetMark.elements[0]);
-                }
-                targetMark = targetMark.group;
-            }
-            const params = {
-                event: listenerParams.event,
-                item: listenerParams.item,
-                datum: listenerParams.datum,
-                source: listenerParams.source,
-                itemMap,
-                chart,
-                model,
-                mark: mark !== null && mark !== void 0 ? mark : undefined,
-                node: get$1(listenerParams.event, 'target')
-            };
-            this.dispatch(listenerParams.type, params);
-        }
         _invoke(handlers, type, params) {
             const result = handlers.map(handler => {
                 var _a, _b, _c;
@@ -54895,7 +54894,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         removeEventListener(source, type, callback) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (this._option.interactive === false) {
                 return;
             }
@@ -54911,9 +54910,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._windowListeners.delete(callback);
             }
             else if (source === exports.Event_Source_Type.canvas) {
-                const canvasObject = this._getGlobalThis();
-                const wrappedCallback = (_d = this._canvasListeners.get(callback)) === null || _d === void 0 ? void 0 : _d.callback;
-                wrappedCallback && (canvasObject === null || canvasObject === void 0 ? void 0 : canvasObject.removeEventListener(type, wrappedCallback));
+                const canvasObject = (_d = this.getStage()) === null || _d === void 0 ? void 0 : _d.window;
+                const wrappedCallback = (_e = this._canvasListeners.get(callback)) === null || _e === void 0 ? void 0 : _e.callback;
+                canvasObject && wrappedCallback && (canvasObject === null || canvasObject === void 0 ? void 0 : canvasObject.removeEventListener(type, wrappedCallback));
                 this._canvasListeners.delete(callback);
             }
         }
@@ -59206,9 +59205,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._chartPluginApply('releaseAll');
             this._chartPlugin = null;
             this._chartSpecTransformer = null;
-            (_b = this._chart) === null || _b === void 0 ? void 0 : _b.release();
-            (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.release();
-            (_d = this._eventDispatcher) === null || _d === void 0 ? void 0 : _d.release();
+            (_b = this._eventDispatcher) === null || _b === void 0 ? void 0 : _b.release();
+            (_c = this._chart) === null || _c === void 0 ? void 0 : _c.release();
+            (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.release();
             this._unBindResizeEvent();
             this._releaseData();
             this._onError = null;
@@ -59791,7 +59790,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c;
             (_c = (_b = (_a = this._compiler) === null || _a === void 0 ? void 0 : _a.getVGrammarView()) === null || _b === void 0 ? void 0 : _b.animate) === null || _c === void 0 ? void 0 : _c.resume();
         }
-        convertDatumToPosition(datum, dataLinkInfo = {}, isRelativeToCanvas = false) {
+        convertDatumToPosition(datum, dataLinkInfo = {}, isRelativeToCanvas = false, checkInViewData) {
             var _a;
             if (!this._chart) {
                 return null;
@@ -59815,10 +59814,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const seriesLayoutStartPoint = series.getRegion().getLayoutStartPoint();
                 let point;
                 if (handledDatum) {
-                    point = series.dataToPosition(handledDatum, true);
+                    point = series.dataToPosition(handledDatum, checkInViewData);
                 }
                 else {
-                    point = series.dataToPosition(datum, true);
+                    point = series.dataToPosition(datum, checkInViewData);
                 }
                 if (!point) {
                     return null;
@@ -60326,6 +60325,128 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
+    const bracketReg = /\{([^}]+)\}/;
+    const bracketGReg = /\{([^}]+)\}/g;
+    const semicolonReg = /:/;
+    class FormatterPlugin extends BasePlugin {
+        constructor() {
+            super(FormatterPlugin.type);
+            this.type = 'formatterPlugin';
+            this._timeModeFormat = {
+                utc: TimeUtil.getInstance().timeUTCFormat,
+                local: TimeUtil.getInstance().timeFormat
+            };
+            this._formatter = this._format;
+            this._timeFormatter = this._timeModeFormat.local;
+            this._numericFormatter = NumberUtil.getInstance().format;
+            this._numericSpecifier = NumberUtil.getInstance().formatter;
+            this._numericFormatterCache = new Map();
+            this._isNumericFormatterCache = new Map();
+        }
+        onInit(service, chartSpec) {
+            var _a;
+            const { globalInstance } = service;
+            if (!globalInstance) {
+                return;
+            }
+            this._spec = (_a = chartSpec === null || chartSpec === void 0 ? void 0 : chartSpec[FormatterPlugin.specKey]) !== null && _a !== void 0 ? _a : {};
+            const { timeMode, customFormatter, numericFormatter, timeFormatter } = this._spec;
+            if (isFunction$1(customFormatter)) {
+                this._formatter = customFormatter;
+            }
+            else {
+                this._formatter = this._format.bind(this);
+                if (isFunction$1(timeFormatter)) {
+                    this._timeFormatter = timeFormatter;
+                }
+                else if (timeMode && this._timeModeFormat[timeMode]) {
+                    this._timeFormatter = this._timeModeFormat[timeMode];
+                }
+                if (numericFormatter) {
+                    this._numericFormatter = numericFormatter;
+                    this._numericSpecifier = null;
+                    this._numericFormatterCache = null;
+                }
+            }
+            Factory.registerFormatter(this._formatter);
+        }
+        _format(text, datum, formatter) {
+            if (isArray$3(text)) {
+                return text.map((t, i) => {
+                    const f = isArray$3(formatter) ? formatter[i] : formatter;
+                    return f ? this._formatSingleLine(t, datum, f) : t;
+                });
+            }
+            if (isArray$3(formatter)) {
+                return formatter.map(f => this._formatSingleLine(text, datum, f));
+            }
+            return this._formatSingleLine(text, datum, formatter);
+        }
+        _formatSingleLine(text, datum, formatter) {
+            let isTemplate;
+            if (this._isNumericFormatterCache) {
+                if (this._isNumericFormatterCache.get(formatter)) {
+                    isTemplate = this._isNumericFormatterCache.get(formatter);
+                }
+                else {
+                    isTemplate = bracketReg.test(formatter);
+                    this._isNumericFormatterCache.set(formatter, isTemplate);
+                }
+            }
+            if (isTemplate) {
+                const result = formatter.replace(bracketGReg, (match, key) => {
+                    const hasFormatter = semicolonReg.test(key);
+                    if (!hasFormatter) {
+                        const value = datum[key.trim()];
+                        return typeof value !== 'undefined' ? value : match;
+                    }
+                    const parts = key.split(':');
+                    const value = datum[parts.shift()];
+                    const valueFormatter = parts.join(':');
+                    return this._formatSingleText(value, valueFormatter);
+                });
+                return result;
+            }
+            return this._formatSingleText(text, formatter);
+        }
+        _formatSingleText(text, formatter) {
+            const isNumeric = numberSpecifierReg.test(formatter);
+            if (isNumeric && this._numericFormatter) {
+                let numericFormat;
+                if (this._numericFormatterCache && this._numericSpecifier) {
+                    if (this._numericFormatterCache.get(formatter)) {
+                        numericFormat = this._numericFormatterCache.get(formatter);
+                    }
+                    else {
+                        numericFormat = this._numericSpecifier(formatter);
+                        this._numericFormatterCache.set(formatter, numericFormat);
+                    }
+                    return numericFormat(Number(text));
+                }
+                return this._numericFormatter(formatter, Number(text));
+            }
+            else if (formatter.includes('%') && this._timeFormatter) {
+                return this._timeFormatter(formatter, text);
+            }
+            return text;
+        }
+        release() {
+            super.release();
+            this._format = null;
+            this._timeFormatter = null;
+            this._numericFormatter = null;
+            this._numericSpecifier = null;
+            this._numericFormatterCache = null;
+            this._isNumericFormatterCache = null;
+        }
+    }
+    FormatterPlugin.pluginType = 'chart';
+    FormatterPlugin.specKey = 'formatter';
+    FormatterPlugin.type = 'formatterPlugin';
+    const registerFormatPlugin = () => {
+        registerChartPlugin(FormatterPlugin);
+    };
+
     function isValidAlignDomain(domain) {
         return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(domain[1]) && domain[1] >= domain[0];
     }
@@ -64065,7 +64186,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.10.1-alpha.0";
+    const version = "1.10.1";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -64708,7 +64829,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._data = null;
             this.layoutZIndex = 0;
             this._invalidType = 'break';
-            this._getInvalidDefined = (datum) => couldBeValidNumber(datum[this.getStackValueField()]);
             this._region = options.region;
             this._dataSet = options.dataSet;
             ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.name) && (this.name = this._spec.name);
@@ -65586,6 +65706,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getInvalidConnectType() {
             return this._invalidType === 'zero' ? 'zero' : this._invalidType === 'link' ? 'connect' : 'none';
         }
+        _getInvalidDefined(datum) {
+            return couldBeValidNumber(datum[this.getStackValueField()]);
+        }
         _getRelatedComponentSpecInfo(specKey) {
             var _a;
             const specIndex = this.getSpecIndex();
@@ -65679,20 +65802,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._setPositionYEncoder = (encoder) => {
                 this._positionYEncoder = encoder.bind(this);
             };
-            this._getInvalidDefined = (datum) => {
-                var _a, _b;
-                if ((_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.isContinuous) {
-                    if (!couldBeValidNumber(datum[this._specXField[0]])) {
-                        return false;
-                    }
-                }
-                if ((_b = this._yAxisHelper) === null || _b === void 0 ? void 0 : _b.isContinuous) {
-                    if (!couldBeValidNumber(datum[this._specYField[0]])) {
-                        return false;
-                    }
-                }
-                return true;
-            };
         }
         _buildScaleConfig() {
             this._scaleConfig = {
@@ -66079,6 +66188,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 (_c = this._data) === null || _c === void 0 ? void 0 : _c.updateData(true);
             }
         }
+        _getInvalidDefined(datum) {
+            if (this._xAxisHelper && this._xAxisHelper.isContinuous) {
+                if (!couldBeValidNumber(datum[this._specXField[0]])) {
+                    return false;
+                }
+            }
+            if (this._yAxisHelper && this._yAxisHelper.isContinuous) {
+                if (!couldBeValidNumber(datum[this._specYField[0]])) {
+                    return false;
+                }
+            }
+            return true;
+        }
         reInit(spec) {
             if (this._positionXEncoder) {
                 this._positionXEncoder = null;
@@ -66153,7 +66275,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', exports.AttributeLevel.Series);
                 if (this._invalidType !== 'zero') {
                     this.setMarkStyle(lineMark, {
-                        defined: this._getInvalidDefined,
+                        defined: this._getInvalidDefined.bind(this),
                         connectedType: this._getInvalidConnectType()
                     }, 'normal', exports.AttributeLevel.Series);
                 }
@@ -66277,7 +66399,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, 'normal', exports.AttributeLevel.Series);
             if (this._invalidType !== 'zero') {
                 this.setMarkStyle(symbolMark, {
-                    visible: this._getInvalidDefined
+                    visible: this._getInvalidDefined.bind(this)
                 }, 'normal', exports.AttributeLevel.Series);
             }
             this.event.on(exports.ChartEvent.viewDataStatisticsUpdate, { filter: param => param.model === this }, () => {
@@ -66323,7 +66445,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             if (this._invalidType !== 'zero') {
                 this.setMarkStyle(labelMark, {
-                    visible: this._getInvalidDefined
+                    visible: this._getInvalidDefined.bind(this)
                 }, 'normal', exports.AttributeLevel.Series);
             }
             this.event.on(exports.ChartEvent.viewDataStatisticsUpdate, { filter: param => param.model === this }, () => {
@@ -66343,27 +66465,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         encodeDefined(mark, attr) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
             if (!mark) {
                 return;
             }
-            const statistics = (_b = (_a = this.getViewDataStatistics()) === null || _a === void 0 ? void 0 : _a.latestData) === null || _b === void 0 ? void 0 : _b[this.getStackValueField()];
-            if (this._invalidType === 'zero' || (statistics && (statistics === null || statistics === void 0 ? void 0 : statistics.allValid))) {
-                if (((_d = (_c = mark.stateStyle.normal) === null || _c === void 0 ? void 0 : _c[attr]) === null || _d === void 0 ? void 0 : _d.style) === true) {
+            const allValid = this._isFieldAllValid();
+            if (this._invalidType === 'zero' || allValid) {
+                if (((_b = (_a = mark.stateStyle.normal) === null || _a === void 0 ? void 0 : _a[attr]) === null || _b === void 0 ? void 0 : _b.style) === true) {
                     return;
                 }
                 this.setMarkStyle(mark, { [attr]: true }, 'normal', exports.AttributeLevel.Series);
             }
             else {
-                if (((_f = (_e = mark.stateStyle.normal) === null || _e === void 0 ? void 0 : _e[attr]) === null || _f === void 0 ? void 0 : _f.style) !== true) {
+                if (((_d = (_c = mark.stateStyle.normal) === null || _c === void 0 ? void 0 : _c[attr]) === null || _d === void 0 ? void 0 : _d.style) !== true) {
                     return;
                 }
-                this.setMarkStyle(mark, { [attr]: this._getInvalidDefined }, 'normal', exports.AttributeLevel.Series);
+                this.setMarkStyle(mark, { [attr]: this._getInvalidDefined.bind(this) }, 'normal', exports.AttributeLevel.Series);
             }
             if (mark.getProduct()) {
                 mark.compileEncode();
             }
         }
+        _isFieldAllValid() {
+            const viewStatistics = this.getViewDataStatistics();
+            const field = this.getStackValueField();
+            if (viewStatistics && viewStatistics.latestData && field) {
+                return viewStatistics.latestData[field] && viewStatistics.latestData[field].allValid;
+            }
+            return false;
+        }
     }
 
     class BaseLineMark extends BaseMark {
@@ -67929,7 +68059,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!chartSpec.region || chartSpec.region.length === 0) {
                 chartSpec.region = [{}];
             }
-            if (!has$1(chartSpec, 'tooltip')) {
+            if (chartSpec.tooltip === undefined) {
                 chartSpec.tooltip = {};
             }
             if (isValid$3(chartSpec.stackInverse)) {
@@ -68417,6 +68547,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initSymbolMark(progressive, seriesMark === 'point');
         }
         initMarkStyle() {
+            this.initAreaMarkStyle();
+            this.initSymbolMarkStyle();
+        }
+        initAreaMarkStyle() {
             var _a, _b, _c, _d, _e;
             const userCurveType = ((_c = (_b = (_a = this.getSpec().area) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.curveType) !== null && _c !== void 0 ? _c : (_e = (_d = this.getSpec().line) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.curveType);
             const curveType = userCurveType === DEFAULT_SMOOTH_INTERPOLATE
@@ -68455,7 +68589,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', exports.AttributeLevel.Series);
                 if (this._invalidType !== 'zero') {
                     this.setMarkStyle(areaMark, {
-                        defined: this._getInvalidDefined,
+                        defined: this._getInvalidDefined.bind(this),
                         connectedType: this._getInvalidConnectType()
                     }, 'normal', exports.AttributeLevel.Series);
                 }
@@ -68470,8 +68604,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 });
             }
-            this.initLineMarkStyle(this._direction, userCurveType);
-            this.initSymbolMarkStyle();
         }
         initAnimation() {
             var _a, _b, _c, _d;
@@ -69614,7 +69746,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             if (this._invalidType !== 'zero') {
                 this.setMarkStyle(symbolMark, {
-                    visible: this._getInvalidDefined
+                    visible: this._getInvalidDefined.bind(this)
                 });
             }
             this.setMarkStyle(symbolMark, {
@@ -69648,7 +69780,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.setMarkStyle(this._symbolMark, { visible: true }, 'normal', exports.AttributeLevel.Series);
             }
             else {
-                this.setMarkStyle(this._symbolMark, { visible: this._getInvalidDefined }, 'normal', exports.AttributeLevel.Series);
+                this.setMarkStyle(this._symbolMark, { visible: this._getInvalidDefined.bind(this) }, 'normal', exports.AttributeLevel.Series);
             }
         }
         initLabelMarkStyle(labelMark) {
@@ -69665,7 +69797,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Series);
             if (this._invalidType !== 'zero') {
                 this.setMarkStyle(labelMark, {
-                    visible: this._getInvalidDefined
+                    visible: this._getInvalidDefined.bind(this)
                 }, STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Series);
             }
         }
@@ -72896,28 +73028,25 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.type = exports.SeriesTypeEnum.rangeArea;
         }
         initMark() {
-            var _a, _b;
+            var _a;
+            const { customShape, stateSort } = (_a = this._spec.area) !== null && _a !== void 0 ? _a : {};
             this._areaMark = this._createMark(RangeAreaSeries.mark.area, {
                 defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
                 isSeriesMark: true,
-                customShape: (_a = this._spec.area) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.area) === null || _b === void 0 ? void 0 : _b.stateSort
+                customShape,
+                stateSort
             });
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e;
-            const userCurveType = (_c = (_b = (_a = this.getSpec().area) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.curveType) !== null && _c !== void 0 ? _c : (_e = (_d = this.getSpec().line) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.curveType;
-            const curveType = userCurveType === DEFAULT_SMOOTH_INTERPOLATE
-                ? this._direction === "horizontal"
-                    ? 'monotoneY'
-                    : 'monotoneX'
-                : userCurveType;
+            this.initAreaMarkStyle();
+        }
+        initAreaMarkStyle() {
             const areaMark = this._areaMark;
             if (areaMark) {
+                super.initAreaMarkStyle();
                 if (this._direction === "horizontal") {
                     this.setMarkStyle(this._areaMark, {
-                        x: this.dataToPositionX.bind(this),
                         x1: (datum) => {
                             if (!this._xAxisHelper) {
                                 return Number.NaN;
@@ -72926,14 +73055,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             return dataToPosition(this.getDatumPositionValues(datum, this._spec.xField[1]), {
                                 bandPosition: this._bandPosition
                             });
-                        },
-                        y: this.dataToPositionY.bind(this),
-                        orient: this._direction
+                        }
                     }, 'normal', exports.AttributeLevel.Series);
                 }
                 else {
                     this.setMarkStyle(this._areaMark, {
-                        x: this.dataToPositionX.bind(this),
                         y1: (datum) => {
                             if (!this._yAxisHelper) {
                                 return Number.NaN;
@@ -72942,32 +73068,34 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             return dataToPosition(this.getDatumPositionValues(datum, this._spec.yField[1]), {
                                 bandPosition: this._bandPosition
                             });
-                        },
-                        y: this.dataToPositionY.bind(this)
-                    }, 'normal', exports.AttributeLevel.Series);
-                }
-                this.setMarkStyle(areaMark, {
-                    fill: this.getColorAttribute(),
-                    stroke: false
-                }, 'normal', exports.AttributeLevel.Series);
-                if (this._invalidType !== 'zero') {
-                    this.setMarkStyle(areaMark, {
-                        defined: this._getInvalidDefined,
-                        connectedType: this._getInvalidConnectType()
+                        }
                     }, 'normal', exports.AttributeLevel.Series);
                 }
-                this.setMarkStyle(areaMark, {
-                    curveType
-                }, 'normal', exports.AttributeLevel.Built_In);
+                this.setMarkStyle(areaMark, { stroke: false }, 'normal', exports.AttributeLevel.Series);
             }
         }
         initTooltip() {
             this._tooltipHelper = new RangeAreaSeriesTooltipHelper(this);
             this._areaMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._areaMark);
         }
-        viewDataStatisticsUpdate(d) {
-            super.viewDataStatisticsUpdate(d);
-            this.encodeDefined(this._areaMark, 'defined');
+        _isFieldAllValid() {
+            const viewStatistics = this.getViewDataStatistics();
+            const fields = this.fieldY;
+            if (viewStatistics && viewStatistics.latestData && fields.length) {
+                return fields.every(field => viewStatistics.latestData[field] && viewStatistics.latestData[field].allValid);
+            }
+            return false;
+        }
+        _getInvalidDefined(datum) {
+            if (!super._getInvalidDefined(datum)) {
+                return false;
+            }
+            if (this._yAxisHelper && this._yAxisHelper.isContinuous) {
+                if (!couldBeValidNumber(datum[this._specYField[1]])) {
+                    return false;
+                }
+            }
+            return true;
         }
     }
     RangeAreaSeries.type = exports.SeriesTypeEnum.rangeArea;
@@ -72986,19 +73114,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._angleField = [];
             this._radiusField = [];
             this._sortDataByAxis = false;
-            this._getInvalidDefined = (datum) => {
-                if (this.angleAxisHelper.isContinuous) {
-                    if (!couldBeValidNumber(datum[this._angleField[0]])) {
-                        return false;
-                    }
-                }
-                if (this.radiusAxisHelper.isContinuous) {
-                    if (!couldBeValidNumber(datum[this._radiusField[0]])) {
-                        return false;
-                    }
-                }
-                return true;
-            };
         }
         get outerRadius() {
             return this._outerRadius;
@@ -73167,6 +73282,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 sortDataInAxisHelper(this.angleAxisHelper, this._angleField[0], this.getViewData().latestData);
             }
         }
+        _getInvalidDefined(datum) {
+            if (this.angleAxisHelper.isContinuous) {
+                if (!couldBeValidNumber(datum[this._angleField[0]])) {
+                    return false;
+                }
+            }
+            if (this.radiusAxisHelper.isContinuous) {
+                if (!couldBeValidNumber(datum[this._radiusField[0]])) {
+                    return false;
+                }
+            }
+            return true;
+        }
     }
 
     function transformInvalidValue(value) {
@@ -73451,9 +73579,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (position === 'inside') {
                         return mergeSpec({}, this._theme.innerLabel, label);
                     }
-                    else {
-                        return mergeSpec({}, this._theme.outerLabel, label);
-                    }
+                    return mergeSpec({}, this._theme.outerLabel, label);
                 };
                 if (isArray$3(newSpec.label)) {
                     newSpec.label = newSpec.label.map(label => getMergedLabelSpec(label.position, label));
@@ -73464,6 +73590,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return { spec: newSpec, theme };
         }
+        _getDefaultSpecFromChart(chartSpec) {
+            var _a;
+            const spec = (_a = super._getDefaultSpecFromChart(chartSpec)) !== null && _a !== void 0 ? _a : {};
+            const { centerX, centerY } = chartSpec;
+            if (isValid$3(centerX)) {
+                spec.centerX = centerX;
+            }
+            if (isValid$3(centerY)) {
+                spec.centerY = centerY;
+            }
+            return Object.keys(spec).length > 0 ? spec : undefined;
+        }
     }
 
     class BasePieSeries extends PolarSeries {
@@ -73489,21 +73627,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return { x: center.x + delta.x, y: center.y + delta.y };
             };
         }
-        get center() {
+        getCenter() {
             var _a, _b, _c, _d;
+            const { width, height } = this._region.getLayoutRect();
             return {
-                x: (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerX) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2,
-                y: (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.centerY) !== null && _d !== void 0 ? _d : this._region.getLayoutRect().height / 2
+                x: (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerX) !== null && _b !== void 0 ? _b : width / 2,
+                y: (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.centerY) !== null && _d !== void 0 ? _d : height / 2
             };
         }
         _buildMarkAttributeContext() {
             super._buildMarkAttributeContext();
-            this._markAttributeContext.getCenter = () => {
-                return {
-                    x: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2; },
-                    y: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().height / 2; }
-                };
-            };
+            this._markAttributeContext.getCenter = () => ({
+                x: () => this.getCenter().x,
+                y: () => this.getCenter().y
+            });
             this._markAttributeContext.startAngleScale = (datum) => this.startAngleScale(datum);
             this._markAttributeContext.endAngleScale = (datum) => this.endAngleScale(datum);
         }
@@ -73576,8 +73713,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const pieMark = this._pieMark;
             if (pieMark) {
                 this.setMarkStyle(pieMark, {
-                    x: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2; },
-                    y: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().height / 2; },
+                    x: () => this.getCenter().x,
+                    y: () => this.getCenter().y,
                     fill: this.getColorAttribute(),
                     outerRadius: isSpecValueWithScale(this._outerRadius)
                         ? this._outerRadius
@@ -73857,10 +73994,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             textMark.setSupport3d(true);
             params3d.beta = this._angle3d;
             params3d.anchor3d = (datum) => {
-                var _a, _b, _c, _d;
+                const { x, y } = this.getCenter();
                 const anchor = [
-                    (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2,
-                    (_d = (_c = this._center) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : this._region.getLayoutRect().height / 2
+                    x,
+                    y
                 ];
                 return anchor;
             };
@@ -74373,7 +74510,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', exports.AttributeLevel.Series);
                 if (this._invalidType !== 'zero') {
                     this.setMarkStyle(areaMark, {
-                        defined: this._getInvalidDefined,
+                        defined: this._getInvalidDefined.bind(this),
                         connectedType: this._getInvalidConnectType()
                     }, 'normal', exports.AttributeLevel.Series);
                 }
@@ -78607,7 +78744,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     y: (datum) => this._computeOuterLabelPosition(datum).y,
                     textAlign: (datum) => this._computeOuterLabelPosition(datum).align,
                     textBaseline: (datum) => this._computeOuterLabelPosition(datum).textBaseline,
-                    limit: (datum) => this._computeOuterLabelLimit(datum)
+                    maxLineWidth: (datum) => this._computeOuterLabelLimit(datum)
                 }, 'normal', exports.AttributeLevel.Series);
             }
             const outerLabelLineMark = this._funnelOuterLabelMark.line;
@@ -78975,10 +79112,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return type === 'text' && ((_a = attribute.data) === null || _a === void 0 ? void 0 : _a[categoryField]) === datum[categoryField];
             }, true)) === null || _c === void 0 ? void 0 : _c.AABBBounds;
             const funnelLabelWidth = funnelLabelBounds ? funnelLabelBounds.x2 - funnelLabelBounds.x1 : 0;
-            return (this.getLayoutRect().width / 2 -
-                Math.max(shapeMiddleWidth / 2, funnelLabelWidth / 2) -
-                FUNNEL_LABEL_LINE_LENGTH -
-                ((_e = (_d = this._spec.outerLabel) === null || _d === void 0 ? void 0 : _d.spaceWidth) !== null && _e !== void 0 ? _e : FUNNEL_LABEL_SPACE_WIDTH) * 2);
+            const outerLineSpace = this._funnelOuterLabelMark.line ? FUNNEL_LABEL_LINE_LENGTH : 0;
+            let space = this.getLayoutRect().width - Math.max(shapeMiddleWidth, funnelLabelWidth);
+            if (this._funnelAlign === 'center') {
+                space /= 2;
+            }
+            return space - outerLineSpace - ((_e = (_d = this._spec.outerLabel) === null || _d === void 0 ? void 0 : _d.spaceWidth) !== null && _e !== void 0 ? _e : FUNNEL_LABEL_SPACE_WIDTH);
         }
         _computeOuterLabelLinePosition(datum) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -90612,9 +90751,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _handleChange(start, end, updateComponent) {
             var _a, _b;
             const zoomLock = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.zoomLock) !== null && _b !== void 0 ? _b : false;
-            if (zoomLock) {
+            if (zoomLock || (end - start !== this._spanCache && (end - start < this._minSpan || end - start > this._maxSpan))) {
                 this._shouldChange = false;
             }
+            else {
+                this._shouldChange = true;
+            }
+            this._spanCache = end - start;
         }
         _isReverse() {
             const axis = this._relatedAxisComponent;
@@ -90704,7 +90847,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             axisScale.minBandwidth('auto');
                         }
                         this._updateRangeFactor(tag);
-                        (_b = (_a = this._component) === null || _a === void 0 ? void 0 : _a.setStartAndEnd) === null || _b === void 0 ? void 0 : _b.call(_a, this._start, this._end);
+                        if (this._auto) {
+                            (_b = (_a = this._component) === null || _a === void 0 ? void 0 : _a.setStartAndEnd) === null || _b === void 0 ? void 0 : _b.call(_a, this._start, this._end);
+                        }
                         axis.effect.scaleUpdate();
                     }
                     else {
@@ -91066,7 +91211,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._end = end;
             this._minSpan = (_a = this._spec.minSpan) !== null && _a !== void 0 ? _a : 0;
             this._maxSpan = (_b = this._spec.maxSpan) !== null && _b !== void 0 ? _b : 1;
-            if (isContinuous(this._stateScale.type) && this._stateScale.domain[0] !== this._stateScale.domain[1]) {
+            if (isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== this._stateScale.domain()[1]) {
                 if (this._spec.minValueSpan) {
                     this._minSpan = this._spec.minValueSpan / (this._stateScale.domain()[1] - this._stateScale.domain()[0]);
                 }
@@ -91862,6 +92007,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerComponent(ScrollBar.type, ScrollBar);
     };
 
+    var IFilterMode;
+    (function (IFilterMode) {
+        IFilterMode["filter"] = "filter";
+        IFilterMode["axis"] = "axis";
+    })(IFilterMode || (IFilterMode = {}));
+
     const indicatorMapper = (data, op) => {
         const { datum, title, content } = op;
         const mappedData = [];
@@ -96144,128 +96295,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         loadPoptip();
     };
 
-    const bracketReg = /\{([^}]+)\}/;
-    const bracketGReg = /\{([^}]+)\}/g;
-    const semicolonReg = /:/;
-    class FormatterPlugin extends BasePlugin {
-        constructor() {
-            super(FormatterPlugin.type);
-            this.type = 'formatterPlugin';
-            this._timeModeFormat = {
-                utc: TimeUtil.getInstance().timeUTCFormat,
-                local: TimeUtil.getInstance().timeFormat
-            };
-            this._formatter = this._format;
-            this._timeFormatter = this._timeModeFormat.local;
-            this._numericFormatter = NumberUtil.getInstance().format;
-            this._numericSpecifier = NumberUtil.getInstance().formatter;
-            this._numericFormatterCache = new Map();
-            this._isNumericFormatterCache = new Map();
-        }
-        onInit(service, chartSpec) {
-            var _a;
-            const { globalInstance } = service;
-            if (!globalInstance) {
-                return;
-            }
-            this._spec = (_a = chartSpec === null || chartSpec === void 0 ? void 0 : chartSpec[FormatterPlugin.specKey]) !== null && _a !== void 0 ? _a : {};
-            const { timeMode, customFormatter, numericFormatter, timeFormatter } = this._spec;
-            if (isFunction$1(customFormatter)) {
-                this._formatter = customFormatter;
-            }
-            else {
-                this._formatter = this._format.bind(this);
-                if (isFunction$1(timeFormatter)) {
-                    this._timeFormatter = timeFormatter;
-                }
-                else if (timeMode && this._timeModeFormat[timeMode]) {
-                    this._timeFormatter = this._timeModeFormat[timeMode];
-                }
-                if (numericFormatter) {
-                    this._numericFormatter = numericFormatter;
-                    this._numericSpecifier = null;
-                    this._numericFormatterCache = null;
-                }
-            }
-            Factory.registerFormatter(this._formatter);
-        }
-        _format(text, datum, formatter) {
-            if (isArray$3(text)) {
-                return text.map((t, i) => {
-                    const f = isArray$3(formatter) ? formatter[i] : formatter;
-                    return f ? this._formatSingleLine(t, datum, f) : t;
-                });
-            }
-            if (isArray$3(formatter)) {
-                return formatter.map(f => this._formatSingleLine(text, datum, f));
-            }
-            return this._formatSingleLine(text, datum, formatter);
-        }
-        _formatSingleLine(text, datum, formatter) {
-            let isTemplate;
-            if (this._isNumericFormatterCache) {
-                if (this._isNumericFormatterCache.get(formatter)) {
-                    isTemplate = this._isNumericFormatterCache.get(formatter);
-                }
-                else {
-                    isTemplate = bracketReg.test(formatter);
-                    this._isNumericFormatterCache.set(formatter, isTemplate);
-                }
-            }
-            if (isTemplate) {
-                const result = formatter.replace(bracketGReg, (match, key) => {
-                    const hasFormatter = semicolonReg.test(key);
-                    if (!hasFormatter) {
-                        const value = datum[key.trim()];
-                        return typeof value !== 'undefined' ? value : match;
-                    }
-                    const parts = key.split(':');
-                    const value = datum[parts.shift()];
-                    const valueFormatter = parts.join(':');
-                    return this._formatSingleText(value, valueFormatter);
-                });
-                return result;
-            }
-            return this._formatSingleText(text, formatter);
-        }
-        _formatSingleText(text, formatter) {
-            const isNumeric = numberSpecifierReg.test(formatter);
-            if (isNumeric && this._numericFormatter) {
-                let numericFormat;
-                if (this._numericFormatterCache && this._numericSpecifier) {
-                    if (this._numericFormatterCache.get(formatter)) {
-                        numericFormat = this._numericFormatterCache.get(formatter);
-                    }
-                    else {
-                        numericFormat = this._numericSpecifier(formatter);
-                        this._numericFormatterCache.set(formatter, numericFormat);
-                    }
-                    return numericFormat(Number(text));
-                }
-                return this._numericFormatter(formatter, Number(text));
-            }
-            else if (formatter.includes('%') && this._timeFormatter) {
-                return this._timeFormatter(formatter, text);
-            }
-            return text;
-        }
-        release() {
-            super.release();
-            this._format = null;
-            this._timeFormatter = null;
-            this._numericFormatter = null;
-            this._numericSpecifier = null;
-            this._numericFormatterCache = null;
-            this._isNumericFormatterCache = null;
-        }
-    }
-    FormatterPlugin.pluginType = 'chart';
-    FormatterPlugin.specKey = 'formatter';
-    FormatterPlugin.type = 'formatterPlugin';
-    const registerFormatPlugin = () => {
-        registerChartPlugin(FormatterPlugin);
-    };
-
     VChart.useRegisters([
         registerLineChart,
         registerAreaChart,
@@ -96817,6 +96846,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.DotSeries = DotSeries;
     exports.Event = Event$1;
     exports.Factory = Factory;
+    exports.FormatterPlugin = FormatterPlugin;
     exports.Funnel3dChart = Funnel3dChart;
     exports.Funnel3dSeries = Funnel3dSeries;
     exports.FunnelChart = FunnelChart;
@@ -96972,6 +97002,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.registerDiscreteLegend = registerDiscreteLegend;
     exports.registerDomTooltipHandler = registerDomTooltipHandler;
     exports.registerDotSeries = registerDotSeries;
+    exports.registerFormatPlugin = registerFormatPlugin;
     exports.registerFunnel3dChart = registerFunnel3dChart;
     exports.registerFunnel3dSeries = registerFunnel3dSeries;
     exports.registerFunnelChart = registerFunnelChart;