@visactor/vchart 1.11.7-alpha.0 → 1.11.7-alpha.2

package/build/index.js

@@ -11819,7 +11819,9 @@
       onFirstRun() {}
       onStart() {}
       onEnd() {}
-      getEndProps() {}
+      getEndProps() {
+        return this.to;
+      }
       getFromProps() {
         return this.from;
       }
@@ -12330,7 +12332,8 @@
     }(Direction || (Direction = {}));
     class TagPointsUpdate extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params), this.newPointAnimateType = "appear" === (null == params ? void 0 : params.newPointAnimateType) ? "appear" : "grow";
+        var _a, _b;
+        super(from, to, duration, easing, params), this.newPointAnimateType = null !== (_a = null == params ? void 0 : params.newPointAnimateType) && void 0 !== _a ? _a : "grow", this.clipRangeByDimension = null !== (_b = null == params ? void 0 : params.clipRangeByDimension) && void 0 !== _b ? _b : "x";
       }
       onBind() {
         var _a, _b;
@@ -12353,10 +12356,11 @@
           lastMatchedIndex = i, lastMatchedPoint = tagMap.get(this.toPoints[i].context);
           break;
         }
+        "clip" === this.newPointAnimateType && 0 !== this.toPoints.length && (Number.isFinite(lastMatchedIndex) ? (this.clipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension], isValidNumber$1(this.clipRange) ? this.clipRange = clamp$1(this.clipRange, 0, 1) : this.clipRange = 0) : this.clipRange = 0);
         let prevMatchedPoint = this.toPoints[0];
         this.interpolatePoints = this.toPoints.map((point, index) => {
           const matchedPoint = tagMap.get(point.context);
-          return matchedPoint ? (prevMatchedPoint = matchedPoint, [matchedPoint, point]) : "appear" === this.newPointAnimateType ? [point, point] : index < firstMatchedIndex && firstMatchedPoint ? [firstMatchedPoint, point] : index > lastMatchedIndex && lastMatchedPoint ? [lastMatchedPoint, point] : [prevMatchedPoint, point];
+          return matchedPoint ? (prevMatchedPoint = matchedPoint, [matchedPoint, point]) : "appear" === this.newPointAnimateType || "clip" === this.newPointAnimateType ? [point, point] : index < firstMatchedIndex && firstMatchedPoint ? [firstMatchedPoint, point] : index > lastMatchedIndex && lastMatchedPoint ? [lastMatchedPoint, point] : [prevMatchedPoint, point];
         }), this.points = this.interpolatePoints.map(interpolate => {
           const fromPoint = interpolate[0],
             toPoint = interpolate[1],
@@ -12368,7 +12372,7 @@
         this.points = this.points.map((point, index) => {
           const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
           return newPoint.context = point.context, newPoint;
-        }), out.points = this.points;
+        }), this.clipRange && (out.clipRange = this.clipRange + (1 - this.clipRange) * ratio), out.points = this.points;
       }
     }
     class ClipGraphicAnimate extends ACustomAnimate {
@@ -20849,7 +20853,7 @@
         } else startP = points[0], endP = points[points.length - 1];
         const xTotalLength = abs$1(endP.x - startP.x),
           yTotalLength = abs$1(endP.y - startP.y);
-        direction = Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction$1.ROW : Direction$1.COLUMN : Direction$1.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
+        direction = null == endP.x1 ? Direction$1.ROW : null == endP.y1 ? Direction$1.COLUMN : Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction$1.ROW : Direction$1.COLUMN : Direction$1.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
           offsetX: offsetX,
           offsetY: offsetY,
           offsetZ: offsetZ,
@@ -51576,7 +51580,7 @@
         };
       return points.forEach(point => {
         center.x += point.x, center.y += point.y;
-      }), center.x /= points.length, center.y /= points.length, options && options.center && (isValidNumber$1(options.center.x) && (center.x = options.center.x), isValidNumber$1(options.center.y) && (center.y = options.center.y)), "area" === element.mark.markType && (center.x1 = center.x, center.y1 = center.y), points.map(() => Object.assign(center));
+      }), center.x /= points.length, center.y /= points.length, options && options.center && (isValidNumber$1(options.center.x) && (center.x = options.center.x), isValidNumber$1(options.center.y) && (center.y = options.center.y)), "area" === element.mark.markType && (center.x1 = center.x, center.y1 = center.y), points.map(point => Object.assign({}, point, center));
     };
     const growPointsIn = (element, options, animationParameters) => ({
       from: {
@@ -51598,21 +51602,21 @@
       var _a;
       if (options && "negative" === options.orient) {
         let groupRight = animationParameters.width;
-        return animationParameters.group && (groupRight = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = groupRight), {
+        return animationParameters.group && (groupRight = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = groupRight), Object.assign(Object.assign({}, point), {
           x: groupRight,
           y: point.y,
           x1: groupRight,
           y1: point.y1,
           defined: !1 !== point.defined
-        };
+        });
       }
-      return {
+      return Object.assign(Object.assign({}, point), {
         x: 0,
         y: point.y,
         x1: 0,
         y1: point.y1,
         defined: !1 !== point.defined
-      };
+      });
     });
     const growPointsXIn = (element, options, animationParameters) => ({
       from: {
@@ -51634,21 +51638,21 @@
       var _a;
       if (options && "negative" === options.orient) {
         let groupBottom = animationParameters.height;
-        return animationParameters.group && (groupBottom = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = groupBottom), {
+        return animationParameters.group && (groupBottom = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = groupBottom), Object.assign(Object.assign({}, point), {
           x: point.x,
           y: groupBottom,
           x1: point.x1,
           y1: groupBottom,
           defined: !1 !== point.defined
-        };
+        });
       }
-      return {
+      return Object.assign(Object.assign({}, point), {
         x: point.x,
         y: 0,
         x1: point.x1,
         y1: 0,
         defined: !1 !== point.defined
-      };
+      });
     });
     const growPointsYIn = (element, options, animationParameters) => ({
       from: {
@@ -52228,6 +52232,17 @@
     const RECT_X1 = `${PREFIX}_rect_x1`;
     const RECT_Y = `${PREFIX}_rect_y`;
     const RECT_Y1 = `${PREFIX}_rect_y1`;
+    const defaultSeriesIgnoreCheckKeys = {
+        data: true
+    };
+    const defaultSeriesCompileCheckKeys = {
+        animation: true,
+        animationAppear: true,
+        animationEnter: true,
+        animationUpdate: true,
+        animationExit: true,
+        animationNormal: true
+    };
 
     const barSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { ["bar"]: { name: "bar", type: "rect" }, ["barBackground"]: { name: "barBackground", type: "rect" } });
     const bar3dSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { ["bar3d"]: { name: "bar3d", type: "rect3d" } });
@@ -54903,24 +54918,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return {};
     }
 
-    function convertBackgroundSpec(bg) {
-        if (!bg) {
-            return null;
-        }
-        if (typeof bg === 'string') {
-            return {
-                fill: bg,
-                fillOpacity: 1
-            };
-        }
-        if (typeof bg !== 'object') {
-            return null;
-        }
-        const result = pickWithout(bg, ['x', 'y', 'width', 'height', 'x1', 'y1', 'image']);
-        result.background = bg.image;
-        return result;
-    }
-
     function specTransform(spec, special = {
         data: v => v
     }) {
@@ -60628,8 +60625,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerMark(GroupMark.type, GroupMark);
     };
 
-    const Appear_ClipIn = {
-        type: 'clipIn'
+    const Appear_ClipIn = (params) => {
+        return {
+            type: 'clipIn',
+            options: {
+                clipDimension: params.direction === "horizontal" ? 'y' : 'x'
+            }
+        };
     };
     const Appear_FadeIn$8 = {
         type: 'fadeIn'
@@ -60649,7 +60651,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             case 'fadeIn':
                 return Appear_FadeIn$8;
             default:
-                return Appear_ClipIn;
+                return Appear_ClipIn(params);
         }
     }
 
@@ -60740,7 +60742,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     channel: ['points'],
                     custom: TagPointsUpdate,
                     duration: DEFAULT_ANIMATION_CONFIG.update.duration,
-                    easing: DEFAULT_ANIMATION_CONFIG.update.easing
+                    easing: DEFAULT_ANIMATION_CONFIG.update.easing,
+                    customParameters: {
+                        clipRangeByDimension: params.direction === "horizontal" ? 'y' : 'x'
+                    }
                 }
             ],
             disappear: { type: 'clipOut' }
@@ -61259,6 +61264,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isFunction$1(updateSpecResult)) {
                 updateSpecResult = updateSpecResult();
             }
+            if (updateSpecResult.reAnimate) {
+                this.stopAnimation();
+                this._updateAnimateState(true);
+            }
             this._reCompile(updateSpecResult);
             if (sync) {
                 return this._renderSync(option);
@@ -61364,16 +61373,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return this._renderSync(option);
             });
         }
-        _updateAnimateState() {
+        _updateAnimateState(initial) {
             var _a, _b;
             if (this._option.animation) {
+                const animationState = initial ? AnimationStateEnum.appear : AnimationStateEnum.update;
                 (_a = this._chart) === null || _a === void 0 ? void 0 : _a.getAllRegions().forEach(region => {
                     var _a;
-                    (_a = region.animate) === null || _a === void 0 ? void 0 : _a.updateAnimateState(AnimationStateEnum.update, true);
+                    (_a = region.animate) === null || _a === void 0 ? void 0 : _a.updateAnimateState(animationState, true);
                 });
                 (_b = this._chart) === null || _b === void 0 ? void 0 : _b.getAllComponents().forEach(component => {
                     var _a;
-                    (_a = component.animate) === null || _a === void 0 ? void 0 : _a.updateAnimateState(AnimationStateEnum.update, true);
+                    (_a = component.animate) === null || _a === void 0 ? void 0 : _a.updateAnimateState(animationState, true);
                 });
             }
         }
@@ -61406,19 +61416,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._isReleased = true;
             InstanceManager.unregisterInstance(this);
         }
-        updateData(id, data, options) {
+        updateData(id, data, parserOptions, userUpdateOptions) {
             return __awaiter$7(this, void 0, void 0, function* () {
-                return this.updateDataSync(id, data, options);
+                return this.updateDataSync(id, data, parserOptions, userUpdateOptions);
             });
         }
-        _updateDataById(id, data, options) {
+        _updateDataById(id, data, parserOptions) {
             const preDV = this._spec.data.find((dv) => dv.name === id || dv.id === id);
             if (preDV) {
                 if (preDV.id === id) {
                     preDV.values = data;
                 }
                 else if (preDV.name === id) {
-                    preDV.parse(data, options);
+                    preDV.parse(data, parserOptions);
                 }
             }
             else {
@@ -61450,17 +61460,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return this;
             });
         }
-        updateDataSync(id, data, options) {
+        updateDataSync(id, data, parserOptions, userUpdateOptions) {
             if (isNil$1(this._dataSet)) {
                 return this;
             }
             if (this._chart) {
-                this._chart.updateData(id, data, true, options);
+                if (userUpdateOptions === null || userUpdateOptions === void 0 ? void 0 : userUpdateOptions.reAnimate) {
+                    this.stopAnimation();
+                    this._updateAnimateState(true);
+                }
+                this._chart.updateData(id, data, true, parserOptions);
                 this._compiler.render();
                 return this;
             }
             this._spec.data = array(this._spec.data);
-            this._updateDataById(id, data, options);
+            this._updateDataById(id, data, parserOptions);
             return this;
         }
         updateFullDataSync(data, reRender = true) {
@@ -61504,9 +61518,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return this.updateFullDataSync(data, reRender);
             });
         }
-        updateSpec(spec, forceMerge = false, morphConfig) {
+        updateSpec(spec, forceMerge = false, morphConfig, userUpdateOptions) {
             return __awaiter$7(this, void 0, void 0, function* () {
-                const result = this._updateSpec(spec, forceMerge);
+                const result = this._updateSpec(spec, forceMerge, userUpdateOptions);
                 if (!result) {
                     return this;
                 }
@@ -61518,8 +61532,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return this;
             });
         }
-        updateSpecSync(spec, forceMerge = false, morphConfig) {
-            const result = this._updateSpec(spec, forceMerge);
+        updateSpecSync(spec, forceMerge = false, morphConfig, userUpdateOptions) {
+            const result = this._updateSpec(spec, forceMerge, userUpdateOptions);
             if (!result) {
                 return this;
             }
@@ -61534,7 +61548,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const result = this._updateSpec(spec, forceMerge);
             return this._updateCustomConfigAndRecompile(result, Object.assign({ actionSource: 'updateSpecAndRecompile' }, option));
         }
-        _updateSpec(spec, forceMerge = false) {
+        _updateSpec(spec, forceMerge = false, userUpdateOptions) {
             var _a, _b;
             const lastSpec = this._spec;
             if (!this._setNewSpec(spec, forceMerge)) {
@@ -61555,13 +61569,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 };
             }
             this._initChartSpec(this._spec, 'render');
-            return mergeUpdateResult(this._chart.updateSpec(this._spec), {
+            const res = mergeUpdateResult(this._chart.updateSpec(this._spec), {
                 reTransformSpec: false,
                 change: reSize,
                 reMake: false,
                 reCompile: false,
                 reSize
             });
+            return userUpdateOptions
+                ? Object.assign(Object.assign({}, res), userUpdateOptions) : res;
         }
         updateModelSpec(filter, spec, forceMerge = false, morphConfig) {
             return __awaiter$7(this, void 0, void 0, function* () {
@@ -61780,7 +61796,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return resize;
         }
         _getBackground() {
-            const specBackground = typeof this._spec.background === 'string' ? this._spec.background : null;
+            const specBackground = typeof this._spec.background === 'string' || (isObject$2(this._spec.background) && this._spec.background.gradient)
+                ? this._spec.background
+                : null;
             return specBackground || this._currentTheme.background || this._option.background;
         }
         getCurrentTheme() {
@@ -66428,7 +66446,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.11.7-alpha.0";
+    const version = "1.11.7-alpha.2";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -67704,7 +67722,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 result.reMake = true;
                 return result;
             }
-            ignoreCheckKeys = ignoreCheckKeys !== null && ignoreCheckKeys !== void 0 ? ignoreCheckKeys : { data: true };
+            ignoreCheckKeys = Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), defaultSeriesCompileCheckKeys), ignoreCheckKeys);
             ignoreCheckKeys.invalidType = true;
             if (spec.invalidType !== prevSpec.invalidType) {
                 result.reCompile = true;
@@ -67727,14 +67745,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             })) {
                 result.reCompile = true;
             }
-            if (currentKeys.some(k => {
-                if (ignoreCheckKeys[k]) {
-                    return false;
-                }
-                else if (!isEqual$1(spec[k], prevSpec[k])) {
-                    return true;
-                }
-                return false;
+            if (currentKeys.some((k) => {
+                return defaultSeriesCompileCheckKeys[k] && !isEqual$1(spec[k], prevSpec[k]);
+            })) {
+                result.reCompile = true;
+            }
+            if (currentKeys.some((k) => {
+                return !ignoreCheckKeys[k] && !isEqual$1(spec[k], prevSpec[k]);
             })) {
                 result.reMake = true;
                 return result;
@@ -67762,6 +67779,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._tooltipHelper) {
                 this._tooltipHelper.updateTooltipSpec();
             }
+            const hasAnimation = isAnimationEnabledForSeries(this);
+            if (hasAnimation) {
+                this.initAnimation();
+            }
         }
         onEvaluateEnd(ctx) {
             this._data.updateData();
@@ -71767,7 +71788,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._transformer = new this.transformerConstructor(Object.assign(Object.assign({}, this._option), { type: this.type, seriesType: this.seriesType }));
             this._chartData.parseData(this._spec.data);
             this._createGlobalScale();
-            this._spec.background && typeof this._spec.background === 'object' && this._createBackground();
+            this._createBackground();
             this._createLayout();
             this._transformer.forEachRegionInSpec(this._spec, this._createRegion.bind(this));
             this._transformer.forEachSeriesInSpec(this._spec, this._createSeries.bind(this));
@@ -71804,17 +71825,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.setLayoutTag(true, null, reLayout);
         }
         _createBackground() {
-            const backgroundStyle = convertBackgroundSpec(this._spec.background);
-            if (backgroundStyle) {
-                this._backgroundMark = Factory.createMark("group", 'chart-background', {
-                    model: this,
-                    map: this._option.map,
-                    getCompiler: this.getCompiler,
-                    globalScale: this._globalScale
-                });
-                this._backgroundMark.created();
-                this._backgroundMark.setStyle(Object.assign(Object.assign({}, backgroundStyle), { x: () => this._viewBox.x1, y: () => this._viewBox.y1, width: () => this._viewBox.x2 - this._viewBox.x1, height: () => this._viewBox.y2 - this._viewBox.y1 }));
+            const bg = this._spec.background;
+            if (!bg || typeof bg !== 'object' || isValid$1(bg.gradient)) {
+                return;
             }
+            const backgroundStyle = pickWithout(bg, ['x', 'y', 'width', 'height', 'x1', 'y1', 'image']);
+            backgroundStyle.background = bg.image;
+            this._backgroundMark = Factory.createMark("group", 'chart-background', {
+                model: this,
+                map: this._option.map,
+                getCompiler: this.getCompiler,
+                globalScale: this._globalScale
+            });
+            this._backgroundMark.created();
+            this._backgroundMark.setStyle(Object.assign(Object.assign({}, backgroundStyle), { x: () => this._viewBox.x1, y: () => this._viewBox.y1, width: () => this._viewBox.x2 - this._viewBox.x1, height: () => this._viewBox.y2 - this._viewBox.y1 }));
         }
         _createRegion(constructor, specInfo) {
             if (!constructor) {
@@ -78692,8 +78716,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             : {
                 channel: {
-                    innerRadius: { from, to: (datum, element) => element.getGraphicAttribute('innerRadius') },
-                    outerRadius: { from, to: (datum, element) => element.getGraphicAttribute('outerRadius') }
+                    innerRadius: { from, to: (datum, element) => { var _a; return (_a = element.getFinalGraphicAttributes()) === null || _a === void 0 ? void 0 : _a.innerRadius; } },
+                    outerRadius: { from, to: (datum, element) => { var _a; return (_a = element.getFinalGraphicAttributes()) === null || _a === void 0 ? void 0 : _a.outerRadius; } }
                 }
             };
     };
@@ -79459,6 +79483,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._toAngle = toAngle;
             this._toRadius = toRadius;
+            if (isClose(this._fromAngle, this._toAngle) && isClose(this._fromRadius, this._toRadius)) {
+                this.valid = false;
+            }
         }
         onUpdate(end, ratio, out) {
             if (this.valid === false) {
@@ -79498,12 +79525,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         polarPointInterpolation(pointA, pointB, ratio) {
             const polarPointA0 = this._pointToCoord(pointA);
             const polarPointA1 = this._pointToCoord({ x: pointA.x1, y: pointA.y1 });
-            const angleA0 = normalizeAngle$1(polarPointA0.angle);
-            const angleA1 = normalizeAngle$1(polarPointA1.angle);
+            let angleA0 = normalizeAngle$1(polarPointA0.angle);
+            let angleA1 = normalizeAngle$1(polarPointA1.angle);
             const polarPointB0 = this._pointToCoord(pointB);
             const polarPointB1 = this._pointToCoord({ x: pointB.x1, y: pointB.y1 });
-            const angleB0 = normalizeAngle$1(polarPointB0.angle);
-            const angleB1 = normalizeAngle$1(polarPointB1.angle);
+            let angleB0 = normalizeAngle$1(polarPointB0.angle);
+            let angleB1 = normalizeAngle$1(polarPointB1.angle);
+            if (!isValidNumber$1(angleA0) && isValidNumber$1(angleB0)) {
+                angleA0 = angleB0;
+            }
+            if (isValidNumber$1(angleA0) && !isValidNumber$1(angleB0)) {
+                angleB0 = angleA0;
+            }
+            if (!isValidNumber$1(angleA1) && isValidNumber$1(angleB1)) {
+                angleA1 = angleB1;
+            }
+            if (isValidNumber$1(angleA1) && !isValidNumber$1(angleB1)) {
+                angleB1 = angleA1;
+            }
             const angle0 = angleA0 + (angleB0 - angleA0) * ratio;
             const radius0 = polarPointA0.radius + (polarPointB0.radius - polarPointA0.radius) * ratio;
             const angle1 = angleA1 + (angleB1 - angleA1) * ratio;