@visactor/vchart 2.1.3-alpha.4 → 2.1.3

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));
@@ -13394,6 +13402,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 +13467,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 +13518,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: {
@@ -19435,7 +19474,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 +19498,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);
@@ -20744,7 +20790,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 +22584,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);
         });
@@ -28547,11 +28594,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 +28639,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);
             }
         });
@@ -36098,7 +36156,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 +36172,7 @@ class GlyphMark extends BaseMark {
                     }
                     return glyphAttrs;
                 };
-                g.useStates(g.context.states);
+                g.useStates(g.context.states, hasAnimation);
             }
         };
     }
@@ -36193,12 +36251,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 +47235,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 +47262,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 +49462,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 +49493,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 +49611,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 +49664,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 +49677,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 +49749,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 +49777,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 +49791,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 +49807,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 +50110,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 +65078,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';