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

package/dist/vtable-sheet.js

@@ -25201,7 +25201,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) {
@@ -25238,6 +25238,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,
@@ -27076,14 +27096,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$8(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$8(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);
       }
@@ -31756,7 +31777,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;
@@ -31818,6 +31849,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 {
@@ -31958,6 +31998,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$3(_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 {
@@ -32148,6 +32248,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;
       }
@@ -39483,12 +39617,12 @@
                   return null !== (_b = null === (_a = defaultStyle.hover) || void 0 === _a ? void 0 : _a.cellBgColor) && void 0 !== _b ? _b : void 0;
                 },
                 get inlineColumnBgColor() {
-                  var _a, _b, _c, _d, _e, _f;
-                  return null !== (_f = null !== (_b = null === (_a = defaultStyle.hover) || void 0 === _a ? void 0 : _a.inlineColumnBgColor) && void 0 !== _b ? _b : (null === (_c = defaultStyle.hover) || void 0 === _c ? void 0 : _c.cellBgColor) && "string" == typeof (null === (_d = defaultStyle.hover) || void 0 === _d ? void 0 : _d.cellBgColor) ? changeColor(null === (_e = defaultStyle.hover) || void 0 === _e ? void 0 : _e.cellBgColor, .1, !1) : void 0) && void 0 !== _f ? _f : void 0;
+                  var _a, _b, _c, _d, _e, _f, _g;
+                  return null !== (_g = null !== (_b = null === (_a = defaultStyle.hover) || void 0 === _a ? void 0 : _a.inlineColumnBgColor) && void 0 !== _b ? _b : (null === (_c = defaultStyle.hover) || void 0 === _c ? void 0 : _c.cellBgColor) && "string" == typeof (null === (_d = defaultStyle.hover) || void 0 === _d ? void 0 : _d.cellBgColor) && "transparent" !== (null === (_e = defaultStyle.hover) || void 0 === _e ? void 0 : _e.cellBgColor) ? changeColor(null === (_f = defaultStyle.hover) || void 0 === _f ? void 0 : _f.cellBgColor, .1, !1) : void 0) && void 0 !== _g ? _g : void 0;
                 },
                 get inlineRowBgColor() {
-                  var _a, _b, _c, _d, _e, _f;
-                  return null !== (_f = null !== (_b = null === (_a = defaultStyle.hover) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : (null === (_c = defaultStyle.hover) || void 0 === _c ? void 0 : _c.cellBgColor) && "string" == typeof (null === (_d = defaultStyle.hover) || void 0 === _d ? void 0 : _d.cellBgColor) ? changeColor(null === (_e = defaultStyle.hover) || void 0 === _e ? void 0 : _e.cellBgColor, .1, !1) : void 0) && void 0 !== _f ? _f : void 0;
+                  var _a, _b, _c, _d, _e, _f, _g;
+                  return null !== (_g = null !== (_b = null === (_a = defaultStyle.hover) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : (null === (_c = defaultStyle.hover) || void 0 === _c ? void 0 : _c.cellBgColor) && "string" == typeof (null === (_d = defaultStyle.hover) || void 0 === _d ? void 0 : _d.cellBgColor) && "transparent" !== (null === (_e = defaultStyle.hover) || void 0 === _e ? void 0 : _e.cellBgColor) ? changeColor(null === (_f = defaultStyle.hover) || void 0 === _f ? void 0 : _f.cellBgColor, .1, !1) : void 0) && void 0 !== _g ? _g : void 0;
                 }
               };
             },
@@ -39496,11 +39630,11 @@
               if (defaultStyle.select) return {
                 get inlineColumnBgColor() {
                   var _a, _b, _c, _d, _e, _f;
-                  return null !== (_f = null !== (_d = null !== (_b = null === (_a = defaultStyle.select) || void 0 === _a ? void 0 : _a.inlineColumnBgColor) && void 0 !== _b ? _b : null === (_c = that.selectionStyle) || void 0 === _c ? void 0 : _c.inlineColumnBgColor) && void 0 !== _d ? _d : (null === (_e = that.selectionStyle) || void 0 === _e ? void 0 : _e.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _f ? _f : void 0;
+                  return null !== (_f = null !== (_d = null !== (_b = null === (_a = defaultStyle.select) || void 0 === _a ? void 0 : _a.inlineColumnBgColor) && void 0 !== _b ? _b : null === (_c = that.selectionStyle) || void 0 === _c ? void 0 : _c.inlineColumnBgColor) && void 0 !== _d ? _d : (null === (_e = that.selectionStyle) || void 0 === _e ? void 0 : _e.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor && "transparent" !== that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _f ? _f : void 0;
                 },
                 get inlineRowBgColor() {
                   var _a, _b, _c, _d, _e;
-                  return null !== (_e = null !== (_c = null !== (_b = null === (_a = defaultStyle.select) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : that.selectionStyle.inlineRowBgColor) && void 0 !== _c ? _c : (null === (_d = that.selectionStyle) || void 0 === _d ? void 0 : _d.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _e ? _e : void 0;
+                  return null !== (_e = null !== (_c = null !== (_b = null === (_a = defaultStyle.select) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : that.selectionStyle.inlineRowBgColor) && void 0 !== _c ? _c : (null === (_d = that.selectionStyle) || void 0 === _d ? void 0 : _d.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor && "transparent" !== that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _e ? _e : void 0;
                 }
               };
             },
@@ -40124,12 +40258,12 @@
                 return null !== (_b = null === (_a = style.hover) || void 0 === _a ? void 0 : _a.cellBgColor) && void 0 !== _b ? _b : void 0;
               },
               get inlineColumnBgColor() {
-                var _a, _b, _c, _d, _e, _f;
-                return null !== (_f = null !== (_b = null === (_a = style.hover) || void 0 === _a ? void 0 : _a.inlineColumnBgColor) && void 0 !== _b ? _b : (null === (_c = style.hover) || void 0 === _c ? void 0 : _c.cellBgColor) && "string" == typeof (null === (_d = style.hover) || void 0 === _d ? void 0 : _d.cellBgColor) ? changeColor(null === (_e = style.hover) || void 0 === _e ? void 0 : _e.cellBgColor, .1, !1) : void 0) && void 0 !== _f ? _f : void 0;
+                var _a, _b, _c, _d, _e, _f, _g;
+                return null !== (_g = null !== (_b = null === (_a = style.hover) || void 0 === _a ? void 0 : _a.inlineColumnBgColor) && void 0 !== _b ? _b : (null === (_c = style.hover) || void 0 === _c ? void 0 : _c.cellBgColor) && "string" == typeof (null === (_d = style.hover) || void 0 === _d ? void 0 : _d.cellBgColor) && "transparent" !== (null === (_e = style.hover) || void 0 === _e ? void 0 : _e.cellBgColor) ? changeColor(null === (_f = style.hover) || void 0 === _f ? void 0 : _f.cellBgColor, .1, !1) : void 0) && void 0 !== _g ? _g : void 0;
               },
               get inlineRowBgColor() {
-                var _a, _b, _c, _d, _e, _f;
-                return null !== (_f = null !== (_b = null === (_a = style.hover) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : (null === (_c = style.hover) || void 0 === _c ? void 0 : _c.cellBgColor) && "string" == typeof (null === (_d = style.hover) || void 0 === _d ? void 0 : _d.cellBgColor) ? changeColor(null === (_e = style.hover) || void 0 === _e ? void 0 : _e.cellBgColor, .1, !1) : void 0) && void 0 !== _f ? _f : void 0;
+                var _a, _b, _c, _d, _e, _f, _g;
+                return null !== (_g = null !== (_b = null === (_a = style.hover) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : (null === (_c = style.hover) || void 0 === _c ? void 0 : _c.cellBgColor) && "string" == typeof (null === (_d = style.hover) || void 0 === _d ? void 0 : _d.cellBgColor) && "transparent" !== (null === (_e = style.hover) || void 0 === _e ? void 0 : _e.cellBgColor) ? changeColor(null === (_f = style.hover) || void 0 === _f ? void 0 : _f.cellBgColor, .1, !1) : void 0) && void 0 !== _g ? _g : void 0;
               }
             };
           },
@@ -40137,11 +40271,11 @@
             return {
               get inlineColumnBgColor() {
                 var _a, _b, _c, _d, _e, _f;
-                return null !== (_f = null !== (_d = null !== (_b = null === (_a = style.select) || void 0 === _a ? void 0 : _a.inlineColumnBgColor) && void 0 !== _b ? _b : null === (_c = that.selectionStyle) || void 0 === _c ? void 0 : _c.inlineColumnBgColor) && void 0 !== _d ? _d : (null === (_e = that.selectionStyle) || void 0 === _e ? void 0 : _e.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _f ? _f : void 0;
+                return null !== (_f = null !== (_d = null !== (_b = null === (_a = style.select) || void 0 === _a ? void 0 : _a.inlineColumnBgColor) && void 0 !== _b ? _b : null === (_c = that.selectionStyle) || void 0 === _c ? void 0 : _c.inlineColumnBgColor) && void 0 !== _d ? _d : (null === (_e = that.selectionStyle) || void 0 === _e ? void 0 : _e.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor && "transparent" !== that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _f ? _f : void 0;
               },
               get inlineRowBgColor() {
                 var _a, _b, _c, _d, _e;
-                return null !== (_e = null !== (_c = null !== (_b = null === (_a = style.select) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : that.selectionStyle.inlineRowBgColor) && void 0 !== _c ? _c : (null === (_d = that.selectionStyle) || void 0 === _d ? void 0 : _d.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _e ? _e : void 0;
+                return null !== (_e = null !== (_c = null !== (_b = null === (_a = style.select) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : that.selectionStyle.inlineRowBgColor) && void 0 !== _c ? _c : (null === (_d = that.selectionStyle) || void 0 === _d ? void 0 : _d.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor && "transparent" !== that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _e ? _e : void 0;
               },
               get cellBgColor() {
                 var _a, _b, _c;
@@ -44827,7 +44961,7 @@
         cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync);
         const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
         if (axisConfig) {
-          const axis = new (Factory.getComponent("axis"))(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, null !== (_a = axisConfig.__vtablePadding) && void 0 !== _a ? _a : padding, table);
+          const axis = new (Factory.getComponent("axis"))(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, null !== (_a = axisConfig.__vtableBodyChartCellPadding) && void 0 !== _a ? _a : padding, table);
           cellGroup.clear(), cellGroup.appendChild(axis.component), axis.overlap();
         } else table.internalProps.layoutMap.isEmpty(col, row) ? (cellGroup.setAttributes({
           fill: !1,
@@ -46058,7 +46192,7 @@
           cellStyle = scene.table._getCellStyle(col, row),
           padding = getQuadProps(getProp("padding", cellStyle, col, row, scene.table));
         if (axisConfig) {
-          const axis = new (Factory.getComponent("axis"))(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, null !== (_e = axisConfig.__vtablePadding) && void 0 !== _e ? _e : padding, scene.table);
+          const axis = new (Factory.getComponent("axis"))(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, null !== (_e = axisConfig.__vtableBodyChartCellPadding) && void 0 !== _e ? _e : padding, scene.table);
           cellGroup.clear(), cellGroup.appendChild(axis.component), axis.overlap();
         }
       } else if ("axis" === (null === (_f = cell.firstChild) || void 0 === _f ? void 0 : _f.name)) null === (_g = cell.firstChild) || void 0 === _g || _g.originAxis.resize(cell.attribute.width, cell.attribute.height);else {
@@ -47349,10 +47483,125 @@
       return hoverMode;
     }
 
+    const chartInstanceListColumnByColumnDirection = {};
+    const chartInstanceListRowByRowDirection = {};
+    function generateChartInstanceListByColumnDirection(col, dimensionValueOrXValue, positionValueOrYValue, canvasXY, table, hideTooltip = !1, isScatter = !1) {
+      var _a;
+      isValid$4(chartInstanceListColumnByColumnDirection[col]) || (chartInstanceListColumnByColumnDirection[col] = {});
+      const {
+        rowStart: 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),
+          chartNode = null === (_a = null == cellGroup ? void 0 : cellGroup.getChildren()) || void 0 === _a ? void 0 : _a[0];
+        chartNode.addUpdateShapeAndBoundsTag(), chartInstanceListColumnByColumnDirection[col][i] || isValid$4(chartNode) && (chartNode.activeChartInstance || chartNode.activate(table), chartInstanceListColumnByColumnDirection[col][i] = chartNode.activeChartInstance), table.stateManager.hover.cellPos.col === col && table.stateManager.hover.cellPos.row === i || setTimeout(() => {
+          var _a, _b, _c, _d;
+          if (null === (_a = chartInstanceListColumnByColumnDirection[col]) || void 0 === _a ? void 0 : _a[i]) {
+            const absolutePosition = table.getCellRelativeRect(col, i),
+              chartDimensionLinkage = table.options.chartDimensionLinkage;
+            let isShowTooltip = !isScatter;
+            if (!isScatter && "object" == typeof chartDimensionLinkage && (isShowTooltip = null === (_b = chartDimensionLinkage.showTooltip) || void 0 === _b || _b, i === rowEnd && isShowTooltip)) {
+              const heightLimitToShowTooltipForLastRow = chartDimensionLinkage.heightLimitToShowTooltipForLastRow,
+                {
+                  rowEnd: rowEnd1
+                } = table.getBodyVisibleRowRange(-heightLimitToShowTooltipForLastRow);
+              if (rowEnd1 === rowEnd) isShowTooltip = !0;else {
+                const {
+                  rowEnd: rowEnd2
+                } = table.getBodyVisibleRowRange(5);
+                isShowTooltip = rowEnd2 !== rowEnd;
+              }
+            }
+            isScatter ? null === (_d = (_c = chartInstanceListColumnByColumnDirection[col][i]).showCrosshair) || void 0 === _d || _d.call(_c, axis => "left" === axis.layoutOrient ? positionValueOrYValue : dimensionValueOrXValue) : hideTooltip ? chartInstanceListColumnByColumnDirection[col][i].hideTooltip() : 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) {
+      var _a;
+      if (isValid$4(chartInstanceListColumnByColumnDirection[col])) {
+        for (const i in chartInstanceListColumnByColumnDirection[col]) {
+          if (isValid$4(excludedRow) && Number(i) === excludedRow) continue;
+          const cellGroup = table.scenegraph.getCell(col, Number(i)),
+            chartNode = null === (_a = null == cellGroup ? void 0 : cellGroup.getChildren()) || void 0 === _a ? void 0 : _a[0];
+          chartNode.addUpdateShapeAndBoundsTag(), isValid$4(chartNode) && (chartNode.deactivate(table, {
+            releaseChartInstance: !0,
+            releaseColumnChartInstance: !1,
+            releaseRowChartInstance: !1
+          }), chartInstanceListColumnByColumnDirection[col][i] = null);
+        }
+        delete chartInstanceListColumnByColumnDirection[col];
+      }
+    }
+    function generateChartInstanceListByRowDirection(row, dimensionValueOrXValue, positionValueOrYValue, canvasXY, table, hideTooltip = !1, isScatter = !1) {
+      var _a;
+      isValid$4(chartInstanceListRowByRowDirection[row]) || (chartInstanceListRowByRowDirection[row] = {});
+      const {
+        colStart: 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),
+          chartNode = null === (_a = null == cellGroup ? void 0 : cellGroup.getChildren()) || void 0 === _a ? void 0 : _a[0];
+        chartNode.addUpdateShapeAndBoundsTag(), chartInstanceListRowByRowDirection[row][i] || isValid$4(chartNode) && (chartNode.activeChartInstance || chartNode.activate(table), chartInstanceListRowByRowDirection[row][i] = chartNode.activeChartInstance), table.stateManager.hover.cellPos.col === i && table.stateManager.hover.cellPos.row === row || setTimeout(() => {
+          var _a, _b, _c, _d;
+          if (null === (_a = chartInstanceListRowByRowDirection[row]) || void 0 === _a ? void 0 : _a[i]) {
+            const absolutePosition = table.getCellRelativeRect(i, row),
+              chartDimensionLinkage = table.options.chartDimensionLinkage;
+            let isShowTooltip = !isScatter;
+            if (!isScatter && "object" == typeof chartDimensionLinkage && (isShowTooltip = null === (_b = chartDimensionLinkage.showTooltip) || void 0 === _b || _b, i === colEnd && isShowTooltip)) {
+              const widthLimitToShowTooltipForLastColumn = chartDimensionLinkage.widthLimitToShowTooltipForLastColumn,
+                {
+                  colEnd: colEnd1
+                } = table.getBodyVisibleColRange(-widthLimitToShowTooltipForLastColumn);
+              if (colEnd1 === colEnd) isShowTooltip = !0;else {
+                const {
+                  colEnd: colEnd2
+                } = table.getBodyVisibleColRange(5);
+                isShowTooltip = colEnd2 !== colEnd;
+              }
+            }
+            isScatter ? null === (_d = (_c = chartInstanceListRowByRowDirection[row][i]).showCrosshair) || void 0 === _d || _d.call(_c, axis => "left" === axis.layoutOrient ? positionValueOrYValue : dimensionValueOrXValue) : hideTooltip ? chartInstanceListRowByRowDirection[row][i].hideTooltip() : 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) {
+      var _a;
+      if (isValid$4(chartInstanceListRowByRowDirection[row])) for (const i in chartInstanceListRowByRowDirection[row]) {
+        if (isValid$4(excludedCol) && Number(i) === excludedCol) continue;
+        const cellGroup = table.scenegraph.getCell(Number(i), row),
+          chartNode = null === (_a = null == cellGroup ? void 0 : cellGroup.getChildren()) || void 0 === _a ? void 0 : _a[0];
+        chartNode.addUpdateShapeAndBoundsTag(), isValid$4(chartNode) && (chartNode.deactivate(table, {
+          releaseChartInstance: !0,
+          releaseColumnChartInstance: !1,
+          releaseRowChartInstance: !1
+        }), chartInstanceListRowByRowDirection[row][i] = null);
+      }
+      delete chartInstanceListRowByRowDirection[row];
+    }
+
     const CHART_NUMBER_TYPE = genNumberType();
     class Chart extends Rect$2 {
       constructor(isShareChartSpec, params) {
-        if (super(params), this.type = "chart", this.numberType = CHART_NUMBER_TYPE, this.isShareChartSpec = isShareChartSpec, params.chartInstance) this.chartInstance = params.chartInstance;else {
+        if (super(params), this.type = "chart", this.activeChartInstanceHoverOnMark = null, this.numberType = CHART_NUMBER_TYPE, this.isShareChartSpec = isShareChartSpec, params.chartInstance) this.chartInstance = params.chartInstance;else {
           const chartInstance = this.chartInstance = new params.ClassType(params.spec, merge$1({}, this.attribute.tableChartOption, {
             renderCanvas: params.canvas,
             mode: "node" === this.attribute.mode ? "node" : "desktop-browser",
@@ -47374,7 +47623,7 @@
       }
       activate(table) {
         var _a, _b, _c, _d, _e;
-        this.active = !0;
+        if (this.activeChartInstance) return;
         const {
             col: col,
             row: row
@@ -47392,7 +47641,7 @@
             y1: y1 - table.scrollTop,
             y2: y2 - table.scrollTop
           });
-        null === (_a = this.activeChartInstance) || void 0 === _a || _a.release(), this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge$1({}, this.attribute.tableChartOption, {
+        null === (_a = this.activeChartInstance) || void 0 === _a || _a.release(), this.attribute.ClassType.globalConfig.uniqueTooltip = !1, this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge$1({}, this.attribute.tableChartOption, {
           renderCanvas: this.attribute.canvas,
           mode: "desktop-browser",
           canvasControled: !1,
@@ -47438,16 +47687,56 @@
           table.scenegraph.updateChartState(null === (_a = null == params ? void 0 : params.value) || void 0 === _a ? void 0 : _a.inBrushData), Chart.temp = 0, setTimeout(() => {
             Chart.temp = 1;
           }, 0);
+        }), table.options.chartDimensionLinkage && this.activeChartInstance.on("dimensionHover", params => {
+          var _a, _b, _c, _d, _e, _f;
+          const dimensionInfo = null == params ? void 0 : params.dimensionInfo[0],
+            canvasXY = null === (_a = null == params ? void 0 : params.event) || void 0 === _a ? void 0 : _a.canvas,
+            viewport = null === (_b = null == params ? void 0 : params.event) || void 0 === _b ? void 0 : _b.viewport;
+          if (viewport) {
+            const xValue = dimensionInfo.data[0].series.positionToDataX(viewport.x),
+              yValue = dimensionInfo.data[0].series.positionToDataY(viewport.y);
+            if ("scatter" === this.attribute.spec.type) generateChartInstanceListByColumnDirection(col, xValue, void 0, canvasXY, table, !1, !0), generateChartInstanceListByRowDirection(row, void 0, yValue, canvasXY, table, !1, !0), (null === (_c = table.options.chartDimensionLinkage.labelHoverOnAxis) || void 0 === _c ? void 0 : _c.left) && table.scenegraph.getCell(table.rowHeaderLevelCount - 1, row).firstChild.showLabelHoverOnAxis(canvasXY.y - table.getCellRelativeRect(col, row).top, yValue), (null === (_d = table.options.chartDimensionLinkage.labelHoverOnAxis) || void 0 === _d ? void 0 : _d.bottom) && table.scenegraph.getCell(col, table.rowCount - table.bottomFrozenRowCount).firstChild.showLabelHoverOnAxis(canvasXY.x - table.getCellRelativeRect(col, row).left, xValue);else {
+              let hideTooltip = !1;
+              const preMark = this.activeChartInstanceHoverOnMark;
+              if (params.mark && params.datum && !Array.isArray(params.datum) ? (this.activeChartInstanceHoverOnMark = params.mark, hideTooltip = !0) : this.activeChartInstanceHoverOnMark = null, "enter" === params.action || preMark !== this.activeChartInstanceHoverOnMark) {
+                const dimensionValue = dimensionInfo.value;
+                if (table.options.indicatorsAsCol) {
+                  const series = dimensionInfo.data[0].series,
+                    width = series.getYAxisHelper().getBandwidth(0),
+                    y = series.valueToPositionY(dimensionValue);
+                  (null === (_e = table.options.chartDimensionLinkage.labelHoverOnAxis) || void 0 === _e ? void 0 : _e.left) && table.scenegraph.getCell(table.rowHeaderLevelCount - 1, row).firstChild.showLabelHoverOnAxis(y + ("line" === series.type || "area" === series.type ? 0 : width / 2), yValue), generateChartInstanceListByRowDirection(row, dimensionValue, null, canvasXY, table, hideTooltip, !1);
+                } else {
+                  const series = dimensionInfo.data[0].series,
+                    width = series.getXAxisHelper().getBandwidth(0),
+                    x = series.valueToPositionX(dimensionValue);
+                  (null === (_f = table.options.chartDimensionLinkage.labelHoverOnAxis) || void 0 === _f ? void 0 : _f.bottom) && table.scenegraph.getCell(col, table.rowCount - table.bottomFrozenRowCount).firstChild.showLabelHoverOnAxis(x + ("line" === series.type || "area" === series.type ? 0 : width / 2), dimensionValue), generateChartInstanceListByColumnDirection(col, dimensionValue, null, canvasXY, table, hideTooltip, !1);
+                }
+              }
+            }
+          }
         }), null === (_e = (_d = table)._bindChartEvent) || void 0 === _e || _e.call(_d, this.activeChartInstance);
       }
-      deactivate() {
-        var _a, _b;
-        this.active = !1, null === (_a = this.activeChartInstance) || void 0 === _a || _a.updateViewBox({
-          x1: -1e3,
-          x2: -800,
-          y1: -1e3,
-          y2: -800
-        }, !1, !1), null === (_b = this.activeChartInstance) || void 0 === _b || _b.release(), this.activeChartInstance = null;
+      deactivate(table, {
+        releaseChartInstance = !0,
+        releaseColumnChartInstance = !0,
+        releaseRowChartInstance = !0
+      } = {}) {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.activeChartInstanceHoverOnMark = null, releaseChartInstance) {
+          null === (_a = this.activeChartInstance) || void 0 === _a || _a.updateViewBox({
+            x1: -1e3,
+            x2: -800,
+            y1: -1e3,
+            y2: -800
+          }, !1, !1), null === (_b = this.activeChartInstance) || void 0 === _b || _b.release(), this.activeChartInstance = null;
+          const {
+              col: col,
+              row: row
+            } = this.parent,
+            table = this.stage.table;
+          table.internalProps.layoutMap.isAxisCell(table.rowHeaderLevelCount - 1, row) && (null === (_d = (_c = table.scenegraph.getCell(table.rowHeaderLevelCount - 1, row).firstChild).hideLabelHoverOnAxis) || void 0 === _d || _d.call(_c)), table.internalProps.layoutMap.isAxisCell(col, table.rowCount - table.bottomFrozenRowCount) && (null === (_f = (_e = table.scenegraph.getCell(col, table.rowCount - table.bottomFrozenRowCount).firstChild).hideLabelHoverOnAxis) || void 0 === _f || _f.call(_e));
+        }
+        releaseColumnChartInstance && clearChartInstanceListByColumnDirection(this.parent.col, "scatter" === this.attribute.spec.type ? this.parent.row : void 0, table), releaseRowChartInstance && clearChartInstanceListByRowDirection(this.parent.row, "scatter" === this.attribute.spec.type ? this.parent.col : void 0, table);
       }
       updateData(data) {
         this.attribute.data = data;
@@ -47688,11 +47977,10 @@
             table: table
           } = chart.getRootNode(),
           {
-            active: active,
             cacheCanvas: cacheCanvas,
             activeChartInstance: activeChartInstance
           } = chart;
-        if (!active && cacheCanvas) isArray$a(cacheCanvas) ? cacheCanvas.forEach(singleCacheCanvas => {
+        if (!activeChartInstance && cacheCanvas) isArray$a(cacheCanvas) ? cacheCanvas.forEach(singleCacheCanvas => {
           const {
             x: x,
             y: y,
@@ -51982,10 +52270,17 @@
         resetResidentHoverIcon(col, row, this);
       }
       deactivateChart(col, row) {
-        var _a, _b;
+        var _a, _b, _c;
         if (-1 === col || -1 === row) return;
         const cellGroup = this.getCell(col, row);
-        null === (_b = null === (_a = null == cellGroup ? void 0 : cellGroup.firstChild) || void 0 === _a ? void 0 : _a.deactivate) || void 0 === _b || _b.call(_a);
+        if (null === (_a = null == cellGroup ? void 0 : cellGroup.firstChild) || void 0 === _a ? void 0 : _a.deactivate) {
+          const chartType = (null == cellGroup ? void 0 : cellGroup.firstChild).attribute.spec.type;
+          null === (_c = null === (_b = null == cellGroup ? void 0 : cellGroup.firstChild) || void 0 === _b ? void 0 : _b.deactivate) || void 0 === _c || _c.call(_b, this.table, this.table.options.chartDimensionLinkage ? {
+            releaseChartInstance: "scatter" === chartType ? 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
+          } : void 0);
+        }
       }
       activateChart(col, row) {
         var _a, _b, _c;
@@ -58577,7 +58872,7 @@
           const axisRange = getRange("top", col, row + 1, col, layout.columnHeaderLevelCount - 1, col, row, 1, layout);
           if (!axisRange) return;
           const chartCellStyle = layout._table._getCellStyle(col, row + 1),
-            padding = getQuadProps(getProp("padding", chartCellStyle, col, row + 1, layout._table)),
+            bodyChartCellPadding = getQuadProps(getProp("padding", chartCellStyle, col, row + 1, layout._table)),
             {
               range: range,
               ticks: ticks,
@@ -58600,7 +58895,7 @@
             },
             __ticksForVTable: ticks,
             __vtableChartTheme: theme,
-            __vtablePadding: padding
+            __vtableBodyChartCellPadding: bodyChartCellPadding
           });
         }
         if (row === layout.rowCount - layout.bottomFrozenRowCount && col >= layout.rowHeaderLevelCount && col < layout.colCount - layout.rightFrozenColCount) {
@@ -58616,7 +58911,7 @@
             } = getAxisOption(col, row - 1, "bottom", layout);
           if (!axisRange) return;
           const chartCellStyle = layout._table._getCellStyle(col, row - 1),
-            padding = getQuadProps(getProp("padding", chartCellStyle, col, row - 1, layout._table)),
+            bodyChartCellPadding = getQuadProps(getProp("padding", chartCellStyle, col, row - 1, layout._table)),
             {
               range: range,
               ticks: ticks,
@@ -58652,7 +58947,7 @@
             },
             __ticksForVTable: ticks,
             __vtableChartTheme: theme,
-            __vtablePadding: padding
+            __vtableBodyChartCellPadding: bodyChartCellPadding
           });
         }
         if (col === layout.rowHeaderLevelCount - 1 && row >= layout.columnHeaderLevelCount && row < layout.rowCount - layout.bottomFrozenRowCount) {
@@ -58668,7 +58963,7 @@
             } = getAxisOption(col + 1, row, "left", layout);
           if (!1 === (null == axisOption ? void 0 : axisOption.visible)) return;
           const chartCellStyle = layout._table._getCellStyle(col + 1, row),
-            padding = getQuadProps(getProp("padding", chartCellStyle, col + 1, row, layout._table)),
+            bodyChartCellPadding = getQuadProps(getProp("padding", chartCellStyle, col + 1, row, layout._table)),
             spec = layout.getRawChartSpec(col + 1, row);
           return merge$1({
             domain: "linear" === (null == axisOption ? void 0 : axisOption.type) ? void 0 : Array.from(domain),
@@ -58681,7 +58976,7 @@
             type: null !== (_e = null == axisOption ? void 0 : axisOption.type) && void 0 !== _e ? _e : "band",
             __vtableChartTheme: theme,
             inverse: transformInverse(axisOption, "horizontal" === (null !== (_f = null == spec ? void 0 : spec.direction) && void 0 !== _f ? _f : "scatter" === chartType ? "vertical" : "horizontal")),
-            __vtablePadding: padding
+            __vtableBodyChartCellPadding: bodyChartCellPadding
           });
         }
       } else {
@@ -58698,7 +58993,7 @@
             } = getAxisOption(col + 1, row, "left", layout);
           if (!axisRange) return;
           const chartCellStyle = layout._table._getCellStyle(col + 1, row),
-            padding = getQuadProps(getProp("padding", chartCellStyle, col + 1, row, layout._table)),
+            bodyChartCellPadding = getQuadProps(getProp("padding", chartCellStyle, col + 1, row, layout._table)),
             {
               range: range,
               ticks: ticks,
@@ -58735,7 +59030,7 @@
             },
             __ticksForVTable: ticks,
             __vtableChartTheme: theme,
-            __vtablePadding: padding
+            __vtableBodyChartCellPadding: bodyChartCellPadding
           });
         }
         if (col === layout.colCount - layout.rightFrozenColCount && row >= layout.columnHeaderLevelCount && row < layout.rowCount - layout.bottomFrozenRowCount) {
@@ -58745,7 +59040,7 @@
             } = getAxisOption(col - 1, row, "right", layout);
           if (!axisRange) return;
           const chartCellStyle = layout._table._getCellStyle(col - 1, row),
-            padding = getQuadProps(getProp("padding", chartCellStyle, col - 1, row, layout._table)),
+            bodyChartCellPadding = getQuadProps(getProp("padding", chartCellStyle, col - 1, row, layout._table)),
             {
               range: range,
               ticks: ticks,
@@ -58780,7 +59075,7 @@
             },
             __ticksForVTable: ticks,
             __vtableChartTheme: theme,
-            __vtablePadding: padding
+            __vtableBodyChartCellPadding: bodyChartCellPadding
           });
         }
         if (row === layout.rowCount - layout.bottomFrozenRowCount && col >= layout.rowHeaderLevelCount && col < layout.colCount - layout.rightFrozenColCount) {
@@ -58797,7 +59092,7 @@
             } = getAxisOption(col, row - 1, "bottom", layout);
           if (!1 === (null == axisOption ? void 0 : axisOption.visible)) return;
           const chartCellStyle = layout._table._getCellStyle(col, row - 1),
-            padding = getQuadProps(getProp("padding", chartCellStyle, col, row - 1, layout._table));
+            bodyChartCellPadding = getQuadProps(getProp("padding", chartCellStyle, col, row - 1, layout._table));
           return merge$1({
             domain: "linear" === (null == axisOption ? void 0 : axisOption.type) ? void 0 : Array.from(domain),
             range: "linear" === (null == axisOption ? void 0 : axisOption.type) ? domain : void 0
@@ -58805,13 +59100,13 @@
             orient: "bottom",
             type: null !== (_o = null == axisOption ? void 0 : axisOption.type) && void 0 !== _o ? _o : "band",
             __vtableChartTheme: theme,
-            __vtablePadding: padding
+            __vtableBodyChartCellPadding: bodyChartCellPadding
           });
         }
       }
     }
     function getAxisOption(col, row, orient, layout) {
-      var _a, _b;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
       const spec = layout.getRawChartSpec(col, row),
         axes = null !== (_a = spec.axes) && void 0 !== _a ? _a : [];
       if (layout._table.pivotChartAxes.forEach(axis => {
@@ -58832,22 +59127,23 @@
             isZeroAlign: isZeroAlign,
             isTickAlign: isTickAlign
           } = checkZeroAlign(spec, orient, layout);
-          return {
+          return axisOption.labelHoverOnAxis || (axisOption.labelHoverOnAxis = null !== (_d = null === (_c = null === (_b = layout._table.options.chartDimensionLinkage) || void 0 === _b ? void 0 : _b.labelHoverOnAxis) || void 0 === _c ? void 0 : _c[orient]) && void 0 !== _d ? _d : {}), {
             axisOption: axisOption,
             isPercent: spec.percent,
             isZeroAlign: isZeroAlign,
             isTickAlign: isTickAlign,
             seriesIndice: seriesIndice,
             theme: spec.theme,
-            chartType: null !== (_b = null == seriesSpec ? void 0 : seriesSpec.type) && void 0 !== _b ? _b : spec.type
+            chartType: null !== (_e = null == seriesSpec ? void 0 : seriesSpec.type) && void 0 !== _e ? _e : spec.type
           };
         }
       }
-      const axisOption = layout._table.pivotChartAxes.find(axisOption => axisOption.orient === orient),
-        {
-          isZeroAlign: isZeroAlign,
-          isTickAlign: isTickAlign
-        } = checkZeroAlign(spec, orient, layout);
+      const axisOption = null !== (_f = layout._table.pivotChartAxes.find(axisOption => axisOption.orient === orient)) && void 0 !== _f ? _f : {};
+      axisOption.labelHoverOnAxis || (axisOption.labelHoverOnAxis = null !== (_j = null === (_h = null === (_g = layout._table.options.chartDimensionLinkage) || void 0 === _g ? void 0 : _g.labelHoverOnAxis) || void 0 === _h ? void 0 : _h[orient]) && void 0 !== _j ? _j : {});
+      const {
+        isZeroAlign: isZeroAlign,
+        isTickAlign: isTickAlign
+      } = checkZeroAlign(spec, orient, layout);
       return {
         axisOption: axisOption,
         isPercent: !1,
@@ -59310,7 +59606,7 @@
       }
       constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.22.4", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env$1.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.22.5-alpha.0", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env$1.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         this.pluginManager = new PluginManager(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
           options: options,
           container: container
@@ -60151,7 +60447,7 @@
           colEnd: colEnd
         };
       }
-      getBodyVisibleRowRange() {
+      getBodyVisibleRowRange(deltaY = 0) {
         const {
             scrollTop: scrollTop
           } = this,
@@ -60160,13 +60456,13 @@
           {
             row: rowStart
           } = this.getRowAt(scrollTop + frozenRowsHeight + 1),
-          rowEnd = this.getAllRowsHeight() > this.tableNoFrameHeight ? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight).row : this.rowCount - 1;
+          rowEnd = this.getAllRowsHeight() > this.tableNoFrameHeight ? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight + deltaY).row : this.rowCount - 1;
         return rowEnd < 0 ? null : {
           rowStart: rowStart,
           rowEnd: rowEnd
         };
       }
-      getBodyVisibleColRange() {
+      getBodyVisibleColRange(deltaX = 0) {
         const {
             scrollLeft: scrollLeft
           } = this,
@@ -60175,7 +60471,7 @@
           {
             col: colStart
           } = this.getColAt(scrollLeft + frozenColsWidth + 1),
-          colEnd = this.getAllColsWidth() > this.tableNoFrameWidth ? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth).col : this.colCount - 1;
+          colEnd = this.getAllColsWidth() > this.tableNoFrameWidth ? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth + deltaX).col : this.colCount - 1;
         return colEnd < 0 ? null : {
           colStart: colStart,
           colEnd: colEnd
@@ -62720,7 +63016,8 @@
           visible: null === (_l = spec.background) || void 0 === _l ? void 0 : _l.visible,
           style: transformToGraphic(null === (_m = spec.background) || void 0 === _m ? void 0 : _m.style),
           state: transformStateStyle(null === (_o = spec.background) || void 0 === _o ? void 0 : _o.state)
-        }
+        },
+        labelHoverOnAxis: spec.labelHoverOnAxis
       };
     }
 
@@ -66461,18 +66758,18 @@
 
     const scaleParser = scale => scale;
     class CartesianAxis {
-      constructor(option, width, height, padding, table) {
-        var _a, _b, _c;
-        if (this.x = 0, this.y = 0, this.padding = padding, this.table = table, this.orient = null !== (_a = option.orient) && void 0 !== _a ? _a : "left", this.type = null !== (_b = option.type) && void 0 !== _b ? _b : "band", this.option = merge$1({}, getCommonAxis(option.__vtableChartTheme), getTableAxisTheme(this.orient, table.theme), getChartSpecAxisTheme(this.orient, this.type, option.__vtableChartTheme), option), "left" === this.orient || "right" === this.orient) {
+      constructor(option, width, height, bodyChartCellPadding, table) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (this.x = 0, this.y = 0, this.bodyChartCellPadding = bodyChartCellPadding, this.table = table, this.orient = null !== (_a = option.orient) && void 0 !== _a ? _a : "left", this.type = null !== (_b = option.type) && void 0 !== _b ? _b : "band", this.option = merge$1({}, getCommonAxis(option.__vtableChartTheme), getTableAxisTheme(this.orient, table.theme), getChartSpecAxisTheme(this.orient, this.type, option.__vtableChartTheme), option), "left" === this.orient || "right" === this.orient) {
           const innerOffsetTop = 0,
             innerOffsetBottom = 0;
-          this.width = width, this.height = height - padding[0] - padding[2] - innerOffsetBottom, this.y = padding[0] + innerOffsetTop;
+          "left" === this.orient && (this.x = null !== (_c = this.option.cellPaddingLeft) && void 0 !== _c ? _c : 0, this.width = width - (null !== (_d = this.option.cellPaddingLeft) && void 0 !== _d ? _d : 0)), "right" === this.orient && (this.x = 0, this.width = width - (null !== (_e = this.option.cellPaddingRight) && void 0 !== _e ? _e : 0)), this.height = height - bodyChartCellPadding[0] - bodyChartCellPadding[2] - innerOffsetBottom, this.y = bodyChartCellPadding[0] + innerOffsetTop;
         } else if ("top" === this.orient || "bottom" === this.orient) {
           const innerOffsetLeft = 0,
             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, "top" === this.orient && (this.y = null !== (_f = this.option.cellPaddingTop) && void 0 !== _f ? _f : 0, this.height = height - (null !== (_g = this.option.cellPaddingTop) && void 0 !== _g ? _g : 0)), "bottom" === this.orient && (this.y = 0, this.height = height - (null !== (_h = this.option.cellPaddingBottom) && void 0 !== _h ? _h : 0));
         }
-        this.visible = null === (_c = option.visible) || void 0 === _c || _c, this.inverse = "inverse" in option && !!option.inverse, "band" === option.type && (this.data = option.domain), this.initScale(), this.initData(), this.createComponent(), this.initEvent();
+        this.visible = null === (_j = option.visible) || void 0 === _j || _j, this.inverse = "inverse" in option && !!option.inverse, "band" === option.type && (this.data = option.domain), this.initScale(), this.initData(), this.createComponent(), this.initEvent();
       }
       initScale() {
         const option = this.option;
@@ -66519,7 +66816,8 @@
         })), this.component.originAxis = this;
       }
       resize(width, height) {
-        this.width = width - ("top" === this.orient || "bottom" === this.orient ? this.padding[1] + this.padding[3] : 0), this.height = height - ("left" === this.orient || "right" === this.orient ? this.padding[2] + this.padding[0] : 0), this.updateScaleRange(), this.computeData();
+        var _a, _b, _c, _d;
+        "left" === this.orient ? this.width = width - (null !== (_a = this.option.cellPaddingLeft) && void 0 !== _a ? _a : 0) : "right" === this.orient ? this.width = width - (null !== (_b = this.option.cellPaddingRight) && void 0 !== _b ? _b : 0) : "top" !== this.orient && "bottom" !== this.orient || (this.width = width - (this.bodyChartCellPadding[1] + this.bodyChartCellPadding[3])), "top" === this.orient ? this.height = height - (null !== (_c = this.option.cellPaddingTop) && void 0 !== _c ? _c : 0) : "bottom" === this.orient ? this.height = height - (null !== (_d = this.option.cellPaddingBottom) && void 0 !== _d ? _d : 0) : "left" !== this.orient && "right" !== this.orient || (this.height = height - (this.bodyChartCellPadding[2] + this.bodyChartCellPadding[0])), this.updateScaleRange(), this.computeData();
         const axisStylrAttrs = getAxisAttributes(this.option),
           attrs = this.getUpdateAttribute();
         attrs.verticalFactor = "top" === this.orient || "right" === this.orient ? -1 : 1, this.component.setAttributes(merge$1({}, axisStylrAttrs, attrs)), this.component.setAttributes(this.setLayoutStartPosition({
@@ -66639,7 +66937,7 @@
     }
 
     function computeAxisComponentWidth(config, table) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
       const attribute = merge$1({}, commonAxis, config);
       let tickWidth = 0;
       !1 !== attribute.tick.visible && (tickWidth = null !== (_a = attribute.tick.width) && void 0 !== _a ? _a : 4);
@@ -66701,10 +66999,12 @@
           size = getSizeAfterResize(Math.min(width, widthLimit), height, null === (_s = null === (_r = attribute.title) || void 0 === _r ? void 0 : _r.style) || void 0 === _s ? void 0 : _s.angle);
         titleWidth = "left" !== config.orient && "right" !== config.orient || !attribute.title.autoRotate ? size.width : size.height, titleWidth += null !== (_t = attribute.title.space) && void 0 !== _t ? _t : 4;
       }
-      return Math.ceil(tickWidth + labelWidth + titleWidth + 1);
+      let paddingWidth = 0;
+      const themeAxisConfig = getTableAxisTheme(config.orient, table.theme);
+      return "left" === config.orient ? paddingWidth = null !== (_u = null == themeAxisConfig ? void 0 : themeAxisConfig.cellPaddingLeft) && void 0 !== _u ? _u : 0 : "right" === config.orient && (paddingWidth = null !== (_v = null == themeAxisConfig ? void 0 : themeAxisConfig.cellPaddingRight) && void 0 !== _v ? _v : 0), Math.ceil(tickWidth + labelWidth + titleWidth + paddingWidth + 1);
     }
     function computeAxisComponentHeight(config, table) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
       const attribute = merge$1({}, commonAxis, config);
       let tickHeight = 0;
       !1 !== attribute.tick.visible && (tickHeight = null !== (_a = attribute.tick.width) && void 0 !== _a ? _a : 4);
@@ -66766,7 +67066,9 @@
           size = getSizeAfterResize(Math.min(width, widthLimit), height, null === (_s = null === (_r = attribute.title) || void 0 === _r ? void 0 : _r.style) || void 0 === _s ? void 0 : _s.angle);
         titleHeight = "bottom" !== config.orient && "top" !== config.orient || !attribute.title.autoRotate ? size.height : size.width, titleHeight += null !== (_t = attribute.title.space) && void 0 !== _t ? _t : 4;
       }
-      return tickHeight + labelHeight + titleHeight + 1;
+      let paddingHeight = 0;
+      const themeAxisConfig = getTableAxisTheme(config.orient, table.theme);
+      return "top" === config.orient ? paddingHeight = null !== (_u = null == themeAxisConfig ? void 0 : themeAxisConfig.cellPaddingTop) && void 0 !== _u ? _u : 0 : "bottom" === config.orient && (paddingHeight = null !== (_v = null == themeAxisConfig ? void 0 : themeAxisConfig.cellPaddingBottom) && void 0 !== _v ? _v : 0), tickHeight + labelHeight + titleHeight + paddingHeight + 1;
     }
     function formatDecimal(number) {
       return "number" != typeof number && (number = Number(number)), Number(number.toPrecision(1)).toString();
@@ -80486,7 +80788,7 @@
         importStyle();
     }
 
-    const version = "1.22.4";
+    const version = "1.22.5-alpha.0";
     importStyles();
 
     exports.TYPES = index;