@visactor/vchart-extension 2.0.3-alpha.0 → 2.0.3-alpha.2

package/build/index.js

@@ -722,6 +722,12 @@
 	  return t => (d.setTime(aVal * (1 - t) + bVal * t), d);
 	}
 
+	function toValidNumber(v) {
+	  if (isValidNumber$1(v)) return v;
+	  const value = +v;
+	  return isValidNumber$1(value) ? value : 0;
+	}
+
 	const fakeRandom = () => {
 	  let i = -1;
 	  const arr = [0, .1, .2, .3, .4, .5, .6, .7, .8, .9];
@@ -2989,6 +2995,7 @@
 	            options: {
 	                direction: 'y',
 	                orient: 'negative',
+	                excludeChannels: ['x'],
 	                point: (datum, graphic) => {
 	                    const channelAttr = graphic.getGraphicAttribute('y');
 	                    const barSpace = spec.height / (spec.pageSize + 1);
@@ -3009,7 +3016,7 @@
 	            options: {
 	                direction: 'y',
 	                orient: 'negative',
-	                excludeChannels: ['y'],
+	                excludeChannels: ['x'],
 	                point: (datum, graphic) => {
 	                    const channelAttr = graphic.getGraphicAttribute('y');
 	                    return { y: channelAttr + (spec.height / (spec.pageSize + 1)) * Math.min(spec.scrollSize, spec.pageSize) };
@@ -4754,371 +4761,6 @@
 	    }
 	};
 
-	class SequenceAnalysisChartSpecTransformer extends vchart.CommonChartSpecTransformer {
-	    transformSpec(spec) {
-	        var _a;
-	        delete spec.type;
-	        spec.type = 'common';
-	        spec.data = [
-	            {
-	                id: 'eventData',
-	                values: spec.eventData
-	            },
-	            {
-	                id: 'actionData',
-	                values: spec.actionData
-	            },
-	            {
-	                id: 'patternData',
-	                values: spec.patternData
-	            }
-	        ];
-	        const { eventData } = spec;
-	        const { mode, mediumConnection = false, actionTarget = false, stepMediumMap } = spec;
-	        spec.series = [
-	            {
-	                type: 'link',
-	                dataId: mode === 'time' ? 'actionData' : 'patternData',
-	                dotSeriesIndex: 1,
-	                fromField: 'from',
-	                toField: 'to',
-	                seriesField: 'pattern_type',
-	                imageLabelField: mode === 'time' && actionTarget ? 'user_image' : '',
-	                allowExtend: mode === 'step' && !mediumConnection,
-	                linkType: mode === 'step' && mediumConnection ? 'curve' : 'line',
-	                arrow: {
-	                    style: {
-	                        visible: mode === 'time' && actionTarget
-	                    }
-	                },
-	                link: {
-	                    state: {
-	                        custom_unSelected: {
-	                            strokeOpacity: 0.5,
-	                            stroke: 'grey'
-	                        }
-	                    },
-	                    style: {
-	                        visible: mode === 'step' || actionTarget
-	                    }
-	                },
-	                imageLabel: {
-	                    visible: mode === 'time' && actionTarget,
-	                    style: {
-	                        width: 40,
-	                        height: 40
-	                    }
-	                }
-	            },
-	            {
-	                type: 'dot',
-	                xField: mode === 'time' ? 'time_stamp' : mediumConnection ? 'medium_type' : 'step',
-	                yField: 'user_id',
-	                titleField: 'user_id',
-	                seriesField: 'action_type',
-	                linearMode: mode === 'time',
-	                dataIndex: 0,
-	                highLightSeriesGroup: '',
-	                title: {
-	                    visible: false,
-	                    style: {
-	                        fill: 'rgba(46, 47, 50)'
-	                    }
-	                },
-	                grid: {
-	                    style: {
-	                        visible: false
-	                    }
-	                },
-	                dot: {
-	                    state: {
-	                        custom_unSelected: {
-	                            fillOpacity: 0.5,
-	                            fill: 'grey'
-	                        }
-	                    }
-	                },
-	                symbol: {
-	                    visible: false
-	                }
-	            }
-	        ];
-	        spec.series.forEach((s) => {
-	            if (s.type === 'link') {
-	                s.dotSeriesSpec = spec.series[s.dotSeriesIndex];
-	            }
-	        });
-	        const tickData = [];
-	        const timeCountMap = {};
-	        eventData.forEach(user => {
-	            user.dots.forEach(e => {
-	                if (timeCountMap[e.time_stamp]) {
-	                    timeCountMap[e.time_stamp] += e.action_count;
-	                }
-	                else {
-	                    timeCountMap[e.time_stamp] = e.action_count;
-	                }
-	            });
-	        });
-	        Object.keys(timeCountMap)
-	            .sort((a, b) => Number(a) - Number(b))
-	            .forEach(key => {
-	            tickData.push({
-	                time_stamp: Number(key),
-	                action_count: timeCountMap[key]
-	            });
-	        });
-	        const axes = [];
-	        if (mode === 'step') {
-	            if (mediumConnection) {
-	                axes.push({
-	                    orient: 'top',
-	                    type: 'band',
-	                    id: 'top_medium'
-	                });
-	            }
-	            else {
-	                axes.push({
-	                    orient: 'top',
-	                    type: 'band',
-	                    id: 'top_medium',
-	                    label: {
-	                        formatMethod: (label) => {
-	                            return {
-	                                type: 'rich',
-	                                text: [
-	                                    {
-	                                        text: `${stepMediumMap[label].medium_type}... `,
-	                                        fontSize: 12
-	                                    },
-	                                    {
-	                                        text: `+${stepMediumMap[label].count}`,
-	                                        fontSize: 12,
-	                                        background: 'grey',
-	                                        backgroundOpacity: 0.4,
-	                                        backgroundCornerRadius: 5
-	                                    }
-	                                ]
-	                            };
-	                        }
-	                    }
-	                });
-	                axes.push({
-	                    orient: 'bottom',
-	                    id: 'bottom_step',
-	                    type: 'band',
-	                    bandPadding: 0
-	                });
-	            }
-	        }
-	        else {
-	            axes.push({
-	                orient: 'top',
-	                type: 'time',
-	                id: 'top_count',
-	                label: {
-	                    dataFilter: (datum) => {
-	                        const minData = datum[0].rawValue;
-	                        const minValue = datum[0].value;
-	                        const maxData = datum[datum.length - 1].rawValue;
-	                        const maxValue = datum[datum.length - 1].value;
-	                        return tickData
-	                            .filter(t => t.time_stamp >= minData && t.time_stamp <= maxData)
-	                            .map(t => ({
-	                            id: t.time_stamp,
-	                            label: t.action_count,
-	                            value: ((t.time_stamp - minData) / (maxData - minData)) * (maxValue - minValue) + minValue,
-	                            rawValue: t.time_stamp
-	                        }));
-	                    },
-	                    formatMethod: (label, datum) => {
-	                        if (datum === null || datum === void 0 ? void 0 : datum.rawValue) {
-	                            return timeCountMap[datum.rawValue];
-	                        }
-	                        return label;
-	                    }
-	                },
-	                tick: {
-	                    visible: false
-	                },
-	                grid: {
-	                    visible: false
-	                },
-	                innerOffset: {
-	                    left: 50,
-	                    right: 50
-	                }
-	            });
-	            axes.push({
-	                orient: 'bottom',
-	                id: 'bottom_time',
-	                type: 'time',
-	                layers: [
-	                    {
-	                        tickStep: 28800,
-	                        timeFormat: '%Y%m%d'
-	                    },
-	                    {
-	                        tickStep: 28800,
-	                        timeFormat: '%H:%M'
-	                    }
-	                ],
-	                label: {
-	                    dataFilter: (datum) => {
-	                        const minData = datum[0].rawValue;
-	                        const minValue = datum[0].value;
-	                        const maxData = datum[datum.length - 1].rawValue;
-	                        const maxValue = datum[datum.length - 1].value;
-	                        return tickData
-	                            .filter(t => t.time_stamp >= minData && t.time_stamp <= maxData)
-	                            .map(t => ({
-	                            id: t.time_stamp,
-	                            label: t.time_stamp,
-	                            value: ((t.time_stamp - minData) / (maxData - minData)) * (maxValue - minValue) + minValue,
-	                            rawValue: t.time_stamp
-	                        }));
-	                    }
-	                },
-	                tick: {
-	                    visible: false
-	                },
-	                grid: {
-	                    visible: false
-	                },
-	                innerOffset: {
-	                    left: 50,
-	                    right: 50
-	                }
-	            });
-	        }
-	        spec.axes = [
-	            ...axes,
-	            {
-	                orient: 'left',
-	                type: 'band',
-	                domainLine: {
-	                    visible: false
-	                },
-	                tick: {
-	                    visible: false
-	                },
-	                label: {
-	                    formatMethod: label => {
-	                        return {
-	                            type: 'rich',
-	                            text: [{ image: spec.userImageMap[label], width: 40, height: 40 }]
-	                        };
-	                    }
-	                },
-	                grid: {
-	                    visible: true,
-	                    style: {
-	                        lineDash: [3, 3]
-	                    }
-	                }
-	            }
-	        ];
-	        spec.dataZoom = [
-	            {
-	                orient: 'bottom',
-	                axisIndex: 0,
-	                filterMode: 'filter'
-	            }
-	        ];
-	        spec.scrollBar = [
-	            {
-	                orient: 'right',
-	                axisIndex: spec.axes.length - 1,
-	                filterMode: 'axis',
-	                start: 0,
-	                end: 0.8
-	            },
-	            {
-	                orient: 'bottom',
-	                axisIndex: 0,
-	                linkedAxisIndex: mediumConnection && mode === 'step' ? undefined : 1,
-	                filterMode: 'axis',
-	                start: 0,
-	                end: 0.8
-	            }
-	        ];
-	        spec.crosshair = {
-	            xField: {
-	                visible: true,
-	                line: {
-	                    type: 'rect',
-	                    width: 20,
-	                    style: {
-	                        fill: 'rgb(240,242,245)'
-	                    }
-	                },
-	                bindingAxesIndex: [0, 1]
-	            },
-	            yField: {
-	                visible: true,
-	                bindingAxesIndex: [spec.axes.length - 1],
-	                line: {
-	                    type: 'rect'
-	                }
-	            }
-	        };
-	        if (mode === 'time') {
-	            spec.markLine = tickData.map(t => ({
-	                zIndex: -1,
-	                x: t.time_stamp,
-	                endSymbol: {
-	                    visible: false
-	                },
-	                label: {
-	                    visible: false
-	                }
-	            }));
-	        }
-	        spec.tooltip = {
-	            visible: false
-	        };
-	        spec.animation = false;
-	        (_a = spec.customTransformSpec) === null || _a === void 0 ? void 0 : _a.call(spec, spec);
-	        super.transformSpec(spec);
-	    }
-	}
-
-	class SequenceAnalysis extends vchart.BaseChart {
-	    constructor() {
-	        super(...arguments);
-	        this.type = 'sequenceAnalysis';
-	        this.transformerConstructor = SequenceAnalysisChartSpecTransformer;
-	    }
-	    init() {
-	        if (!this.isValid()) {
-	            return;
-	        }
-	        super.init();
-	    }
-	    isValid() {
-	        var _a, _b, _c, _d;
-	        const { eventData, type } = this._spec;
-	        if (type !== 'sequenceAnalysis') {
-	            (_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Type is required');
-	            return false;
-	        }
-	        if (!eventData) {
-	            (_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
-	            return false;
-	        }
-	        return true;
-	    }
-	}
-	SequenceAnalysis.type = 'sequenceAnalysis';
-	SequenceAnalysis.view = 'singleDefault';
-	SequenceAnalysis.transformerConstructor = SequenceAnalysisChartSpecTransformer;
-	const registerSequenceAnalysis = (option) => {
-	    const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
-	    if (vchartConstructor) {
-	        vchartConstructor.useChart([SequenceAnalysis, vchart.CommonChart]);
-	    }
-	};
-
 	class Bar3dChartSpecTransformer extends vchart.BarChartSpecTransformer {
 	    _getDefaultSeriesSpec(spec) {
 	        const seriesSpec = super._getDefaultSeriesSpec(spec);
@@ -10575,9 +10217,9 @@
 	  setWidthHeightWithoutTransform(aabbBounds) {
 	    this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
 	  }
-	  setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context) {
+	  setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
 	    this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach(animate => {
-	      Object.keys(params).forEach(key => {
+	      (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach(key => {
 	        animate.preventAttr(key);
 	      });
 	    });
@@ -10748,7 +10390,7 @@
 	      });
 	    } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
 	      type: AttributeUpdateType.STATE
-	    });
+	    }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
 	    this._emitCustomEvent("afterStateUpdate", {
 	      type: AttributeUpdateType.STATE
 	    });
@@ -11141,7 +10783,7 @@
 	  }
 	  removeChild(child) {
 	    const data = super.removeChild(child);
-	    return child.stage = null, this.getGraphicService().onRemove(child), this.addUpdateBoundTag(), data;
+	    return this.getGraphicService().onRemove(child), child.stage = null, this.addUpdateBoundTag(), data;
 	  }
 	  removeAllChild(deep = !1) {
 	    this.forEachChildren(child => {
@@ -13842,9 +13484,10 @@
 	    return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
 	  }
 	  toCustomPath() {
-	    const points = this.attribute.points,
-	      path = new CustomPath2D();
-	    return points.forEach((point, index) => {
+	    let path = super.toCustomPath();
+	    if (path) return path;
+	    const points = this.attribute.points;
+	    return path = new CustomPath2D(), points.forEach((point, index) => {
 	      0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
 	    }), path.closePath(), path;
 	  }
@@ -18234,7 +17877,7 @@
 	    return this._animateCount;
 	  }
 	  constructor() {
-	    super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
+	    super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this._animationEndFlag = !0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
 	  }
 	  isRunning() {
 	    return !this.paused && this._animateCount > 0;
@@ -18263,10 +17906,11 @@
 	  }
 	  tick(delta) {
 	    if (this.paused) return;
+	    this._animationEndFlag && (this._animationEndFlag = !1, this.emit("animationStart"));
 	    const scaledDelta = delta * this._playSpeed;
 	    this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
 	      animate.status === AnimateStatus.END ? this.removeAnimate(animate, !0) : animate.status !== AnimateStatus.RUNNING && animate.status !== AnimateStatus.INITIAL || animate.advance(scaledDelta);
-	    }), 0 === this._animateCount && this.emit("animationEnd");
+	    }), 0 === this._animateCount && (this._animationEndFlag = !0, this.emit("animationEnd"));
 	  }
 	  clear() {
 	    this.forEachAccessAnimate(animate => {
@@ -18330,7 +17974,9 @@
 	    return this._timeline;
 	  }
 	  bind(target) {
-	    return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
+	    return this.target = target, this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this), this.onRemove(() => {
+	      this.stop(), this.target.animates.delete(this.id);
+	    }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
 	  }
 	  to(props, duration = 300, easing = "linear") {
 	    const step = new Step(AnimateStepType.to, props, duration, easing);
@@ -18544,8 +18190,8 @@
 	  }
 	  init() {
 	    this.interval = 16, this.status = STATUS.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
-	      this.initHandler();
-	    }), application.global.env && this.initHandler();
+	      this.initHandler(!1);
+	    }), application.global.env && this.initHandler(!1);
 	  }
 	  addTimeline(timeline) {
 	    this.timelines.push(timeline);
@@ -18556,10 +18202,11 @@
 	  getTimelines() {
 	    return this.timelines;
 	  }
-	  initHandler() {
-	    this.setupTickHandler();
+	  initHandler(force = !1) {
+	    this.setupTickHandler(force);
 	  }
-	  setupTickHandler() {
+	  setupTickHandler(force = !1) {
+	    if (!force && this.tickerHandler) return !0;
 	    const handler = new RAFTickHandler();
 	    return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
 	  }
@@ -18610,7 +18257,7 @@
 	    return this.status = STATUS.RUNNING, this.tickerHandler.tick(0, this.handleTick), !0;
 	  }
 	  stop() {
-	    this.status = STATUS.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
+	    this.status = STATUS.INITIAL, this.setupTickHandler(!0), this.lastFrameTime = -1;
 	  }
 	  trySyncTickStatus() {
 	    this.status === STATUS.INITIAL && this.timelines.some(timeline => timeline.isRunning()) ? this.start() : this.status === STATUS.RUNNING && this.timelines.every(timeline => !timeline.isRunning()) && this.stop();
@@ -18620,7 +18267,8 @@
 	    this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
 	  }
 	  checkSkip(delta) {
-	    if ("performance" === this.stage.params.optimize.tickRenderMode) return !1;
+	    var _a, _b, _c;
+	    if ("performance" === (null === (_c = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.params) || void 0 === _b ? void 0 : _b.optimize) || void 0 === _c ? void 0 : _c.tickRenderMode)) return !1;
 	    return delta < this.interval + 2 * (Math.random() - .5) * this._jitter;
 	  }
 	}
@@ -18871,10 +18519,11 @@
 	  _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
 	    var _a, _b, _c, _d;
 	    if (custom && customType) {
-	      const customParams = this.resolveValue(customParameters, graphic, {
+	      const customParams = Object.assign({
 	          width: graphic.stage.width,
-	          height: graphic.stage.height
-	        }),
+	          height: graphic.stage.height,
+	          group: this._target.parent
+	        }, this.resolveValue(customParameters, graphic)),
 	        objOptions = isFunction$1(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
 	      customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
 	    } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
@@ -19092,6 +18741,14 @@
 	      state.executor.stop();
 	    }), this.stateList = null;
 	  }
+	  reApplyState(state) {
+	    var _a;
+	    const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
+	    if (stateInfo) {
+	      const stateList = this.stateList.slice();
+	      stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
+	    }
+	  }
 	}
 
 	class GraphicStateExtension {
@@ -19122,11 +18779,20 @@
 	  applyUnhighlightState(animationConfig, callback) {
 	    return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
 	  }
-	  stopAnimationState(state, type) {
-	    return this._getAnimationStateManager(this).stopState(state, type), this;
+	  stopAnimationState(state, type, deep = !1) {
+	    return this._getAnimationStateManager(this).stopState(state, type), deep && this.isContainer && this.forEachChildren(child => {
+	      child.stopAnimationState(state, type, deep);
+	    }), this;
 	  }
 	  clearAnimationStates() {
-	    return this._getAnimationStateManager(this).clearState(), this;
+	    const stateManager = this._animationStateManager;
+	    return stateManager && stateManager.clearState(), this;
+	  }
+	  reApplyAnimationState(state, deep = !1) {
+	    const stateManager = this._animationStateManager;
+	    return stateManager && stateManager.reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
+	      child.reApplyAnimationState(state, deep);
+	    }), this;
 	  }
 	  static extend(graphic) {
 	    return new GraphicStateExtension()._getAnimationStateManager(graphic), graphic;
@@ -19139,7 +18805,6 @@
 	  }
 	  animate(params) {
 	    var _a, _b, _c;
-	    this.animates || (this.animates = new Map());
 	    const animate = new Animate(null == params ? void 0 : params.id, null !== (_b = null !== (_a = null == params ? void 0 : params.timeline) && void 0 !== _a ? _a : this.stage && this.stage.getTimeline()) && void 0 !== _b ? _b : defaultTimeline, null == params ? void 0 : params.slience);
 	    if (animate.bind(this), params) {
 	      const {
@@ -19149,9 +18814,7 @@
 	      } = params;
 	      null != onStart && animate.onStart(onStart), null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove);
 	    }
-	    return this.animates.set(animate.id, animate), animate.onRemove(() => {
-	      animate.stop(), this.animates.delete(animate.id);
-	    }), null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
+	    return null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
 	  }
 	  createTimeline() {
 	    return new DefaultTimeline();
@@ -19182,6 +18845,21 @@
 	  getGraphicAttribute(key, prev = !1) {
 	    return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
 	  }
+	  pauseAnimation(deep = !1) {
+	    this.animates && this.animates.forEach(animate => animate.pause()), deep && this.isContainer && this.forEachChildren(child => {
+	      child.pauseAnimation(deep);
+	    });
+	  }
+	  resumeAnimation(deep = !1) {
+	    this.animates && this.animates.forEach(animate => animate.resume()), deep && this.isContainer && this.forEachChildren(child => {
+	      child.resumeAnimation(deep);
+	    });
+	  }
+	  stopAnimation(deep = !1) {
+	    this.animates && this.animates.forEach(animate => animate.stop()), deep && this.isContainer && this.forEachChildren(child => {
+	      child.stopAnimation(deep);
+	    });
+	  }
 	}
 
 	function registerAnimate() {
@@ -19190,7 +18868,7 @@
 
 	class ACustomAnimate extends Step {
 	  constructor(customFrom, customTo, duration, easing, params) {
-	    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params;
+	    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params, this.from = customFrom, this.to = customTo;
 	  }
 	  update(end, ratio, out) {
 	    if (this.onStart(), !this.props || !this.propKeys) return;
@@ -19383,17 +19061,6 @@
 	        items,
 	        scale: axis._scale.clone()
 	    };
-	    if (!ignoreGrid) {
-	        attrs.grid = {
-	            type: 'line',
-	            start: { x: 0, y: 0 },
-	            end,
-	            items: items[0],
-	            verticalFactor: axis._axisStyle.verticalFactor,
-	            depth: depthZ,
-	            length: !ignoreGrid ? regionSize.height : 0
-	        };
-	    }
 	    const directionStr = (_a = axis.directionStr) !== null && _a !== void 0 ? _a : 'r2l';
 	    let anchor3d = [0, 0];
 	    let alpha = -Math.PI / 2;
@@ -19406,6 +19073,20 @@
 	    attrs.z = z;
 	    attrs.alpha = alpha;
 	    attrs.anchor3d = anchor3d;
+	    if (!ignoreGrid) {
+	        attrs.grid = {
+	            type: 'line',
+	            start: { x: 0, y: 0 },
+	            end,
+	            items: items[0],
+	            verticalFactor: axis._axisStyle.verticalFactor,
+	            depth: depthZ,
+	            length: !ignoreGrid ? regionSize.height : 0,
+	            alpha,
+	            z,
+	            anchor3d
+	        };
+	    }
 	    return attrs;
 	};
 
@@ -19415,7 +19096,59 @@
 	    }
 	    _afterUpdateAttribute(attrs, ignoreGrid) {
 	        const isZ = vchart.isZAxis(this._orient);
+	        const isX = vchart.isXAxis(this._orient);
+	        const isY = vchart.isYAxis(this._orient);
+	        let regionHeight = 0;
+	        let regionWidth = 0;
+	        if (!ignoreGrid) {
+	            const regions = this.getRegions();
+	            let { x: minX, y: minY } = regions[0].getLayoutStartPoint();
+	            let maxX = minX + regions[0].getLayoutRect().width;
+	            let maxY = minY + regions[0].getLayoutRect().height;
+	            for (let index = 1; index < regions.length; index++) {
+	                const region = regions[index];
+	                const { x, y } = region.getLayoutStartPoint();
+	                const { width, height } = region.getLayoutRect();
+	                minX = Math.min(minX, x);
+	                maxX = Math.max(maxX, width + x);
+	                minY = Math.min(minY, y);
+	                maxY = Math.max(maxY, height + y);
+	            }
+	            regionHeight = Math.abs(maxY - minY);
+	            regionWidth = Math.abs(maxX - minX);
+	        }
+	        let gridLength = 0;
+	        let axisLength = 0;
+	        const { width, height } = this.getLayoutRect();
+	        let end = { x: 0, y: 0 };
+	        if (isX) {
+	            end = { x: width, y: 0 };
+	            gridLength = regionHeight;
+	            axisLength = width;
+	        }
+	        else if (isY) {
+	            end = { x: 0, y: height };
+	            gridLength = regionWidth;
+	            axisLength = height;
+	        }
+	        const depth = this.layout3dBox ? this.layout3dBox.length : 0;
 	        if (!isZ) {
+	            const items = this.getLabelItems(axisLength);
+	            attrs.grid = {
+	                length: gridLength
+	            };
+	            attrs.start = { x: 0, y: 0 };
+	            attrs.text = this._spec.title.text || this._dataFieldText;
+	            attrs.maxWidth = this._getTitleLimit(isX);
+	            attrs.items = items;
+	            attrs.grid = {
+	                type: 'line',
+	                start: { x: 0, y: 0 },
+	                end,
+	                items: items[0],
+	                depth,
+	                length: gridLength
+	            };
 	            return attrs;
 	        }
 	        return getUpdateAttributeOfZAxis(this, ignoreGrid);
@@ -20296,6 +20029,80 @@
 	})(ImageCloudMarkNameEnum || (ImageCloudMarkNameEnum = {}));
 	const imageCloudSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["image"]: { name: "image", type: "image" }, ["imageMask"]: { name: "imageMask", type: "rect" } });
 
+	const calculateNodeValue = subTree => {
+	  let sum = 0;
+	  return subTree.forEach((node, index) => {
+	    var _a;
+	    isNil$1(node.value) && ((null === (_a = node.children) || void 0 === _a ? void 0 : _a.length) ? node.value = calculateNodeValue(node.children) : node.value = 0), sum += Math.abs(node.value);
+	  }), sum;
+	};
+	function makeHierarchicNodes(originalNodes, nodeKeyFunc, nodes = [], nodeMap = {}, originalLinks) {
+	  calculateNodeValue(originalNodes);
+	  const doSubTree = (subTree, depth, parents) => {
+	    subTree.forEach((node, index) => {
+	      const nodeKey = nodeKeyFunc ? nodeKeyFunc(node) : parents ? `${parents[parents.length - 1].key}-${index}` : `${depth}-${index}`,
+	        nodeValue = isNil$1(node.value) ? 0 : toValidNumber(node.value);
+	      if (nodeMap[nodeKey]) nodeMap[nodeKey].value = void 0;else {
+	        const nodeElement = {
+	          depth: depth,
+	          datum: node,
+	          index: index,
+	          key: nodeKey,
+	          value: nodeValue,
+	          sourceLinks: [],
+	          targetLinks: []
+	        };
+	        nodeMap[nodeKey] = nodeElement, nodes.push(nodeElement);
+	      }
+	      parents && originalLinks && originalLinks.push({
+	        source: parents[parents.length - 1].key,
+	        target: nodeKey,
+	        value: nodeValue,
+	        parents: parents
+	      }), node.children && node.children.length && doSubTree(node.children, depth + 1, parents ? parents.concat([nodeMap[nodeKey]]) : [nodeMap[nodeKey]]);
+	    });
+	  };
+	  return doSubTree(originalNodes, 0, null), nodes;
+	}
+	function computeHierarchicNodeLinks(originalNodes, nodeKeyFunc) {
+	  const nodes = [],
+	    links = [],
+	    nodeMap = {},
+	    linkMap = {},
+	    originalLinks = [];
+	  return makeHierarchicNodes(originalNodes, nodeKeyFunc, nodes, nodeMap, originalLinks), originalLinks.forEach((link, index) => {
+	    const key = `${link.source}-${link.target}`,
+	      linkDatum = pickWithout(link, ["parents"]);
+	    if (linkDatum.parents = link.parents.map(node => pickWithout(node, ["sourceLinks", "targetLinks"])), linkMap[key]) return linkMap[key].value += toValidNumber(link.value), void linkMap[key].datum.push(linkDatum);
+	    const linkElement = {
+	      index: index,
+	      key: `${link.source}-${link.target}`,
+	      source: link.source,
+	      target: link.target,
+	      datum: [linkDatum],
+	      value: link.value,
+	      parents: link.parents.map(parent => parent.key)
+	    };
+	    links.push(linkElement), nodeMap[link.source].sourceLinks.push(linkElement), nodeMap[link.target].targetLinks.push(linkElement), linkMap[key] = linkElement;
+	  }), {
+	    nodes: nodes,
+	    links: links,
+	    nodeMap: nodeMap
+	  };
+	}
+	function computeNodeValues(nodes) {
+	  for (let i = 0, len = nodes.length; i < len; i++) {
+	    const node = nodes[i];
+	    node.value = Math.max(isNil$1(node.value) ? 0 : toValidNumber(node.value), node.sourceLinks.reduce((sum, link) => {
+	      var _a;
+	      return sum + (null !== (_a = toValidNumber(link.value)) && void 0 !== _a ? _a : 0);
+	    }, 0), node.targetLinks.reduce((sum, link) => {
+	      var _a;
+	      return sum + (null !== (_a = toValidNumber(link.value)) && void 0 !== _a ? _a : 0);
+	    }, 0));
+	  }
+	}
+
 	const shapes = {
 	  triangleForward: triangleForward,
 	  triangleUpright: triangle,
@@ -22247,6 +22054,297 @@
 	    vchart.Factory.registerChart(ImageCloudChart.type, ImageCloudChart);
 	};
 
+	class CompareSankeyChartSpecTransformer extends vchart.SankeyChartSpecTransformer {
+	    transformSpec(spec) {
+	        super.transformSpec(spec);
+	    }
+	    _getDefaultSeriesSpec(spec) {
+	        const seriesSpec = super._getDefaultSeriesSpec(spec);
+	        seriesSpec.subNodeGap = spec.subNodeGap;
+	        seriesSpec.compareNodeColor = spec.compareNodeColor;
+	        seriesSpec.compareLinkColor = spec.compareLinkColor;
+	        seriesSpec.activeLink = spec.activeLink;
+	        return seriesSpec;
+	    }
+	}
+
+	const compareSankeySubNodes = (data) => {
+	    const viewData = data[0];
+	    if (!viewData.latestData) {
+	        return [];
+	    }
+	    const subData = Object.keys(viewData.latestData);
+	    if (!subData.length) {
+	        return {};
+	    }
+	    const subNodes = [];
+	    subData.forEach(key => {
+	        subNodes.push(...viewData.latestData[key].nodes);
+	    });
+	    return [{ nodes: subNodes }];
+	};
+
+	const compareSankeySubData = (data, opt) => {
+	    var _a;
+	    const viewData = data[0];
+	    if (!((_a = viewData.latestData) === null || _a === void 0 ? void 0 : _a.length)) {
+	        return {};
+	    }
+	    const rawDataTree = opt.rawData().latestData[0];
+	    const subNodeGap = opt.subNodeGap;
+	    const keyFunc = isFunction$1(opt.nodeKey) ? opt.nodeKey : opt.nodeKey ? field(opt.nodeKey) : null;
+	    const subNodeMap = {};
+	    rawDataTree.subNode.forEach((sunGroup) => {
+	        subNodeMap[sunGroup.type] = computeHierarchicNodeLinks(sunGroup.nodes, keyFunc);
+	        computeNodeValues(subNodeMap[sunGroup.type].nodes);
+	    });
+	    const subCount = Object.keys(subNodeMap).length;
+	    viewData.latestData[0].nodes.forEach((n) => {
+	        let path = [];
+	        if (n.targetLinks.length) {
+	            const link = n.targetLinks[0];
+	            path = [...link.parents];
+	        }
+	        path.push(n.key);
+	        let currentY = n.y0;
+	        const totalSize = n.y1 - n.y0 - (subCount - 1) * subNodeGap;
+	        const totalValue = n.value;
+	        rawDataTree.subNode.forEach((sunGroup) => {
+	            const subNode = subNodeMap[sunGroup.type].nodes.find(subN => subN.key === n.key);
+	            if (!subNode) {
+	                return;
+	            }
+	            const percent = subNode.value / totalValue;
+	            subNode.x0 = n.x0;
+	            subNode.x1 = n.x1;
+	            subNode.y0 = currentY;
+	            subNode.y1 = currentY + totalSize * percent;
+	            subNode.type = sunGroup.type;
+	            subNode.sourceNode = n;
+	            currentY += totalSize * percent + subNodeGap;
+	        });
+	    });
+	    return subNodeMap;
+	};
+
+	class CompareSankeyChart extends vchart.SankeyChart {
+	    constructor() {
+	        super(...arguments);
+	        this.type = 'compareSankey';
+	        this.transformerConstructor = CompareSankeyChartSpecTransformer;
+	    }
+	}
+	CompareSankeyChart.type = 'compareSankey';
+	CompareSankeyChart.transformerConstructor = CompareSankeyChartSpecTransformer;
+	class CompareSankeySeries extends vchart.SankeySeries {
+	    constructor() {
+	        super(...arguments);
+	        this._fillCompareNode = (datum) => {
+	            var _a, _b, _c;
+	            if ((_a = this._spec.compareNodeColor) === null || _a === void 0 ? void 0 : _a[datum.type]) {
+	                return this._spec.compareNodeColor[datum.type];
+	            }
+	            return (_c = (_b = this._spec.node.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this._fillByNode(datum);
+	        };
+	        this._fillActiveLink = (datum) => {
+	            var _a, _b, _c;
+	            if ((_a = this._spec.compareLinkColor) === null || _a === void 0 ? void 0 : _a[datum.type]) {
+	                return this._spec.compareLinkColor[datum.type];
+	            }
+	            return (_c = (_b = this._spec.link.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this._fillByLink(datum);
+	        };
+	    }
+	    initData() {
+	        var _a;
+	        super.initData();
+	        const { dataSet } = this._option;
+	        const compareSubData = new DataView(dataSet, { name: `compare-sankey-sub-data-${this.id}-data` });
+	        compareSubData.parse([this.getViewData()], {
+	            type: 'dataview'
+	        });
+	        this._subData = compareSubData;
+	        const compareNodeData = new DataView(dataSet, { name: `compare-sankey-node-${this.id}-data` });
+	        compareNodeData.parse([compareSubData], {
+	            type: 'dataview'
+	        });
+	        vchart.registerDataSetInstanceTransform(this._dataSet, 'compareSankeySubData', compareSankeySubData);
+	        compareSubData.transform({
+	            type: 'compareSankeySubData',
+	            options: {
+	                rawData: () => this.getRawData(),
+	                valueField: this._valueField,
+	                nodeKey: this._spec.nodeKey,
+	                subNodeGap: (_a = this._spec.subNodeGap) !== null && _a !== void 0 ? _a : 2
+	            }
+	        });
+	        vchart.registerDataSetInstanceTransform(this._dataSet, 'compareSankeySubNodes', compareSankeySubNodes);
+	        compareNodeData.transform({
+	            type: 'compareSankeySubNodes'
+	        });
+	        this._nodesSeriesData.parse([compareNodeData], {
+	            type: 'dataview'
+	        });
+	        this._activeLinkData = new DataView(dataSet, { name: `compare-sankey-link-${this.id}-data` });
+	    }
+	    initEvent() {
+	        var _a;
+	        super.initEvent();
+	        (_a = this._activeLinkData) === null || _a === void 0 ? void 0 : _a.target.addListener('change', this.activeLinkDataUpdate.bind(this));
+	    }
+	    initMark() {
+	        super.initMark();
+	        const linkMark = this._createMark(Object.assign(Object.assign({}, vchart.SankeySeries.mark.link), { name: 'activeLink' }), {
+	            dataView: this._activeLinkData
+	        });
+	        if (linkMark) {
+	            this._activeLinkMark = linkMark;
+	        }
+	    }
+	    compileData() {
+	        var _a;
+	        super.compileData();
+	        (_a = this._activeLinkMark) === null || _a === void 0 ? void 0 : _a.compileData();
+	    }
+	    _initLinkMarkStyle() {
+	        super._initLinkMarkStyle();
+	        this._activeLinkMark.setGlyphConfig({
+	            direction: this.direction
+	        });
+	        this.setMarkStyle(this._activeLinkMark, {
+	            x0: (datum) => datum.x0,
+	            x1: (datum) => datum.x1,
+	            y0: (datum) => datum.y0,
+	            y1: (datum) => datum.y1,
+	            thickness: (datum) => datum.thickness
+	        }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+	        this.setMarkStyle(this._activeLinkMark, {
+	            fill: this._fillActiveLink
+	        }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.User_Mark);
+	    }
+	    _initNodeMarkStyle() {
+	        super._initNodeMarkStyle();
+	        if (this._spec.compareNodeColor) {
+	            this.setMarkStyle(this._nodeMark, {
+	                fill: this._fillCompareNode
+	            }, 'normal', vchart.AttributeLevel.User_Mark);
+	        }
+	    }
+	    activeLinkDataUpdate() {
+	        this._activeLinkMark.getData().updateData();
+	    }
+	    _handleNodeRelatedClick(graphic) {
+	        const nodeDatum = vchart.getDatumOfGraphic(graphic);
+	        const allNodeElements = this._nodeMark.getGraphics();
+	        if (!allNodeElements || !allNodeElements.length) {
+	            return;
+	        }
+	        const allLinkElements = this._linkMark.getGraphics();
+	        if (!allLinkElements || !allLinkElements.length) {
+	            return;
+	        }
+	        allLinkElements.forEach(el => {
+	            el.removeState([vchart.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]);
+	        });
+	        this._highLightElements(allLinkElements, []);
+	        const nodeDatums = allNodeElements.map(el => vchart.getDatumOfGraphic(el));
+	        const pickNodeDatums = nodeDatums.filter(d => d.key === nodeDatum.key);
+	        const highlightLinksData = [];
+	        const highlightNodeKeys = [];
+	        this._activeTargetLink(nodeDatum, pickNodeDatums, allNodeElements, allLinkElements, highlightNodeKeys, highlightLinksData);
+	        this._activeSourceLink(nodeDatum, pickNodeDatums, nodeDatums, allNodeElements, highlightNodeKeys, highlightLinksData);
+	        this._highLightElements(allNodeElements, highlightNodeKeys);
+	        this._activeLinkData.parseNewData(highlightLinksData);
+	        this._needClear = true;
+	    }
+	    _activeTargetLink(nodeDatum, pickNodeDatums, allNodeElements, allLinkElements, highlightNodeKeys, highlightLinksData) {
+	        this._handleClearEmpty();
+	        const sourceNode = nodeDatum.sourceNode;
+	        const firstTarget = sourceNode.targetLinks[0];
+	        if (!firstTarget) {
+	            return;
+	        }
+	        let percent = 0;
+	        pickNodeDatums.forEach(n => {
+	            const link = n.targetLinks.find((l) => l.key === firstTarget.key);
+	            if (link) {
+	                const p = link.value / firstTarget.value;
+	                const key = firstTarget.key + '_' + n.type;
+	                const activeLink = Object.assign(Object.assign({}, firstTarget), { y0: firstTarget.y0 - firstTarget.thickness / 2 + (percent + p / 2) * firstTarget.thickness, y1: n.y0 + (p * firstTarget.thickness) / 2, thickness: p * firstTarget.thickness, key, type: n.type, [vchart.DEFAULT_DATA_INDEX]: highlightLinksData.length, [vchart.DEFAULT_DATA_KEY]: key });
+	                highlightLinksData.push(activeLink);
+	                percent += p;
+	            }
+	        });
+	        highlightNodeKeys.push(...firstTarget.parents, nodeDatum.key);
+	        const linkKeys = [];
+	        for (let i = 0; i < firstTarget.parents.length - 1; i++) {
+	            linkKeys.push(firstTarget.parents[i] + '-' + firstTarget.parents[i + 1]);
+	        }
+	        this._highLightElements(allLinkElements, linkKeys);
+	    }
+	    _activeSourceLink(nodeDatum, pickNodeDatums, allNodeDatums, allNodeElements, highlightNodeKeys, highlightLinksData) {
+	        this._handleClearEmpty();
+	        const sourceNode = nodeDatum.sourceNode;
+	        const sourceLinks = sourceNode.sourceLinks;
+	        if (!(sourceLinks === null || sourceLinks === void 0 ? void 0 : sourceLinks.length)) {
+	            return;
+	        }
+	        const sourceValueTemp = {};
+	        sourceLinks.forEach((sourceLink) => {
+	            highlightNodeKeys.push(sourceLink.target);
+	            pickNodeDatums.forEach((n, index) => {
+	                var _a;
+	                sourceValueTemp[n.type] = (_a = sourceValueTemp[n.type]) !== null && _a !== void 0 ? _a : 0;
+	                const link = n.sourceLinks.find((l) => l.key === sourceLink.key);
+	                if (link) {
+	                    const p = link.value / n.value;
+	                    const totalSize = n.y1 - n.y0;
+	                    const size = totalSize * p;
+	                    const key = sourceLink.key + '_' + n.type;
+	                    const activeLink = Object.assign(Object.assign({}, sourceLink), { y0: n.y0 + sourceValueTemp[n.type] * totalSize + size / 2, thickness: size, key, type: n.type, [vchart.DEFAULT_DATA_INDEX]: highlightLinksData.length, [vchart.DEFAULT_DATA_KEY]: key });
+	                    if (index === 0) {
+	                        activeLink.y1 = sourceLink.y1 - sourceLink.thickness / 2 + size / 2;
+	                    }
+	                    else {
+	                        const targetNode = allNodeDatums.find(_n => _n.key === link.target && _n.type === n.type);
+	                        if (targetNode) {
+	                            activeLink.y1 = targetNode.y0 + size / 2;
+	                        }
+	                        else {
+	                            return;
+	                        }
+	                    }
+	                    highlightLinksData.push(activeLink);
+	                    sourceValueTemp[n.type] += p;
+	                }
+	            });
+	        });
+	    }
+	    _handleClearEmpty() {
+	        super._handleClearEmpty();
+	        this._activeLinkData.parseNewData([]);
+	        const allNodeElements = this._nodeMark.getGraphics();
+	        if (allNodeElements || !allNodeElements.length) {
+	            allNodeElements.forEach(el => {
+	                el.removeState(vchart.STATE_VALUE_ENUM.STATE_HOVER);
+	            });
+	        }
+	        const allLinkElements = this._linkMark.getGraphics();
+	        if (allLinkElements || !allLinkElements.length) {
+	            allLinkElements.forEach(el => {
+	                el.removeState(vchart.STATE_VALUE_ENUM.STATE_HOVER);
+	            });
+	        }
+	    }
+	}
+	const registerCompareSankeyChart = (option) => {
+	    vchart.registerMarkFilterTransform();
+	    const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
+	    if (vchartConstructor) {
+	        vchartConstructor.useChart([CompareSankeyChart]);
+	        vchartConstructor.useSeries([CompareSankeySeries]);
+	    }
+	};
+
 	const GROUP_ATTRIBUTES = ["x", "y", "dx", "dy", "scaleX", "scaleY", "angle", "anchor", "postMatrix", "visible", "clip", "pickable", "childrenPickable", "zIndex", "cursor"];
 	class AbstractComponent extends Group {
 	  constructor(attributes, options) {
@@ -25317,6 +25415,8 @@
 	exports.Bar3dSeries = Bar3dSeries;
 	exports.Bar3dSeriesSpecTransformer = Bar3dSeriesSpecTransformer;
 	exports.BarLinkComponent = BarLinkComponent;
+	exports.CompareSankeyChart = CompareSankeyChart;
+	exports.CompareSankeySeries = CompareSankeySeries;
 	exports.ConversionFunnelChart = ConversionFunnelChart;
 	exports.ConversionFunnelSeries = ConversionFunnelSeries;
 	exports.DefaultBandWidth = DefaultBandWidth;
@@ -25340,7 +25440,6 @@
 	exports.RankingBar = RankingBar;
 	exports.RankingList = RankingList;
 	exports.SERIES_BREAK = SERIES_BREAK;
-	exports.SequenceAnalysis = SequenceAnalysis;
 	exports.SequenceScatterKDE = SequenceScatterKDE;
 	exports.SequenceScatterLink = SequenceScatterLink;
 	exports.SequenceScatterPixel = SequenceScatterPixel;
@@ -25362,6 +25461,7 @@
 	exports.registerBar3dChart = registerBar3dChart;
 	exports.registerBar3dSeries = registerBar3dSeries;
 	exports.registerBarLink = registerBarLink;
+	exports.registerCompareSankeyChart = registerCompareSankeyChart;
 	exports.registerConversionFunnelChart = registerConversionFunnelChart;
 	exports.registerFunnel3dChart = registerFunnel3dChart;
 	exports.registerFunnel3dSeries = registerFunnel3dSeries;
@@ -25377,7 +25477,6 @@
 	exports.registerRankingBarChart = registerRankingBarChart;
 	exports.registerRankingList = registerRankingList;
 	exports.registerSVGSource = registerSVGSource;
-	exports.registerSequenceAnalysis = registerSequenceAnalysis;
 	exports.registerSequenceScatterKDE = registerSequenceScatterKDE;
 	exports.registerSequenceScatterLink = registerSequenceScatterLink;
 	exports.registerSequenceScatterPixel = registerSequenceScatterPixel;