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

package/build/index.js

@@ -33487,7 +33487,7 @@
     }
 
     var _a;
-    const factoryRegistryKey = Symbol.for("@visactor/vchart/factory-registry@2.1.1"),
+    const factoryRegistryKey = Symbol.for("@visactor/vchart/factory-registry@2.1.3"),
       globalFactoryRegistry = globalThis;
     const factoryRegistry = null !== (_a = globalFactoryRegistry[factoryRegistryKey]) && void 0 !== _a ? _a : globalFactoryRegistry[factoryRegistryKey] = {
       charts: {},
@@ -33517,6 +33517,7 @@
       interactionTriggers: {},
       composedEventMap: {},
       tooltipProcessors: {},
+      runtimePluginInstallers: {},
       formatter: void 0
     };
 
@@ -33696,7 +33697,9 @@
     }, Factory.createTooltipProcessor = (type, tooltip) => {
       const Cror = Factory._tooltipProcessors[type];
       return Cror ? new Cror(tooltip) : null;
-    };
+    }, Factory._runtimePluginInstallers = factoryRegistry.runtimePluginInstallers, Factory.registerRuntimePluginInstaller = (type, installer) => {
+      Factory._runtimePluginInstallers[type] = installer;
+    }, Factory.getRuntimePluginInstaller = type => Factory._runtimePluginInstallers[type];
 
     function mergeTheme(target, ...sources) {
       return mergeSpec(transformThemeToMerge(target), ...sources.map(transformThemeToMerge));
@@ -33770,6 +33773,24 @@
             },
             textBaseline: "middle"
           }
+        },
+        conversionArrow: {
+          line: {
+            style: {
+              stroke: "black"
+            }
+          },
+          symbol: {
+            style: {
+              fill: "black"
+            }
+          },
+          text: {
+            style: {
+              fontSize: 12,
+              fill: "#606773"
+            }
+          }
         }
       };
       return res[is3d ? "transform3d" : "transform"] = {
@@ -33887,20 +33908,16 @@
       }
       return isArray$1(spec) ? spec.map(s => specTransform(s, special)) : spec;
     }
-    function functionTransform(spec, VChart) {
-      if (!spec) return spec;
-      if (isPlainObject$3(spec)) {
+    function functionTransform(value, registry) {
+      var _a;
+      if (!value) return value;
+      if (isString$1(value)) return null !== (_a = registry.getFunction(value)) && void 0 !== _a ? _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) Object.prototype.hasOwnProperty.call(value, key) && (result[key] = functionTransform(value[key], registry));
         return result;
       }
-      return isArray$1(spec) ? spec.map(s => functionTransform(s, VChart)) : spec;
+      return isArray$1(value) ? value.map(item => functionTransform(item, registry)) : value;
     }
     function transformFunctionAttribute(att, ...args) {
       return isFunction$1(att) ? att(...args) : att;
@@ -44017,8 +44034,23 @@
       getStage() {
         return this._stage;
       }
+      _dedupeStagePlugin(pluginName) {
+        var _a;
+        const pluginService = null === (_a = this._stage) || void 0 === _a ? void 0 : _a.pluginService;
+        if (!(null == pluginService ? void 0 : pluginService.findPluginsByName)) return;
+        const plugins = pluginService.findPluginsByName(pluginName);
+        if (plugins.length <= 1) return;
+        const plugin = plugins[0];
+        pluginService.uninstall ? (pluginService.uninstall(pluginName), pluginService.register(plugin)) : plugins.slice(1).forEach(duplicatePlugin => {
+          pluginService.unRegister(duplicatePlugin);
+        });
+      }
+      _dedupePoptipPlugin() {
+        var _a;
+        (null === (_a = this._option.pluginList) || void 0 === _a ? void 0 : _a.includes("poptipForText")) && this._dedupeStagePlugin("poptipForText");
+      }
       initView() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (this._released) return;
         if (this.isInited = !0, this._stage) return;
         const {
@@ -44041,14 +44073,14 @@
             mode: mode,
             modeParams: modeParams
           });
-          this._releaseVRenderAppRef = resolvedApp.releaseAppRef;
+          this._releaseVRenderAppRef = resolvedApp.releaseAppRef, null === (_a = this._option.runtimePluginInstallers) || void 0 === _a || _a.forEach(install => install(resolvedApp.app));
           try {
             this._stage = createStageFromApp(resolvedApp.app, Object.assign({
               background: background,
               width: this._width,
               height: this._height,
-              container: null !== (_a = this._container.dom) && void 0 !== _a ? _a : null,
-              canvas: null !== (_b = this._container.canvas) && void 0 !== _b ? _b : null,
+              container: null !== (_b = this._container.dom) && void 0 !== _b ? _b : null,
+              canvas: null !== (_c = this._container.canvas) && void 0 !== _c ? _c : null,
               dpr: dpr,
               viewBox: this._option.viewBox,
               canvasControled: this._option.canvasControled,
@@ -44071,12 +44103,12 @@
               },
               ReactDOM: this._option.ReactDOM,
               autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr)
-            }, null !== (_c = this._option.renderHooks) && void 0 !== _c ? _c : {}));
+            }, null !== (_d = this._option.renderHooks) && void 0 !== _d ? _d : {}));
           } catch (error) {
-            throw null === (_d = this._releaseVRenderAppRef) || void 0 === _d || _d.call(this), this._releaseVRenderAppRef = void 0, error;
+            throw null === (_e = this._releaseVRenderAppRef) || void 0 === _e || _e.call(this), this._releaseVRenderAppRef = void 0, error;
           }
         }
-        this._stage.enableIncrementalAutoRender(), this._stage.setTheme({
+        this._dedupePoptipPlugin(), this._stage.enableIncrementalAutoRender(), this._stage.setTheme({
           symbol: {
             shape: "circle",
             size: 8
@@ -48921,13 +48953,14 @@
           if (this._cachedProcessedTheme[cacheKey]) return this._cachedProcessedTheme[cacheKey];
           let theme = this._currentTheme;
           return keys.forEach((key, index) => {
+            var _a;
             if (1 !== index || "series" !== keys[0] && "component" !== keys[0]) theme = null == theme ? void 0 : theme[key];else {
               const buildInTheme = "series" === keys[0] ? Factory.getSeriesBuiltInTheme(key) : Factory.getComponentBuiltInTheme(key);
               theme = theme ? mergeSpec({}, buildInTheme, theme[key]) : buildInTheme;
             }
             index === keys.length - 1 && isValid$1(theme) && (theme = preprocessTheme({
               [key]: theme
-            }, this._currentTheme.colorScheme, this._currentTheme.token)[key]);
+            }, this._currentTheme.colorScheme, this._currentTheme.token)[key], (null === (_a = this.getFunctionList()) || void 0 === _a ? void 0 : _a.length) && (theme = functionTransform(theme, this)));
           }), this._cachedProcessedTheme[cacheKey] = theme, theme;
         }, removeUndefined(options), this._option = Object.assign(Object.assign({}, this._option), options), (null == options ? void 0 : options.optimize) && (this._option.optimize = Object.assign(Object.assign({}, this._option.optimize), options.optimize)), this._onError = null === (_a = this._option) || void 0 === _a ? void 0 : _a.onError;
         const _k = this._option,
@@ -48942,8 +48975,13 @@
           isTrueBrowseEnv = isTrueBrowser(mode);
         if (isTrueBrowseEnv ? registerBrowserEnv() : "node" === mode && registerNodeEnv(), isTrueBrowseEnv && dom && (this._container = isString$1(dom) ? vglobal.getElementById(dom) : dom), renderCanvas && (this._canvas = renderCanvas), stage && (this._stage = stage), "node" !== mode && !this._container && !this._canvas && !this._stage) return void (null === (_b = this._option) || void 0 === _b || _b.onError("please specify container or renderCanvas!"));
         this._viewBox = this._option.viewBox, this._currentThemeName = ThemeManager.getCurrentThemeName(), this._setNewSpec(spec), this._updateCurrentTheme(), this._currentSize = this.getCurrentSize();
-        const pluginList = [];
-        !1 !== poptip && pluginList.push("poptipForText"), "sankey" === spec.type && pluginList.push("scrollbar");
+        const pluginList = [],
+          runtimePluginInstallers = [];
+        if (!1 !== poptip) {
+          const poptipInstaller = Factory.getRuntimePluginInstaller("poptipForText");
+          poptipInstaller && (poptipInstaller(), runtimePluginInstallers.push(poptipInstaller)), pluginList.push("poptipForText");
+        }
+        "sankey" === spec.type && pluginList.push("scrollbar");
         const logger = new Logger(null !== (_c = this._option.logLevel) && void 0 !== _c ? _c : LoggerLevel.Error);
         Logger.setInstance(logger), (null === (_d = this._option) || void 0 === _d ? void 0 : _d.onError) && logger.addErrorHandler((...args) => {
           var _a, _b;
@@ -48954,7 +48992,8 @@
         }, Object.assign(Object.assign({
           mode: this._option.mode,
           stage: stage,
-          pluginList: pluginList
+          pluginList: pluginList,
+          runtimePluginInstallers: runtimePluginInstallers
         }, restOptions), {
           background: this._getBackground(),
           onError: this._onError
@@ -50944,7 +50983,7 @@
         const marks = this.getMarksWithoutRoot();
         marks.forEach(mark => {
           mark.clearBeforeReInit(), this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
-        }), this.initMarkStyle(), marks.forEach(mark => {
+        }), this.initMarkStyle(), this.initMarkState(), marks.forEach(mark => {
           mark.commit(!1);
         }), this._updateExtensionMarkSpec(), this._updateSpecData(), this._tooltipHelper && this._tooltipHelper.updateTooltipSpec();
         isAnimationEnabledForSeries(this) && this.initAnimation();
@@ -54535,7 +54574,7 @@
           animationEnter: this._animationConfig.enter ? Array.isArray(this._animationConfig.enter) ? this._animationConfig.enter[0] : this._animationConfig.enter : void 0,
           animationUpdate: this._animationConfig.update ? Array.isArray(this._animationConfig.update) ? this._animationConfig.update[0] : this._animationConfig.update : void 0,
           animationExit: this._animationConfig.exit ? Array.isArray(this._animationConfig.exit) ? this._animationConfig.exit[0] : this._animationConfig.exit : void 0
-        })), this._component ? this._component.setAttributes(attrs) : (this._component = Factory.createGraphicComponent(this._componentType, attrs, {
+        })), this._component ? (this._component.setAttributes(attrs), this._product && this._component.parent !== this._product && this._product.appendChild(this._component)) : (this._component = Factory.createGraphicComponent(this._componentType, attrs, {
           mode: this._mode,
           skipDefault: this._markConfig.skipTheme
         }), this._component && this._product.appendChild(this._component)), this._component && (this._component.context = this._getCommonContext()), this._markConfig.support3d && this._product && this._product.setMode("3d"), this.model.event.emit(HOOK_EVENT.AFTER_ELEMENT_ENCODE, {
@@ -55109,6 +55148,8 @@
               specIndex: this._seriesIndex
             });
           }
+        }, this._clearContinuousBarBandwidthCache = () => {
+          this._continuousBarBandwidthCache = void 0;
         }, this._transformLayoutPosition = pos => {
           let {
             x: x,
@@ -55315,12 +55356,60 @@
           isContinuous: isContinuous(this._scale.type),
           dataToPosition: this.dataToPosition.bind(this),
           getScale: (depth = 0) => this._scales[depth],
+          getBandwidth: (depth = 0) => this._getContinuousBarBandwidth(depth),
           getAxisType: () => this.type,
           getAxisId: () => this.id,
           isInverse: () => !0 === this._inverse,
           getSpec: () => this._spec
         };
       }
+      _getContinuousBarBandwidth(depth = 0) {
+        if (0 !== depth || !isContinuous(this._scale.type)) return;
+        const scale = this._scales[0],
+          domain = scale.domain(),
+          range = scale.range(),
+          domainStart = +(null == domain ? void 0 : domain[0]),
+          domainEnd = +(null == domain ? void 0 : domain[domain.length - 1]),
+          rangeStart = +(null == range ? void 0 : range[0]),
+          rangeEnd = +(null == range ? void 0 : range[range.length - 1]);
+        if (!(Number.isFinite(domainStart) && Number.isFinite(domainEnd) && Number.isFinite(rangeStart) && Number.isFinite(rangeEnd) && domainStart !== domainEnd)) return;
+        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(),
+          orient = this.getOrient();
+        eachSeries(this._regions, s => {
+          var _a, _b, _c, _d;
+          if (s.type !== SeriesTypeEnum.bar) return;
+          const barSeries = s,
+            field = isXAxis(orient) && "vertical" === barSeries.direction ? barSeries.fieldX[0] : isYAxis(orient) && "horizontal" === barSeries.direction ? barSeries.fieldY[0] : void 0,
+            values = field ? null === (_d = null === (_c = null === (_b = null === (_a = s.getViewDataStatistics) || void 0 === _a ? void 0 : _a.call(s)) || void 0 === _b ? void 0 : _b.latestData) || void 0 === _c ? void 0 : _c[field]) || void 0 === _d ? void 0 : _d.values : void 0;
+          null == values || values.forEach(value => {
+            const numericValue = +value;
+            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;
+        let minStep = 1 / 0,
+          lastValue = values[0];
+        for (let i = 1; i < values.length; i++) {
+          const value = values[i],
+            step = value - lastValue;
+          step > 0 && step < minStep && (minStep = step), lastValue = value;
+        }
+        const bandWidth = minStep < 1 / 0 ? Math.abs((rangeEnd - rangeStart) / (domainEnd - domainStart) * minStep) : void 0;
+        return Number.isFinite(bandWidth) ? (this._continuousBarBandwidthCache = {
+          scale: scale,
+          domainStart: domainStart,
+          domainEnd: domainEnd,
+          rangeStart: rangeStart,
+          rangeEnd: rangeEnd,
+          bandWidth: bandWidth
+        }, bandWidth) : void 0;
+      }
       afterCompile() {
         var _a;
         (null === (_a = this._axisMark) || void 0 === _a ? void 0 : _a.getProduct()) && this.event.on(HOOK_EVENT.AFTER_ELEMENT_ENCODE, ({
@@ -55503,7 +55592,13 @@
         })] : [];
       }
       initEvent() {
-        super.initEvent(), this._specVisible && (this.event.on(ChartEvent.layoutEnd, this._updateAxisLayout), this.event.on(ChartEvent.layoutEnd, this._fixAxisOnZero), this.event.on(ChartEvent.layoutRectUpdate, () => {
+        super.initEvent(), eachSeries(this._regions, s => {
+          var _a, _b;
+          null === (_b = null === (_a = s.getViewDataStatistics) || void 0 === _a ? void 0 : _a.call(s)) || void 0 === _b || _b.target.addListener("change", this._clearContinuousBarBandwidthCache);
+        }, {
+          userId: this._seriesUserId,
+          specIndex: this._seriesIndex
+        }), this._specVisible && (this.event.on(ChartEvent.layoutEnd, this._updateAxisLayout), this.event.on(ChartEvent.layoutEnd, this._fixAxisOnZero), this.event.on(ChartEvent.layoutRectUpdate, () => {
           this._clearLayoutCache();
         }));
       }
@@ -59242,41 +59337,46 @@
       getStatedGraphics(trigger) {
         return this._stateGraphicsByTrigger.get(trigger);
       }
+      _getMarkById(trigger) {
+        const markById = new Map();
+        return trigger.getMarks().forEach(mark => {
+          mark && markById.set(mark.id, mark);
+        }), markById;
+      }
+      _hasAnimationByGraphicState(graphic, markById) {
+        var _a, _b, _c;
+        const mark = null !== (_b = null === (_a = graphic.parent) || void 0 === _a ? void 0 : _a.mark) && void 0 !== _b ? _b : markById.get(graphic.context.markId);
+        return !!(null === (_c = null == mark ? void 0 : mark.hasAnimationByState) || void 0 === _c ? void 0 : _c.call(mark, "state"));
+      }
       updateStates(trigger, newStatedGraphics, prevStatedGraphics, state, reverseState) {
-        return this._disableTriggerEvent ? [] : newStatedGraphics && newStatedGraphics.length ? (state && reverseState ? prevStatedGraphics && prevStatedGraphics.length ? (this.toggleReverseStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, reverseState), this.toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state)) : this.addBothStateOfGraphics(trigger, newStatedGraphics, state, reverseState) : state && (prevStatedGraphics && prevStatedGraphics.length ? this.toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state) : this.addStateOfGraphics(trigger, newStatedGraphics, state)), newStatedGraphics) : [];
+        return this._disableTriggerEvent ? [] : newStatedGraphics && newStatedGraphics.length ? (state && reverseState ? prevStatedGraphics && prevStatedGraphics.length ? (this.toggleReverseStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, reverseState), this.toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state)) : this.addBothStateOfGraphics(trigger, newStatedGraphics, state, reverseState) : state && (prevStatedGraphics && prevStatedGraphics.length ? this.toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state) : this.addStateOfGraphics(trigger, newStatedGraphics, state)), newStatedGraphics) : (prevStatedGraphics && prevStatedGraphics.length && this.clearAllStatesOfTrigger(trigger, state, reverseState), []);
       }
       toggleReverseStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, reverseState) {
-        const markIdByState = trigger.getMarkIdByState();
+        const markIdByState = trigger.getMarkIdByState(),
+          markById = this._getMarkById(trigger);
         prevStatedGraphics.forEach(g => {
-          var _a;
           if (reverseState && markIdByState[reverseState] && markIdByState[reverseState].includes(g.context.markId)) {
-            const m = null === (_a = g.parent) || void 0 === _a ? void 0 : _a.mark,
-              hasAnimation = m.hasAnimationByState && m.hasAnimationByState("state");
+            const hasAnimation = this._hasAnimationByGraphicState(g, markById);
             addGraphicState(g, reverseState, !0, hasAnimation);
           }
         }), newStatedGraphics.forEach(g => {
-          var _a;
           if (reverseState && markIdByState[reverseState] && markIdByState[reverseState].includes(g.context.markId)) {
-            const m = null === (_a = g.parent) || void 0 === _a ? void 0 : _a.mark,
-              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 markIdByState = trigger.getMarkIdByState(),
+          markById = this._getMarkById(trigger);
         prevStatedGraphics.forEach(g => {
-          var _a;
           if (state && markIdByState[state] && markIdByState[state].includes(g.context.markId)) {
-            const m = null === (_a = g.parent) || void 0 === _a ? void 0 : _a.mark,
-              hasAnimation = m.hasAnimationByState && m.hasAnimationByState("state");
+            const hasAnimation = this._hasAnimationByGraphicState(g, markById);
             removeGraphicState(g, state, hasAnimation);
           }
         }), newStatedGraphics.forEach(g => {
-          var _a;
           if (state && markIdByState[state] && markIdByState[state].includes(g.context.markId)) {
-            const m = null === (_a = g.parent) || void 0 === _a ? void 0 : _a.mark,
-              hasAnimation = m.hasAnimationByState && m.hasAnimationByState("state");
+            const hasAnimation = this._hasAnimationByGraphicState(g, markById);
             addGraphicState(g, state, !0, hasAnimation);
           }
         });
@@ -62416,6 +62516,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();
     }
@@ -70982,6 +71086,20 @@
           compileOnlyKeys: Object.assign(Object.assign({}, policy.compileOnlyKeys), BAR_SERIES_COMPILE_ONLY_KEYS)
         });
       }
+      getStatisticFields() {
+        var _a;
+        const fields = super.getStatisticFields(),
+          positionAxisHelper = "horizontal" === this.direction ? this.getYAxisHelper() : this.getXAxisHelper(),
+          positionFields = "horizontal" === this.direction ? this._fieldY : this._fieldX,
+          positionScale = null === (_a = null == positionAxisHelper ? void 0 : positionAxisHelper.getScale) || void 0 === _a ? void 0 : _a.call(positionAxisHelper, 0);
+        return positionScale && isContinuous(positionScale.type) && positionFields.forEach(field => {
+          const fieldStatistics = fields.find(entry => entry.key === field);
+          fieldStatistics ? fieldStatistics.operations.includes("values") || fieldStatistics.operations.push("values") : fields.push({
+            key: field,
+            operations: ["values"]
+          });
+        }), fields;
+      }
       initMark() {
         this._initBarBackgroundMark(), this._barMark = this._createMark(Object.assign(Object.assign({}, BarSeries.mark.bar), {
           name: this._barMarkName,
@@ -71312,18 +71430,19 @@
         this._barMark.setAnimationConfig(animationConfig(null === (_b = Factory.getAnimationInKey("bar")) || void 0 === _b ? 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,
           depth = isNil$1(scaleDepth) ? depthFromSpec : Math.min(depthFromSpec, scaleDepth),
-          bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, depth - 1)) && void 0 !== _b ? _b : 6,
           hasBarWidth = isValid$1(this._spec.barWidth) && depth === depthFromSpec,
+          axisBandWidth = hasBarWidth && "number" == typeof this._spec.barWidth && "string" != typeof this._spec.barMinWidth && "string" != typeof this._spec.barMaxWidth || null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, depth - 1),
+          bandWidth = null != axisBandWidth ? axisBandWidth : 6,
           hasBarMinWidth = isValid$1(this._spec.barMinWidth),
           hasBarMaxWidth = isValid$1(this._spec.barMaxWidth);
-        let width = bandWidth;
+        let width = !axisHelper.isContinuous || isNil$1(axisBandWidth) || hasBarWidth ? bandWidth : .5 * bandWidth;
         return hasBarWidth && (width = getActualNumValue(this._spec.barWidth, bandWidth)), hasBarMinWidth && (width = Math.max(width, getActualNumValue(this._spec.barMinWidth, bandWidth))), hasBarMaxWidth && (width = Math.min(width, getActualNumValue(this._spec.barMaxWidth, bandWidth))), width;
       }
       _getPosition(direction, datum, scaleDepth, mark) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         let axisHelper, sizeAttribute, dataToPosition;
         "horizontal" === direction ? (axisHelper = this.getYAxisHelper(), sizeAttribute = "height", dataToPosition = "barBackground" === mark ? this.dataToBarBackgroundPositionY.bind(this) : this.dataToPositionY.bind(this)) : (axisHelper = this.getXAxisHelper(), sizeAttribute = "width", dataToPosition = "barBackground" === mark ? this.dataToBarBackgroundPositionX.bind(this) : this.dataToPositionX.bind(this));
         const scale = axisHelper.getScale(0),
@@ -71344,7 +71463,7 @@
               i = groupValues.indexOf(datum[groupField]);
             index === groupFields.length - 1 ? (totalWidth += groupCount * size + (groupCount - 1) * gap, offSet += i * (size + gap)) : (offSet += i * (totalWidth + gap), totalWidth += totalWidth + (groupCount - 1) * gap);
           }
-          return scale.scale(datum[groupFields[0]]) + axisHelper.getBandwidth(0) / 2 - totalWidth / 2 + offSet;
+          return scale.scale(datum[groupFields[0]]) + (null !== (_f = axisHelper.getBandwidth(0)) && void 0 !== _f ? _f : bandWidth) / 2 - totalWidth / 2 + offSet;
         }
         const continuous = isContinuous(scale.type || "band");
         return dataToPosition(datum, depth) + .5 * (bandWidth - size) + (continuous ? -bandWidth / 2 : 0);
@@ -73729,7 +73848,7 @@
     const GLYPH_INHERITED_STYLE_ATTRIBUTES = new Set(["fill", "fillOpacity", "stroke", "strokeOpacity", "opacity", "lineWidth", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "miterLimit", "shadowBlur", "shadowColor", "shadowOffsetX", "shadowOffsetY", "visible", "pickable", "cursor"]);
     class GlyphMark extends BaseMark {
       constructor() {
-        super(...arguments), this._setStateOfGraphic = g => {
+        super(...arguments), this._setStateOfGraphic = (g, hasAnimation) => {
           g.clearStates(), g.context.diffState !== DiffState.enter && g.context.diffState !== DiffState.update || (g.glyphStateProxy = (stateName, nexStates) => {
             var _a;
             const glyphAttrs = {
@@ -73738,7 +73857,7 @@
             return g.glyphStates ? g.glyphStates[stateName] || (g.glyphStates[stateName] = glyphAttrs) : g.glyphStates = {
               [stateName]: glyphAttrs
             }, glyphAttrs;
-          }, g.useStates(g.context.states));
+          }, g.useStates(g.context.states, hasAnimation));
         };
       }
       getSubMarks() {
@@ -73788,10 +73907,11 @@
       }
       _createGraphic(attrs = {}) {
         const glyph = createGlyph(attrs);
-        glyph.onBeforeAttributeUpdate = this._onGlyphAttributeUpdate(glyph), glyph.addEventListener("afterAttributeUpdate", event => {
-          var _a;
-          2 === (null === (_a = null == event ? void 0 : event.detail) || void 0 === _a ? void 0 : _a.type) && this._syncInheritedStyleAttrs(glyph, glyph.attribute);
-        });
+        glyph.onBeforeAttributeUpdate = this._onGlyphAttributeUpdate(glyph);
+        const onAttributeUpdate = glyph.onAttributeUpdate.bind(glyph);
+        glyph.onAttributeUpdate = context => {
+          onAttributeUpdate(context), 2 === (null == context ? void 0 : context.type) && this._syncInheritedStyleAttrs(glyph, glyph.attribute);
+        };
         const subMarks = this._subMarks;
         if (subMarks) {
           const subGraphics = [];
@@ -82552,17 +82672,22 @@
         heightVisual = null !== (_a = resolveOptionValue$2(op.heightVisual)) && void 0 !== _a && _a,
         isCone = null === (_b = resolveOptionValue$2(op.isCone)) || void 0 === _b || _b,
         range = resolveOptionValue$2(op.range),
-        max = data.reduce((m, d) => Math.max(m, Number.parseFloat(d[valueField]) || -1 / 0), -1 / 0),
-        min = data.reduce((m, d) => Math.min(m, Number.parseFloat(d[valueField]) || 1 / 0), 1 / 0),
-        rangeArr = [null !== (_c = null == range ? void 0 : range.min) && void 0 !== _c ? _c : min, null !== (_d = null == range ? void 0 : range.max) && void 0 !== _d ? _d : max];
+        max = data.reduce((m, d) => {
+          const value = Number.parseFloat(d[valueField]);
+          return isValidNumber$1(value) ? Math.max(m, value) : m;
+        }, -1 / 0),
+        rangeMin = null !== (_c = null == range ? void 0 : range.min) && void 0 !== _c ? _c : 0,
+        rangeMax = null !== (_d = null == range ? void 0 : range.max) && void 0 !== _d ? _d : max,
+        getValueRatio = value => isValidNumber$1(value) && isValidNumber$1(rangeMin) && isValidNumber$1(rangeMax) ? rangeMin === rangeMax ? value < rangeMin ? 0 : 1 : clamp$1((value - rangeMin) / (rangeMax - rangeMin), 0, 1) : 0;
       return data.forEach((d, i) => {
         var _a, _b;
         const currentValue = Number.parseFloat(d[valueField]),
           lastValue = Number.parseFloat(null === (_a = data[i - 1]) || void 0 === _a ? void 0 : _a[valueField]),
           nextValue = Number.parseFloat(null === (_b = data[i + 1]) || void 0 === _b ? void 0 : _b[valueField]),
           transformRatio = isValidNumber$1(nextValue * currentValue) && 0 !== currentValue ? nextValue / currentValue : 0,
-          reachRatio = isValidNumber$1(currentValue * lastValue) && 0 !== lastValue ? currentValue / lastValue : 0;
-        asLastValue && (d[asLastValue] = lastValue), asNextValue && (d[asNextValue] = nextValue), asTransformRatio && (d[asTransformRatio] = transformRatio), asReachRatio && (d[asReachRatio] = 0 === i ? 1 : reachRatio), asHeightRatio && (d[asHeightRatio] = !0 === heightVisual ? transformRatio : 1 / data.length), asValueRatio && (d[asValueRatio] = currentValue / rangeArr[1]), asNextValueRatio && (d[asNextValueRatio] = i === data.length - 1 ? isCone ? 0 : d[asValueRatio] : nextValue / rangeArr[1]), asLastValueRatio && (d[asLastValueRatio] = 0 === i ? 1 : lastValue / rangeArr[1]), asCurrentValue && (d[asCurrentValue] = currentValue);
+          reachRatio = isValidNumber$1(currentValue * lastValue) && 0 !== lastValue ? currentValue / lastValue : 0,
+          valueRatio = getValueRatio(currentValue);
+        asLastValue && (d[asLastValue] = lastValue), asNextValue && (d[asNextValue] = nextValue), asTransformRatio && (d[asTransformRatio] = transformRatio), asReachRatio && (d[asReachRatio] = 0 === i ? 1 : reachRatio), asHeightRatio && (d[asHeightRatio] = !0 === heightVisual ? transformRatio : 1 / data.length), asValueRatio && (d[asValueRatio] = valueRatio), asNextValueRatio && (d[asNextValueRatio] = i === data.length - 1 ? isCone ? 0 : d[asValueRatio] : getValueRatio(nextValue)), asLastValueRatio && (d[asLastValueRatio] = 0 === i ? 1 : getValueRatio(lastValue)), asCurrentValue && (d[asCurrentValue] = currentValue);
       }), data;
     };
     const funnelTransform = (originData, op) => {
@@ -84287,7 +84412,7 @@
             if (!allLinkElements || !allLinkElements.length) return;
             allLinkElements.forEach((linkEl, i) => {
               const linkDatum = getDatumOfGraphic(linkEl);
-              linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : linkDatum.target === nodeDatum.key ? (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, !0)) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+              linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0, this._hasLinkStateAnimation())) : linkDatum.target === nodeDatum.key ? (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, !0, this._hasLinkStateAnimation())) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation()));
             });
           }
           this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), this._needClear = !0;
@@ -84300,7 +84425,7 @@
             allLinkElements.forEach(linkEl => {
               linkEl === graphic ? (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                 ratio: 1
-              })) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+              }, !0, this._hasLinkStateAnimation())) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation()));
             });
           }
           this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), this._needClear = !0;
@@ -84356,7 +84481,7 @@
               allLinkElements.forEach((linkEl, i) => {
                 var _a;
                 const linkDatum = getDatumOfGraphic(linkEl);
-                highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+                highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0, this._hasLinkStateAnimation())) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation()));
               });
             }
             this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
@@ -84387,12 +84512,12 @@
                 const ratio = selectedDatum.reduce((sum, d) => sum + d.value, 0) / linkDatum.value;
                 return removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                   ratio: ratio
-                });
+                }, !0, this._hasLinkStateAnimation());
               }
               if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                 ratio: upSelectedLink.value / linkDatum.value
-              });
-              removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+              }, !0, this._hasLinkStateAnimation());
+              removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation());
             }), this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
           }
           this._needClear = !0;
@@ -84432,7 +84557,7 @@
                 originalDatum = linkDatum.datum;
               if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                 ratio: 1
-              });
+              }, !0, this._hasLinkStateAnimation());
               const selectedDatum = originalDatum ? originalDatum.filter(entry => {
                 const parentKeysList = entry.parents.map(item => item.key);
                 return parentKeysList.includes(curLinkDatum.source) && parentKeysList.includes(curLinkDatum.target);
@@ -84445,13 +84570,13 @@
                 })).reduce((sum, d) => sum + d.value, 0) / linkDatum.value;
                 return removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                   ratio: ratio
-                });
+                }, !0, this._hasLinkStateAnimation());
               }
               const upSelectedLink = upstreamLinks.find(upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
               if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                 ratio: upSelectedLink.value / linkDatum.value
-              });
-              removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+              }, !0, this._hasLinkStateAnimation());
+              removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation());
             }), this._highLightElements(allNodeElements, highlightNodes);
           }
           this._needClear = !0;
@@ -84461,6 +84586,16 @@
         var _a;
         return null !== (_a = this._spec.direction) && void 0 !== _a ? _a : "horizontal";
       }
+      _hasStateAnimation(mark) {
+        var _a;
+        return isAnimationEnabledForSeries(this) && !!(null === (_a = null == mark ? void 0 : mark.hasAnimationByState) || void 0 === _a ? void 0 : _a.call(mark, "state"));
+      }
+      _hasLinkStateAnimation() {
+        return this._hasStateAnimation(this._linkMark);
+      }
+      _hasNodeStateAnimation() {
+        return this._hasStateAnimation(this._nodeMark);
+      }
       getCategoryField() {
         return this._categoryField;
       }
@@ -84705,7 +84840,7 @@
       }
       _highLightElements(graphics, highlightNodes) {
         graphics && graphics.length && graphics.forEach(g => {
-          removeGraphicState(g, [STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]), highlightNodes.includes(getDatumOfGraphic(g).key) ? addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0) : addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+          removeGraphicState(g, [STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]), highlightNodes.includes(getDatumOfGraphic(g).key) ? addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0, this._hasNodeStateAnimation()) : addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasNodeStateAnimation());
         });
       }
       initTooltip() {
@@ -96467,8 +96602,11 @@
       Factory.registerLayout(GridLayout.type, GridLayout);
     };
 
+    const installPoptip = app => {
+      app ? installPoptipToApp(app) : loadPoptip();
+    };
     const registerPoptip = () => {
-      loadPoptip();
+      Factory.registerRuntimePluginInstaller("poptipForText", installPoptip), installPoptip();
     };
 
     const TOOLTIP_PREFIX = "vchart-tooltip";
@@ -101070,7 +101208,7 @@
 
     const VChartSimple = createChart('VChartSimple');
 
-    const version = "2.1.1";
+    const version = "2.1.3";
 
     exports.Area = Area;
     exports.AreaChart = AreaChart;