@visactor/vchart 1.9.0-alpha.0 → 1.9.0-alpha.1

package/cjs/series/bar/bar.js

@@ -4,20 +4,28 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.registerBarSeries = exports.BarSeries = exports.DefaultBandWidth = void 0;
 
-const index_1 = require("./../../constant/index"), vscale_1 = require("@visactor/vscale"), space_1 = require("../../typings/space"), cartesian_1 = require("../cartesian/cartesian"), type_1 = require("../../mark/interface/type"), constant_1 = require("../../constant"), scale_1 = require("../../util/scale"), data_1 = require("../../util/data"), space_2 = require("../../util/space"), animation_1 = require("./animation"), utils_1 = require("../../animation/utils"), type_2 = require("../interface/type"), rect_1 = require("../../mark/rect"), vutils_1 = require("@visactor/vutils"), constant_2 = require("./constant"), stack_1 = require("../util/stack"), factory_1 = require("../../core/factory"), register_1 = require("../../data/register"), series_data_1 = require("../base/series-data"), vdataset_1 = require("@visactor/vdataset"), add_property_1 = require("../../data/transforms/add-property"), data_key_1 = require("../../data/transforms/data-key"), vgrammar_core_1 = require("@visactor/vgrammar-core"), utils_2 = require("../util/utils"), bar_transformer_1 = require("./bar-transformer");
+const vscale_1 = require("@visactor/vscale"), space_1 = require("../../typings/space"), cartesian_1 = require("../cartesian/cartesian"), type_1 = require("../../mark/interface/type"), constant_1 = require("../../constant"), scale_1 = require("../../util/scale"), data_1 = require("../../util/data"), space_2 = require("../../util/space"), animation_1 = require("./animation"), utils_1 = require("../../animation/utils"), type_2 = require("../interface/type"), rect_1 = require("../../mark/rect"), vutils_1 = require("@visactor/vutils"), constant_2 = require("./constant"), stack_1 = require("../util/stack"), factory_1 = require("../../core/factory"), register_1 = require("../../data/register"), series_data_1 = require("../base/series-data"), vdataset_1 = require("@visactor/vdataset"), add_property_1 = require("../../data/transforms/add-property"), data_key_1 = require("../../data/transforms/data-key"), vgrammar_core_1 = require("@visactor/vgrammar-core"), utils_2 = require("../util/utils"), bar_transformer_1 = require("./bar-transformer"), interface_1 = require("../../component/interface"), constant_3 = require("../base/constant");
 
 exports.DefaultBandWidth = 6;
 
-const RECT_X = `${index_1.PREFIX}_rect_x`, RECT_X1 = `${index_1.PREFIX}_rect_x1`, RECT_Y = `${index_1.PREFIX}_rect_y`, RECT_Y1 = `${index_1.PREFIX}_rect_y1`;
-
 class BarSeries extends cartesian_1.CartesianSeries {
     constructor() {
         super(...arguments), this.type = type_2.SeriesTypeEnum.bar, this._barMarkName = type_2.SeriesMarkNameEnum.bar, 
         this._barMarkType = type_1.MarkTypeEnum.rect, this.transformerConstructor = bar_transformer_1.BarSeriesSpecTransformer, 
-        this._supportStack = !0, this._bandPosition = 0;
+        this._supportStack = !0, this._bandPosition = 0, this._getBarBackgroundPositionXEncoder = () => {
+            var _a;
+            return null === (_a = this._barBackgroundPositionXEncoder) || void 0 === _a ? void 0 : _a.bind(this);
+        }, this._setBarBackgroundPositionXEncoder = encoder => {
+            this._barBackgroundPositionXEncoder = encoder.bind(this);
+        }, this._getBarBackgroundPositionYEncoder = () => {
+            var _a;
+            return null === (_a = this._barBackgroundPositionYEncoder) || void 0 === _a ? void 0 : _a.bind(this);
+        }, this._setBarBackgroundPositionYEncoder = encoder => {
+            this._barBackgroundPositionYEncoder = encoder.bind(this);
+        };
     }
     initMark() {
-        var _a;
+        var _a, _b;
         const progressive = {
             progressiveStep: this._spec.progressiveStep,
             progressiveThreshold: this._spec.progressiveThreshold,
@@ -33,22 +41,23 @@ class BarSeries extends cartesian_1.CartesianSeries {
             groupKey: this._seriesField,
             isSeriesMark: !0,
             progressive: progressive,
-            customShape: null === (_a = this._spec.bar) || void 0 === _a ? void 0 : _a.customShape
+            customShape: null === (_a = this._spec.bar) || void 0 === _a ? void 0 : _a.customShape,
+            stateSort: null === (_b = this._spec.bar) || void 0 === _b ? void 0 : _b.stateSort
         });
     }
     _initBarBackgroundMark(progressive) {
-        var _a, _b;
-        (null === (_a = this._spec.barBackground) || void 0 === _a ? void 0 : _a.visible) && (this._barBackgroundMark = this._createMark(BarSeries.mark.barBackground, {
+        this._spec.barBackground && this._spec.barBackground.visible && (this._barBackgroundMark = this._createMark(BarSeries.mark.barBackground, {
             dataView: this._barBackgroundViewData.getDataView(),
             dataProductId: this._barBackgroundViewData.getProductId(),
             progressive: progressive,
-            customShape: null === (_b = this._spec.barBackground) || void 0 === _b ? void 0 : _b.customShape
+            customShape: this._spec.barBackground.customShape,
+            stateSort: this._spec.barBackground.stateSort
         }));
     }
     initMarkStyle() {
-        this._barMark && (this.setMarkStyle(this._barMark, {
+        this._barMark && this.setMarkStyle(this._barMark, {
             fill: this.getColorAttribute()
-        }, "normal", constant_1.AttributeLevel.Series), this._trigger.registerMark(this._barMark));
+        }, "normal", constant_1.AttributeLevel.Series);
     }
     initLabelMarkStyle(textMark) {
         textMark && this.setMarkStyle(textMark, {
@@ -62,35 +71,68 @@ class BarSeries extends cartesian_1.CartesianSeries {
     }
     _statisticViewData() {
         var _a, _b;
-        if (super._statisticViewData(), !(null === (_a = this._spec.barBackground) || void 0 === _a ? void 0 : _a.visible)) return;
-        (0, register_1.registerDataSetInstanceTransform)(this._option.dataSet, "addVChartProperty", add_property_1.addVChartProperty), 
-        (0, register_1.registerDataSetInstanceTransform)(this._option.dataSet, "dimensionItems", (([data], op) => {
-            var _a;
-            let dataCollect = [ {} ];
-            const fields = this.getDimensionField();
-            for (let i = 0; i < fields.length; i++) {
-                const field = fields[i], values = null === (_a = data.latestData[field]) || void 0 === _a ? void 0 : _a.values;
-                if (!(null == values ? void 0 : values.length)) continue;
-                const newDataCollect = [];
-                for (let j = 0; j < values.length; j++) for (let k = 0; k < dataCollect.length; k++) newDataCollect.push(Object.assign(Object.assign({}, dataCollect[k]), {
-                    [field]: values[j]
-                }));
-                dataCollect = newDataCollect;
-            }
-            return dataCollect;
-        }));
-        const barBackgroundData = new vdataset_1.DataView(this._option.dataSet).parse([ this._viewDataStatistics ], {
-            type: "dataview"
-        }).transform({
-            type: "dimensionItems"
-        }, !1).transform({
-            type: "addVChartProperty",
-            options: {
-                beforeCall: data_key_1.initKeyMap.bind(this),
-                call: data_key_1.addDataKey
-            }
-        }, !1);
-        null === (_b = this._viewDataStatistics) || void 0 === _b || _b.target.addListener("change", barBackgroundData.reRunAllTransform), 
+        super._statisticViewData();
+        const spec = null !== (_a = this._spec.barBackground) && void 0 !== _a ? _a : {};
+        if (!spec.visible) return;
+        const hasBandAxis = this._getRelatedComponentSpecInfo("axes").some((axisInfo => axisInfo.type === interface_1.ComponentTypeEnum.cartesianBandAxis));
+        let barBackgroundData;
+        if ((0, register_1.registerDataSetInstanceTransform)(this._option.dataSet, "addVChartProperty", add_property_1.addVChartProperty), 
+        hasBandAxis) {
+            const dimensionItems = ([data], {scaleDepth: scaleDepth}) => {
+                var _a;
+                let dataCollect = [ {} ];
+                const fields = this.getDimensionField(), depth = (0, vutils_1.isNil)(scaleDepth) ? fields.length : Math.min(fields.length, scaleDepth);
+                for (let i = 0; i < depth; i++) {
+                    const field = fields[i], values = null === (_a = data.latestData[field]) || void 0 === _a ? void 0 : _a.values;
+                    if (!(null == values ? void 0 : values.length)) continue;
+                    const newDataCollect = [];
+                    for (let j = 0; j < values.length; j++) for (let k = 0; k < dataCollect.length; k++) newDataCollect.push(Object.assign(Object.assign({}, dataCollect[k]), {
+                        [field]: values[j]
+                    }));
+                    dataCollect = newDataCollect;
+                }
+                return dataCollect;
+            };
+            (0, register_1.registerDataSetInstanceTransform)(this._option.dataSet, "dimensionItems", dimensionItems), 
+            barBackgroundData = new vdataset_1.DataView(this._option.dataSet).parse([ this._viewDataStatistics ], {
+                type: "dataview"
+            }).transform({
+                type: "dimensionItems",
+                options: {
+                    scaleDepth: (0, vutils_1.isNil)(spec.fieldLevel) ? void 0 : spec.fieldLevel + 1
+                }
+            }, !1).transform({
+                type: "addVChartProperty",
+                options: {
+                    beforeCall: data_key_1.initKeyMap.bind(this),
+                    call: data_key_1.addDataKey
+                }
+            }, !1), null === (_b = this._viewDataStatistics) || void 0 === _b || _b.target.addListener("change", barBackgroundData.reRunAllTransform);
+        } else {
+            const dimensionItems = ([data]) => {
+                const dataCollect = [], [field0, field1] = this.getDimensionContinuousField(), map = {};
+                return viewData.latestData.forEach((datum => {
+                    const key = `${datum[field0]}-${datum[field1]}`;
+                    map[key] || (map[key] = {
+                        [field0]: datum[field0],
+                        [field1]: datum[field1]
+                    }, dataCollect.push(map[key]));
+                })), dataCollect;
+            };
+            (0, register_1.registerDataSetInstanceTransform)(this._option.dataSet, "dimensionItems", dimensionItems);
+            const viewData = this.getViewData();
+            barBackgroundData = new vdataset_1.DataView(this._option.dataSet).parse([ viewData ], {
+                type: "dataview"
+            }).transform({
+                type: "dimensionItems"
+            }, !1).transform({
+                type: "addVChartProperty",
+                options: {
+                    beforeCall: data_key_1.initKeyMap.bind(this),
+                    call: data_key_1.addDataKey
+                }
+            }, !1), null == viewData || viewData.target.addListener("change", barBackgroundData.reRunAllTransform);
+        }
         this._barBackgroundViewData = new series_data_1.SeriesData(this._option, barBackgroundData);
     }
     init(option) {
@@ -99,16 +141,17 @@ class BarSeries extends cartesian_1.CartesianSeries {
     }
     _shouldDoPreCalculate() {
         const region = this.getRegion();
-        return this._stack && region.getSeries().filter((s => s.type === type_2.SeriesTypeEnum.bar && s.getSpec().barMinHeight)).length;
+        return this._stack && region.getSeries().filter((s => s.type === this.type && s.getSpec().barMinHeight)).length;
     }
     _calculateStackRectPosition(isVertical) {
         const region = this.getRegion();
         if (region._bar_series_position_calculated) return;
         let start, end, startMethod, endMethod, axisHelper;
-        region._bar_series_position_calculated = !0, isVertical ? (start = RECT_Y1, end = RECT_Y, 
-        startMethod = "dataToPositionY1", endMethod = "dataToPositionY", axisHelper = "_yAxisHelper") : (start = RECT_X1, 
-        end = RECT_X, startMethod = "dataToPositionX1", endMethod = "dataToPositionX", axisHelper = "_xAxisHelper");
-        const stackValueGroup = (0, data_1.getRegionStackGroup)(region, !1, (s => s.type === type_2.SeriesTypeEnum.bar));
+        region._bar_series_position_calculated = !0, isVertical ? (start = constant_3.RECT_Y1, 
+        end = constant_3.RECT_Y, startMethod = "_dataToPosY1", endMethod = "_dataToPosY", 
+        axisHelper = "_yAxisHelper") : (start = constant_3.RECT_X1, end = constant_3.RECT_X, 
+        startMethod = "_dataToPosX1", endMethod = "_dataToPosX", axisHelper = "_xAxisHelper");
+        const stackValueGroup = (0, data_1.getRegionStackGroup)(region, !1, (s => s.type === this.type));
         for (const stackValue in stackValueGroup) for (const key in stackValueGroup[stackValue].nodes) (0, 
         stack_1.stackWithMinHeight)(stackValueGroup[stackValue].nodes[key], region.getStackInverse(), {
             isVertical: isVertical,
@@ -122,8 +165,8 @@ class BarSeries extends cartesian_1.CartesianSeries {
     _calculateRectPosition(datum, isVertical) {
         var _a, _b;
         let startMethod, endMethod, axisHelper;
-        isVertical ? (startMethod = "dataToPositionY1", endMethod = "dataToPositionY", axisHelper = "_yAxisHelper") : (startMethod = "dataToPositionX1", 
-        endMethod = "dataToPositionX", axisHelper = "_xAxisHelper");
+        isVertical ? (startMethod = "_dataToPosY1", endMethod = "_dataToPosY", axisHelper = "_yAxisHelper") : (startMethod = "_dataToPosX1", 
+        endMethod = "_dataToPosX", axisHelper = "_xAxisHelper");
         const seriesScale = null === (_b = (_a = this[axisHelper]).getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), inverse = this[axisHelper].isInverse(), barMinHeight = this._spec.barMinHeight, y1 = (0, 
         scale_1.valueInScaleRange)(this[startMethod](datum), seriesScale), y = (0, scale_1.valueInScaleRange)(this[endMethod](datum), seriesScale);
         let height = Math.abs(y1 - y);
@@ -132,31 +175,44 @@ class BarSeries extends cartesian_1.CartesianSeries {
         return y < y1 ? flag = -1 : y === y1 && (flag = isVertical ? inverse ? 1 : -1 : inverse ? -1 : 1), 
         y1 + flag * height;
     }
+    _dataToPosX(datum) {
+        return this.dataToPositionX(datum);
+    }
+    _dataToPosX1(datum) {
+        return this.dataToPositionX1(datum);
+    }
+    _dataToPosY(datum) {
+        return this.dataToPositionY(datum);
+    }
+    _dataToPosY1(datum) {
+        return this.dataToPositionY1(datum);
+    }
     initBandRectMarkStyle() {
         var _a, _b, _c, _d;
         const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0);
         this.direction === space_1.Direction.horizontal ? this.setMarkStyle(this._barMark, {
             x: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!1), 
-            datum[RECT_X]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !1) : (0, 
-            scale_1.valueInScaleRange)(this.dataToPositionX(datum), xScale),
+            datum[constant_3.RECT_X]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !1) : (0, 
+            scale_1.valueInScaleRange)(this._dataToPosX(datum), xScale),
             x1: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!1), 
-            datum[RECT_X1]) : (0, scale_1.valueInScaleRange)(this.dataToPositionX1(datum), xScale),
+            datum[constant_3.RECT_X1]) : (0, scale_1.valueInScaleRange)(this._dataToPosX1(datum), xScale),
             y: datum => this._getPosition(this.direction, datum),
             height: () => this._getBarWidth(this._yAxisHelper)
         }, "normal", constant_1.AttributeLevel.Series) : this.setMarkStyle(this._barMark, {
             x: datum => this._getPosition(this.direction, datum),
             y: (datum, ctx, opt, dataView) => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!0), 
-            datum[RECT_Y]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !0) : (0, 
-            scale_1.valueInScaleRange)(this.dataToPositionY(datum), yScale),
+            datum[constant_3.RECT_Y]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !0) : (0, 
+            scale_1.valueInScaleRange)(this._dataToPosY(datum), yScale),
             y1: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!0), 
-            datum[RECT_Y1]) : (0, scale_1.valueInScaleRange)(this.dataToPositionY1(datum), yScale),
+            datum[constant_3.RECT_Y1]) : (0, scale_1.valueInScaleRange)(this._dataToPosY1(datum), yScale),
             width: () => this._getBarWidth(this._xAxisHelper)
-        }, "normal", constant_1.AttributeLevel.Series), this._initBarBackgroundMarkStyle();
+        }, "normal", constant_1.AttributeLevel.Series), this._initBandBarBackgroundMarkStyle();
     }
-    _initBarBackgroundMarkStyle() {
-        var _a, _b, _c, _d;
+    _initBandBarBackgroundMarkStyle() {
+        var _a, _b, _c, _d, _e;
         if (!this._barBackgroundMark) return;
-        const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0);
+        const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0), spec = null !== (_e = this._spec.barBackground) && void 0 !== _e ? _e : {}, scaleDepth = (0, 
+        vutils_1.isNil)(spec.fieldLevel) ? void 0 : spec.fieldLevel + 1;
         this.direction === space_1.Direction.horizontal ? this.setMarkStyle(this._barBackgroundMark, {
             x: () => {
                 const range = xScale.range();
@@ -166,10 +222,10 @@ class BarSeries extends cartesian_1.CartesianSeries {
                 const range = xScale.range();
                 return Math.max(range[0], range[range.length - 1]);
             },
-            y: datum => this._getPosition(this.direction, datum),
-            height: () => this._getBarWidth(this._yAxisHelper)
+            y: datum => this._getPosition(this.direction, datum, scaleDepth, type_2.SeriesMarkNameEnum.barBackground),
+            height: () => this._getBarWidth(this._yAxisHelper, scaleDepth)
         }, "normal", constant_1.AttributeLevel.Series) : this.setMarkStyle(this._barBackgroundMark, {
-            x: datum => this._getPosition(this.direction, datum),
+            x: datum => this._getPosition(this.direction, datum, scaleDepth, type_2.SeriesMarkNameEnum.barBackground),
             y: () => {
                 const range = yScale.range();
                 return Math.min(range[0], range[range.length - 1]);
@@ -178,7 +234,7 @@ class BarSeries extends cartesian_1.CartesianSeries {
                 const range = yScale.range();
                 return Math.max(range[0], range[range.length - 1]);
             },
-            width: () => this._getBarWidth(this._xAxisHelper)
+            width: () => this._getBarWidth(this._xAxisHelper, scaleDepth)
         }, "normal", constant_1.AttributeLevel.Series);
     }
     initLinearRectMarkStyle() {
@@ -188,16 +244,43 @@ class BarSeries extends cartesian_1.CartesianSeries {
             x: datum => (0, scale_1.valueInScaleRange)(this.dataToPositionX(datum), xScale),
             x1: datum => (0, scale_1.valueInScaleRange)(this.dataToPositionX1(datum), xScale),
             y: (datum, ctx, opt, dataView) => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!0), 
-            datum[RECT_Y]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !0) : (0, 
+            datum[constant_3.RECT_Y]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !0) : (0, 
             scale_1.valueInScaleRange)(this.dataToPositionY(datum), yScale),
             y1: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!0), 
-            datum[RECT_Y1]) : (0, scale_1.valueInScaleRange)(this.dataToPositionY1(datum), yScale)
+            datum[constant_3.RECT_Y1]) : (0, scale_1.valueInScaleRange)(this.dataToPositionY1(datum), yScale)
         }, "normal", constant_1.AttributeLevel.Series) : this.setMarkStyle(this._barMark, {
             x: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!1), 
-            datum[RECT_X]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !1) : (0, 
+            datum[constant_3.RECT_X]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !1) : (0, 
             scale_1.valueInScaleRange)(this.dataToPositionX(datum), xScale),
             x1: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!1), 
-            datum[RECT_X1]) : (0, scale_1.valueInScaleRange)(this.dataToPositionX1(datum), xScale),
+            datum[constant_3.RECT_X1]) : (0, scale_1.valueInScaleRange)(this.dataToPositionX1(datum), xScale),
+            y: datum => (0, scale_1.valueInScaleRange)(this.dataToPositionY(datum), yScale),
+            y1: datum => (0, scale_1.valueInScaleRange)(this.dataToPositionY1(datum), yScale)
+        }, "normal", constant_1.AttributeLevel.Series), this._initLinearBarBackgroundMarkStyle();
+    }
+    _initLinearBarBackgroundMarkStyle() {
+        var _a, _b, _c, _d;
+        const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0);
+        this.direction === space_1.Direction.vertical ? this.setMarkStyle(this._barBackgroundMark, {
+            x: datum => (0, scale_1.valueInScaleRange)(this.dataToPositionX(datum), xScale),
+            x1: datum => (0, scale_1.valueInScaleRange)(this.dataToPositionX1(datum), xScale),
+            y: () => {
+                const range = yScale.range();
+                return Math.min(range[0], range[range.length - 1]);
+            },
+            y1: () => {
+                const range = yScale.range();
+                return Math.max(range[0], range[range.length - 1]);
+            }
+        }, "normal", constant_1.AttributeLevel.Series) : this.setMarkStyle(this._barBackgroundMark, {
+            x: () => {
+                const range = xScale.range();
+                return Math.min(range[0], range[range.length - 1]);
+            },
+            x1: () => {
+                const range = xScale.range();
+                return Math.max(range[0], range[range.length - 1]);
+            },
             y: datum => (0, scale_1.valueInScaleRange)(this.dataToPositionY(datum), yScale),
             y1: datum => (0, scale_1.valueInScaleRange)(this.dataToPositionY1(datum), yScale)
         }, "normal", constant_1.AttributeLevel.Series);
@@ -217,30 +300,31 @@ class BarSeries extends cartesian_1.CartesianSeries {
         this._barMark.setAnimationConfig((0, utils_1.animationConfig)(null === (_b = factory_1.Factory.getAnimationInKey("bar")) || void 0 === _b ? void 0 : _b(barAnimationParams, appearPreset), (0, 
         utils_1.userAnimationConfig)(this._barMarkName, this._spec, this._markAttributeContext), animationParams));
     }
-    _getBarWidth(axisHelper) {
+    _getBarWidth(axisHelper, scaleDepth) {
         var _a, _b;
-        const hasBarWidth = void 0 !== this._spec.barWidth, bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, this._groups ? this._groups.fields.length - 1 : 0)) && void 0 !== _b ? _b : exports.DefaultBandWidth;
-        if (hasBarWidth) return (0, space_2.getActualNumValue)(this._spec.barWidth, bandWidth);
+        const depthFromSpec = this._groups ? this._groups.fields.length : 1, depth = (0, 
+        vutils_1.isNil)(scaleDepth) ? depthFromSpec : Math.min(depthFromSpec, scaleDepth), bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, depth - 1)) && void 0 !== _b ? _b : exports.DefaultBandWidth;
+        if (void 0 !== this._spec.barWidth && depth === depthFromSpec) return (0, space_2.getActualNumValue)(this._spec.barWidth, bandWidth);
         const hasBarMinWidth = void 0 !== this._spec.barMinWidth, hasBarMaxWidth = void 0 !== this._spec.barMaxWidth;
         let width = bandWidth;
         return hasBarMinWidth && (width = Math.max(width, (0, space_2.getActualNumValue)(this._spec.barMinWidth, bandWidth))), 
         hasBarMaxWidth && (width = Math.min(width, (0, space_2.getActualNumValue)(this._spec.barMaxWidth, bandWidth))), 
         width;
     }
-    _getPosition(direction, datum) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    _getPosition(direction, datum, scaleDepth, mark) {
+        var _a, _b, _c, _d, _e, _f, _g;
         let axisHelper, sizeAttribute, dataToPosition;
         direction === space_1.Direction.horizontal ? (axisHelper = this.getYAxisHelper(), 
-        sizeAttribute = "height", dataToPosition = this.dataToPositionY.bind(this)) : (axisHelper = this.getXAxisHelper(), 
-        sizeAttribute = "width", dataToPosition = this.dataToPositionX.bind(this));
-        const scale = axisHelper.getScale(0), size = this._barMark.getAttribute(sizeAttribute, datum), bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, this._groups ? this._groups.fields.length - 1 : 0)) && void 0 !== _b ? _b : exports.DefaultBandWidth;
-        if ((null === (_d = null === (_c = this._groups) || void 0 === _c ? void 0 : _c.fields) || void 0 === _d ? void 0 : _d.length) > 1 && (0, 
-        vutils_1.isValid)(this._spec.barGapInGroup)) {
+        sizeAttribute = "height", dataToPosition = mark === type_2.SeriesMarkNameEnum.barBackground ? this.dataToBarBackgroundPositionY.bind(this) : this.dataToPositionY.bind(this)) : (axisHelper = this.getXAxisHelper(), 
+        sizeAttribute = "width", dataToPosition = mark === type_2.SeriesMarkNameEnum.barBackground ? this.dataToBarBackgroundPositionX.bind(this) : this.dataToPositionX.bind(this));
+        const scale = axisHelper.getScale(0), depthFromSpec = this._groups ? this._groups.fields.length : 1, depth = (0, 
+        vutils_1.isNil)(scaleDepth) ? depthFromSpec : Math.min(depthFromSpec, scaleDepth), bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, depth - 1)) && void 0 !== _b ? _b : exports.DefaultBandWidth, size = depth === depthFromSpec ? this._barMark.getAttribute(sizeAttribute, datum) : bandWidth;
+        if (depth > 1 && (0, vutils_1.isValid)(this._spec.barGapInGroup)) {
             const groupFields = this._groups.fields, barInGroup = (0, vutils_1.array)(this._spec.barGapInGroup);
             let totalWidth = 0, offSet = 0;
             for (let index = groupFields.length - 1; index >= 1; index--) {
-                const groupField = groupFields[index], groupValues = null !== (_h = null === (_g = null === (_f = null === (_e = this.getViewDataStatistics()) || void 0 === _e ? void 0 : _e.latestData) || void 0 === _f ? void 0 : _f[groupField]) || void 0 === _g ? void 0 : _g.values) && void 0 !== _h ? _h : [], groupCount = groupValues.length, gap = (0, 
-                space_2.getActualNumValue)(null !== (_j = barInGroup[index - 1]) && void 0 !== _j ? _j : (0, 
+                const groupField = groupFields[index], groupValues = null !== (_f = null === (_e = null === (_d = null === (_c = this.getViewDataStatistics()) || void 0 === _c ? void 0 : _c.latestData) || void 0 === _d ? void 0 : _d[groupField]) || void 0 === _e ? void 0 : _e.values) && void 0 !== _f ? _f : [], groupCount = groupValues.length, gap = (0, 
+                space_2.getActualNumValue)(null !== (_g = barInGroup[index - 1]) && void 0 !== _g ? _g : (0, 
                 vutils_1.last)(barInGroup), bandWidth), i = groupValues.indexOf(datum[groupField]);
                 index === groupFields.length - 1 ? (totalWidth += groupCount * size + (groupCount - 1) * gap, 
                 offSet += i * (size + gap)) : (offSet += i * (totalWidth + gap), totalWidth += totalWidth + (groupCount - 1) * gap);
@@ -248,7 +332,13 @@ class BarSeries extends cartesian_1.CartesianSeries {
             return scale.scale(datum[groupFields[0]]) + axisHelper.getBandwidth(0) / 2 - totalWidth / 2 + offSet;
         }
         const continuous = (0, vscale_1.isContinuous)(scale.type || "band");
-        return dataToPosition(datum) + .5 * (bandWidth - size) + (continuous ? -bandWidth / 2 : 0);
+        return dataToPosition(datum, depth) + .5 * (bandWidth - size) + (continuous ? -bandWidth / 2 : 0);
+    }
+    dataToBarBackgroundPositionX(datum, scaleDepth) {
+        return this._dataToPosition(datum, this._xAxisHelper, this.fieldX, scaleDepth, this._getBarBackgroundPositionXEncoder, this._setBarBackgroundPositionXEncoder);
+    }
+    dataToBarBackgroundPositionY(datum, scaleDepth) {
+        return this._dataToPosition(datum, this._yAxisHelper, this.fieldY, scaleDepth, this._getBarBackgroundPositionYEncoder, this._setBarBackgroundPositionYEncoder);
     }
     onLayoutEnd(ctx) {
         super.onLayoutEnd(ctx);