@visactor/vtable 1.22.4-alpha.5 → 1.22.5-alpha.0

package/dist/vtable.js

@@ -22516,7 +22516,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) {
@@ -22553,6 +22553,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,
@@ -24391,14 +24411,15 @@
         return delayAfterValue > 0 && (totalDelay += delayAfterValue), totalDelay > 0 && animate.wait(totalDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
       }
       _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (custom && customType) {
-          const customParams = Object.assign({
-              width: (null === (_a = graphic.stage) || void 0 === _a ? void 0 : _a.width) || 0,
-              height: (null === (_b = graphic.stage) || void 0 === _b ? void 0 : _b.height) || 0,
-              group: this._target.parent
-            }, this.resolveValue(customParameters, graphic)),
-            objOptions = isFunction$7(options) ? options.call(null, null !== (_d = customParams && (null === (_c = customParams.data) || void 0 === _c ? void 0 : _c[0])) && void 0 !== _d ? _d : null === (_f = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.data) || void 0 === _f ? void 0 : _f[0], graphic, customParams) : options;
+          let customParams = this.resolveValue(customParameters, graphic);
+          "function" == typeof customParams && (customParams = customParams(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {})), customParams = Object.assign({
+            width: (null === (_c = graphic.stage) || void 0 === _c ? void 0 : _c.width) || 0,
+            height: (null === (_d = graphic.stage) || void 0 === _d ? void 0 : _d.height) || 0,
+            group: this._target.parent
+          }, customParams);
+          const objOptions = isFunction$7(options) ? options.call(null, null !== (_f = customParams && (null === (_e = customParams.data) || void 0 === _e ? void 0 : _e[0])) && void 0 !== _f ? _f : null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, customParams) : options;
           customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
         } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
       }
@@ -29071,7 +29092,17 @@
     loadLineAxisComponent();
     class LineAxis extends AxisBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, 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$2({}, LineAxis.defaultAttributes, attributes), options), this.labelHoverOnAxisGroup = null;
       }
       _renderInner(container) {
         var _a;
@@ -29133,6 +29164,15 @@
             }, panel.style));
           bgRect.name = AXIS_ELEMENT_NAME.background, bgRect.id = this._getNodeId("background"), bgRect.states = merge$2({}, 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$1(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 {
@@ -29273,6 +29313,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$1(_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$5(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 {
@@ -29463,6 +29563,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;
       }
@@ -37521,14 +37655,18 @@
                                 },
                                 get inlineColumnBgColor() {
                                     return (defaultStyle.hover?.inlineColumnBgColor ??
-                                        (defaultStyle.hover?.cellBgColor && typeof defaultStyle.hover?.cellBgColor === 'string'
+                                        (defaultStyle.hover?.cellBgColor &&
+                                            typeof defaultStyle.hover?.cellBgColor === 'string' &&
+                                            defaultStyle.hover?.cellBgColor !== 'transparent'
                                             ? changeColor(defaultStyle.hover?.cellBgColor, 0.1, false)
                                             : undefined) ??
                                         undefined);
                                 },
                                 get inlineRowBgColor() {
                                     return (defaultStyle.hover?.inlineRowBgColor ??
-                                        (defaultStyle.hover?.cellBgColor && typeof defaultStyle.hover?.cellBgColor === 'string'
+                                        (defaultStyle.hover?.cellBgColor &&
+                                            typeof defaultStyle.hover?.cellBgColor === 'string' &&
+                                            defaultStyle.hover?.cellBgColor !== 'transparent'
                                             ? changeColor(defaultStyle.hover?.cellBgColor, 0.1, false)
                                             : undefined) ??
                                         undefined);
@@ -37543,7 +37681,9 @@
                                 get inlineColumnBgColor() {
                                     return (defaultStyle.select?.inlineColumnBgColor ??
                                         that.selectionStyle?.inlineColumnBgColor ??
-                                        (that.selectionStyle?.cellBgColor && typeof that.selectionStyle.cellBgColor === 'string'
+                                        (that.selectionStyle?.cellBgColor &&
+                                            typeof that.selectionStyle.cellBgColor === 'string' &&
+                                            that.selectionStyle.cellBgColor !== 'transparent'
                                             ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
                                             : undefined) ??
                                         undefined);
@@ -37551,7 +37691,9 @@
                                 get inlineRowBgColor() {
                                     return (defaultStyle.select?.inlineRowBgColor ??
                                         that.selectionStyle.inlineRowBgColor ??
-                                        (that.selectionStyle?.cellBgColor && typeof that.selectionStyle.cellBgColor === 'string'
+                                        (that.selectionStyle?.cellBgColor &&
+                                            typeof that.selectionStyle.cellBgColor === 'string' &&
+                                            that.selectionStyle.cellBgColor !== 'transparent'
                                             ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
                                             : undefined) ??
                                         undefined);
@@ -38071,14 +38213,18 @@
                             },
                             get inlineColumnBgColor() {
                                 return (style.hover?.inlineColumnBgColor ??
-                                    (style.hover?.cellBgColor && typeof style.hover?.cellBgColor === 'string'
+                                    (style.hover?.cellBgColor &&
+                                        typeof style.hover?.cellBgColor === 'string' &&
+                                        style.hover?.cellBgColor !== 'transparent'
                                         ? changeColor(style.hover?.cellBgColor, 0.1, false)
                                         : undefined) ??
                                     undefined);
                             },
                             get inlineRowBgColor() {
                                 return (style.hover?.inlineRowBgColor ??
-                                    (style.hover?.cellBgColor && typeof style.hover?.cellBgColor === 'string'
+                                    (style.hover?.cellBgColor &&
+                                        typeof style.hover?.cellBgColor === 'string' &&
+                                        style.hover?.cellBgColor !== 'transparent'
                                         ? changeColor(style.hover?.cellBgColor, 0.1, false)
                                         : undefined) ??
                                     undefined);
@@ -38092,7 +38238,9 @@
                         get inlineColumnBgColor() {
                             return (style.select?.inlineColumnBgColor ??
                                 that.selectionStyle?.inlineColumnBgColor ??
-                                (that.selectionStyle?.cellBgColor && typeof that.selectionStyle.cellBgColor === 'string'
+                                (that.selectionStyle?.cellBgColor &&
+                                    typeof that.selectionStyle.cellBgColor === 'string' &&
+                                    that.selectionStyle.cellBgColor !== 'transparent'
                                     ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
                                     : undefined) ??
                                 undefined);
@@ -38100,7 +38248,9 @@
                         get inlineRowBgColor() {
                             return (style.select?.inlineRowBgColor ??
                                 that.selectionStyle.inlineRowBgColor ??
-                                (that.selectionStyle?.cellBgColor && typeof that.selectionStyle.cellBgColor === 'string'
+                                (that.selectionStyle?.cellBgColor &&
+                                    typeof that.selectionStyle.cellBgColor === 'string' &&
+                                    that.selectionStyle.cellBgColor !== 'transparent'
                                     ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
                                     : undefined) ??
                                 undefined);
@@ -45005,7 +45155,7 @@
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const CartesianAxis = Factory.getComponent('axis');
-                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, axisConfig.__vtablePadding ?? padding, table);
+                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, axisConfig.__vtableBodyChartCellPadding ?? padding, table);
                 cellGroup.clear();
                 cellGroup.appendChild(axis.component);
                 axis.overlap();
@@ -46986,7 +47136,7 @@
             const padding = getQuadProps(getProp('padding', cellStyle, col, row, scene.table));
             if (axisConfig) {
                 const CartesianAxis = Factory.getComponent('axis');
-                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, axisConfig.__vtablePadding ?? padding, scene.table);
+                const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, axisConfig.__vtableBodyChartCellPadding ?? padding, scene.table);
                 cellGroup.clear();
                 cellGroup.appendChild(axis.component);
                 axis.overlap();
@@ -48821,12 +48971,199 @@
         return hoverMode;
     }
 
+    const chartInstanceListColumnByColumnDirection = {};
+    const chartInstanceListRowByRowDirection = {};
+    function generateChartInstanceListByColumnDirection(col, dimensionValueOrXValue, positionValueOrYValue, canvasXY, table, hideTooltip = false, isScatter = false) {
+        if (!isValid$3(chartInstanceListColumnByColumnDirection[col])) {
+            chartInstanceListColumnByColumnDirection[col] = {};
+        }
+        const { rowStart } = table.getBodyVisibleRowRange();
+        let rowEnd = table.getBodyVisibleRowRange().rowEnd;
+        rowEnd = Math.min(table.rowCount - 1 - table.bottomFrozenRowCount, rowEnd);
+        for (let i = rowStart; i <= rowEnd; i++) {
+            const cellGroup = table.scenegraph.getCell(col, i);
+            const chartNode = cellGroup?.getChildren()?.[0];
+            chartNode.addUpdateShapeAndBoundsTag();
+            if (chartInstanceListColumnByColumnDirection[col][i]) ;
+            else if (isValid$3(chartNode)) {
+                if (chartNode.activeChartInstance) {
+                    chartInstanceListColumnByColumnDirection[col][i] = chartNode.activeChartInstance;
+                }
+                else {
+                    chartNode.activate(table);
+                    chartInstanceListColumnByColumnDirection[col][i] = chartNode.activeChartInstance;
+                }
+            }
+            if (table.stateManager.hover.cellPos.col !== col || table.stateManager.hover.cellPos.row !== i) {
+                setTimeout(() => {
+                    if (chartInstanceListColumnByColumnDirection[col]?.[i]) {
+                        const absolutePosition = table.getCellRelativeRect(col, i);
+                        const chartDimensionLinkage = table.options.chartDimensionLinkage;
+                        let isShowTooltip = !isScatter;
+                        if (!isScatter && typeof chartDimensionLinkage === 'object') {
+                            isShowTooltip = chartDimensionLinkage.showTooltip ?? true;
+                            if (i === rowEnd && isShowTooltip) {
+                                const heightLimitToShowTooltipForLastRow = chartDimensionLinkage.heightLimitToShowTooltipForLastRow;
+                                const { rowEnd: rowEnd1 } = table.getBodyVisibleRowRange(-heightLimitToShowTooltipForLastRow);
+                                if (rowEnd1 === rowEnd) {
+                                    isShowTooltip = true;
+                                }
+                                else {
+                                    const { rowEnd: rowEnd2 } = table.getBodyVisibleRowRange(5);
+                                    if (rowEnd2 !== rowEnd) {
+                                        isShowTooltip = true;
+                                    }
+                                    else {
+                                        isShowTooltip = false;
+                                    }
+                                }
+                            }
+                        }
+                        if (isScatter) {
+                            chartInstanceListColumnByColumnDirection[col][i].showCrosshair?.((axis) => {
+                                if (axis.layoutOrient === 'left') {
+                                    return positionValueOrYValue;
+                                }
+                                return dimensionValueOrXValue;
+                            });
+                        }
+                        else {
+                            if (hideTooltip) {
+                                chartInstanceListColumnByColumnDirection[col][i].hideTooltip();
+                            }
+                            else {
+                                chartInstanceListColumnByColumnDirection[col][i].setDimensionIndex(dimensionValueOrXValue, {
+                                    tooltip: isShowTooltip,
+                                    showTooltipOption: { x: canvasXY.x, y: absolutePosition.top + 3, activeType: 'dimension' }
+                                });
+                            }
+                        }
+                    }
+                }, 0);
+            }
+            table.scenegraph.updateNextFrame();
+        }
+    }
+    function clearChartInstanceListByColumnDirection(col, excludedRow, table) {
+        if (isValid$3(chartInstanceListColumnByColumnDirection[col])) {
+            for (const i in chartInstanceListColumnByColumnDirection[col]) {
+                if (isValid$3(excludedRow) && Number(i) === excludedRow) {
+                    continue;
+                }
+                const cellGroup = table.scenegraph.getCell(col, Number(i));
+                const chartNode = cellGroup?.getChildren()?.[0];
+                chartNode.addUpdateShapeAndBoundsTag();
+                if (isValid$3(chartNode)) {
+                    chartNode.deactivate(table, {
+                        releaseChartInstance: true,
+                        releaseColumnChartInstance: false,
+                        releaseRowChartInstance: false
+                    });
+                    chartInstanceListColumnByColumnDirection[col][i] = null;
+                }
+            }
+            delete chartInstanceListColumnByColumnDirection[col];
+        }
+    }
+    function generateChartInstanceListByRowDirection(row, dimensionValueOrXValue, positionValueOrYValue, canvasXY, table, hideTooltip = false, isScatter = false) {
+        if (!isValid$3(chartInstanceListRowByRowDirection[row])) {
+            chartInstanceListRowByRowDirection[row] = {};
+        }
+        const { colStart } = table.getBodyVisibleColRange();
+        let colEnd = table.getBodyVisibleColRange().colEnd;
+        colEnd = Math.min(table.colCount - 1 - table.rightFrozenColCount, colEnd);
+        for (let i = colStart; i <= colEnd; i++) {
+            const cellGroup = table.scenegraph.getCell(i, row);
+            const chartNode = cellGroup?.getChildren()?.[0];
+            chartNode.addUpdateShapeAndBoundsTag();
+            if (chartInstanceListRowByRowDirection[row][i]) ;
+            else if (isValid$3(chartNode)) {
+                if (chartNode.activeChartInstance) {
+                    chartInstanceListRowByRowDirection[row][i] = chartNode.activeChartInstance;
+                }
+                else {
+                    chartNode.activate(table);
+                    chartInstanceListRowByRowDirection[row][i] = chartNode.activeChartInstance;
+                }
+            }
+            if (table.stateManager.hover.cellPos.col !== i || table.stateManager.hover.cellPos.row !== row) {
+                setTimeout(() => {
+                    if (chartInstanceListRowByRowDirection[row]?.[i]) {
+                        const absolutePosition = table.getCellRelativeRect(i, row);
+                        const chartDimensionLinkage = table.options.chartDimensionLinkage;
+                        let isShowTooltip = !isScatter;
+                        if (!isScatter && typeof chartDimensionLinkage === 'object') {
+                            isShowTooltip = chartDimensionLinkage.showTooltip ?? true;
+                            if (i === colEnd && isShowTooltip) {
+                                const widthLimitToShowTooltipForLastColumn = chartDimensionLinkage.widthLimitToShowTooltipForLastColumn;
+                                const { colEnd: colEnd1 } = table.getBodyVisibleColRange(-widthLimitToShowTooltipForLastColumn);
+                                if (colEnd1 === colEnd) {
+                                    isShowTooltip = true;
+                                }
+                                else {
+                                    const { colEnd: colEnd2 } = table.getBodyVisibleColRange(5);
+                                    if (colEnd2 !== colEnd) {
+                                        isShowTooltip = true;
+                                    }
+                                    else {
+                                        isShowTooltip = false;
+                                    }
+                                }
+                            }
+                        }
+                        if (isScatter) {
+                            chartInstanceListRowByRowDirection[row][i].showCrosshair?.((axis) => {
+                                if (axis.layoutOrient === 'left') {
+                                    return positionValueOrYValue;
+                                }
+                                return dimensionValueOrXValue;
+                            });
+                        }
+                        else {
+                            if (hideTooltip) {
+                                chartInstanceListRowByRowDirection[row][i].hideTooltip();
+                            }
+                            else {
+                                chartInstanceListRowByRowDirection[row][i].setDimensionIndex(dimensionValueOrXValue, {
+                                    tooltip: isShowTooltip,
+                                    showTooltipOption: { x: absolutePosition.left + 3, y: canvasXY.y, activeType: 'dimension' }
+                                });
+                            }
+                        }
+                    }
+                }, 0);
+            }
+            table.scenegraph.updateNextFrame();
+        }
+    }
+    function clearChartInstanceListByRowDirection(row, excludedCol, table) {
+        if (isValid$3(chartInstanceListRowByRowDirection[row])) {
+            for (const i in chartInstanceListRowByRowDirection[row]) {
+                if (isValid$3(excludedCol) && Number(i) === excludedCol) {
+                    continue;
+                }
+                const cellGroup = table.scenegraph.getCell(Number(i), row);
+                const chartNode = cellGroup?.getChildren()?.[0];
+                chartNode.addUpdateShapeAndBoundsTag();
+                if (isValid$3(chartNode)) {
+                    chartNode.deactivate(table, {
+                        releaseChartInstance: true,
+                        releaseColumnChartInstance: false,
+                        releaseRowChartInstance: false
+                    });
+                    chartInstanceListRowByRowDirection[row][i] = null;
+                }
+            }
+        }
+        delete chartInstanceListRowByRowDirection[row];
+    }
+
     const CHART_NUMBER_TYPE = genNumberType();
     class Chart extends Rect$2 {
         type = 'chart';
         chartInstance;
         activeChartInstance;
-        active;
+        activeChartInstanceHoverOnMark = null;
         cacheCanvas;
         isShareChartSpec;
         constructor(isShareChartSpec, params) {
@@ -48854,7 +49191,9 @@
             }
         }
         activate(table) {
-            this.active = true;
+            if (this.activeChartInstance) {
+                return;
+            }
             const { col, row } = this.parent;
             const hoverColor = getCellHoverColor(this.parent, table);
             const { x1, y1, x2, y2 } = this.getViewBox();
@@ -48866,6 +49205,7 @@
                 y2: y2 - table.scrollTop
             });
             this.activeChartInstance?.release();
+            this.attribute.ClassType.globalConfig.uniqueTooltip = false;
             this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge$1({}, this.attribute.tableChartOption, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
@@ -48941,19 +49281,95 @@
                     Chart.temp = 1;
                 }, 0);
             });
+            if (table.options.chartDimensionLinkage) {
+                this.activeChartInstance.on('dimensionHover', (params) => {
+                    const dimensionInfo = params?.dimensionInfo[0];
+                    const canvasXY = params?.event?.canvas;
+                    const viewport = params?.event?.viewport;
+                    if (viewport) {
+                        const xValue = dimensionInfo.data[0].series.positionToDataX(viewport.x);
+                        const yValue = dimensionInfo.data[0].series.positionToDataY(viewport.y);
+                        if (this.attribute.spec.type === 'scatter') {
+                            generateChartInstanceListByColumnDirection(col, xValue, undefined, canvasXY, table, false, true);
+                            generateChartInstanceListByRowDirection(row, undefined, yValue, canvasXY, table, false, true);
+                            if (table.options.chartDimensionLinkage.labelHoverOnAxis?.left) {
+                                table.scenegraph
+                                    .getCell(table.rowHeaderLevelCount - 1, row)
+                                    .firstChild.showLabelHoverOnAxis(canvasXY.y - table.getCellRelativeRect(col, row).top, yValue);
+                            }
+                            if (table.options.chartDimensionLinkage.labelHoverOnAxis?.bottom) {
+                                table.scenegraph
+                                    .getCell(col, table.rowCount - table.bottomFrozenRowCount)
+                                    .firstChild.showLabelHoverOnAxis(canvasXY.x - table.getCellRelativeRect(col, row).left, xValue);
+                            }
+                        }
+                        else {
+                            let hideTooltip = false;
+                            const preMark = this.activeChartInstanceHoverOnMark;
+                            if (params.mark && params.datum && !Array.isArray(params.datum)) {
+                                this.activeChartInstanceHoverOnMark = params.mark;
+                                hideTooltip = true;
+                            }
+                            else {
+                                this.activeChartInstanceHoverOnMark = null;
+                            }
+                            if (params.action === 'enter' || preMark !== this.activeChartInstanceHoverOnMark) {
+                                const dimensionValue = dimensionInfo.value;
+                                const indicatorsAsCol = table.options.indicatorsAsCol;
+                                if (indicatorsAsCol) {
+                                    const series = dimensionInfo.data[0].series;
+                                    const width = series.getYAxisHelper().getBandwidth(0);
+                                    const y = series.valueToPositionY(dimensionValue);
+                                    if (table.options.chartDimensionLinkage.labelHoverOnAxis?.left) {
+                                        table.scenegraph
+                                            .getCell(table.rowHeaderLevelCount - 1, row)
+                                            .firstChild.showLabelHoverOnAxis(y + (series.type === 'line' || series.type === 'area' ? 0 : width / 2), yValue);
+                                    }
+                                    generateChartInstanceListByRowDirection(row, dimensionValue, null, canvasXY, table, hideTooltip, false);
+                                }
+                                else {
+                                    const series = dimensionInfo.data[0].series;
+                                    const width = series.getXAxisHelper().getBandwidth(0);
+                                    const x = series.valueToPositionX(dimensionValue);
+                                    if (table.options.chartDimensionLinkage.labelHoverOnAxis?.bottom) {
+                                        table.scenegraph
+                                            .getCell(col, table.rowCount - table.bottomFrozenRowCount)
+                                            .firstChild.showLabelHoverOnAxis(x + (series.type === 'line' || series.type === 'area' ? 0 : width / 2), dimensionValue);
+                                    }
+                                    generateChartInstanceListByColumnDirection(col, dimensionValue, null, canvasXY, table, hideTooltip, false);
+                                }
+                            }
+                        }
+                    }
+                });
+            }
             table._bindChartEvent?.(this.activeChartInstance);
         }
         static temp = 1;
-        deactivate() {
-            this.active = false;
-            this.activeChartInstance?.updateViewBox({
-                x1: -1000,
-                x2: -800,
-                y1: -1000,
-                y2: -800
-            }, false, false);
-            this.activeChartInstance?.release();
-            this.activeChartInstance = null;
+        deactivate(table, { releaseChartInstance = true, releaseColumnChartInstance = true, releaseRowChartInstance = true } = {}) {
+            this.activeChartInstanceHoverOnMark = null;
+            if (releaseChartInstance) {
+                this.activeChartInstance?.updateViewBox({
+                    x1: -1000,
+                    x2: -800,
+                    y1: -1000,
+                    y2: -800
+                }, false, false);
+                this.activeChartInstance?.release();
+                this.activeChartInstance = null;
+                const { col, row } = this.parent;
+                const table = this.stage.table;
+                table.internalProps.layoutMap.isAxisCell(table.rowHeaderLevelCount - 1, row) &&
+                    table.scenegraph.getCell(table.rowHeaderLevelCount - 1, row).firstChild.hideLabelHoverOnAxis?.();
+                table.internalProps.layoutMap.isAxisCell(col, table.rowCount - table.bottomFrozenRowCount) &&
+                    table.scenegraph.getCell(col, table.rowCount - table.bottomFrozenRowCount).firstChild.hideLabelHoverOnAxis?.();
+            }
+            if (releaseColumnChartInstance) {
+                clearChartInstanceListByColumnDirection(this.parent.col, this.attribute.spec.type === 'scatter' ? this.parent.row : undefined, table);
+            }
+            if (releaseRowChartInstance) {
+                clearChartInstanceListByRowDirection(this.parent.row, this.attribute.spec.type === 'scatter' ? this.parent.col : undefined, table);
+            }
         }
         updateData(data) {
             this.attribute.data = data;
@@ -49240,8 +49656,8 @@
             chart.getViewBox();
             const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
             const { table } = chart.getRootNode();
-            const { active, cacheCanvas, activeChartInstance } = chart;
-            if (!active && cacheCanvas) {
+            const { cacheCanvas, activeChartInstance } = chart;
+            if (!activeChartInstance && cacheCanvas) {
                 if (isArray$7(cacheCanvas)) {
                     cacheCanvas.forEach(singleCacheCanvas => {
                         const { x, y, width, height, canvas } = singleCacheCanvas;
@@ -55437,7 +55853,7 @@
                             const cellStyle = table._getCellStyle(cell.col, cell.row);
                             const padding = getQuadProps(getProp('padding', cellStyle, cell.col, cell.row, table));
                             const CartesianAxis = Factory.getComponent('axis');
-                            const axis = new CartesianAxis(axisConfig, cell.attribute.width, cell.attribute.height, axisConfig.__vtablePadding ?? padding, table);
+                            const axis = new CartesianAxis(axisConfig, cell.attribute.width, cell.attribute.height, axisConfig.__vtableBodyChartCellPadding ?? padding, table);
                             cell.clear();
                             cell.appendChild(axis.component);
                             axis.overlap();
@@ -56654,7 +57070,36 @@
                 return;
             }
             const cellGroup = this.getCell(col, row);
-            cellGroup?.firstChild?.deactivate?.();
+            if (cellGroup?.firstChild?.deactivate) {
+                const chartNode = cellGroup?.firstChild;
+                const chartType = chartNode.attribute.spec.type;
+                cellGroup?.firstChild?.deactivate?.(this.table, this.table.options.chartDimensionLinkage
+                    ? {
+                        releaseChartInstance: chartType === 'scatter'
+                            ? (col !== this.table.stateManager.hover.cellPos.col &&
+                                row !== this.table.stateManager.hover.cellPos.row) ||
+                                this.table.stateManager.hover.cellPos.row < this.table.frozenRowCount ||
+                                this.table.stateManager.hover.cellPos.row >
+                                    this.table.rowCount - 1 - this.table.bottomFrozenRowCount ||
+                                this.table.stateManager.hover.cellPos.col < this.table.frozenColCount ||
+                                this.table.stateManager.hover.cellPos.col > this.table.colCount - 1 - this.table.rightFrozenColCount
+                            : this.table.options.indicatorsAsCol
+                                ? row !== this.table.stateManager.hover.cellPos.row ||
+                                    this.table.stateManager.hover.cellPos.col < this.table.frozenColCount ||
+                                    this.table.stateManager.hover.cellPos.col > this.table.colCount - 1 - this.table.rightFrozenColCount
+                                : col !== this.table.stateManager.hover.cellPos.col ||
+                                    this.table.stateManager.hover.cellPos.row < this.table.frozenRowCount ||
+                                    this.table.stateManager.hover.cellPos.row >
+                                        this.table.rowCount - 1 - this.table.bottomFrozenRowCount,
+                        releaseColumnChartInstance: col !== this.table.stateManager.hover.cellPos.col ||
+                            this.table.stateManager.hover.cellPos.row < this.table.frozenRowCount ||
+                            this.table.stateManager.hover.cellPos.row > this.table.rowCount - 1 - this.table.bottomFrozenRowCount,
+                        releaseRowChartInstance: row !== this.table.stateManager.hover.cellPos.row ||
+                            this.table.stateManager.hover.cellPos.col < this.table.frozenColCount ||
+                            this.table.stateManager.hover.cellPos.col > this.table.colCount - 1 - this.table.rightFrozenColCount
+                    }
+                    : undefined);
+            }
         }
         activateChart(col, row) {
             if (col === -1 || row === -1) {
@@ -60685,9 +61130,9 @@
         }
         checkFrozen() {
             let originalFrozenColCount = this.table.options.frozenColCount ??
-                (this.table.isPivotTable() || (this.table.isListTable() && this.table.internalProps.transpose))
-                ? (this.table.rowHeaderLevelCount ?? 0) + this.table.internalProps.layoutMap.leftRowSeriesNumberColumnCount
-                : 0;
+                (this.table.isPivotTable() || (this.table.isListTable() && this.table.internalProps.transpose)
+                    ? (this.table.rowHeaderLevelCount ?? 0) + this.table.internalProps.layoutMap.leftRowSeriesNumberColumnCount
+                    : 0);
             if (originalFrozenColCount) {
                 originalFrozenColCount = Math.min(originalFrozenColCount, this.table.colCount);
                 const container = this.table.getContainer();
@@ -68187,7 +68632,7 @@
                     return;
                 }
                 const chartCellStyle = layout._table._getCellStyle(col, row + 1);
-                const padding = getQuadProps(getProp('padding', chartCellStyle, col, row + 1, layout._table));
+                const bodyChartCellPadding = getQuadProps(getProp('padding', chartCellStyle, col, row + 1, layout._table));
                 const { range, ticks, axisOption, targetTicks, targetRange, index, theme } = axisRange;
                 if (isNumber$4(axisOption?.min)) {
                     range.min = axisOption.min;
@@ -68214,7 +68659,7 @@
                     },
                     __ticksForVTable: ticks,
                     __vtableChartTheme: theme,
-                    __vtablePadding: padding
+                    __vtableBodyChartCellPadding: bodyChartCellPadding
                 });
             }
             else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
@@ -68234,7 +68679,7 @@
                     return;
                 }
                 const chartCellStyle = layout._table._getCellStyle(col, row - 1);
-                const padding = getQuadProps(getProp('padding', chartCellStyle, col, row - 1, layout._table));
+                const bodyChartCellPadding = getQuadProps(getProp('padding', chartCellStyle, col, row - 1, layout._table));
                 const { range, ticks, axisOption, index, targetTicks, targetRange, theme } = axisRange;
                 if (isNumber$4(axisOption?.max)) {
                     range.max = axisOption.max;
@@ -68279,7 +68724,7 @@
                     },
                     __ticksForVTable: ticks,
                     __vtableChartTheme: theme,
-                    __vtablePadding: padding
+                    __vtableBodyChartCellPadding: bodyChartCellPadding
                 });
             }
             else if (col === layout.rowHeaderLevelCount - 1 &&
@@ -68297,7 +68742,7 @@
                     return;
                 }
                 const chartCellStyle = layout._table._getCellStyle(col + 1, row);
-                const padding = getQuadProps(getProp('padding', chartCellStyle, col + 1, row, layout._table));
+                const bodyChartCellPadding = getQuadProps(getProp('padding', chartCellStyle, col + 1, row, layout._table));
                 const spec = layout.getRawChartSpec(col + 1, row);
                 return merge$1({
                     domain: axisOption?.type === 'linear' ? undefined : Array.from(domain),
@@ -68310,7 +68755,7 @@
                     type: axisOption?.type ?? 'band',
                     __vtableChartTheme: theme,
                     inverse: transformInverse(axisOption, (spec?.direction ?? (chartType === 'scatter' ? 'vertical' : 'horizontal')) === "horizontal"),
-                    __vtablePadding: padding
+                    __vtableBodyChartCellPadding: bodyChartCellPadding
                 });
             }
         }
@@ -68332,7 +68777,7 @@
                     return;
                 }
                 const chartCellStyle = layout._table._getCellStyle(col + 1, row);
-                const padding = getQuadProps(getProp('padding', chartCellStyle, col + 1, row, layout._table));
+                const bodyChartCellPadding = getQuadProps(getProp('padding', chartCellStyle, col + 1, row, layout._table));
                 const { range, ticks, axisOption, index, targetTicks, targetRange, theme } = axisRange;
                 if (isNumber$4(axisOption?.max)) {
                     range.max = axisOption.max;
@@ -68378,7 +68823,7 @@
                     },
                     __ticksForVTable: ticks,
                     __vtableChartTheme: theme,
-                    __vtablePadding: padding
+                    __vtableBodyChartCellPadding: bodyChartCellPadding
                 });
             }
             else if (col === layout.colCount - layout.rightFrozenColCount &&
@@ -68390,7 +68835,7 @@
                     return;
                 }
                 const chartCellStyle = layout._table._getCellStyle(col - 1, row);
-                const padding = getQuadProps(getProp('padding', chartCellStyle, col - 1, row, layout._table));
+                const bodyChartCellPadding = getQuadProps(getProp('padding', chartCellStyle, col - 1, row, layout._table));
                 const { range, ticks, axisOption, index, targetTicks, targetRange, theme } = axisRange;
                 if (isNumber$4(axisOption?.min)) {
                     range.min = axisOption.min;
@@ -68428,7 +68873,7 @@
                     },
                     __ticksForVTable: ticks,
                     __vtableChartTheme: theme,
-                    __vtablePadding: padding
+                    __vtableBodyChartCellPadding: bodyChartCellPadding
                 });
             }
             else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
@@ -68446,7 +68891,7 @@
                     return;
                 }
                 const chartCellStyle = layout._table._getCellStyle(col, row - 1);
-                const padding = getQuadProps(getProp('padding', chartCellStyle, col, row - 1, layout._table));
+                const bodyChartCellPadding = getQuadProps(getProp('padding', chartCellStyle, col, row - 1, layout._table));
                 return merge$1({
                     domain: axisOption?.type === 'linear' ? undefined : Array.from(domain),
                     range: axisOption?.type === 'linear' ? domain : undefined
@@ -68454,7 +68899,7 @@
                     orient: 'bottom',
                     type: axisOption?.type ?? 'band',
                     __vtableChartTheme: theme,
-                    __vtablePadding: padding
+                    __vtableBodyChartCellPadding: bodyChartCellPadding
                 });
             }
         }
@@ -68492,6 +68937,10 @@
                     seriesIndice = seriesIndex;
                 }
                 const { isZeroAlign, isTickAlign } = checkZeroAlign(spec, orient, layout);
+                if (!axisOption.labelHoverOnAxis) {
+                    axisOption.labelHoverOnAxis =
+                        layout._table.options.chartDimensionLinkage?.labelHoverOnAxis?.[orient] ?? {};
+                }
                 return {
                     axisOption,
                     isPercent: spec.percent,
@@ -68505,7 +68954,11 @@
         }
         const axisOption = layout._table.pivotChartAxes.find(axisOption => {
             return axisOption.orient === orient;
-        });
+        }) ?? {};
+        if (!axisOption.labelHoverOnAxis) {
+            axisOption.labelHoverOnAxis =
+                layout._table.options.chartDimensionLinkage?.labelHoverOnAxis?.[orient] ?? {};
+        }
         const { isZeroAlign, isTickAlign } = checkZeroAlign(spec, orient, layout);
         return {
             axisOption,
@@ -69403,7 +69856,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.22.4-alpha.5";
+        version = "1.22.5-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -70875,26 +71328,26 @@
             }
             return { rowStart, colStart, rowEnd, colEnd };
         }
-        getBodyVisibleRowRange() {
+        getBodyVisibleRowRange(deltaY = 0) {
             const { scrollTop } = this;
             const frozenRowsHeight = this.getFrozenRowsHeight();
             const bottomFrozenRowsHeight = this.getBottomFrozenRowsHeight();
             const { row: rowStart } = this.getRowAt(scrollTop + frozenRowsHeight + 1);
             const rowEnd = this.getAllRowsHeight() > this.tableNoFrameHeight
-                ? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight).row
+                ? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight + deltaY).row
                 : this.rowCount - 1;
             if (rowEnd < 0) {
                 return null;
             }
             return { rowStart, rowEnd };
         }
-        getBodyVisibleColRange() {
+        getBodyVisibleColRange(deltaX = 0) {
             const { scrollLeft } = this;
             const frozenColsWidth = this.getFrozenColsWidth();
             const rightFrozenColsWidth = this.getRightFrozenColsWidth();
             const { col: colStart } = this.getColAt(scrollLeft + frozenColsWidth + 1);
             const colEnd = this.getAllColsWidth() > this.tableNoFrameWidth
-                ? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth).col
+                ? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth + deltaX).col
                 : this.colCount - 1;
             if (colEnd < 0) {
                 return null;
@@ -74059,7 +74512,8 @@
                 visible: spec.background?.visible,
                 style: transformToGraphic(spec.background?.style),
                 state: transformStateStyle(spec.background?.state)
-            }
+            },
+            labelHoverOnAxis: spec.labelHoverOnAxis
         };
     }
 
@@ -75953,6 +76407,9 @@
             }
             const editor = this.table.getEditor(col, row);
             if (editor) {
+                if (this.table.internalProps.layoutMap.isSeriesNumber(col, row)) {
+                    return;
+                }
                 if (this.table.internalProps.layoutMap?.isAggregation?.(col, row)) {
                     const isPivotTable = this.table.isPivotTable?.();
                     const updateAggregationOnEditCell = isPivotTable
@@ -79780,9 +80237,9 @@
         tickData;
         scale;
         component;
-        padding;
-        constructor(option, width, height, padding, table) {
-            this.padding = padding;
+        bodyChartCellPadding;
+        constructor(option, width, height, bodyChartCellPadding, table) {
+            this.bodyChartCellPadding = bodyChartCellPadding;
             this.table = table;
             this.orient = option.orient ?? 'left';
             this.type = option.type ?? 'band';
@@ -79790,16 +80247,30 @@
             if (this.orient === 'left' || this.orient === 'right') {
                 const innerOffsetTop = 0;
                 const innerOffsetBottom = 0;
-                this.width = width;
-                this.height = height - padding[0] - padding[2] - innerOffsetBottom;
-                this.y = padding[0] + innerOffsetTop;
+                if (this.orient === 'left') {
+                    this.x = this.option.cellPaddingLeft ?? 0;
+                    this.width = width - (this.option.cellPaddingLeft ?? 0);
+                }
+                if (this.orient === 'right') {
+                    this.x = 0;
+                    this.width = width - (this.option.cellPaddingRight ?? 0);
+                }
+                this.height = height - bodyChartCellPadding[0] - bodyChartCellPadding[2] - innerOffsetBottom;
+                this.y = bodyChartCellPadding[0] + innerOffsetTop;
             }
             else if (this.orient === 'top' || this.orient === 'bottom') {
                 const innerOffsetLeft = 0;
                 const innerOffsetRight = 0;
-                this.width = width - padding[1] - padding[3] - innerOffsetRight;
-                this.height = height;
-                this.x = padding[3] + innerOffsetLeft;
+                this.width = width - bodyChartCellPadding[1] - bodyChartCellPadding[3] - innerOffsetRight;
+                this.x = bodyChartCellPadding[3] + innerOffsetLeft;
+                if (this.orient === 'top') {
+                    this.y = this.option.cellPaddingTop ?? 0;
+                    this.height = height - (this.option.cellPaddingTop ?? 0);
+                }
+                if (this.orient === 'bottom') {
+                    this.y = 0;
+                    this.height = height - (this.option.cellPaddingBottom ?? 0);
+                }
             }
             this.visible = option.visible ?? true;
             this.inverse = 'inverse' in option ? !!option.inverse : false;
@@ -79879,8 +80350,24 @@
             this.component.originAxis = this;
         }
         resize(width, height) {
-            this.width = width - (this.orient === 'top' || this.orient === 'bottom' ? this.padding[1] + this.padding[3] : 0);
-            this.height = height - (this.orient === 'left' || this.orient === 'right' ? this.padding[2] + this.padding[0] : 0);
+            if (this.orient === 'left') {
+                this.width = width - (this.option.cellPaddingLeft ?? 0);
+            }
+            else if (this.orient === 'right') {
+                this.width = width - (this.option.cellPaddingRight ?? 0);
+            }
+            else if (this.orient === 'top' || this.orient === 'bottom') {
+                this.width = width - (this.bodyChartCellPadding[1] + this.bodyChartCellPadding[3]);
+            }
+            if (this.orient === 'top') {
+                this.height = height - (this.option.cellPaddingTop ?? 0);
+            }
+            else if (this.orient === 'bottom') {
+                this.height = height - (this.option.cellPaddingBottom ?? 0);
+            }
+            else if (this.orient === 'left' || this.orient === 'right') {
+                this.height = height - (this.bodyChartCellPadding[2] + this.bodyChartCellPadding[0]);
+            }
             this.updateScaleRange();
             this.computeData();
             const axisStylrAttrs = getAxisAttributes(this.option);
@@ -80108,7 +80595,15 @@
             }
             titleWidth += attribute.title.space ?? 4;
         }
-        return Math.ceil(tickWidth + labelWidth + titleWidth + 1);
+        let paddingWidth = 0;
+        const themeAxisConfig = getTableAxisTheme(config.orient, table.theme);
+        if (config.orient === 'left') {
+            paddingWidth = themeAxisConfig?.cellPaddingLeft ?? 0;
+        }
+        else if (config.orient === 'right') {
+            paddingWidth = themeAxisConfig?.cellPaddingRight ?? 0;
+        }
+        return Math.ceil(tickWidth + labelWidth + titleWidth + paddingWidth + 1);
     }
     function computeAxisComponentHeight(config, table) {
         const attribute = merge$1({}, commonAxis, config);
@@ -80183,7 +80678,15 @@
             }
             titleHeight += attribute.title.space ?? 4;
         }
-        return tickHeight + labelHeight + titleHeight + 1;
+        let paddingHeight = 0;
+        const themeAxisConfig = getTableAxisTheme(config.orient, table.theme);
+        if (config.orient === 'top') {
+            paddingHeight = themeAxisConfig?.cellPaddingTop ?? 0;
+        }
+        else if (config.orient === 'bottom') {
+            paddingHeight = themeAxisConfig?.cellPaddingBottom ?? 0;
+        }
+        return tickHeight + labelHeight + titleHeight + paddingHeight + 1;
     }
     function formatDecimal(number) {
         if (typeof number !== 'number') {
@@ -87446,6 +87949,65 @@
             }
             return null;
         }
+        matchDimensionPath = (paths, treeNodes, needLowestLevel, checkAxisNode = false, pathIndex = 0) => {
+            if (pathIndex >= paths.length) {
+                return undefined;
+            }
+            const currentPath = paths[pathIndex];
+            for (let j = 0; j < treeNodes.length; j++) {
+                const dimension = treeNodes[j];
+                const isMatch = (!isValid$3(currentPath.indicatorKey) &&
+                    dimension.dimensionKey === currentPath.dimensionKey &&
+                    dimension.value === currentPath.value) ||
+                    (isValid$3(currentPath.indicatorKey) &&
+                        dimension.indicatorKey === currentPath.indicatorKey &&
+                        ((isValid$3(dimension.value) && isValid$3(currentPath.value) && currentPath.value === dimension.value) ||
+                            !isValid$3(dimension.value) ||
+                            !isValid$3(currentPath.value)));
+                if (isMatch) {
+                    const children = dimension.children;
+                    if (pathIndex === paths.length - 1) {
+                        if (needLowestLevel) {
+                            const hasAxisNode = checkAxisNode && children && children.some((row) => row.dimensionKey === 'axis');
+                            if (!children?.length || hasAxisNode) {
+                                return dimension;
+                            }
+                            const findLeafNode = (nodes) => {
+                                for (const node of nodes) {
+                                    const nodeChildren = node.children;
+                                    const nodeHasAxis = checkAxisNode && nodeChildren.some((row) => row.dimensionKey === 'axis');
+                                    if (!nodeChildren?.length || nodeHasAxis) {
+                                        return node;
+                                    }
+                                    const leaf = findLeafNode(nodeChildren);
+                                    if (leaf) {
+                                        return leaf;
+                                    }
+                                }
+                                return undefined;
+                            };
+                            const leafNode = findLeafNode(children);
+                            if (leafNode) {
+                                return leafNode;
+                            }
+                        }
+                        else {
+                            return dimension;
+                        }
+                    }
+                    if (children?.length) {
+                        const result = this.matchDimensionPath(paths, children, needLowestLevel, checkAxisNode, pathIndex + 1);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    else if (pathIndex === paths.length - 1) {
+                        return dimension;
+                    }
+                }
+            }
+            return undefined;
+        };
         getCellAdressByHeaderPath(dimensionPaths) {
             let colHeaderPaths;
             let rowHeaderPaths;
@@ -87537,34 +88099,10 @@
             let row;
             let defaultCol;
             let defaultRow;
-            let rowArr = this.rowTree;
             let rowDimensionFinded;
-            let colArr = this.columnTree;
             let colDimensionFinded;
             if (colHeaderPaths) {
-                for (let i = 0; i < colHeaderPaths.length; i++) {
-                    const colDimension = colHeaderPaths[i];
-                    for (let j = 0; j < colArr.length; j++) {
-                        const dimension = colArr[j];
-                        if ((!isValid$3(colDimension.indicatorKey) &&
-                            dimension.dimensionKey === colDimension.dimensionKey &&
-                            dimension.value === colDimension.value) ||
-                            (isValid$3(colDimension.indicatorKey) &&
-                                dimension.indicatorKey === colDimension.indicatorKey &&
-                                ((isValid$3(dimension.value) && isValid$3(colDimension.value) && colDimension.value === dimension.value) ||
-                                    !isValid$3(dimension.value) ||
-                                    !isValid$3(colDimension.value)))) {
-                            colArr = dimension.children;
-                            if (needLowestLevel_colPaths && !colArr?.length) {
-                                colDimensionFinded = dimension;
-                            }
-                            else if (!needLowestLevel_colPaths) {
-                                colDimensionFinded = dimension;
-                            }
-                            break;
-                        }
-                    }
-                }
+                colDimensionFinded = this.matchDimensionPath(colHeaderPaths, this.columnTree, needLowestLevel_colPaths);
             }
             if (rowHeaderPaths?.length >= 1) {
                 if (this.rowHierarchyType === 'tree') {
@@ -87593,27 +88131,7 @@
                     row = this._rowHeaderCellIds.indexOf(findedCellIdPath) + this.columnHeaderLevelCount;
                 }
                 else {
-                    for (let i = 0; i < rowHeaderPaths.length; i++) {
-                        const rowDimension = rowHeaderPaths[i];
-                        for (let j = 0; j < rowArr.length; j++) {
-                            const dimension = rowArr[j];
-                            if ((!isValid$3(rowDimension.indicatorKey) &&
-                                dimension.dimensionKey === rowDimension.dimensionKey &&
-                                dimension.value === rowDimension.value) ||
-                                (isValid$3(rowDimension.indicatorKey) &&
-                                    dimension.indicatorKey === rowDimension.indicatorKey &&
-                                    (!isValid$3(rowDimension.value) || dimension.value === rowDimension.value))) {
-                                rowArr = dimension.children;
-                                if (needLowestLevel_rowPaths && (!rowArr?.length || rowArr.some(row => row.dimensionKey === 'axis'))) {
-                                    rowDimensionFinded = dimension;
-                                }
-                                else if (!needLowestLevel_rowPaths) {
-                                    rowDimensionFinded = dimension;
-                                }
-                                break;
-                            }
-                        }
-                    }
+                    rowDimensionFinded = this.matchDimensionPath(rowHeaderPaths, this.rowTree, needLowestLevel_rowPaths, true);
                 }
             }
             if (!forceBody && needLowestLevel_colPaths && needLowestLevel_rowPaths) {
@@ -93983,7 +94501,7 @@
     }
 
     registerForVrender();
-    const version = "1.22.4-alpha.5";
+    const version = "1.22.5-alpha.0";
     function getIcons() {
         return get$2();
     }