@visactor/vchart 2.0.10-alpha.0 → 2.0.10

package/build/index.es.js

@@ -9500,7 +9500,7 @@ class SyncHook extends Hook {
 
 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();
 
@@ -11241,7 +11241,7 @@ const DefaultTextStyle = {
   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: "",
@@ -16309,7 +16309,7 @@ class Graphic extends Node {
         }
       }]), 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);
@@ -16335,7 +16335,7 @@ class Graphic extends Node {
   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;
@@ -33185,7 +33185,7 @@ class ArcSegment extends Segment {
 
 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) {
@@ -33222,6 +33222,26 @@ const DEFAULT_AXIS_THEME = {
       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,
@@ -40387,7 +40407,17 @@ var __rest$b = undefined && undefined.__rest || function (s, e) {
 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;
@@ -40449,6 +40479,15 @@ class LineAxis extends AxisBase {
         }, 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 {
@@ -40589,6 +40628,66 @@ class LineAxis extends AxisBase {
       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 {
@@ -40779,6 +40878,40 @@ class LineAxis extends AxisBase {
     }
     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;
   }
@@ -52324,7 +52457,7 @@ function isTokenKey(obj) {
 }
 
 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%',
@@ -57908,7 +58041,7 @@ class BaseMark extends GrammarItem {
                 }
             }
         };
-        this._setStateOfGraphic = (g) => {
+        this._setStateOfGraphic = (g, hasAnimation) => {
             g.clearStates();
             g.stateProxy = null;
             if (g.context.diffState === DiffState.enter || g.context.diffState === DiffState.update) {
@@ -57916,7 +58049,7 @@ class BaseMark extends GrammarItem {
                     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;
@@ -58669,7 +58802,7 @@ class BaseMark extends GrammarItem {
                     g.setFinalAttributes(finalAttrs);
                 }
             }
-            this._setStateOfGraphic(g);
+            this._setStateOfGraphic(g, hasStateAnimation);
             this._setGraphicFromMarkConfig(g);
         });
     }
@@ -61085,6 +61218,10 @@ class VChart {
         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);
@@ -61394,7 +61531,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.10-alpha.0";
+const version = "2.0.10";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -66080,7 +66217,7 @@ class AxisComponent extends BaseComponent {
     _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) => {
@@ -66094,9 +66231,7 @@ class AxisComponent extends BaseComponent {
                 : {
                     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)
                 }
         };
@@ -70145,10 +70280,12 @@ class BaseChart extends CompilableBase {
             }
         });
         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 {
@@ -70178,6 +70315,25 @@ class BaseChart extends CompilableBase {
             }
         }
     }
+    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');
@@ -76415,6 +76571,7 @@ class BoxPlotSeries extends CartesianSeries {
     constructor() {
         super(...arguments);
         this.type = SeriesTypeEnum.boxPlot;
+        this._bandPosition = 0;
     }
     getMinField() {
         return this._minField;
@@ -76447,7 +76604,7 @@ class BoxPlotSeries extends CartesianSeries {
         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;
@@ -76464,7 +76621,7 @@ class BoxPlotSeries extends CartesianSeries {
         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, {
@@ -76486,24 +76643,37 @@ class BoxPlotSeries extends CartesianSeries {
         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, STATE_VALUE_ENUM.STATE_NORMAL, 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, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+            this.setMarkStyle(boxPlotMark, boxPlotMarkStyles, STATE_VALUE_ENUM.STATE_NORMAL, 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
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
         }
     }
@@ -76538,13 +76708,13 @@ class BoxPlotSeries extends CartesianSeries {
             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)
@@ -76590,16 +76760,73 @@ class BoxPlotSeries extends CartesianSeries {
         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;
@@ -76608,10 +76835,10 @@ class BoxPlotSeries extends CartesianSeries {
         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;
@@ -93830,13 +94057,18 @@ class BoxPlotChartSpecTransformer extends CartesianChartSpecTransformer {
         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;