@visactor/vchart 1.11.3 → 1.11.4

package/build/index.js

@@ -13241,6 +13241,12 @@
       return Array.isArray(color) && isNumber$1(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
     }
     function interpolateColor(from, to, ratio, alphaChannel, cb) {
+      if (Array.isArray(from) && !isNumber$1(from[0]) || Array.isArray(to) && !isNumber$1(to[0])) {
+        return new Array(4).fill(0).map((_, index) => _interpolateColor(isArray$1(from) ? from[index] : from, isArray$1(to) ? to[index] : to, ratio, alphaChannel));
+      }
+      return _interpolateColor(from, to, ratio, alphaChannel, cb);
+    }
+    function _interpolateColor(from, to, ratio, alphaChannel, cb) {
       if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
       let fromArray,
         toArray,
@@ -14040,7 +14046,7 @@
           animate.stateNames = stateNames, animate.to(animateAttrs, null !== (_b = null === (_a = this.stateAnimateConfig) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : DefaultStateAnimateConfig.duration, null !== (_d = null === (_c = this.stateAnimateConfig) || void 0 === _c ? void 0 : _c.easing) && void 0 !== _d ? _d : DefaultStateAnimateConfig.easing), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
             type: AttributeUpdateType.STATE
           });
-        } else this.setAttributes(attrs, !1, {
+        } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
           type: AttributeUpdateType.STATE
         });
       }
@@ -14070,7 +14076,7 @@
         }), value;
       }
       clearStates(hasAnimation) {
-        this.stopStateAnimates(), this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
+        this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
       }
       removeState(stateName, hasAnimation) {
         if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) >= 0) {
@@ -14096,7 +14102,6 @@
         var _a;
         if (!states.length) return void this.clearStates(hasAnimation);
         if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some((stateName, index) => this.currentStates[index] !== stateName))) return;
-        this.stopStateAnimates();
         const stateAttrs = {};
         states.forEach(stateName => {
           var _a;
@@ -21557,7 +21562,8 @@
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
-    const tempDirtyBounds = new AABBBounds();
+    const tempDirtyBounds = new AABBBounds(),
+      tempBackupDirtyBounds = new AABBBounds();
     class ShadowRootDrawItemInterceptorContribution {
       constructor() {
         this.order = 1;
@@ -21574,11 +21580,11 @@
           context: context
         } = drawContext;
         if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
-          tempDirtyBounds.copy(drawContribution.dirtyBounds);
+          tempDirtyBounds.copy(drawContribution.dirtyBounds), tempBackupDirtyBounds.copy(drawContribution.backupDirtyBounds);
           const m = graphic.globalTransMatrix.getInverse();
-          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
+          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m), drawContribution.backupDirtyBounds.copy(drawContribution.dirtyBounds);
         }
-        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
+        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && (drawContribution.dirtyBounds.copy(tempDirtyBounds), drawContribution.backupDirtyBounds.copy(tempBackupDirtyBounds)), !0;
       }
     }
     class DebugDrawItemInterceptorContribution {
@@ -31243,6 +31249,9 @@
       const textType = getTextType(textAttributes, typeKey);
       return "rich" === textType ? graphicCreator.richtext(richTextAttributeTransform(textAttributes)) : ("html" === textType ? textAttributes = htmlAttributeTransform(textAttributes) : "react" === textType && (textAttributes = reactAttributeTransform(textAttributes)), graphicCreator.text(textAttributes));
     }
+    function alignTextInLine(layoutAlign, graphic, textAlign, pos, textWidth) {
+      "right" === layoutAlign ? "center" === textAlign ? graphic.setAttribute("x", pos - textWidth / 2) : "right" === textAlign || "end" === textAlign ? graphic.setAttribute("x", pos) : graphic.setAttribute("x", pos - textWidth) : "center" === textAlign ? graphic.setAttribute("x", pos + textWidth / 2) : "right" === textAlign || "end" === textAlign ? graphic.setAttribute("x", pos + textWidth) : graphic.setAttribute("x", pos);
+    }
 
     const deltaXYToAngle = (y, x) => {
       const angle = Math.atan2(y, x);
@@ -43044,7 +43053,8 @@
           valueWidth: valueWidth,
           hasContentShape: hasContentShape,
           autoCalculatePosition: autoCalculatePosition,
-          autoMeasure: autoMeasure
+          autoMeasure: autoMeasure,
+          align: align
         } = this.attribute;
         if (!visible) return void this.hideAll();
         autoMeasure && Tooltip.measureTooltip(this.attribute), autoCalculatePosition && Tooltip.calculateTooltipPosition(this.attribute);
@@ -43095,7 +43105,6 @@
           this._tooltipContent.setAttribute("x", padding[3]), this._tooltipContent.setAttribute("y", padding[0] + titleHeight);
           let lastYPos = 0;
           content.forEach((item, i) => {
-            var _a, _b, _c;
             const itemAttr = Tooltip.getContentAttr(this.attribute, i);
             if (!isVisible(itemAttr)) return;
             const itemGroupName = `tooltip-content-${i}`,
@@ -43103,68 +43112,81 @@
                 visible: !0,
                 x: 0,
                 y: lastYPos
-              }, "group");
-            let x = 0;
-            if (isVisible(itemAttr.shape) && itemGroup.createOrUpdateChild(`${itemGroupName}-shape`, Object.assign({
-              visible: !0,
-              x: itemAttr.shape.size / 2,
-              y: itemAttr.shape.size / 2 + ((null !== (_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) && void 0 !== _a ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2
-            }, itemAttr.shape), "symbol"), hasContentShape && (x += itemAttr.shape.size + itemAttr.shape.spacing), isVisible(itemAttr.key)) {
-              let element;
-              element = itemAttr.key.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
-                visible: !0
-              }, getRichTextAttribute(itemAttr.key)), {
-                textBaseline: "top"
-              }), "richtext") : "object" != typeof itemAttr.key.text || null === itemAttr.key.text || "rich" !== itemAttr.key.text.type && "html" !== itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
-                visible: !0,
-                text: null !== (_b = itemAttr.key.text) && void 0 !== _b ? _b : ""
-              }, itemAttr.key), {
-                textBaseline: "top"
-              }), "text") : "rich" === itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                visible: !0
-              }, getRichTextAttribute(itemAttr.key)), {
-                textBaseline: "top"
-              }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
-                html: Object.assign(Object.assign({
-                  dom: itemAttr.key.text.text
-                }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
-              }, "richtext");
-              const {
-                textAlign: textAlign
-              } = itemAttr.key;
-              "center" === textAlign ? element.setAttribute("x", x + keyWidth / 2) : "right" === textAlign || "end" === textAlign ? element.setAttribute("x", x + keyWidth) : element.setAttribute("x", x), element.setAttribute("y", 0), x += keyWidth + itemAttr.key.spacing;
-            }
-            if (isVisible(itemAttr.value)) {
-              let element;
-              element = itemAttr.value.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                visible: !0
-              }, getRichTextAttribute(itemAttr.value)), {
-                textBaseline: "top"
-              }), "richtext") : "object" != typeof itemAttr.value.text || null === itemAttr.value.text || "rich" !== itemAttr.value.text.type && "html" !== itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                visible: !0,
-                text: null !== (_c = itemAttr.value.text) && void 0 !== _c ? _c : ""
-              }, itemAttr.value), {
-                textBaseline: "top"
-              }), "text") : "rich" === itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                visible: !0
-              }, getRichTextAttribute(itemAttr.value)), {
-                textBaseline: "top"
-              }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
-                html: Object.assign({
-                  dom: itemAttr.value.text.text,
-                  container: "",
-                  width: 30,
-                  height: 30,
-                  style: {}
-                }, itemAttr.value)
-              }, "richtext");
+              }, "group"),
+              shapeOffsetWidth = itemAttr.shape.size + itemAttr.shape.spacing;
+            let x = "right" === align ? (hasContentShape ? shapeOffsetWidth : 0) + (isVisible(itemAttr.key) ? keyWidth + itemAttr.key.spacing : 0) + (isVisible(itemAttr.value) ? valueWidth : 0) : 0;
+            this._createShape("right" === align ? x - itemAttr.shape.size / 2 : x + itemAttr.shape.size / 2, itemAttr, itemGroup, itemGroupName), hasContentShape && ("right" === align ? x -= shapeOffsetWidth : x += shapeOffsetWidth);
+            const keyGraphic = this._createKey(itemAttr, itemGroup, itemGroupName);
+            keyGraphic && (alignTextInLine(align, keyGraphic, itemAttr.key.textAlign, x, keyWidth), keyGraphic.setAttribute("y", 0), "right" === align ? x -= keyWidth + itemAttr.key.spacing : x += keyWidth + itemAttr.key.spacing);
+            const valueGraphic = this._createValue(itemAttr, itemGroup, itemGroupName);
+            if (valueGraphic) {
               let textAlign = "right";
-              isValid$1(itemAttr.value.textAlign) ? textAlign = itemAttr.value.textAlign : isVisible(itemAttr.key) || (textAlign = "left"), element.setAttribute("textAlign", textAlign), "center" === textAlign ? element.setAttribute("x", x + valueWidth / 2) : "right" === textAlign || "end" === textAlign ? element.setAttribute("x", x + valueWidth) : element.setAttribute("x", x), x += valueWidth, element.setAttribute("y", 0), itemGroup.add(element);
+              isValid$1(itemAttr.value.textAlign) ? textAlign = itemAttr.value.textAlign : isVisible(itemAttr.key) || "right" === align || (textAlign = "left"), valueGraphic.setAttribute("textAlign", textAlign), alignTextInLine(align, valueGraphic, textAlign, x, valueWidth), valueGraphic.setAttribute("y", 0);
             }
             lastYPos += itemAttr.height + itemAttr.spaceRow;
           });
         }
       }
+      _createShape(x, itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.shape)) return itemGroup.createOrUpdateChild(`${itemGroupName}-shape`, Object.assign({
+          visible: !0,
+          x: x,
+          y: itemAttr.shape.size / 2 + ((null !== (_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) && void 0 !== _a ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2
+        }, itemAttr.shape), "symbol");
+      }
+      _createKey(itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.key)) {
+          let element;
+          return element = itemAttr.key.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
+            visible: !0
+          }, getRichTextAttribute(itemAttr.key)), {
+            textBaseline: "top"
+          }), "richtext") : "object" != typeof itemAttr.key.text || null === itemAttr.key.text || "rich" !== itemAttr.key.text.type && "html" !== itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
+            visible: !0,
+            text: null !== (_a = itemAttr.key.text) && void 0 !== _a ? _a : ""
+          }, itemAttr.key), {
+            textBaseline: "top"
+          }), "text") : "rich" === itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+            visible: !0
+          }, getRichTextAttribute(itemAttr.key)), {
+            textBaseline: "top"
+          }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
+            html: Object.assign(Object.assign({
+              dom: itemAttr.key.text.text
+            }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
+          }, "richtext"), element;
+        }
+      }
+      _createValue(itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.value)) {
+          let element;
+          return element = itemAttr.value.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+            visible: !0
+          }, getRichTextAttribute(itemAttr.value)), {
+            textBaseline: "top"
+          }), "richtext") : "object" != typeof itemAttr.value.text || null === itemAttr.value.text || "rich" !== itemAttr.value.text.type && "html" !== itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+            visible: !0,
+            text: null !== (_a = itemAttr.value.text) && void 0 !== _a ? _a : ""
+          }, itemAttr.value), {
+            textBaseline: "top"
+          }), "text") : "rich" === itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+            visible: !0
+          }, getRichTextAttribute(itemAttr.value)), {
+            textBaseline: "top"
+          }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
+            html: Object.assign({
+              dom: itemAttr.value.text.text,
+              container: "",
+              width: 30,
+              height: 30,
+              style: {}
+            }, itemAttr.value)
+          }, "richtext"), element;
+        }
+      }
       setAttributes(params, forceUpdateTag) {
         const keys = Object.keys(params);
         this.attribute.autoCalculatePosition && keys.every(key => TOOLTIP_POSITION_ATTRIBUTES.includes(key)) ? (this._mergeAttributes(params, keys), isNil$1(this.attribute.panel.width) && this.attribute.autoMeasure && Tooltip.measureTooltip(this.attribute), Tooltip.calculateTooltipPosition(this.attribute), super.setAttributes({
@@ -51006,8 +51028,8 @@
     };
 
     const fadeIn = (element, options, animationParameters) => {
-      var _a, _b, _c;
-      const finalAttrs = element.getFinalGraphicAttributes();
+      var _a, _b, _c, _d;
+      const finalAttrs = null !== (_a = element.getFinalGraphicAttributes()) && void 0 !== _a ? _a : {};
       return {
         from: {
           opacity: 0,
@@ -51015,9 +51037,9 @@
           strokeOpacity: 0
         },
         to: {
-          opacity: null !== (_a = finalAttrs.opacity) && void 0 !== _a ? _a : 1,
-          fillOpacity: null !== (_b = finalAttrs.fillOpacity) && void 0 !== _b ? _b : 1,
-          strokeOpacity: null !== (_c = finalAttrs.strokeOpacity) && void 0 !== _c ? _c : 1
+          opacity: null !== (_b = finalAttrs.opacity) && void 0 !== _b ? _b : 1,
+          fillOpacity: null !== (_c = finalAttrs.fillOpacity) && void 0 !== _c ? _c : 1,
+          strokeOpacity: null !== (_d = finalAttrs.strokeOpacity) && void 0 !== _d ? _d : 1
         }
       };
     };
@@ -60023,11 +60045,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     dependency: stateSignal
                 });
                 if (this._animationConfig.normal) {
-                    this._event.on(exports.VGRAMMAR_HOOK_EVENT.ANIMATION_END, ({ event }) => {
-                        if (event.mark === this.getProduct() && event.animationState === AnimationStateEnum.appear) {
+                    if (!this._animationConfig.appear) {
+                        this._event.on(exports.VGRAMMAR_HOOK_EVENT.AFTER_DO_RENDER, () => {
                             this.runAnimationByState(AnimationStateEnum.normal);
-                        }
-                    });
+                        });
+                    }
+                    else {
+                        this._event.on(exports.VGRAMMAR_HOOK_EVENT.ANIMATION_END, ({ event }) => {
+                            if (event.mark === this.getProduct() && event.animationState === AnimationStateEnum.appear) {
+                                this.runAnimationByState(AnimationStateEnum.normal);
+                            }
+                        });
+                    }
                 }
             }
         }
@@ -66343,7 +66372,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.11.3";
+    const version = "1.11.4";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -70760,10 +70789,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.calcScales(this._defaultBandInnerPadding, this._defaultBandOuterPadding);
         }
         axisHelper() {
-            const getScale = (depth) => {
+            const getScale = (depth = 0) => {
                 return this._scales[depth];
             };
-            const getBandwidth = (depth) => {
+            const getBandwidth = (depth = 0) => {
                 return getScale(depth).bandwidth();
             };
             return {
@@ -71942,8 +71971,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._chartData.getSeriesData(id, index);
         }
         _transformSpecScale() {
-            var _a, _b;
-            const scales = (_a = this._spec.scales) !== null && _a !== void 0 ? _a : [];
+            var _a;
+            const scales = this._spec.scales ? [...this._spec.scales] : [];
             let colorScaleSpec = scales.find(s => s.id === 'color');
             const colorScheme = this.getColorScheme();
             if (!colorScaleSpec) {
@@ -71969,7 +71998,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }
             }
-            if (!((_b = colorScaleSpec.range) === null || _b === void 0 ? void 0 : _b.length)) {
+            if (!((_a = colorScaleSpec.range) === null || _a === void 0 ? void 0 : _a.length)) {
                 colorScaleSpec.range = getDataScheme(colorScheme);
                 colorScaleSpec.rangeTheme = true;
             }
@@ -78911,7 +78940,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initGroupScales() {
         }
         axisHelper() {
-            const getScale = (depth) => {
+            const getScale = (depth = 0) => {
                 return this._scales[depth];
             };
             const helper = {
@@ -80480,7 +80509,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     let pos;
                     if (isValid$1(originValue)) {
                         const index = binaryFuzzySearch(subTickData, tick => tick.value - originValue);
-                        const targetIndex = originValue > subTickData[index].value - step / 2
+                        const targetIndex = index >= subTickData.length || originValue > subTickData[index].value - step / 2
                             ? Math.min(index, subTickData.length - 1)
                             : index > 0
                                 ? index - 1
@@ -80508,7 +80537,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const step = subTickData[1].value - subTickData[0].value;
                     const offsetAngle = degreeToRadian(tickMask.offsetAngle);
                     const index = binaryFuzzySearch(subTickData, tick => tick.value - originValue);
-                    const targetIndex = originValue > subTickData[index].value - step / 2
+                    const targetIndex = index >= subTickData.length || originValue > subTickData[index].value - step / 2
                         ? Math.min(index, subTickData.length - 1)
                         : index > 0
                             ? index - 1
@@ -88402,7 +88431,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return pointerSpec.height * this._computeLayoutRadius();
         }
         _getPointerAngle(datum) {
-            return this.angleAxisHelper.dataToPosition([datum[this._angleField[0]]]);
+            const scale = this.angleAxisHelper.getScale();
+            const domain = scale.domain();
+            const max = maxInArray(domain);
+            const min = minInArray(domain);
+            const angle = clamp$1(datum[this._angleField[0]], min, max);
+            return this.angleAxisHelper.dataToPosition([angle]);
         }
         _getRotatedPointerCenterOffset(datum) {
             var _a, _b, _c, _d;