@visactor/vchart 2.1.3-alpha.5 → 2.1.4-alpha.0

package/build/index.es.js

@@ -70,7 +70,7 @@ import { linearDiscreteTicks } from '@visactor/vrender-components/axis/tick-data
 import { LineAxisGrid } from '@visactor/vrender-components/axis/grid/line';
 import { LineAxis } from '@visactor/vrender-components/axis/line';
 import { continuousTicks } from '@visactor/vrender-components/axis/tick-data/continuous';
-import { continuousTicks as continuousTicks$1, LineAxis as LineAxis$1, LineAxisGrid as LineAxisGrid$1, CircleAxis, CircleAxisGrid, polarAngleAxisDiscreteTicks, registerSymbolDataLabel as registerSymbolDataLabel$1, labelSmartInvert, loadScrollbar, ColorContinuousLegend, SizeContinuousLegend, LineCrosshair as LineCrosshair$1, SectorCrosshair, PolygonCrosshair, CircleCrosshair, DataZoom as DataZoom$1, ScrollBar as ScrollBar$1, Indicator as Indicator$1, MarkLine, registerMarkLineAnimate, MarkArcLine, registerMarkArcLineAnimate, Title as Title$1, MarkArea, registerMarkAreaAnimate, MarkArcArea, registerMarkArcAreaAnimate, DiscretePlayer, ContinuousPlayer, PlayerEventEnum, DataLabel as DataLabel$1, MarkPoint, registerMarkPointAnimate, Brush as Brush$1, IOperateType, loadPoptip } from '@visactor/vrender-components';
+import { continuousTicks as continuousTicks$1, LineAxis as LineAxis$1, LineAxisGrid as LineAxisGrid$1, CircleAxis, CircleAxisGrid, polarAngleAxisDiscreteTicks, registerSymbolDataLabel as registerSymbolDataLabel$1, labelSmartInvert, loadScrollbar, ColorContinuousLegend, SizeContinuousLegend, LineCrosshair as LineCrosshair$1, SectorCrosshair, PolygonCrosshair, CircleCrosshair, DataZoom as DataZoom$1, ScrollBar as ScrollBar$1, Indicator as Indicator$1, MarkLine, registerMarkLineAnimate, MarkArcLine, registerMarkArcLineAnimate, Title as Title$1, MarkArea, registerMarkAreaAnimate, MarkArcArea, registerMarkArcAreaAnimate, DiscretePlayer, ContinuousPlayer, PlayerEventEnum, DataLabel as DataLabel$1, MarkPoint, registerMarkPointAnimate, Brush as Brush$1, IOperateType } from '@visactor/vrender-components';
 export { AbstractComponent, MarkPoint, Segment } from '@visactor/vrender-components';
 import { registerRectDataLabel, registerArcDataLabel, DataLabel } from '@visactor/vrender-components/label';
 import { getTextBounds, getRichTextBounds } from '@visactor/vrender-core/text';
@@ -79,6 +79,7 @@ import { DiscreteLegend as DiscreteLegend$1 } from '@visactor/vrender-components
 import { LineCrosshair } from '@visactor/vrender-components/crosshair/line';
 import { RectCrosshair } from '@visactor/vrender-components/crosshair/rect';
 import { Tag } from '@visactor/vrender-components/tag';
+import { installPoptipToApp, loadPoptip } from '@visactor/vrender-components/poptip';
 import { Symbol as Symbol$1 } from '@visactor/vrender-core/graphic/symbol';
 import { GradientParser } from '@visactor/vrender-core/svg';
 import { Tooltip as Tooltip$1 } from '@visactor/vrender-components/tooltip';
@@ -11397,6 +11398,13 @@ Factory.createTooltipProcessor = (type, tooltip) => {
     }
     return new Cror(tooltip);
 };
+Factory._runtimePluginInstallers = factoryRegistry.runtimePluginInstallers;
+Factory.registerRuntimePluginInstaller = (type, installer) => {
+    Factory._runtimePluginInstallers[type] = installer;
+};
+Factory.getRuntimePluginInstaller = (type) => {
+    return Factory._runtimePluginInstallers[type];
+};
 
 function mergeTheme(target, ...sources) {
     return mergeSpec(transformThemeToMerge(target), ...sources.map(transformThemeToMerge));
@@ -11461,6 +11469,24 @@ const getFunnelTheme = (is3d) => {
                 fill: { type: 'palette', key: 'secondaryFontColor' },
                 textBaseline: 'middle'
             }
+        },
+        conversionArrow: {
+            line: {
+                style: {
+                    stroke: 'black'
+                }
+            },
+            symbol: {
+                style: {
+                    fill: 'black'
+                }
+            },
+            text: {
+                style: {
+                    fontSize: 12,
+                    fill: '#606773'
+                }
+            }
         }
     };
     res[is3d ? 'transform3d' : 'transform'] = {
@@ -11639,27 +11665,27 @@ function specTransform(spec, special = {
     }
     return spec;
 }
-function functionTransform(spec, VChart) {
-    if (!spec) {
-        return spec;
+function functionTransform(value, registry) {
+    var _a;
+    if (!value) {
+        return value;
     }
-    if (isPlainObject$1(spec)) {
+    if (isString$1(value)) {
+        return (_a = registry.getFunction(value)) !== null && _a !== void 0 ? _a : value;
+    }
+    if (isPlainObject$1(value)) {
         const result = {};
-        for (const key in spec) {
-            if (Object.prototype.hasOwnProperty.call(spec, key)) {
-                if (isString$1(spec[key]) && VChart.getFunction(spec[key])) {
-                    result[key] = VChart.getFunction(spec[key]);
-                    continue;
-                }
-                result[key] = functionTransform(spec[key], VChart);
+        for (const key in value) {
+            if (Object.prototype.hasOwnProperty.call(value, key)) {
+                result[key] = functionTransform(value[key], registry);
             }
         }
         return result;
     }
-    if (isArray$1(spec)) {
-        return spec.map((s) => functionTransform(s, VChart));
+    if (isArray$1(value)) {
+        return value.map(item => functionTransform(item, registry));
     }
-    return spec;
+    return value;
 }
 function transformFunctionAttribute(att, ...args) {
     if (isFunction$1(att)) {
@@ -13394,6 +13420,7 @@ const resolveVRenderApp = (appOrOptions, mode) => {
 };
 const createStageFromApp = (app, params) => app.createStage(params);
 
+const POPTIP_FOR_TEXT_PLUGIN_NAME = 'poptipForText';
 class Compiler {
     get stateAnimationConfig() {
         return this._stateAnimationConfig;
@@ -13458,8 +13485,36 @@ class Compiler {
     getStage() {
         return this._stage;
     }
+    _dedupeStagePlugin(pluginName) {
+        var _a;
+        const pluginService = (_a = this._stage) === null || _a === void 0 ? void 0 : _a.pluginService;
+        if (!(pluginService === null || pluginService === void 0 ? void 0 : pluginService.findPluginsByName)) {
+            return;
+        }
+        const plugins = pluginService.findPluginsByName(pluginName);
+        if (plugins.length <= 1) {
+            return;
+        }
+        const plugin = plugins[0];
+        if (pluginService.uninstall) {
+            pluginService.uninstall(pluginName);
+            pluginService.register(plugin);
+        }
+        else {
+            plugins.slice(1).forEach(duplicatePlugin => {
+                pluginService.unRegister(duplicatePlugin);
+            });
+        }
+    }
+    _dedupePoptipPlugin() {
+        var _a;
+        if (!((_a = this._option.pluginList) === null || _a === void 0 ? void 0 : _a.includes(POPTIP_FOR_TEXT_PLUGIN_NAME))) {
+            return;
+        }
+        this._dedupeStagePlugin(POPTIP_FOR_TEXT_PLUGIN_NAME);
+    }
     initView() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (this._released) {
             return;
         }
@@ -13481,22 +13536,24 @@ class Compiler {
                 modeParams
             });
             this._releaseVRenderAppRef = resolvedApp.releaseAppRef;
+            (_a = this._option.runtimePluginInstallers) === null || _a === void 0 ? void 0 : _a.forEach(install => install(resolvedApp.app));
             try {
-                this._stage = createStageFromApp(resolvedApp.app, Object.assign({ background, width: this._width, height: this._height, container: (_a = this._container.dom) !== null && _a !== void 0 ? _a : null, canvas: (_b = this._container.canvas) !== null && _b !== void 0 ? _b : null, dpr, viewBox: this._option.viewBox, canvasControled: this._option.canvasControled, beforeRender: (stage) => {
+                this._stage = createStageFromApp(resolvedApp.app, Object.assign({ background, width: this._width, height: this._height, container: (_b = this._container.dom) !== null && _b !== void 0 ? _b : null, canvas: (_c = this._container.canvas) !== null && _c !== void 0 ? _c : null, dpr, viewBox: this._option.viewBox, canvasControled: this._option.canvasControled, beforeRender: (stage) => {
                         var _a, _b, _c;
                         (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.onBeforeRender();
                         (_c = (_b = this._option).beforeRender) === null || _c === void 0 ? void 0 : _c.call(_b, stage);
                     }, afterRender: this._option.afterRender, disableDirtyBounds: true, autoRender: true, ticker: this._option.ticker, pluginList: this._option.pluginList, enableHtmlAttribute: this._option.enableHtmlAttribute, optimize: this._option.optimize, supportsTouchEvents: this._option.supportsTouchEvents, supportsPointerEvents: this._option.supportsPointerEvents, event: {
                         clickInterval: clickInterval,
                         autoPreventDefault: autoPreventDefault
-                    }, ReactDOM: this._option.ReactDOM, autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr) }, ((_c = this._option.renderHooks) !== null && _c !== void 0 ? _c : {})));
+                    }, ReactDOM: this._option.ReactDOM, autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr) }, ((_d = this._option.renderHooks) !== null && _d !== void 0 ? _d : {})));
             }
             catch (error) {
-                (_d = this._releaseVRenderAppRef) === null || _d === void 0 ? void 0 : _d.call(this);
+                (_e = this._releaseVRenderAppRef) === null || _e === void 0 ? void 0 : _e.call(this);
                 this._releaseVRenderAppRef = undefined;
                 throw error;
             }
         }
+        this._dedupePoptipPlugin();
         this._stage.enableIncrementalAutoRender();
         this._stage.setTheme({
             symbol: {
@@ -19386,6 +19443,7 @@ class VChart {
             }
             let theme = this._currentTheme;
             keys.forEach((key, index) => {
+                var _a;
                 if (index === 1 && (keys[0] === 'series' || keys[0] === 'component')) {
                     const buildInTheme = keys[0] === 'series' ? Factory.getSeriesBuiltInTheme(key) : Factory.getComponentBuiltInTheme(key);
                     theme = theme ? mergeSpec({}, buildInTheme, theme[key]) : buildInTheme;
@@ -19397,6 +19455,9 @@ class VChart {
                     theme = preprocessTheme({
                         [key]: theme
                     }, this._currentTheme.colorScheme, this._currentTheme.token)[key];
+                    if ((_a = this.getFunctionList()) === null || _a === void 0 ? void 0 : _a.length) {
+                        theme = functionTransform(theme, this);
+                    }
                 }
             });
             this._cachedProcessedTheme[cacheKey] = theme;
@@ -19435,7 +19496,13 @@ class VChart {
         this._updateCurrentTheme();
         this._currentSize = this.getCurrentSize();
         const pluginList = [];
+        const runtimePluginInstallers = [];
         if (poptip !== false) {
+            const poptipInstaller = Factory.getRuntimePluginInstaller('poptipForText');
+            if (poptipInstaller) {
+                poptipInstaller();
+                runtimePluginInstallers.push(poptipInstaller);
+            }
             pluginList.push('poptipForText');
         }
         if (spec.type === "sankey") {
@@ -19453,7 +19520,8 @@ class VChart {
             dom: (_e = this._container) !== null && _e !== void 0 ? _e : 'none',
             canvas: renderCanvas
         }, Object.assign(Object.assign({ mode: this._option.mode, stage,
-            pluginList }, restOptions), { background: this._getBackground(), onError: this._onError }));
+            pluginList,
+            runtimePluginInstallers }, restOptions), { background: this._getBackground(), onError: this._onError }));
         this._compiler.setSize(this._currentSize.width, this._currentSize.height);
         this._eventDispatcher = new EventDispatcher(this, this._compiler);
         this._event = new Event(this._eventDispatcher, mode);
@@ -19461,7 +19529,7 @@ class VChart {
         this._compiler.updateLayoutTag();
         this._setFontFamilyTheme(this.getTheme('fontFamily'));
         this._initDataSet(this._option.dataSet);
-        this._autoSize = isTrueBrowseEnv ? (_g = (_f = spec.autoFit) !== null && _f !== void 0 ? _f : this._option.autoFit) !== null && _g !== void 0 ? _g : true : false;
+        this._autoSize = isTrueBrowseEnv ? ((_g = (_f = spec.autoFit) !== null && _f !== void 0 ? _f : this._option.autoFit) !== null && _g !== void 0 ? _g : true) : false;
         this._bindResizeEvent();
         this._bindViewEvent();
         this._initChartPlugin();
@@ -20148,7 +20216,7 @@ class VChart {
             resize = true;
         }
         const lasAutoSize = this._autoSize;
-        this._autoSize = isTrueBrowser(this._option.mode) ? (_b = (_a = this._spec.autoFit) !== null && _a !== void 0 ? _a : this._option.autoFit) !== null && _b !== void 0 ? _b : true : false;
+        this._autoSize = isTrueBrowser(this._option.mode) ? ((_b = (_a = this._spec.autoFit) !== null && _a !== void 0 ? _a : this._option.autoFit) !== null && _b !== void 0 ? _b : true) : false;
         if (this._autoSize !== lasAutoSize) {
             resize = true;
         }
@@ -20744,7 +20812,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.1.1";
+const version = "2.1.3";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -22538,6 +22606,7 @@ class BaseSeries extends BaseModel {
             this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
         });
         this.initMarkStyle();
+        this.initMarkState();
         marks.forEach(mark => {
             mark.commit(false);
         });
@@ -25251,6 +25320,9 @@ class ComponentMark extends BaseMark {
         }
         else {
             this._component.setAttributes(attrs);
+            if (this._product && this._component.parent !== this._product) {
+                this._product.appendChild(this._component);
+            }
         }
         if (this._component) {
             this._component.context = this._getCommonContext();
@@ -25976,6 +26048,9 @@ class CartesianAxis extends AxisComponent {
                 });
             }
         };
+        this._clearContinuousBarBandwidthCache = () => {
+            this._continuousBarBandwidthCache = undefined;
+        };
         this._transformLayoutPosition = (pos) => {
             let { x, y } = pos;
             if (isValidNumber$1(x)) {
@@ -26266,16 +26341,99 @@ class CartesianAxis extends AxisComponent {
         const getScale = (depth = 0) => {
             return this._scales[depth];
         };
+        const getBandwidth = (depth = 0) => {
+            return this._getContinuousBarBandwidth(depth);
+        };
         return {
             isContinuous: isContinuous(this._scale.type),
             dataToPosition: this.dataToPosition.bind(this),
             getScale,
+            getBandwidth,
             getAxisType: () => this.type,
             getAxisId: () => this.id,
             isInverse: () => this._inverse === true,
             getSpec: () => this._spec
         };
     }
+    _getContinuousBarBandwidth(depth = 0) {
+        if (depth !== 0 || !isContinuous(this._scale.type)) {
+            return undefined;
+        }
+        const scale = this._scales[0];
+        const domain = scale.domain();
+        const range = scale.range();
+        const domainStart = +(domain === null || domain === void 0 ? void 0 : domain[0]);
+        const domainEnd = +(domain === null || domain === void 0 ? void 0 : domain[domain.length - 1]);
+        const rangeStart = +(range === null || range === void 0 ? void 0 : range[0]);
+        const rangeEnd = +(range === null || range === void 0 ? void 0 : range[range.length - 1]);
+        if (!Number.isFinite(domainStart) ||
+            !Number.isFinite(domainEnd) ||
+            !Number.isFinite(rangeStart) ||
+            !Number.isFinite(rangeEnd) ||
+            domainStart === domainEnd) {
+            return undefined;
+        }
+        const cache = this._continuousBarBandwidthCache;
+        if (cache &&
+            cache.scale === scale &&
+            cache.domainStart === domainStart &&
+            cache.domainEnd === domainEnd &&
+            cache.rangeStart === rangeStart &&
+            cache.rangeEnd === rangeEnd) {
+            return cache.bandWidth;
+        }
+        const valueSet = new Set();
+        const orient = this.getOrient();
+        eachSeries(this._regions, s => {
+            var _a, _b, _c, _d;
+            if (s.type !== SeriesTypeEnum.bar) {
+                return;
+            }
+            const barSeries = s;
+            const field = isXAxis(orient) && barSeries.direction === "vertical"
+                ? barSeries.fieldX[0]
+                : isYAxis(orient) && barSeries.direction === "horizontal"
+                    ? barSeries.fieldY[0]
+                    : undefined;
+            const values = (field ? (_d = (_c = (_b = (_a = s.getViewDataStatistics) === null || _a === void 0 ? void 0 : _a.call(s)) === null || _b === void 0 ? void 0 : _b.latestData) === null || _c === void 0 ? void 0 : _c[field]) === null || _d === void 0 ? void 0 : _d.values : undefined);
+            values === null || values === void 0 ? void 0 : values.forEach(value => {
+                const numericValue = +value;
+                if (Number.isFinite(numericValue)) {
+                    valueSet.add(numericValue);
+                }
+            });
+        }, {
+            userId: this._seriesUserId,
+            specIndex: this._seriesIndex
+        });
+        const values = Array.from(valueSet).sort((a, b) => a - b);
+        if (values.length < 2) {
+            return undefined;
+        }
+        let minStep = Infinity;
+        let lastValue = values[0];
+        for (let i = 1; i < values.length; i++) {
+            const value = values[i];
+            const step = value - lastValue;
+            if (step > 0 && step < minStep) {
+                minStep = step;
+            }
+            lastValue = value;
+        }
+        const bandWidth = minStep < Infinity ? Math.abs(((rangeEnd - rangeStart) / (domainEnd - domainStart)) * minStep) : undefined;
+        if (!Number.isFinite(bandWidth)) {
+            return undefined;
+        }
+        this._continuousBarBandwidthCache = {
+            scale,
+            domainStart,
+            domainEnd,
+            rangeStart,
+            rangeEnd,
+            bandWidth
+        };
+        return bandWidth;
+    }
     afterCompile() {
         var _a;
         const product = (_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.getProduct();
@@ -26537,6 +26695,13 @@ class CartesianAxis extends AxisComponent {
     }
     initEvent() {
         super.initEvent();
+        eachSeries(this._regions, s => {
+            var _a, _b;
+            (_b = (_a = s.getViewDataStatistics) === null || _a === void 0 ? void 0 : _a.call(s)) === null || _b === void 0 ? void 0 : _b.target.addListener('change', this._clearContinuousBarBandwidthCache);
+        }, {
+            userId: this._seriesUserId,
+            specIndex: this._seriesIndex
+        });
         if (this._specVisible) {
             this.event.on(ChartEvent.layoutEnd, this._updateAxisLayout);
             this.event.on(ChartEvent.layoutEnd, this._fixAxisOnZero);
@@ -28547,11 +28712,28 @@ class Interaction {
     getStatedGraphics(trigger) {
         return this._stateGraphicsByTrigger.get(trigger);
     }
+    _getMarkById(trigger) {
+        const markById = new Map();
+        trigger.getMarks().forEach(mark => {
+            if (mark) {
+                markById.set(mark.id, mark);
+            }
+        });
+        return markById;
+    }
+    _hasAnimationByGraphicState(graphic, markById) {
+        var _a, _b, _c;
+        const mark = (_b = (_a = graphic.parent) === null || _a === void 0 ? void 0 : _a.mark) !== null && _b !== void 0 ? _b : markById.get(graphic.context.markId);
+        return !!((_c = mark === null || mark === void 0 ? void 0 : mark.hasAnimationByState) === null || _c === void 0 ? void 0 : _c.call(mark, 'state'));
+    }
     updateStates(trigger, newStatedGraphics, prevStatedGraphics, state, reverseState) {
         if (this._disableTriggerEvent) {
             return [];
         }
         if (!newStatedGraphics || !newStatedGraphics.length) {
+            if (prevStatedGraphics && prevStatedGraphics.length) {
+                this.clearAllStatesOfTrigger(trigger, state, reverseState);
+            }
             return [];
         }
         if (state && reverseState) {
@@ -28575,42 +28757,36 @@ class Interaction {
     }
     toggleReverseStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, reverseState) {
         const markIdByState = trigger.getMarkIdByState();
+        const markById = this._getMarkById(trigger);
         prevStatedGraphics.forEach(g => {
-            var _a;
             const hasReverse = reverseState && markIdByState[reverseState] && markIdByState[reverseState].includes(g.context.markId);
             if (hasReverse) {
-                const m = (_a = g.parent) === null || _a === void 0 ? void 0 : _a.mark;
-                const hasAnimation = m.hasAnimationByState && m.hasAnimationByState('state');
+                const hasAnimation = this._hasAnimationByGraphicState(g, markById);
                 addGraphicState(g, reverseState, true, hasAnimation);
             }
         });
         newStatedGraphics.forEach(g => {
-            var _a;
             const hasReverse = reverseState && markIdByState[reverseState] && markIdByState[reverseState].includes(g.context.markId);
             if (hasReverse) {
-                const m = (_a = g.parent) === null || _a === void 0 ? void 0 : _a.mark;
-                const hasAnimation = m.hasAnimationByState && m.hasAnimationByState('state');
+                const hasAnimation = this._hasAnimationByGraphicState(g, markById);
                 removeGraphicState(g, reverseState, hasAnimation);
             }
         });
     }
     toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state) {
         const markIdByState = trigger.getMarkIdByState();
+        const markById = this._getMarkById(trigger);
         prevStatedGraphics.forEach(g => {
-            var _a;
             const hasState = state && markIdByState[state] && markIdByState[state].includes(g.context.markId);
             if (hasState) {
-                const m = (_a = g.parent) === null || _a === void 0 ? void 0 : _a.mark;
-                const hasAnimation = m.hasAnimationByState && m.hasAnimationByState('state');
+                const hasAnimation = this._hasAnimationByGraphicState(g, markById);
                 removeGraphicState(g, state, hasAnimation);
             }
         });
         newStatedGraphics.forEach(g => {
-            var _a;
             const hasState = state && markIdByState[state] && markIdByState[state].includes(g.context.markId);
             if (hasState) {
-                const m = (_a = g.parent) === null || _a === void 0 ? void 0 : _a.mark;
-                const hasAnimation = m.hasAnimationByState && m.hasAnimationByState('state');
+                const hasAnimation = this._hasAnimationByGraphicState(g, markById);
                 addGraphicState(g, state, true, hasAnimation);
             }
         });
@@ -32444,6 +32620,27 @@ class BarSeries extends CartesianSeries {
         const policy = super._getSpecUpdatePolicy();
         return Object.assign(Object.assign({}, policy), { compileOnlyKeys: Object.assign(Object.assign({}, policy.compileOnlyKeys), BAR_SERIES_COMPILE_ONLY_KEYS) });
     }
+    getStatisticFields() {
+        var _a;
+        const fields = super.getStatisticFields();
+        const positionAxisHelper = this.direction === "horizontal" ? this.getYAxisHelper() : this.getXAxisHelper();
+        const positionFields = this.direction === "horizontal" ? this._fieldY : this._fieldX;
+        const positionScale = (_a = positionAxisHelper === null || positionAxisHelper === void 0 ? void 0 : positionAxisHelper.getScale) === null || _a === void 0 ? void 0 : _a.call(positionAxisHelper, 0);
+        if (positionScale && isContinuous(positionScale.type)) {
+            positionFields.forEach(field => {
+                const fieldStatistics = fields.find(entry => entry.key === field);
+                if (fieldStatistics) {
+                    if (!fieldStatistics.operations.includes('values')) {
+                        fieldStatistics.operations.push('values');
+                    }
+                }
+                else {
+                    fields.push({ key: field, operations: ['values'] });
+                }
+            });
+        }
+        return fields;
+    }
     initMark() {
         this._initBarBackgroundMark();
         this._barMark = this._createMark(Object.assign(Object.assign({}, BarSeries.mark.bar), { name: this._barMarkName, type: this._barMarkType }), {
@@ -32880,14 +33077,19 @@ class BarSeries extends CartesianSeries {
         this._barMark.setAnimationConfig(animationConfig((_b = Factory.getAnimationInKey('bar')) === null || _b === void 0 ? void 0 : _b(barAnimationParams, appearPreset), userAnimationConfig(this._barMarkName, this._spec, this._markAttributeContext), animationParams));
     }
     _getBarWidth(axisHelper, scaleDepth) {
-        var _a, _b;
+        var _a;
         const depthFromSpec = this._groups ? this._groups.fields.length : 1;
         const depth = isNil$1(scaleDepth) ? depthFromSpec : Math.min(depthFromSpec, scaleDepth);
-        const bandWidth = (_b = (_a = axisHelper.getBandwidth) === null || _a === void 0 ? void 0 : _a.call(axisHelper, depth - 1)) !== null && _b !== void 0 ? _b : DefaultBandWidth$2;
         const hasBarWidth = isValid$1(this._spec.barWidth) && depth === depthFromSpec;
+        const useFixedWidth = hasBarWidth &&
+            typeof this._spec.barWidth === 'number' &&
+            typeof this._spec.barMinWidth !== 'string' &&
+            typeof this._spec.barMaxWidth !== 'string';
+        const axisBandWidth = useFixedWidth ? undefined : (_a = axisHelper.getBandwidth) === null || _a === void 0 ? void 0 : _a.call(axisHelper, depth - 1);
+        const bandWidth = axisBandWidth !== null && axisBandWidth !== void 0 ? axisBandWidth : DefaultBandWidth$2;
         const hasBarMinWidth = isValid$1(this._spec.barMinWidth);
         const hasBarMaxWidth = isValid$1(this._spec.barMaxWidth);
-        let width = bandWidth;
+        let width = axisHelper.isContinuous && !isNil$1(axisBandWidth) && !hasBarWidth ? bandWidth * 0.5 : bandWidth;
         if (hasBarWidth) {
             width = getActualNumValue(this._spec.barWidth, bandWidth);
         }
@@ -32900,7 +33102,7 @@ class BarSeries extends CartesianSeries {
         return width;
     }
     _getPosition(direction, datum, scaleDepth, mark) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         let axisHelper;
         let sizeAttribute;
         let dataToPosition;
@@ -32945,7 +33147,7 @@ class BarSeries extends CartesianSeries {
                     totalWidth += totalWidth + (groupCount - 1) * gap;
                 }
             }
-            const center = scale.scale(datum[groupFields[0]]) + axisHelper.getBandwidth(0) / 2;
+            const center = scale.scale(datum[groupFields[0]]) + ((_f = axisHelper.getBandwidth(0)) !== null && _f !== void 0 ? _f : bandWidth) / 2;
             return center - totalWidth / 2 + offSet;
         }
         const continuous = isContinuous(scale.type || 'band');
@@ -36098,7 +36300,7 @@ const GLYPH_STATE_ATTRIBUTE_UPDATE_TYPE = 2;
 class GlyphMark extends BaseMark {
     constructor() {
         super(...arguments);
-        this._setStateOfGraphic = (g) => {
+        this._setStateOfGraphic = (g, hasAnimation) => {
             g.clearStates();
             if (g.context.diffState === DiffState.enter || g.context.diffState === DiffState.update) {
                 g.glyphStateProxy = (stateName, nexStates) => {
@@ -36114,7 +36316,7 @@ class GlyphMark extends BaseMark {
                     }
                     return glyphAttrs;
                 };
-                g.useStates(g.context.states);
+                g.useStates(g.context.states, hasAnimation);
             }
         };
     }
@@ -36193,12 +36395,13 @@ class GlyphMark extends BaseMark {
     _createGraphic(attrs = {}) {
         const glyph = createGlyph(attrs);
         glyph.onBeforeAttributeUpdate = this._onGlyphAttributeUpdate(glyph);
-        glyph.addEventListener('afterAttributeUpdate', (event) => {
-            var _a;
-            if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.type) === GLYPH_STATE_ATTRIBUTE_UPDATE_TYPE) {
+        const onAttributeUpdate = glyph.onAttributeUpdate.bind(glyph);
+        glyph.onAttributeUpdate = (context) => {
+            onAttributeUpdate(context);
+            if ((context === null || context === void 0 ? void 0 : context.type) === GLYPH_STATE_ATTRIBUTE_UPDATE_TYPE) {
                 this._syncInheritedStyleAttrs(glyph, glyph.attribute);
             }
-        });
+        };
         const subMarks = this._subMarks;
         if (subMarks) {
             const subGraphics = [];
@@ -47176,14 +47379,26 @@ const funnel = (originData, op) => {
     if (!data || data.length === 0) {
         return data;
     }
-    const { asTransformRatio, asReachRatio, asHeightRatio, asValueRatio, asNextValueRatio, asLastValueRatio, asLastValue, asCurrentValue, asNextValue, } = op;
+    const { asTransformRatio, asReachRatio, asHeightRatio, asValueRatio, asNextValueRatio, asLastValueRatio, asLastValue, asCurrentValue, asNextValue } = op;
     const valueField = resolveOptionValue$2(op.valueField);
     const heightVisual = (_a = resolveOptionValue$2(op.heightVisual)) !== null && _a !== void 0 ? _a : false;
     const isCone = (_b = resolveOptionValue$2(op.isCone)) !== null && _b !== void 0 ? _b : true;
     const range = resolveOptionValue$2(op.range);
-    const max = data.reduce((m, d) => Math.max(m, Number.parseFloat(d[valueField]) || -Infinity), -Infinity);
-    const min = data.reduce((m, d) => Math.min(m, Number.parseFloat(d[valueField]) || Infinity), Infinity);
-    const rangeArr = [(_c = range === null || range === void 0 ? void 0 : range.min) !== null && _c !== void 0 ? _c : min, (_d = range === null || range === void 0 ? void 0 : range.max) !== null && _d !== void 0 ? _d : max];
+    const max = data.reduce((m, d) => {
+        const value = Number.parseFloat(d[valueField]);
+        return isValidNumber$1(value) ? Math.max(m, value) : m;
+    }, -Infinity);
+    const rangeMin = (_c = range === null || range === void 0 ? void 0 : range.min) !== null && _c !== void 0 ? _c : 0;
+    const rangeMax = (_d = range === null || range === void 0 ? void 0 : range.max) !== null && _d !== void 0 ? _d : max;
+    const getValueRatio = (value) => {
+        if (!isValidNumber$1(value) || !isValidNumber$1(rangeMin) || !isValidNumber$1(rangeMax)) {
+            return 0;
+        }
+        if (rangeMin === rangeMax) {
+            return value < rangeMin ? 0 : 1;
+        }
+        return clamp$1((value - rangeMin) / (rangeMax - rangeMin), 0, 1);
+    };
     data.forEach((d, i) => {
         var _a, _b;
         const currentValue = Number.parseFloat(d[valueField]);
@@ -47191,15 +47406,16 @@ const funnel = (originData, op) => {
         const nextValue = Number.parseFloat((_b = data[i + 1]) === null || _b === void 0 ? void 0 : _b[valueField]);
         const transformRatio = !isValidNumber$1(nextValue * currentValue) || currentValue === 0 ? 0 : nextValue / currentValue;
         const reachRatio = !isValidNumber$1(currentValue * lastValue) || lastValue === 0 ? 0 : currentValue / lastValue;
+        const valueRatio = getValueRatio(currentValue);
         asLastValue && (d[asLastValue] = lastValue);
         asNextValue && (d[asNextValue] = nextValue);
         asTransformRatio && (d[asTransformRatio] = transformRatio);
         asReachRatio && (d[asReachRatio] = i === 0 ? 1 : reachRatio);
         asHeightRatio && (d[asHeightRatio] = heightVisual === true ? transformRatio : 1 / data.length);
-        asValueRatio && (d[asValueRatio] = currentValue / rangeArr[1]);
+        asValueRatio && (d[asValueRatio] = valueRatio);
         asNextValueRatio &&
-            (d[asNextValueRatio] = i === data.length - 1 ? (isCone ? 0 : d[asValueRatio]) : nextValue / rangeArr[1]);
-        asLastValueRatio && (d[asLastValueRatio] = i === 0 ? 1 : lastValue / rangeArr[1]);
+            (d[asNextValueRatio] = i === data.length - 1 ? (isCone ? 0 : d[asValueRatio]) : getValueRatio(nextValue));
+        asLastValueRatio && (d[asLastValueRatio] = i === 0 ? 1 : getValueRatio(lastValue));
         asCurrentValue && (d[asCurrentValue] = currentValue);
     });
     return data;
@@ -49390,18 +49606,18 @@ class SankeySeries extends CartesianSeries {
                             highlightNodes.push(linkDatum.target);
                         }
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                        addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasLinkStateAnimation());
                     }
                     else if (linkDatum.target === nodeDatum.key) {
                         if (!highlightNodes.includes(linkDatum.source)) {
                             highlightNodes.push(linkDatum.source);
                         }
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                        addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasLinkStateAnimation());
                     }
                     else {
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                        addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                     }
                 });
             }
@@ -49421,11 +49637,11 @@ class SankeySeries extends CartesianSeries {
                 allLinkElements.forEach(linkEl => {
                     if (linkEl === graphic) {
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 }, true, this._hasLinkStateAnimation());
                     }
                     else {
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                        addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                     }
                 });
             }
@@ -49539,11 +49755,11 @@ class SankeySeries extends CartesianSeries {
                         const linkDatum = getDatumOfGraphic(linkEl);
                         if (highlightLinks.includes((_a = linkDatum.key) !== null && _a !== void 0 ? _a : linkDatum.index)) {
                             removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                            addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasLinkStateAnimation());
                         }
                         else {
                             removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                            addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         }
                     });
                 }
@@ -49592,7 +49808,7 @@ class SankeySeries extends CartesianSeries {
                         }, 0);
                         const ratio = val / linkDatum.value;
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
+                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio }, true, this._hasLinkStateAnimation());
                         return;
                     }
                     if (upSelectedLink) {
@@ -49605,11 +49821,11 @@ class SankeySeries extends CartesianSeries {
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
                         addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                             ratio: upSelectedLink.value / linkDatum.value
-                        });
+                        }, true, this._hasLinkStateAnimation());
                         return;
                     }
                     removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                    addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                    addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                     return;
                 });
                 if (this._nodeMark) {
@@ -49677,7 +49893,7 @@ class SankeySeries extends CartesianSeries {
                     const originalDatum = linkDatum.datum;
                     if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) {
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 }, true, this._hasLinkStateAnimation());
                         return;
                     }
                     const selectedDatum = originalDatum
@@ -49705,7 +49921,7 @@ class SankeySeries extends CartesianSeries {
                         }, 0);
                         const ratio = val / linkDatum.value;
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
+                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio }, true, this._hasLinkStateAnimation());
                         return;
                     }
                     const upSelectedLink = upstreamLinks.find((upLink) => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
@@ -49719,11 +49935,11 @@ class SankeySeries extends CartesianSeries {
                         removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
                         addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                             ratio: upSelectedLink.value / linkDatum.value
-                        });
+                        }, true, this._hasLinkStateAnimation());
                         return;
                     }
                     removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                    addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                    addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                     return;
                 });
                 this._highLightElements(allNodeElements, highlightNodes);
@@ -49735,6 +49951,16 @@ class SankeySeries extends CartesianSeries {
         var _a;
         return (_a = this._spec.direction) !== null && _a !== void 0 ? _a : 'horizontal';
     }
+    _hasStateAnimation(mark) {
+        var _a;
+        return isAnimationEnabledForSeries(this) && !!((_a = mark === null || mark === void 0 ? void 0 : mark.hasAnimationByState) === null || _a === void 0 ? void 0 : _a.call(mark, 'state'));
+    }
+    _hasLinkStateAnimation() {
+        return this._hasStateAnimation(this._linkMark);
+    }
+    _hasNodeStateAnimation() {
+        return this._hasStateAnimation(this._nodeMark);
+    }
     getCategoryField() {
         return this._categoryField;
     }
@@ -50028,10 +50254,10 @@ class SankeySeries extends CartesianSeries {
         graphics.forEach(g => {
             removeGraphicState(g, [STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]);
             if (highlightNodes.includes(getDatumOfGraphic(g).key)) {
-                addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasNodeStateAnimation());
             }
             else {
-                addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasNodeStateAnimation());
             }
         });
     }
@@ -64996,8 +65222,17 @@ const registerGridLayout = () => {
     Factory.registerLayout(GridLayout.type, GridLayout);
 };
 
+const installPoptip = (app) => {
+    if (app) {
+        installPoptipToApp(app);
+    }
+    else {
+        loadPoptip();
+    }
+};
 const registerPoptip = () => {
-    loadPoptip();
+    Factory.registerRuntimePluginInstaller('poptipForText', installPoptip);
+    installPoptip();
 };
 
 const TOOLTIP_PREFIX = 'vchart-tooltip';