@visactor/vchart 2.0.9 → 2.0.10-alpha.1

package/build/index.js

@@ -9506,7 +9506,7 @@
 
     const EnvContribution = Symbol.for("EnvContribution");
     const VGlobal = Symbol.for("VGlobal");
-    const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
+    const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,'-apple-system',segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
 
     const container = new Container();
 
@@ -11247,7 +11247,7 @@
       textAlign: "left",
       textBaseline: "alphabetic",
       fontSize: 16,
-      fontFamily: "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,\n    Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol",
+      fontFamily: "PingFang SC,Microsoft Yahei,system-ui,'-apple-system',segoe ui,\n    Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol",
       fontWeight: "",
       ellipsis: "…",
       fontVariant: "",
@@ -16315,7 +16315,7 @@
             }
           }]), noAnimateAttrs && this.setAttributesAndPreventAnimate(noAnimateAttrs, !1, {
             type: AttributeUpdateType.STATE
-          });
+          }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
         } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
           type: AttributeUpdateType.STATE
         }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
@@ -16341,7 +16341,7 @@
       getNormalAttribute(key) {
         var _a, _b;
         const value = this.attribute[key];
-        return this.animates ? null === (_a = this.finalAttribute) || void 0 === _a ? void 0 : _a[key] : null != value ? value : null === (_b = this.finalAttribute) || void 0 === _b ? void 0 : _b[key];
+        return this.animates && this.animates.size ? null === (_a = this.finalAttribute) || void 0 === _a ? void 0 : _a[key] : null != value ? value : null === (_b = this.finalAttribute) || void 0 === _b ? void 0 : _b[key];
       }
       clearStates(hasAnimation) {
         this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
@@ -18048,9 +18048,10 @@
       }
       updateSymbolAABBBoundsAccurate(attribute, symbolTheme, aabbBounds) {
         const {
-          size = symbolTheme.size
-        } = attribute;
-        return this.getParsedPath().bounds(size, aabbBounds), aabbBounds;
+            size = symbolTheme.size
+          } = attribute,
+          symbolClass = this.getParsedPath();
+        return symbolClass ? (symbolClass.bounds(size, aabbBounds), aabbBounds) : aabbBounds;
       }
       needUpdateTags(keys) {
         return super.needUpdateTags(keys, SYMBOL_UPDATE_TAG_KEY);
@@ -18059,8 +18060,9 @@
         return super.needUpdateTag(key, SYMBOL_UPDATE_TAG_KEY);
       }
       toCustomPath() {
-        const symbolInstance = this.getParsedPath(),
-          size = this.attribute.size,
+        const symbolInstance = this.getParsedPath();
+        if (!symbolInstance) return null;
+        const size = this.attribute.size,
           formattedSize = isArray$1(size) ? size : [size, size];
         return symbolInstance.path ? new CustomPath2D().fromCustomPath2D(symbolInstance.path, 0, 0, formattedSize[0], formattedSize[1]) : new CustomPath2D().fromString(symbolInstance.pathStr, 0, 0, formattedSize[0], formattedSize[1]);
       }
@@ -24025,7 +24027,7 @@
         }));
       }
       enableAutoRefresh() {
-        this.autoRefresh || (this.autoRefresh = !0, this.pluginService.register(new AutoRefreshPlugin()));
+        this.autoRefresh || "node" === this.global.env || (this.autoRefresh = !0, this.pluginService.register(new AutoRefreshPlugin()));
       }
       disableAutoRefresh() {
         this.autoRefresh && (this.autoRefresh = !1, this.pluginService.findPluginsByName("AutoRefreshPlugin").forEach(plugin => {
@@ -33189,7 +33191,7 @@
 
     var AXIS_ELEMENT_NAME;
     !function (AXIS_ELEMENT_NAME) {
-      AXIS_ELEMENT_NAME.innerView = "inner-view", AXIS_ELEMENT_NAME.axisContainer = "axis-container", AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background", AXIS_ELEMENT_NAME.axisBreak = "axis-break", AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
+      AXIS_ELEMENT_NAME.innerView = "inner-view", AXIS_ELEMENT_NAME.axisContainer = "axis-container", AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", AXIS_ELEMENT_NAME.labelHoverOnAxis = "axis-label-hover-on-axis", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background", AXIS_ELEMENT_NAME.axisBreak = "axis-break", AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
     }(AXIS_ELEMENT_NAME || (AXIS_ELEMENT_NAME = {}));
     var AxisStateValue;
     !function (AxisStateValue) {
@@ -33226,6 +33228,26 @@
           fillOpacity: 1
         }
       },
+      labelHoverOnAxis: {
+        visible: !1,
+        space: 7,
+        padding: 2,
+        position: 0,
+        autoRotate: !1,
+        textStyle: {
+          fontSize: 12,
+          fill: "red",
+          fontWeight: "normal",
+          fillOpacity: 1
+        },
+        background: {
+          visible: !0,
+          style: {
+            cornerRadius: 2,
+            fill: "black"
+          }
+        }
+      },
       tick: {
         visible: !0,
         inside: !1,
@@ -40391,7 +40413,17 @@
     loadLineAxisComponent();
     class LineAxis extends AxisBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, LineAxis.defaultAttributes, attributes), options);
+        var _a;
+        if (attributes.labelHoverOnAxis && (attributes.labelHoverOnAxis.textStyle = Object.assign({}, attributes.label.style, attributes.labelHoverOnAxis.textStyle), void 0 === attributes.labelHoverOnAxis.space)) {
+          const {
+              padding = 2
+            } = attributes.labelHoverOnAxis,
+            parsedPadding = normalizePadding(padding),
+            toDiffPadding = "bottom" === attributes.orient ? parsedPadding[0] : "left" === attributes.orient ? parsedPadding[1] : "top" === attributes.orient ? parsedPadding[2] : parsedPadding[3],
+            space = (null !== (_a = attributes.label.space) && void 0 !== _a ? _a : LineAxis.defaultAttributes.label.space) - toDiffPadding;
+          attributes.labelHoverOnAxis.space = space;
+        }
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, LineAxis.defaultAttributes, attributes), options), this.labelHoverOnAxisGroup = null;
       }
       _renderInner(container) {
         var _a;
@@ -40453,6 +40485,15 @@
             }, panel.style));
           bgRect.name = AXIS_ELEMENT_NAME.background, bgRect.id = this._getNodeId("background"), bgRect.states = merge$1({}, DEFAULT_STATES$1, null !== (_a = panel.state) && void 0 !== _a ? _a : {}), axisContainer.insertBefore(bgRect, axisContainer.firstChild);
         }
+        const {
+          labelHoverOnAxis: labelHoverOnAxis
+        } = this.attribute;
+        labelHoverOnAxis && labelHoverOnAxis.visible && this.renderLabelHoverOnAxis();
+      }
+      renderLabelHoverOnAxis() {
+        const hoverOnLabelAttributes = this.getLabelHoverOnAxisAttribute(),
+          hoverOnLabel = new Tag(Object.assign({}, hoverOnLabelAttributes));
+        hoverOnLabel.name = AXIS_ELEMENT_NAME.title, hoverOnLabel.id = this._getNodeId("hover-on-label"), this.labelHoverOnAxisGroup = hoverOnLabel, this.axisContainer.add(hoverOnLabel);
       }
       renderLine(container) {
         const {
@@ -40593,6 +40634,66 @@
           visible: !0
         }, background.style)), attrs;
       }
+      getLabelHoverOnAxisAttribute() {
+        var _a, _b;
+        const {
+            orient: orient
+          } = this.attribute,
+          _c = this.attribute.labelHoverOnAxis,
+          {
+            position = 0,
+            space = 4,
+            autoRotate = !0,
+            textStyle = {},
+            background = {},
+            formatMethod: formatMethod,
+            text: textContent = "",
+            maxWidth: maxWidth
+          } = _c,
+          restAttrs = __rest$b(_c, ["position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text", "maxWidth"]),
+          point = this.getTickCoord(0);
+        "bottom" === orient || "top" === orient ? point.x = position : point.y = position;
+        let tickLength = 0;
+        (null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.visible) && !1 === this.attribute.tick.inside && (tickLength = this.attribute.tick.length || 4), (null === (_b = this.attribute.subTick) || void 0 === _b ? void 0 : _b.visible) && !1 === this.attribute.subTick.inside && (tickLength = Math.max(tickLength, this.attribute.subTick.length || 2));
+        const offset = tickLength + 0 + space,
+          labelPoint = this.getVerticalCoord(point, offset, !1),
+          vector = this.getVerticalVector(offset, !1, {
+            x: 0,
+            y: 0
+          });
+        let textBaseline,
+          {
+            angle: angle
+          } = restAttrs,
+          textAlign = "center";
+        if (isNil$1(angle) && autoRotate) {
+          const axisVector = this.getRelativeVector();
+          angle = angleTo(axisVector, [1, 0], !0);
+          const {
+            verticalFactor = 1
+          } = this.attribute;
+          textBaseline = 1 === -1 * verticalFactor ? "bottom" : "top";
+        } else {
+          const {
+            textAlign: textAlign2,
+            textBaseline: textBaseline2
+          } = this.getLabelAlign(vector, !1, textStyle.angle);
+          textAlign = textAlign2, textBaseline = textBaseline2;
+        }
+        const maxTagWidth = maxWidth,
+          text = formatMethod ? formatMethod(textContent) : textContent,
+          attrs = Object.assign(Object.assign(Object.assign({}, labelPoint), restAttrs), {
+            maxWidth: maxTagWidth,
+            textStyle: Object.assign({
+              textAlign: textAlign,
+              textBaseline: textBaseline
+            }, textStyle),
+            text: text
+          });
+        return attrs.angle = angle, background && background.visible && (attrs.panel = Object.assign(Object.assign({
+          visible: !0
+        }, restAttrs.panel), background.style)), attrs;
+      }
       getTextBaseline(vector, inside) {
         let base = "middle";
         const {
@@ -40783,6 +40884,40 @@
         }
         return limitLength && (limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount), limitLength;
       }
+      showLabelHoverOnAxis(position, text, adjustPosition = !0) {
+        if (this.attribute.labelHoverOnAxis) {
+          const preContainerBounds = this.axisContainer.AABBBounds,
+            preWidth = preContainerBounds.width(),
+            preHeight = preContainerBounds.height(),
+            preX1 = preContainerBounds.x1,
+            preY1 = preContainerBounds.y1,
+            preX2 = preContainerBounds.x2,
+            preY2 = preContainerBounds.y2;
+          if (this.labelHoverOnAxisGroup) {
+            const {
+                formatMethod: formatMethod
+              } = this.attribute.labelHoverOnAxis,
+              textStr = formatMethod ? formatMethod(text) : text;
+            this.labelHoverOnAxisGroup.setAttribute("text", textStr), this.labelHoverOnAxisGroup.setAttribute("visible", !0), this.labelHoverOnAxisGroup.setAttribute("visibleAll", !0), "left" === this.attribute.orient || "right" === this.attribute.orient ? this.labelHoverOnAxisGroup.setAttributes({
+              y: position
+            }) : this.labelHoverOnAxisGroup.setAttributes({
+              x: position
+            });
+          } else this.attribute.labelHoverOnAxis.visible = !0, this.attribute.labelHoverOnAxis.position = position, this.attribute.labelHoverOnAxis.text = text, this.renderLabelHoverOnAxis();
+          if (adjustPosition) {
+            const afterContainerBounds = this.axisContainer.AABBBounds,
+              diffWidth = afterContainerBounds.width() - preWidth,
+              diffHeight = afterContainerBounds.height() - preHeight;
+            diffWidth > 0 && ("top" === this.attribute.orient || "bottom" === this.attribute.orient) && (afterContainerBounds.x1 < preX1 ? this.showLabelHoverOnAxis(position + diffWidth, text, !1) : afterContainerBounds.x2 > preX2 && this.showLabelHoverOnAxis(position - diffWidth, text, !1)), diffHeight > 0 && ("left" === this.attribute.orient || "right" === this.attribute.orient) && (afterContainerBounds.y1 < preY1 ? this.showLabelHoverOnAxis(position + diffHeight, text, !1) : afterContainerBounds.y2 > preY2 && this.showLabelHoverOnAxis(position - diffHeight, text, !1));
+          }
+        }
+      }
+      hideLabelHoverOnAxis() {
+        this.attribute.labelHoverOnAxis && this.labelHoverOnAxisGroup && this.labelHoverOnAxisGroup.setAttributes({
+          visible: !1,
+          visibleAll: !1
+        });
+      }
       release() {
         super.release(), this._breaks = null;
       }
@@ -42404,7 +42539,7 @@
           labelStyle: labelStyle
         } = op,
         radius = null == getRadius ? void 0 : getRadius();
-      if (!radius) return convertDomainToTickData(scale.domain());
+      if (!radius || radius <= 0) return convertDomainToTickData(scale.domain());
       let scaleTicks;
       if (isValid$1(tickStep)) scaleTicks = scale.stepTicks(tickStep);else if (isValid$1(forceTickCount)) scaleTicks = scale.forceTicks(forceTickCount);else if (isValid$1(tickCount)) {
         const range = scale.range(),
@@ -43585,20 +43720,23 @@
           {
             enter: enter
           } = this._animationConfig;
-        [text, labelLine].filter(Boolean).forEach(item => item.applyAnimationState(["enter"], [{
-          name: "enter",
-          animation: Object.assign(Object.assign({}, enter), {
-            type: "labelEnter",
-            selfOnly: !0,
-            customParameters: {
-              relatedGraphic: relatedGraphic,
-              relatedGraphics: this._idToGraphic,
-              config: Object.assign(Object.assign({}, enter), {
-                type: item === text ? enter.type : "fadeIn"
-              })
-            }
-          })
-        }]));
+        [text, labelLine].filter(Boolean).forEach(item => {
+          var _a;
+          null === (_a = item.setFinalAttributes) || void 0 === _a || _a.call(item, item.attribute), item.applyAnimationState(["enter"], [{
+            name: "enter",
+            animation: Object.assign(Object.assign({}, enter), {
+              type: "labelEnter",
+              selfOnly: !0,
+              customParameters: {
+                relatedGraphic: relatedGraphic,
+                relatedGraphics: this._idToGraphic,
+                config: Object.assign(Object.assign({}, enter), {
+                  type: item === text ? enter.type : "fadeIn"
+                })
+              }
+            })
+          }]);
+        });
       }
       _runUpdateAnimation(prevLabel, currentLabel) {
         const {
@@ -52325,7 +52463,7 @@
     }
 
     const token = {
-        fontFamily: 'PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol',
+        fontFamily: `PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,'-apple-system',segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol`,
         fontSize: 14,
         l1FontSize: 32,
         l1LineHeight: '150%',
@@ -57909,7 +58047,7 @@
                     }
                 }
             };
-            this._setStateOfGraphic = (g) => {
+            this._setStateOfGraphic = (g, hasAnimation) => {
                 g.clearStates();
                 g.stateProxy = null;
                 if (g.context.diffState === DiffState.enter || g.context.diffState === DiffState.update) {
@@ -57917,7 +58055,7 @@
                         var _a;
                         return this._runEncoderOfGraphic((_a = this._encoderOfState) === null || _a === void 0 ? void 0 : _a[stateName], g);
                     };
-                    g.context.states && g.useStates(g.context.states);
+                    g.context.states && g.useStates(g.context.states, hasAnimation);
                 }
             };
             this.name = name;
@@ -58670,7 +58808,7 @@
                         g.setFinalAttributes(finalAttrs);
                     }
                 }
-                this._setStateOfGraphic(g);
+                this._setStateOfGraphic(g, hasStateAnimation);
                 this._setGraphicFromMarkConfig(g);
             });
         }
@@ -61395,7 +61533,7 @@
         });
     };
 
-    const version = "2.0.9";
+    const version = "2.0.10-alpha.1";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -62766,7 +62904,7 @@
             if (isValid$1(spec.id)) {
                 mark.setUserId(spec.id);
             }
-            if (options.hasAnimation) {
+            if (options.hasAnimation && spec.animation !== false) {
                 const config = animationConfig({}, userAnimationConfig(spec.type, spec, this._markAttributeContext));
                 mark.setAnimationConfig(config);
             }
@@ -62776,7 +62914,7 @@
                     this._createExtensionMark(s, mark, namePrefix, i, options);
                 });
             }
-            else if (!parentMark && (!isNil$1(spec.dataId) || !isNil$1(spec.dataIndex))) {
+            if (!isNil$1(spec.dataId) || !isNil$1(spec.dataIndex)) {
                 const dataView = this._option.getSeriesData(spec.dataId, spec.dataIndex);
                 if (dataView === this._rawData) {
                     mark.setData(this._data);
@@ -76414,6 +76552,7 @@
         constructor() {
             super(...arguments);
             this.type = exports.SeriesTypeEnum.boxPlot;
+            this._bandPosition = 0;
         }
         getMinField() {
             return this._minField;
@@ -76446,7 +76585,7 @@
             return this._outliersStyle;
         }
         setAttrFromSpec() {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
             super.setAttrFromSpec();
             const boxPlotStyle = (_b = (_a = this._spec.boxPlot) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
             this._minField = this._spec.minField;
@@ -76463,7 +76602,7 @@
             this._strokeColor = boxPlotStyle.stroke;
             this._shaftFillOpacity =
                 this._shaftShape === 'bar' ? (_e = boxPlotStyle.shaftFillOpacity) !== null && _e !== void 0 ? _e : DEFAULT_SHAFT_FILL_OPACITY : undefined;
-            this._outliersStyle = this._spec.outliersStyle;
+            this._outliersStyle = ((_f = this._spec.outliersStyle) !== null && _f !== void 0 ? _f : (_g = this._spec.outlier) === null || _g === void 0 ? void 0 : _g.style);
         }
         initMark() {
             this._boxPlotMark = this._createMark(BoxPlotSeries.mark.boxPlot, {
@@ -76485,24 +76624,37 @@
             if (boxPlotMark) {
                 const commonBoxplotStyles = {
                     lineWidth: this._lineWidth,
-                    fill: (_a = this._boxFillColor) !== null && _a !== void 0 ? _a : (this._shaftShape === 'line' ? DEFAULT_FILL_COLOR : this.getColorAttribute()),
+                    fill: (_a = this._boxFillColor) !== null && _a !== void 0 ? _a : (this._shaftShape !== 'line' ? this.getColorAttribute() : DEFAULT_FILL_COLOR),
                     minMaxFillOpacity: this._shaftFillOpacity,
-                    stroke: (_b = this._strokeColor) !== null && _b !== void 0 ? _b : (this._shaftShape === 'line' ? this.getColorAttribute() : DEFAULT_STROKE_COLOR)
+                    stroke: (_b = this._strokeColor) !== null && _b !== void 0 ? _b : (this._shaftShape !== 'line' ? DEFAULT_STROKE_COLOR : this.getColorAttribute())
                 };
                 boxPlotMark.setGlyphConfig({
                     direction: this._direction,
                     shaftShape: this._shaftShape
                 });
                 const boxPlotMarkStyles = this._direction === "horizontal"
-                    ? Object.assign(Object.assign({ y: this.dataToPositionY.bind(this) }, commonBoxplotStyles), { boxHeight: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, ruleHeight: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, q1q3Height: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, minMaxHeight: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); } }) : Object.assign(Object.assign({ x: this.dataToPositionX.bind(this) }, commonBoxplotStyles), { boxWidth: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, ruleWidth: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, q1q3Width: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, minMaxWidth: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); } });
-                this.setMarkStyle(boxPlotMark, boxPlotMarkStyles, exports.STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Series);
+                    ? {
+                        y: (datum) => this._getPosition(this.direction, datum),
+                        boxHeight: () => { var _a; return getActualNumValue((_a = this._boxWidth) !== null && _a !== void 0 ? _a : '100%', this._getMarkWidth()); },
+                        ruleHeight: () => { var _a; return getActualNumValue((_a = this._shaftWidth) !== null && _a !== void 0 ? _a : '100%', this._getMarkWidth()); },
+                        q1q3Height: () => { var _a; return getActualNumValue((_a = this._boxWidth) !== null && _a !== void 0 ? _a : '100%', this._getMarkWidth()); },
+                        minMaxHeight: () => { var _a; return getActualNumValue((_a = this._shaftWidth) !== null && _a !== void 0 ? _a : '100%', this._getMarkWidth()); }
+                    }
+                    : {
+                        x: (datum) => this._getPosition(this.direction, datum),
+                        boxWidth: () => { var _a; return getActualNumValue((_a = this._boxWidth) !== null && _a !== void 0 ? _a : '100%', this._getMarkWidth()); },
+                        ruleWidth: () => { var _a; return getActualNumValue((_a = this._shaftWidth) !== null && _a !== void 0 ? _a : '100%', this._getMarkWidth()); },
+                        q1q3Width: () => { var _a; return getActualNumValue((_a = this._boxWidth) !== null && _a !== void 0 ? _a : '100%', this._getMarkWidth()); },
+                        minMaxWidth: () => { var _a; return getActualNumValue((_a = this._shaftWidth) !== null && _a !== void 0 ? _a : '100%', this._getMarkWidth()); }
+                    };
+                this.setMarkStyle(boxPlotMark, commonBoxplotStyles, exports.STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Series);
+                this.setMarkStyle(boxPlotMark, boxPlotMarkStyles, exports.STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Built_In);
             }
             const outlierMark = this._outlierMark;
             if (outlierMark) {
                 this.setMarkStyle(outlierMark, {
                     fill: (_d = (_c = this._outliersStyle) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.getColorAttribute(),
-                    size: isNumber$1((_e = this._outliersStyle) === null || _e === void 0 ? void 0 : _e.size) ? this._outliersStyle.size : DEFAULT_OUTLIER_SIZE,
-                    symbolType: 'circle'
+                    size: isNumber$1((_e = this._outliersStyle) === null || _e === void 0 ? void 0 : _e.size) ? this._outliersStyle.size : DEFAULT_OUTLIER_SIZE
                 }, exports.STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Series);
             }
         }
@@ -76537,13 +76689,13 @@
                 const scale = (_b = axisHelper === null || axisHelper === void 0 ? void 0 : axisHelper.getScale) === null || _b === void 0 ? void 0 : _b.call(axisHelper, 0);
                 const outlierMarkPositionChannel = this._direction === "horizontal"
                     ? {
-                        y: this.dataToPositionY.bind(this),
+                        y: (datum) => this._getPosition(this.direction, datum),
                         x: (datum) => valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, BOX_PLOT_OUTLIER_VALUE_FIELD), {
                             bandPosition: this._bandPosition
                         }), scale)
                     }
                     : {
-                        x: this.dataToPositionX.bind(this),
+                        x: (datum) => this._getPosition(this.direction, datum),
                         y: (datum) => valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, BOX_PLOT_OUTLIER_VALUE_FIELD), {
                             bandPosition: this._bandPosition
                         }), scale)
@@ -76589,16 +76741,73 @@
             this.initBoxPlotMarkStyle();
         }
         _getMarkWidth() {
+            var _a;
             if (this._autoBoxWidth) {
                 return this._autoBoxWidth;
             }
             const bandAxisHelper = this._direction === "horizontal" ? this._yAxisHelper : this._xAxisHelper;
-            const xField = this._direction === "horizontal" ? this._fieldY : this._fieldX;
-            const innerBandWidth = bandAxisHelper.getBandwidth(xField.length - 1);
-            const autoBoxWidth = innerBandWidth / xField.length;
-            this._autoBoxWidth = autoBoxWidth;
+            const depthFromSpec = this._groups ? this._groups.fields.length : 1;
+            const bandWidth = (_a = bandAxisHelper.getBandwidth) === null || _a === void 0 ? void 0 : _a.call(bandAxisHelper, depthFromSpec - 1);
+            let width = bandWidth;
+            if (isValid$1(this._spec.boxWidth)) {
+                width = getActualNumValue(this._spec.boxWidth, bandWidth);
+            }
+            if (isValid$1(this._spec.boxMinWidth)) {
+                width = Math.max(width, getActualNumValue(this._spec.boxMinWidth, bandWidth));
+            }
+            if (isValid$1(this._spec.boxMaxWidth)) {
+                width = Math.min(width, getActualNumValue(this._spec.boxMaxWidth, bandWidth));
+            }
+            this._autoBoxWidth = width;
             return this._autoBoxWidth;
         }
+        _getPosition(direction, datum) {
+            var _a, _b, _c, _d;
+            let axisHelper;
+            let sizeAttribute;
+            let dataToPosition;
+            if (direction === "horizontal") {
+                axisHelper = this.getYAxisHelper();
+                sizeAttribute = 'boxHeight';
+                dataToPosition = this.dataToPositionY.bind(this);
+            }
+            else {
+                axisHelper = this.getXAxisHelper();
+                sizeAttribute = 'boxWidth';
+                dataToPosition = this.dataToPositionX.bind(this);
+            }
+            const scale = axisHelper.getScale(0);
+            const depthFromSpec = this._groups ? this._groups.fields.length : 1;
+            const depth = depthFromSpec;
+            const bandWidth = (_a = axisHelper.getBandwidth) === null || _a === void 0 ? void 0 : _a.call(axisHelper, depth - 1);
+            const size = this._boxPlotMark.getAttribute(sizeAttribute, datum);
+            if (depth > 1 && isValid$1(this._spec.boxGapInGroup)) {
+                const groupFields = this._groups.fields;
+                const boxGapInGroup = array(this._spec.boxGapInGroup);
+                let totalWidth = 0;
+                let offSet = 0;
+                for (let index = groupFields.length - 1; index >= 1; index--) {
+                    const groupField = groupFields[index];
+                    const groupValues = (_c = (_b = axisHelper.getScale(index)) === null || _b === void 0 ? void 0 : _b.domain()) !== null && _c !== void 0 ? _c : [];
+                    const groupCount = groupValues.length;
+                    const gap = getActualNumValue((_d = boxGapInGroup[index - 1]) !== null && _d !== void 0 ? _d : last(boxGapInGroup), bandWidth);
+                    const i = groupValues.indexOf(datum[groupField]);
+                    if (index === groupFields.length - 1) {
+                        totalWidth += groupCount * size + (groupCount - 1) * gap;
+                        offSet += i * (size + gap);
+                    }
+                    else {
+                        offSet += i * (totalWidth + gap);
+                        totalWidth += totalWidth + (groupCount - 1) * gap;
+                    }
+                }
+                const center = scale.scale(datum[groupFields[0]]) + axisHelper.getBandwidth(0) / 2;
+                return center - totalWidth / 2 + offSet + size / 2;
+            }
+            const continuous = isContinuous(scale.type || 'band');
+            const pos = dataToPosition(datum);
+            return pos + bandWidth * 0.5 + (continuous ? -bandWidth / 2 : 0);
+        }
         onLayoutEnd() {
             super.onLayoutEnd();
             this._autoBoxWidth = null;
@@ -76607,10 +76816,10 @@
             const newConfig = merge$1({}, config);
             ['appear', 'enter', 'update', 'exit', 'disappear'].forEach(state => {
                 if (newConfig[state] && newConfig[state].type === 'scaleIn') {
-                    newConfig[state].type = this._shaftShape === 'line' ? 'boxplotScaleIn' : 'barBoxplotScaleIn';
+                    newConfig[state].type = this._shaftShape === 'bar' ? 'barBoxplotScaleIn' : 'boxplotScaleIn';
                 }
                 else if (newConfig[state] && newConfig[state].type === 'scaleOut') {
-                    newConfig[state].type = this._shaftShape === 'line' ? 'boxplotScaleOut' : 'barBoxplotScaleOut';
+                    newConfig[state].type = this._shaftShape === 'bar' ? 'barBoxplotScaleOut' : 'boxplotScaleOut';
                 }
             });
             return newConfig;
@@ -93829,13 +94038,18 @@
             const dataFields = [spec.maxField, spec.medianField, spec.q1Field, spec.q3Field, spec.minField, spec.outliersField];
             const seriesSpec = super._getDefaultSeriesSpec(spec, [
                 'boxPlot',
+                'outlier',
                 'minField',
                 'maxField',
                 'q1Field',
                 'medianField',
                 'q3Field',
                 'outliersField',
-                'outliersStyle'
+                'outliersStyle',
+                'boxWidth',
+                'boxMaxWidth',
+                'boxMinWidth',
+                'boxGapInGroup'
             ]);
             seriesSpec.direction = (_a = spec.direction) !== null && _a !== void 0 ? _a : "vertical";
             seriesSpec[seriesSpec.direction === "horizontal" ? 'xField' : 'yField'] = dataFields;
@@ -95123,7 +95337,7 @@
         return Object.keys(data).length > 0;
     };
     function showTooltip(datum, options, component) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         const opt = Object.assign({ regionIndex: 0 }, options);
         const componentOptions = component.getOption();
         const region = componentOptions.getRegionsInUserIdOrIndex(isValid$1(opt.regionId) ? [opt.regionId] : undefined, isValid$1(opt.regionIndex) ? [opt.regionIndex] : undefined)[0];
@@ -95206,7 +95420,7 @@
                 }),
                 item: undefined
             };
-            component.processor.dimension.showTooltip(mockDimensionInfo, mockParams, false);
+            (_e = (_d = (_c = component.processor) === null || _c === void 0 ? void 0 : _c.dimension) === null || _d === void 0 ? void 0 : _d.showTooltip) === null || _e === void 0 ? void 0 : _e.call(_d, mockDimensionInfo, mockParams, false);
             const vchart = componentOptions.globalInstance;
             if (VChart.globalConfig.uniqueTooltip) {
                 VChart.hideTooltip(vchart.id);
@@ -95235,7 +95449,7 @@
                 changePositionOnly: false,
                 tooltip: null,
                 dimensionInfo: mockDimensionInfo,
-                chart: (_c = componentOptions.globalInstance.getChart()) !== null && _c !== void 0 ? _c : undefined,
+                chart: (_f = componentOptions.globalInstance.getChart()) !== null && _f !== void 0 ? _f : undefined,
                 datum: mockDatum,
                 model: info.series,
                 source: Event_Source_Type.chart,
@@ -103141,10 +103355,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isValid$1(spec.dataId) || isValidNumber$1(spec.dataIndex)) {
                 const dataview = this.getChart().getSeriesData(spec.dataId, spec.dataIndex);
                 if (dataview) {
+                    mark.setDataView(dataview);
                     dataview.target.addListener('change', () => {
                         mark.getData().updateData();
                     });
-                    mark.setDataView(dataview);
                 }
             }
         }