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

package/build/index.js

@@ -33412,9 +33412,10 @@
         interactionTriggers: {},
         composedEventMap: {},
         tooltipProcessors: {},
+        runtimePluginInstallers: {},
         formatter: undefined
     });
-    const factoryRegistryVersion = "2.1.1";
+    const factoryRegistryVersion = "2.1.3";
     const factoryRegistryKey = Symbol.for(`@visactor/vchart/factory-registry@${factoryRegistryVersion}`);
     const globalFactoryRegistry = globalThis;
     const factoryRegistry = (_a = globalFactoryRegistry[factoryRegistryKey]) !== null && _a !== void 0 ? _a : (globalFactoryRegistry[factoryRegistryKey] = createFactoryRegistry());
@@ -33657,6 +33658,13 @@
         }
         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));
@@ -33721,6 +33729,24 @@
                     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'] = {
@@ -33899,27 +33925,27 @@
         }
         return spec;
     }
-    function functionTransform(spec, VChart) {
-        if (!spec) {
-            return spec;
+    function functionTransform(value, registry) {
+        var _a;
+        if (!value) {
+            return value;
         }
-        if (isPlainObject$3(spec)) {
+        if (isString$1(value)) {
+            return (_a = registry.getFunction(value)) !== null && _a !== void 0 ? _a : value;
+        }
+        if (isPlainObject$3(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)) {
@@ -37021,6 +37047,7 @@
     };
     const createStageFromApp = (app, params) => app.createStage(params);
 
+    const POPTIP_FOR_TEXT_PLUGIN_NAME = 'poptipForText';
     class Compiler {
         get stateAnimationConfig() {
             return this._stateAnimationConfig;
@@ -37085,8 +37112,36 @@
         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;
             }
@@ -37108,22 +37163,24 @@
                     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: {
@@ -47776,6 +47833,7 @@
                 }
                 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;
@@ -47787,6 +47845,9 @@
                         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;
@@ -47825,7 +47886,13 @@
             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") {
@@ -47843,7 +47910,8 @@
                 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$1(this._eventDispatcher, mode);
@@ -47851,7 +47919,7 @@
             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();
@@ -48538,7 +48606,7 @@
                 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;
             }
@@ -49360,7 +49428,7 @@
         });
     };
 
-    const version = "2.1.1";
+    const version = "2.1.3";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -51154,6 +51222,7 @@
                 this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
             });
             this.initMarkStyle();
+            this.initMarkState();
             marks.forEach(mark => {
                 mark.commit(false);
             });
@@ -55675,6 +55744,9 @@
             }
             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();
@@ -56416,6 +56488,9 @@
                     });
                 }
             };
+            this._clearContinuousBarBandwidthCache = () => {
+                this._continuousBarBandwidthCache = undefined;
+            };
             this._transformLayoutPosition = (pos) => {
                 let { x, y } = pos;
                 if (isValidNumber$1(x)) {
@@ -56706,16 +56781,99 @@
             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 !== exports.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();
@@ -56977,6 +57135,13 @@
         }
         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(exports.ChartEvent.layoutEnd, this._updateAxisLayout);
                 this.event.on(exports.ChartEvent.layoutEnd, this._fixAxisOnZero);
@@ -61330,11 +61495,28 @@
         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) {
@@ -61358,42 +61540,36 @@
         }
         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);
                 }
             });
@@ -65476,6 +65652,10 @@
     function bindPoptip(container) {
       container.isBound(PopTipRenderContribution) || (container.bind(PopTipRenderContribution).toSelf().inSingletonScope(), container.bind(InteractiveSubRenderContribution).toService(PopTipRenderContribution)), container.isBound(PopTipPlugin) || (container.bind(PopTipPlugin).toSelf(), container.bind(AutoEnablePlugins).toService(PopTipPlugin)), container.isBound(PopTipForClipedTextPlugin) || (container.bind(PopTipForClipedTextPlugin).toSelf(), container.bind(AutoEnablePlugins).toService(PopTipForClipedTextPlugin));
     }
+    function installPoptipToApp(app) {
+      if (!app) throw new Error("installPoptipToApp requires an app instance");
+      configureRuntimeApplicationForApp(app), bindPoptip(getRuntimeInstallerBindingContext()), refreshRuntimeInstallerContributions(), installRuntimeGraphicRenderersToApp(app);
+    }
     function loadPoptip() {
       bindPoptip(getLegacyBindingContext()), bindPoptip(getRuntimeInstallerBindingContext()), refreshRuntimeInstallerContributions();
     }
@@ -74289,6 +74469,27 @@
             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 }), {
@@ -74725,14 +74926,19 @@
             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);
             }
@@ -74745,7 +74951,7 @@
             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;
@@ -74790,7 +74996,7 @@
                         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');
@@ -77943,7 +78149,7 @@
     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) => {
@@ -77959,7 +78165,7 @@
                         }
                         return glyphAttrs;
                     };
-                    g.useStates(g.context.states);
+                    g.useStates(g.context.states, hasAnimation);
                 }
             };
         }
@@ -78038,12 +78244,13 @@
         _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 = [];
@@ -89021,14 +89228,26 @@
         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]);
@@ -89036,15 +89255,16 @@
             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;
@@ -91235,18 +91455,18 @@
                                 highlightNodes.push(linkDatum.target);
                             }
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                            addGraphicState(linkEl, exports.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, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasLinkStateAnimation());
                         }
                         else {
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         }
                     });
                 }
@@ -91266,11 +91486,11 @@
                     allLinkElements.forEach(linkEl => {
                         if (linkEl === graphic) {
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 }, true, this._hasLinkStateAnimation());
                         }
                         else {
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         }
                     });
                 }
@@ -91384,11 +91604,11 @@
                             const linkDatum = getDatumOfGraphic(linkEl);
                             if (highlightLinks.includes((_a = linkDatum.key) !== null && _a !== void 0 ? _a : linkDatum.index)) {
                                 removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                                addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                                addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasLinkStateAnimation());
                             }
                             else {
                                 removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                                addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                                addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                             }
                         });
                     }
@@ -91437,7 +91657,7 @@
                             }, 0);
                             const ratio = val / linkDatum.value;
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
+                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         if (upSelectedLink) {
@@ -91450,11 +91670,11 @@
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
                             addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                                 ratio: upSelectedLink.value / linkDatum.value
-                            });
+                            }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                        addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         return;
                     });
                     if (this._nodeMark) {
@@ -91522,7 +91742,7 @@
                         const originalDatum = linkDatum.datum;
                         if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) {
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         const selectedDatum = originalDatum
@@ -91550,7 +91770,7 @@
                             }, 0);
                             const ratio = val / linkDatum.value;
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
+                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         const upSelectedLink = upstreamLinks.find((upLink) => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
@@ -91564,11 +91784,11 @@
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
                             addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                                 ratio: upSelectedLink.value / linkDatum.value
-                            });
+                            }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                        addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         return;
                     });
                     this._highLightElements(allNodeElements, highlightNodes);
@@ -91580,6 +91800,16 @@
             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;
         }
@@ -91873,10 +92103,10 @@
             graphics.forEach(g => {
                 removeGraphicState(g, [exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]);
                 if (highlightNodes.includes(getDatumOfGraphic(g).key)) {
-                    addGraphicState(g, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                    addGraphicState(g, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasNodeStateAnimation());
                 }
                 else {
-                    addGraphicState(g, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                    addGraphicState(g, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasNodeStateAnimation());
                 }
             });
         }
@@ -106841,8 +107071,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         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';