@visactor/vchart 2.0.10-alpha.0 → 2.0.10

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;
@@ -33191,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) {
@@ -33228,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,
@@ -40393,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;
@@ -40455,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 {
@@ -40595,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 {
@@ -40785,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;
       }
@@ -52330,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%',
@@ -57914,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) {
@@ -57922,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;
@@ -58675,7 +58808,7 @@
                         g.setFinalAttributes(finalAttrs);
                     }
                 }
-                this._setStateOfGraphic(g);
+                this._setStateOfGraphic(g, hasStateAnimation);
                 this._setGraphicFromMarkConfig(g);
             });
         }
@@ -61091,6 +61224,10 @@
             var _a;
             return (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setDimensionIndex(value, opt);
         }
+        showCrosshair(cb) {
+            var _a;
+            (_a = this._chart) === null || _a === void 0 ? void 0 : _a.showCrosshair(cb);
+        }
         stopAnimation() {
             var _a;
             (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.stopAnimation(true);
@@ -61400,7 +61537,7 @@
         });
     };
 
-    const version = "2.0.10-alpha.0";
+    const version = "2.0.10";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -66086,7 +66223,7 @@
         _getGridAttributes() {
             const spec = this._spec;
             return {
-                alternateColor: isFunction$1(spec.grid.alternateColor) ? spec.grid.alternateColor() : spec.grid.alternateColor,
+                alternateColor: spec.grid.alternateColor,
                 alignWithLabel: spec.grid.alignWithLabel,
                 style: isFunction$1(spec.grid.style)
                     ? (datum, index) => {
@@ -66100,9 +66237,7 @@
                     : {
                         type: 'line',
                         visible: spec.subGrid.visible,
-                        alternateColor: isFunction$1(spec.subGrid.alternateColor)
-                            ? spec.subGrid.alternateColor()
-                            : spec.subGrid.alternateColor,
+                        alternateColor: spec.subGrid.alternateColor,
                         style: transformToGraphic(spec.subGrid.style)
                     }
             };
@@ -70151,10 +70286,12 @@
                 }
             });
             const isUnableValue = isNil$1(value) || !dimensionInfo || dimensionInfo.every(d => isDiscrete(d.axis.getScale().type) && isNil$1(d.index));
+            const isUnableTooltip = isUnableValue ||
+                dimensionInfo.every(d => isDiscrete(d.axis.getScale().type) && d.data.every(_data => _data.datum.length === 0));
             if (opt.tooltip !== false) {
                 const tooltip = this.getComponentsByType(ComponentTypeEnum.tooltip)[0];
                 if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.getVisible()) {
-                    if (isUnableValue) {
+                    if (isUnableValue || isUnableTooltip) {
                         (_b = (_a = tooltip).hideTooltip) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
                     else {
@@ -70184,6 +70321,25 @@
                 }
             }
         }
+        showCrosshair(cb) {
+            var _a;
+            const crosshair = (_a = this.getComponentsByType(ComponentTypeEnum.cartesianCrosshair)[0]) !== null && _a !== void 0 ? _a : this.getComponentsByType(ComponentTypeEnum.polarCrosshair)[0];
+            if (!crosshair) {
+                return;
+            }
+            const axes = this.getComponentsByKey('axes');
+            const dimInfo = [];
+            axes.forEach(axis => {
+                const value = cb(axis);
+                if (value !== false) {
+                    dimInfo.push({
+                        axis,
+                        value
+                    });
+                }
+            });
+            crosshair.showCrosshair(dimInfo);
+        }
         getColorScheme() {
             var _a, _b;
             return (_b = (_a = this._option).getTheme) === null || _b === void 0 ? void 0 : _b.call(_a, 'colorScheme');
@@ -76421,6 +76577,7 @@
         constructor() {
             super(...arguments);
             this.type = exports.SeriesTypeEnum.boxPlot;
+            this._bandPosition = 0;
         }
         getMinField() {
             return this._minField;
@@ -76453,7 +76610,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;
@@ -76470,7 +76627,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, {
@@ -76492,24 +76649,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);
             }
         }
@@ -76544,13 +76714,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)
@@ -76596,16 +76766,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;
@@ -76614,10 +76841,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;
@@ -93836,13 +94063,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;