@visactor/vtable 1.22.11-alpha.4 → 1.22.11-alpha.6

package/dist/vtable.js

@@ -36018,6 +36018,47 @@
             }
         };
     }
+    function cancellableThrottle(func, delay) {
+        let timer = null;
+        let lastArgs = null;
+        let context = null;
+        const throttled = function (...args) {
+            lastArgs = args;
+            context = this;
+            if (!timer) {
+                timer = setTimeout(() => {
+                    if (lastArgs) {
+                        func.apply(context, lastArgs);
+                    }
+                    timer = null;
+                    lastArgs = null;
+                    context = null;
+                }, delay);
+            }
+        };
+        const cancel = () => {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+                lastArgs = null;
+                context = null;
+            }
+        };
+        const flush = () => {
+            if (timer && lastArgs) {
+                clearTimeout(timer);
+                func.apply(context, lastArgs);
+                timer = null;
+                lastArgs = null;
+                context = null;
+            }
+        };
+        return {
+            throttled,
+            cancel,
+            flush
+        };
+    }
     function pad(num, totalChars) {
         const pad = '0';
         num = `${num}`;
@@ -37664,6 +37705,9 @@
                     get textAlign() {
                         return defaultStyle.textAlign ?? 'left';
                     },
+                    get textStickBaseOnAlign() {
+                        return defaultStyle.textStickBaseOnAlign;
+                    },
                     get textBaseline() {
                         return defaultStyle.textBaseline ?? 'middle';
                     },
@@ -38265,6 +38309,9 @@
                 get textStick() {
                     return style.textStick;
                 },
+                get textStickBaseOnAlign() {
+                    return style.textStickBaseOnAlign;
+                },
                 get marked() {
                     return style.marked;
                 },
@@ -48968,9 +49015,27 @@
         return hoverMode;
     }
 
+    let brushingChartInstance;
+    let brushingChartInstanceCellPos = { col: -1, row: -1 };
+    function setBrushingChartInstance(chartInstance, col, row) {
+        brushingChartInstance = chartInstance;
+        brushingChartInstanceCellPos = { col, row };
+    }
+    function clearBrushingChartInstance() {
+        brushingChartInstance = undefined;
+        brushingChartInstanceCellPos = { col: -1, row: -1 };
+    }
+    function getBrushingChartInstance() {
+        return brushingChartInstance;
+    }
+    function getBrushingChartInstanceCellPos() {
+        return brushingChartInstanceCellPos;
+    }
     const chartInstanceListColumnByColumnDirection = {};
     const chartInstanceListRowByRowDirection = {};
+    const delayRunDimensionHoverTimer = [];
     function generateChartInstanceListByColumnDirection(col, dimensionValueOrXValue, positionValueOrYValue, canvasXY, table, hideTooltip = false, isScatter = false) {
+        clearDelayRunDimensionHoverTimers();
         if (!isValid$1(chartInstanceListColumnByColumnDirection[col])) {
             chartInstanceListColumnByColumnDirection[col] = {};
         }
@@ -48980,9 +49045,9 @@
         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$1(chartNode)) {
+                chartNode.addUpdateShapeAndBoundsTag();
                 if (chartNode.activeChartInstance) {
                     chartInstanceListColumnByColumnDirection[col][i] = chartNode.activeChartInstance;
                 }
@@ -48991,44 +49056,13 @@
                     chartInstanceListColumnByColumnDirection[col][i] = chartNode.activeChartInstance;
                 }
             }
-            setTimeout(() => {
+            const timer = setTimeout(() => {
                 if (chartInstanceListColumnByColumnDirection[col]?.[i]) {
                     const chartDimensionLinkage = table.options.chartDimensionLinkage;
                     let isShowTooltip = !isScatter;
                     if (!isScatter && typeof chartDimensionLinkage === 'object') {
                         isShowTooltip = chartDimensionLinkage.showTooltip ?? true;
-                        if (i === rowEnd && isShowTooltip) {
-                            const heightLimitToShowTooltipForEdgeRow = chartDimensionLinkage.heightLimitToShowTooltipForEdgeRow ?? 0;
-                            const { rowEnd: rowEnd1 } = table.getBodyVisibleRowRange(0, -heightLimitToShowTooltipForEdgeRow);
-                            if (rowEnd1 === rowEnd) {
-                                isShowTooltip = true;
-                            }
-                            else {
-                                const { rowEnd: rowEnd2 } = table.getBodyVisibleRowRange(0, 5);
-                                if (rowEnd2 !== rowEnd) {
-                                    isShowTooltip = true;
-                                }
-                                else {
-                                    isShowTooltip = false;
-                                }
-                            }
-                        }
-                        else if (i === rowStart && isShowTooltip) {
-                            const heightLimitToShowTooltipForEdgeRow = chartDimensionLinkage.heightLimitToShowTooltipForEdgeRow ?? 0;
-                            const { rowStart: rowStart1 } = table.getBodyVisibleRowRange(heightLimitToShowTooltipForEdgeRow, 0);
-                            if (rowStart1 === rowStart) {
-                                isShowTooltip = true;
-                            }
-                            else {
-                                const { rowStart: rowStart2 } = table.getBodyVisibleRowRange(0, -5);
-                                if (rowStart2 !== rowStart) {
-                                    isShowTooltip = true;
-                                }
-                                else {
-                                    isShowTooltip = false;
-                                }
-                            }
-                        }
+                        isShowTooltip = isShowTooltip && checkIsShowTooltipForEdgeRow(i, table);
                     }
                     if (isScatter) {
                         if (table.stateManager.hover.cellPos.col !== col || table.stateManager.hover.cellPos.row !== i) {
@@ -49041,6 +49075,7 @@
                         }
                     }
                     else {
+                        const cellBoundry = table.getCellRelativeRect(col, i);
                         const bodyBoundryTop = table.frozenRowCount
                             ? table.getCellRelativeRect(col, table.frozenRowCount - 1).bottom
                             : 0;
@@ -49051,43 +49086,32 @@
                             }
                             chartInstanceListColumnByColumnDirection[col][i].setDimensionIndex(dimensionValueOrXValue, {
                                 tooltip: false,
-                                showTooltipOption: { x: canvasXY.x, y: absolutePositionTop, activeType: 'dimension' }
+                                showTooltipOption: {
+                                    x: canvasXY.x - cellBoundry.left,
+                                    y: absolutePositionTop - cellBoundry.top,
+                                    activeType: 'dimension'
+                                }
                             });
                         }
                         else {
                             chartInstanceListColumnByColumnDirection[col][i].setDimensionIndex(dimensionValueOrXValue, {
                                 tooltip: isShowTooltip,
-                                showTooltipOption: { x: canvasXY.x, y: absolutePositionTop, activeType: 'dimension' }
+                                showTooltipOption: {
+                                    x: canvasXY.x - cellBoundry.left,
+                                    y: absolutePositionTop - cellBoundry.top,
+                                    activeType: 'dimension'
+                                }
                             });
                         }
                     }
                 }
             }, 0);
+            delayRunDimensionHoverTimer.push(timer);
             table.scenegraph.updateNextFrame();
         }
     }
-    function clearChartInstanceListByColumnDirection(col, excludedRow, table) {
-        if (isValid$1(chartInstanceListColumnByColumnDirection[col])) {
-            for (const i in chartInstanceListColumnByColumnDirection[col]) {
-                if (isValid$1(excludedRow) && Number(i) === excludedRow) {
-                    continue;
-                }
-                const cellGroup = table.scenegraph.getCell(col, Number(i));
-                const chartNode = cellGroup?.getChildren()?.[0];
-                chartNode.addUpdateShapeAndBoundsTag();
-                if (isValid$1(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) {
+        clearDelayRunDimensionHoverTimers();
         if (!isValid$1(chartInstanceListRowByRowDirection[row])) {
             chartInstanceListRowByRowDirection[row] = {};
         }
@@ -49097,9 +49121,9 @@
         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$1(chartNode)) {
+                chartNode.addUpdateShapeAndBoundsTag();
                 if (chartNode.activeChartInstance) {
                     chartInstanceListRowByRowDirection[row][i] = chartNode.activeChartInstance;
                 }
@@ -49108,44 +49132,13 @@
                     chartInstanceListRowByRowDirection[row][i] = chartNode.activeChartInstance;
                 }
             }
-            setTimeout(() => {
+            const timer = setTimeout(() => {
                 if (chartInstanceListRowByRowDirection[row]?.[i]) {
                     const chartDimensionLinkage = table.options.chartDimensionLinkage;
                     let isShowTooltip = !isScatter;
                     if (!isScatter && typeof chartDimensionLinkage === 'object') {
                         isShowTooltip = chartDimensionLinkage.showTooltip ?? true;
-                        if (i === colEnd && isShowTooltip) {
-                            const widthLimitToShowTooltipForEdgeColumn = chartDimensionLinkage.widthLimitToShowTooltipForEdgeColumn;
-                            const { colEnd: colEnd1 } = table.getBodyVisibleColRange(0, -widthLimitToShowTooltipForEdgeColumn);
-                            if (colEnd1 === colEnd) {
-                                isShowTooltip = true;
-                            }
-                            else {
-                                const { colEnd: colEnd2 } = table.getBodyVisibleColRange(0, 5);
-                                if (colEnd2 !== colEnd) {
-                                    isShowTooltip = true;
-                                }
-                                else {
-                                    isShowTooltip = false;
-                                }
-                            }
-                        }
-                        else if (i === colStart && isShowTooltip) {
-                            const widthLimitToShowTooltipForEdgeColumn = chartDimensionLinkage.widthLimitToShowTooltipForEdgeColumn;
-                            const { colStart: colStart1 } = table.getBodyVisibleColRange(widthLimitToShowTooltipForEdgeColumn, 0);
-                            if (colStart1 === colStart) {
-                                isShowTooltip = true;
-                            }
-                            else {
-                                const { colStart: colStart2 } = table.getBodyVisibleColRange(0, -5);
-                                if (colStart2 !== colStart) {
-                                    isShowTooltip = true;
-                                }
-                                else {
-                                    isShowTooltip = false;
-                                }
-                            }
-                        }
+                        isShowTooltip = isShowTooltip && checkIsShowTooltipForEdgeColumn(i, table);
                     }
                     if (isScatter) {
                         if (table.stateManager.hover.cellPos.col !== i || table.stateManager.hover.cellPos.row !== row) {
@@ -49158,6 +49151,7 @@
                         }
                     }
                     else {
+                        const cellBoundry = table.getCellRelativeRect(i, row);
                         const bodyBoundryLeft = table.frozenColCount
                             ? table.getCellRelativeRect(table.frozenColCount - 1, row).right
                             : 0;
@@ -49168,22 +49162,188 @@
                             }
                             chartInstanceListRowByRowDirection[row][i].setDimensionIndex(dimensionValueOrXValue, {
                                 tooltip: false,
-                                showTooltipOption: { x: absolutePositionLeft, y: canvasXY.y, activeType: 'dimension' }
+                                showTooltipOption: {
+                                    x: absolutePositionLeft - cellBoundry.left,
+                                    y: canvasXY.y - cellBoundry.top,
+                                    activeType: 'dimension'
+                                }
                             });
                         }
                         else {
                             chartInstanceListRowByRowDirection[row][i].setDimensionIndex(dimensionValueOrXValue, {
                                 tooltip: isShowTooltip,
-                                showTooltipOption: { x: absolutePositionLeft, y: canvasXY.y, activeType: 'dimension' }
+                                showTooltipOption: {
+                                    x: absolutePositionLeft - cellBoundry.left,
+                                    y: canvasXY.y - cellBoundry.top,
+                                    activeType: 'dimension'
+                                }
                             });
                         }
                     }
                 }
             }, 0);
+            delayRunDimensionHoverTimer.push(timer);
             table.scenegraph.updateNextFrame();
         }
     }
-    function clearChartInstanceListByRowDirection(row, excludedCol, table) {
+    function generateChartInstanceListByViewRange(datum, table, deactivate = false) {
+        clearDelayRunDimensionHoverTimers();
+        const { rowStart } = table.getBodyVisibleRowRange();
+        let rowEnd = table.getBodyVisibleRowRange().rowEnd;
+        rowEnd = Math.min(table.rowCount - 1 - table.bottomFrozenRowCount, rowEnd);
+        const { colStart } = table.getBodyVisibleColRange();
+        let colEnd = table.getBodyVisibleColRange().colEnd;
+        colEnd = Math.min(table.colCount - 1 - table.rightFrozenColCount, colEnd);
+        for (let col = colStart; col <= colEnd; col++) {
+            if (!isValid$1(chartInstanceListColumnByColumnDirection[col])) {
+                chartInstanceListColumnByColumnDirection[col] = {};
+            }
+            for (let i = rowStart; i <= rowEnd; i++) {
+                const cellGroup = table.scenegraph.getCell(col, i);
+                const chartNode = cellGroup?.getChildren()?.[0];
+                if (chartInstanceListColumnByColumnDirection[col][i]) ;
+                else if (isValid$1(chartNode)) {
+                    chartNode.addUpdateShapeAndBoundsTag();
+                    if (chartNode.activeChartInstance) {
+                        chartInstanceListColumnByColumnDirection[col][i] = chartNode.activeChartInstance;
+                    }
+                    else {
+                        if (chartNode.attribute.spec.type === 'pie') {
+                            chartNode.activate(table);
+                            chartInstanceListColumnByColumnDirection[col][i] = chartNode.activeChartInstance;
+                        }
+                    }
+                }
+                const timer = setTimeout(() => {
+                    if (chartInstanceListColumnByColumnDirection[col]?.[i]) {
+                        const chartDimensionLinkage = table.options.chartDimensionLinkage;
+                        let isShowTooltip = true;
+                        if (typeof chartDimensionLinkage === 'object') {
+                            if (deactivate) {
+                                chartInstanceListColumnByColumnDirection[col][i].setHovered();
+                                chartInstanceListColumnByColumnDirection[col][i].hideTooltip();
+                            }
+                            else {
+                                isShowTooltip = chartDimensionLinkage.showTooltip ?? true;
+                                isShowTooltip = isShowTooltip && checkIsShowTooltipForEdgeRow(i, table);
+                                isShowTooltip = isShowTooltip && checkIsShowTooltipForEdgeColumn(col, table);
+                                chartInstanceListColumnByColumnDirection[col][i].setHovered(datum);
+                                isShowTooltip &&
+                                    chartInstanceListColumnByColumnDirection[col][i].showTooltip(datum, {
+                                        activeType: 'mark'
+                                    });
+                            }
+                        }
+                    }
+                }, 0);
+                delayRunDimensionHoverTimer.push(timer);
+                table.scenegraph.updateNextFrame();
+            }
+        }
+    }
+    function checkIsShowTooltipForEdgeRow(row, table) {
+        let isShowTooltip = true;
+        const { rowStart } = table.getBodyVisibleRowRange();
+        let rowEnd = table.getBodyVisibleRowRange().rowEnd;
+        rowEnd = Math.min(table.rowCount - 1 - table.bottomFrozenRowCount, rowEnd);
+        const chartDimensionLinkage = table.options.chartDimensionLinkage;
+        if (row === rowEnd && isShowTooltip) {
+            const heightLimitToShowTooltipForEdgeRow = chartDimensionLinkage.heightLimitToShowTooltipForEdgeRow ?? 0;
+            const { rowEnd: rowEnd1 } = table.getBodyVisibleRowRange(0, -heightLimitToShowTooltipForEdgeRow);
+            if (rowEnd1 === rowEnd) {
+                isShowTooltip = true;
+            }
+            else {
+                const { rowEnd: rowEnd2 } = table.getBodyVisibleRowRange(0, 5);
+                if (rowEnd2 !== rowEnd) {
+                    isShowTooltip = true;
+                }
+                else {
+                    isShowTooltip = false;
+                }
+            }
+        }
+        else if (row === rowStart && isShowTooltip) {
+            const heightLimitToShowTooltipForEdgeRow = chartDimensionLinkage.heightLimitToShowTooltipForEdgeRow ?? 0;
+            const { rowStart: rowStart1 } = table.getBodyVisibleRowRange(heightLimitToShowTooltipForEdgeRow, 0);
+            if (rowStart1 === rowStart) {
+                isShowTooltip = true;
+            }
+            else {
+                const { rowStart: rowStart2 } = table.getBodyVisibleRowRange(0, -5);
+                if (rowStart2 !== rowStart) {
+                    isShowTooltip = true;
+                }
+                else {
+                    isShowTooltip = false;
+                }
+            }
+        }
+        return isShowTooltip;
+    }
+    function checkIsShowTooltipForEdgeColumn(col, table) {
+        let isShowTooltip = true;
+        const { colStart } = table.getBodyVisibleColRange();
+        let colEnd = table.getBodyVisibleColRange().colEnd;
+        colEnd = Math.min(table.colCount - 1 - table.rightFrozenColCount, colEnd);
+        const chartDimensionLinkage = table.options.chartDimensionLinkage;
+        if (col === colEnd && isShowTooltip) {
+            const widthLimitToShowTooltipForEdgeColumn = chartDimensionLinkage.widthLimitToShowTooltipForEdgeColumn;
+            const { colEnd: colEnd1 } = table.getBodyVisibleColRange(0, -widthLimitToShowTooltipForEdgeColumn);
+            if (colEnd1 === colEnd) {
+                isShowTooltip = true;
+            }
+            else {
+                const { colEnd: colEnd2 } = table.getBodyVisibleColRange(0, 5);
+                if (colEnd2 !== colEnd) {
+                    isShowTooltip = true;
+                }
+                else {
+                    isShowTooltip = false;
+                }
+            }
+        }
+        else if (col === colStart && isShowTooltip) {
+            const widthLimitToShowTooltipForEdgeColumn = chartDimensionLinkage.widthLimitToShowTooltipForEdgeColumn;
+            const { colStart: colStart1 } = table.getBodyVisibleColRange(widthLimitToShowTooltipForEdgeColumn, 0);
+            if (colStart1 === colStart) {
+                isShowTooltip = true;
+            }
+            else {
+                const { colStart: colStart2 } = table.getBodyVisibleColRange(0, -5);
+                if (colStart2 !== colStart) {
+                    isShowTooltip = true;
+                }
+                else {
+                    isShowTooltip = false;
+                }
+            }
+        }
+        return isShowTooltip;
+    }
+    function clearChartInstanceListByColumnDirection(col, excludedRow, table, forceRelease = false) {
+        if (isValid$1(chartInstanceListColumnByColumnDirection[col])) {
+            for (const i in chartInstanceListColumnByColumnDirection[col]) {
+                if (isValid$1(excludedRow) && Number(i) === excludedRow) {
+                    continue;
+                }
+                const cellGroup = table.scenegraph.getCell(col, Number(i));
+                const chartNode = cellGroup?.getChildren()?.[0];
+                if (isValid$1(chartNode)) {
+                    chartNode.addUpdateShapeAndBoundsTag();
+                    chartNode.deactivate(table, {
+                        forceRelease: forceRelease,
+                        releaseChartInstance: true,
+                        releaseColumnChartInstance: false,
+                        releaseRowChartInstance: false
+                    });
+                    chartInstanceListColumnByColumnDirection[col][i] = null;
+                }
+            }
+            delete chartInstanceListColumnByColumnDirection[col];
+        }
+    }
+    function clearChartInstanceListByRowDirection(row, excludedCol, table, forceRelease = false) {
         if (isValid$1(chartInstanceListRowByRowDirection[row])) {
             for (const i in chartInstanceListRowByRowDirection[row]) {
                 if (isValid$1(excludedCol) && Number(i) === excludedCol) {
@@ -49191,9 +49351,10 @@
                 }
                 const cellGroup = table.scenegraph.getCell(Number(i), row);
                 const chartNode = cellGroup?.getChildren()?.[0];
-                chartNode.addUpdateShapeAndBoundsTag();
                 if (isValid$1(chartNode)) {
+                    chartNode.addUpdateShapeAndBoundsTag();
                     chartNode.deactivate(table, {
+                        forceRelease: forceRelease,
                         releaseChartInstance: true,
                         releaseColumnChartInstance: false,
                         releaseRowChartInstance: false
@@ -49204,6 +49365,56 @@
         }
         delete chartInstanceListRowByRowDirection[row];
     }
+    function clearDelayRunDimensionHoverTimers() {
+        for (const timer of delayRunDimensionHoverTimer) {
+            clearTimeout(timer);
+        }
+        delayRunDimensionHoverTimer.length = 0;
+    }
+    function clearAllChartInstanceList(table, forceRelease = false) {
+        clearDelayRunDimensionHoverTimers();
+        for (const col in chartInstanceListColumnByColumnDirection) {
+            clearChartInstanceListByColumnDirection(Number(col), undefined, table, forceRelease);
+        }
+        for (const row in chartInstanceListRowByRowDirection) {
+            clearChartInstanceListByRowDirection(Number(row), undefined, table, forceRelease);
+        }
+    }
+    function disableDimensionHoverToAllChartInstances() {
+        clearDelayRunDimensionHoverTimers();
+        for (const col in chartInstanceListColumnByColumnDirection) {
+            for (const row in chartInstanceListColumnByColumnDirection[col]) {
+                chartInstanceListColumnByColumnDirection[col][row].disableDimensionHoverEvent(true);
+                chartInstanceListColumnByColumnDirection[col][row].disableCrossHair(true);
+                chartInstanceListColumnByColumnDirection[col][row].disableTooltip(true);
+                chartInstanceListColumnByColumnDirection[col][row].hideTooltip();
+            }
+        }
+        for (const row in chartInstanceListRowByRowDirection) {
+            for (const col in chartInstanceListRowByRowDirection[row]) {
+                chartInstanceListRowByRowDirection[row][col].disableDimensionHoverEvent(true);
+                chartInstanceListRowByRowDirection[row][col].disableCrossHair(true);
+                chartInstanceListRowByRowDirection[row][col].disableTooltip(true);
+                chartInstanceListRowByRowDirection[row][col].hideTooltip();
+            }
+        }
+    }
+    function enableDimensionHoverToAllChartInstances() {
+        for (const col in chartInstanceListColumnByColumnDirection) {
+            for (const row in chartInstanceListColumnByColumnDirection[col]) {
+                chartInstanceListColumnByColumnDirection[col][row].disableDimensionHoverEvent(false);
+                chartInstanceListColumnByColumnDirection[col][row].disableCrossHair(false);
+                chartInstanceListColumnByColumnDirection[col][row].disableTooltip(false);
+            }
+        }
+        for (const row in chartInstanceListRowByRowDirection) {
+            for (const col in chartInstanceListRowByRowDirection[row]) {
+                chartInstanceListRowByRowDirection[row][col].disableDimensionHoverEvent(false);
+                chartInstanceListRowByRowDirection[row][col].disableCrossHair(false);
+                chartInstanceListRowByRowDirection[row][col].disableTooltip(false);
+            }
+        }
+    }
 
     function isValidAlignDomain(domain) {
         return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(domain[1]) && domain[1] >= domain[0];
@@ -50163,6 +50374,7 @@
         type = 'chart';
         chartInstance;
         activeChartInstance;
+        activeChartInstanceLastViewBox = null;
         activeChartInstanceHoverOnMark = null;
         justShowMarkTooltip = undefined;
         justShowMarkTooltipTimer = Date.now();
@@ -50207,7 +50419,6 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
-            this.activeChartInstance?.release();
             this.attribute.ClassType.globalConfig.uniqueTooltip = false;
             this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge({}, this.attribute.tableChartOption, {
                 renderCanvas: this.attribute.canvas,
@@ -50260,7 +50471,7 @@
                         }
                     }
                 },
-                componentShowContent: table.options.chartDimensionLinkage &&
+                componentShowContent: table.options.chartDimensionLinkage?.showTooltip &&
                     this.attribute.spec.type !== 'scatter'
                     ? {
                         tooltip: {
@@ -50281,20 +50492,49 @@
             table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
             this.activeChartInstance.on('click', (params) => {
                 if (this.attribute.spec.select?.enable === false) {
-                    table.scenegraph.updateChartState(null);
+                    table.scenegraph.updateChartState(null, undefined);
                 }
                 else if (Chart.temp) {
-                    table.scenegraph.updateChartState(params?.datum);
+                    table.scenegraph.updateChartState(params?.datum, 'click');
+                }
+            });
+            let brushChangeThrottle;
+            if (table.options.chartDimensionLinkage?.listenBrushChange) {
+                brushChangeThrottle = cancellableThrottle(table.scenegraph.updateChartState.bind(table.scenegraph), table.options.chartDimensionLinkage?.brushChangeDelay ?? 100);
+                this.activeChartInstance.on('brushChange', (params) => {
+                    brushChangeThrottle.throttled(params?.value?.inBrushData, 'brush');
+                });
+            }
+            this.activeChartInstance.on('brushStart', (params) => {
+                const brushingChartInstance = getBrushingChartInstance();
+                if (brushingChartInstance !== this.activeChartInstance) {
+                    if (brushingChartInstance) {
+                        brushingChartInstance.getChart().getComponentsByKey('brush')[0].clearBrushStateAndMask();
+                    }
+                    setBrushingChartInstance(this.activeChartInstance, col, row);
                 }
             });
             this.activeChartInstance.on('brushEnd', (params) => {
-                table.scenegraph.updateChartState(params?.value?.inBrushData);
+                brushChangeThrottle?.cancel();
+                table.scenegraph.updateChartState(params?.value?.inBrushData, 'brush');
                 Chart.temp = 0;
                 setTimeout(() => {
                     Chart.temp = 1;
                 }, 0);
             });
-            if (table.options.chartDimensionLinkage) {
+            if (table.options.chartDimensionLinkage?.showTooltip) {
+                if (this.attribute.spec.type === 'pie') {
+                    this.activeChartInstance.on('pointerover', { markName: 'pie' }, (params) => {
+                        const categoryField = this.attribute.spec.categoryField;
+                        const datum = { [categoryField]: params?.datum?.[categoryField] };
+                        generateChartInstanceListByViewRange(datum, table, false);
+                    });
+                    this.activeChartInstance.on('pointerout', { markName: 'pie' }, (params) => {
+                        const categoryField = this.attribute.spec.categoryField;
+                        const datum = { [categoryField]: params?.datum?.[categoryField] };
+                        generateChartInstanceListByViewRange(datum, table, true);
+                    });
+                }
                 this.activeChartInstance.on('dimensionHover', (params) => {
                     const dimensionInfo = params?.dimensionInfo[0];
                     const canvasXY = params?.event?.canvas;
@@ -50432,21 +50672,23 @@
             table._bindChartEvent?.(this.activeChartInstance);
         }
         static temp = 1;
-        deactivate(table, { releaseChartInstance = true, releaseColumnChartInstance = true, releaseRowChartInstance = true } = {}) {
+        deactivate(table, { forceRelease = false, releaseChartInstance = true, releaseColumnChartInstance = true, releaseRowChartInstance = true, releaseAllChartInstance = false } = {}) {
             this.activeChartInstanceHoverOnMark = null;
             this.justShowMarkTooltip = undefined;
             this.justShowMarkTooltipTimer = Date.now();
             clearTimeout(this.delayRunDimensionHoverTimer);
             this.delayRunDimensionHoverTimer = undefined;
             if (releaseChartInstance) {
-                this.activeChartInstance?.updateViewBox({
-                    x1: -1000,
-                    x2: -800,
-                    y1: -1000,
-                    y2: -800
-                }, false, false);
-                this.activeChartInstance?.release();
-                this.activeChartInstance = null;
+                if (forceRelease || !getBrushingChartInstance() || getBrushingChartInstance() !== this.activeChartInstance) {
+                    this.activeChartInstance?.updateViewBox({
+                        x1: -1000,
+                        x2: -800,
+                        y1: -1000,
+                        y2: -800
+                    }, false, false);
+                    this.activeChartInstance?.release();
+                    this.activeChartInstance = null;
+                }
                 const { col, row } = this.parent;
                 table.internalProps.layoutMap.isAxisCell(table.rowHeaderLevelCount - 1, row) &&
                     table.scenegraph.getCell(table.rowHeaderLevelCount - 1, row).firstChild?.hideLabelHoverOnAxis?.();
@@ -50466,11 +50708,16 @@
                         table.scenegraph.getCell(table.rowHeaderLevelCount - 1, row).firstChild?.hideLabelHoverOnAxis?.();
                 }
             }
-            if (releaseColumnChartInstance) {
-                clearChartInstanceListByColumnDirection(this.parent.col, this.attribute.spec.type === 'scatter' ? this.parent.row : undefined, table);
+            if (releaseAllChartInstance) {
+                clearAllChartInstanceList(table, forceRelease);
             }
-            if (releaseRowChartInstance) {
-                clearChartInstanceListByRowDirection(this.parent.row, this.attribute.spec.type === 'scatter' ? this.parent.col : undefined, table);
+            else {
+                if (releaseColumnChartInstance) {
+                    clearChartInstanceListByColumnDirection(this.parent.col, this.attribute.spec.type === 'scatter' ? this.parent.row : undefined, table, forceRelease);
+                }
+                if (releaseRowChartInstance) {
+                    clearChartInstanceListByRowDirection(this.parent.row, this.attribute.spec.type === 'scatter' ? this.parent.col : undefined, table, forceRelease);
+                }
             }
         }
         updateData(data) {
@@ -50481,12 +50728,19 @@
             const padding = this.attribute.cellPadding;
             const table = this.stage.table;
             const { x1, y1, x2, y2 } = cellGroup.globalAABBBounds;
-            return {
+            const viewBox = {
                 x1: Math.ceil(x1 + padding[3] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
                 x2: Math.ceil(x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
                 y1: Math.ceil(y1 + padding[0] + table.scrollTop + (table.options.viewBox?.y1 ?? 0)),
                 y2: Math.ceil(y1 + cellGroup.attribute.height - padding[2] + table.scrollTop + (table.options.viewBox?.y1 ?? 0))
             };
+            if (this.activeChartInstance) {
+                this.activeChartInstanceLastViewBox = viewBox;
+            }
+            else {
+                this.activeChartInstanceLastViewBox = null;
+            }
+            return viewBox;
         }
     }
     function getTableBounds(col, row, table) {
@@ -50755,7 +51009,6 @@
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
             const groupAttribute = getTheme(chart, params?.theme).group;
             const { dataId, data, spec } = chart.attribute;
-            chart.getViewBox();
             const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
             const { table } = chart.getRootNode();
             const { cacheCanvas, activeChartInstance } = chart;
@@ -50778,13 +51031,20 @@
                         activeChartInstance.updateSpecSync(spec, false, { reuse: false, morph: false });
                     }
                 }
+                const lastViewBox = chart.activeChartInstanceLastViewBox;
                 const viewBox = chart.getViewBox();
-                activeChartInstance.updateViewBox({
-                    x1: 0,
-                    x2: viewBox.x2 - viewBox.x1,
-                    y1: 0,
-                    y2: viewBox.y2 - viewBox.y1
-                }, false, false);
+                if (!(lastViewBox &&
+                    viewBox.x1 === lastViewBox.x1 &&
+                    viewBox.x2 === lastViewBox.x2 &&
+                    viewBox.y1 === lastViewBox.y1 &&
+                    viewBox.y2 === lastViewBox.y2)) {
+                    activeChartInstance.updateViewBox({
+                        x1: 0,
+                        x2: viewBox.x2 - viewBox.x1,
+                        y1: 0,
+                        y2: viewBox.y2 - viewBox.y1
+                    }, false, false);
+                }
                 const chartStage = activeChartInstance.getStage();
                 chartStage.needRender = true;
                 const matrix = chart.globalTransMatrix.clone();
@@ -56900,9 +57160,10 @@
         updateTableAxes(scenegraph.rightFrozenGroup, scenegraph.table);
         updateTableAxes(scenegraph.bottomFrozenGroup, scenegraph.table);
     }
-    function updateChartState(scenegraph, datum) {
+    function updateChartState(scenegraph, datum, selectedDataMode) {
         const table = scenegraph.table;
         if (table.isPivotChart()) {
+            table._selectedDataMode = selectedDataMode;
             const preSelectItemsCount = table._selectedDataItemsInChart.length;
             if ((datum === null || datum === undefined || datum?.length === 0 || Object.keys(datum).length === 0) &&
                 preSelectItemsCount === 0) {
@@ -58169,38 +58430,70 @@
         resetResidentHoverIcon(col, row) {
             resetResidentHoverIcon(col, row, this);
         }
-        deactivateChart(col, row) {
+        deactivateChart(col, row, forceRelease = false) {
             if (col === -1 || row === -1) {
+                if (forceRelease) {
+                    const brushingChartInstanceCellPos = getBrushingChartInstanceCellPos();
+                    const cellGroup = this.getCell(brushingChartInstanceCellPos.col, brushingChartInstanceCellPos.row);
+                    if (cellGroup?.firstChild?.deactivate) {
+                        clearBrushingChartInstance();
+                        cellGroup?.firstChild?.deactivate?.(this.table, {
+                            forceRelease: true,
+                            releaseChartInstance: true,
+                            releaseColumnChartInstance: true,
+                            releaseRowChartInstance: true,
+                            releaseAllChartInstance: true
+                        });
+                    }
+                }
                 return;
             }
             const cellGroup = this.getCell(col, row);
             if (cellGroup?.firstChild?.deactivate) {
+                if (forceRelease) {
+                    clearBrushingChartInstance();
+                    cellGroup?.firstChild?.deactivate?.(this.table, {
+                        forceRelease: true,
+                        releaseChartInstance: true,
+                        releaseColumnChartInstance: true,
+                        releaseRowChartInstance: true,
+                        releaseAllChartInstance: true
+                    });
+                    return;
+                }
                 const chartNode = cellGroup?.firstChild;
                 const chartType = chartNode.attribute.spec.type;
-                cellGroup?.firstChild?.deactivate?.(this.table, this.table.options.chartDimensionLinkage
+                cellGroup?.firstChild?.deactivate?.(this.table, this.table.options.chartDimensionLinkage?.showTooltip
                     ? {
-                        releaseChartInstance: chartType === 'scatter'
-                            ? (col !== this.table.stateManager.hover.cellPos.col &&
-                                row !== this.table.stateManager.hover.cellPos.row) ||
+                        releaseChartInstance: chartType === 'pie'
+                            ? false
+                            : 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: chartType === 'pie'
+                            ? false
+                            : 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 ||
+                                    this.table.rowCount - 1 - this.table.bottomFrozenRowCount,
+                        releaseRowChartInstance: chartType === 'pie'
+                            ? false
+                            : 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
-                            : 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);
             }
@@ -58257,8 +58550,17 @@
         updateChartSizeForResizeRowHeight(row) {
             updateChartSizeForResizeRowHeight(this, row);
         }
-        updateChartState(datum) {
-            this.table.isPivotChart() && updateChartState(this, datum);
+        updateChartState(datum, selectedDataMode) {
+            if (this.table.isPivotChart()) {
+                if (datum === null || datum === undefined || datum?.length === 0 || Object.keys(datum).length === 0) {
+                    const brushingChartInstance = getBrushingChartInstance();
+                    if (brushingChartInstance) {
+                        brushingChartInstance.getChart().getComponentsByKey('brush')[0].clearBrushStateAndMask();
+                    }
+                    this.table.options.chartDimensionLinkage?.clearChartState?.();
+                }
+                updateChartState(this, datum, selectedDataMode);
+            }
         }
         updateCheckboxCellState(col, row, checked) {
             if (this.table.transpose) {
@@ -63545,7 +63847,7 @@
                 return;
             }
             if (table.isPivotChart() && eventArgsSet?.eventArgs?.target.type !== 'chart') {
-                table.scenegraph.updateChartState(null);
+                table.scenegraph.updateChartState(null, undefined);
             }
             if (eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
                 stateManager.hideMenu();
@@ -63614,7 +63916,7 @@
                     else {
                         if (!eventManager.checkCellFillhandle(eventArgsSet) &&
                             (eventManager.checkColumnResize(eventArgsSet, true) || eventManager.checkRowResize(eventArgsSet, true))) {
-                            table.scenegraph.updateChartState(null);
+                            table.scenegraph.updateChartState(null, undefined);
                             stateManager.updateInteractionState(InteractionState.grabing);
                             return;
                         }
@@ -63859,7 +64161,7 @@
                     !eventManager.checkCellFillhandle(eventArgsSet) &&
                     !stateManager.columnResize.resizing &&
                     eventManager.checkColumnResize(eventArgsSet, true)) {
-                    table.scenegraph.updateChartState(null);
+                    table.scenegraph.updateChartState(null, undefined);
                     stateManager.updateInteractionState(InteractionState.grabing);
                     const { eventArgs } = eventArgsSet;
                     if (!eventArgs?.targetCell) {
@@ -63906,7 +64208,7 @@
                 }
                 stateManager.endSelectCells(true, isHasSelected);
                 stateManager.updateCursor();
-                table.scenegraph.updateChartState(null);
+                table.scenegraph.updateChartState(null, undefined);
             }
             else if (table.eventManager.isDraging && stateManager.isSelecting()) {
                 stateManager.endSelectCells();
@@ -64097,6 +64399,10 @@
             const legend = e.path.find(node => node.name === 'legend');
             if (!legend) {
                 table.editorManager?.completeEdit();
+                const { cellPos } = table.stateManager.hover;
+                const prevHoverCellCol = cellPos.col;
+                const prevHoverCellRow = cellPos.row;
+                table.scenegraph.deactivateChart(prevHoverCellCol, prevHoverCellRow, true);
                 if (table.eventManager._enableTableScroll) {
                     handleWhell(e, stateManager);
                 }
@@ -65576,7 +65882,7 @@
                 }
                 const shiftMultiSelect = this.table.keyboardOptions?.shiftMultiSelect ?? true;
                 const ctrlMultiSelect = this.table.keyboardOptions?.ctrlMultiSelect ?? true;
-                this.table.stateManager.updateSelectPos(this.table.stateManager.select.selectInline === 'row' ? this.table.colCount - 1 : eventArgs.col, this.table.stateManager.select.selectInline === 'col' ? this.table.rowCount - 1 : eventArgs.row, eventArgs.event.shiftKey && shiftMultiSelect, (eventArgs.event.ctrlKey || eventArgs.event.metaKey) && ctrlMultiSelect, false, isSelectMoving ? false : (this.table.options.select?.makeSelectCellVisible ?? true));
+                this.table.stateManager.updateSelectPos(this.table.stateManager.select.selectInline === 'row' ? this.table.colCount - 1 : eventArgs.col, this.table.stateManager.select.selectInline === 'col' ? this.table.rowCount - 1 : eventArgs.row, eventArgs.event.shiftKey && shiftMultiSelect, (eventArgs.event.ctrlKey || eventArgs.event.metaKey) && ctrlMultiSelect, false, isSelectMoving ? false : this.table.options.select?.makeSelectCellVisible ?? true);
                 return true;
             }
             return false;
@@ -70169,7 +70475,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.22.11-alpha.4";
+        version = "1.22.11-alpha.6";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -87247,53 +87553,93 @@
             return null;
         }
         _generateChartState() {
+            const select_filter = (datum) => {
+                if (this._table._selectedDataItemsInChart.length >= 1) {
+                    const match = this._table._selectedDataItemsInChart.find(item => {
+                        for (const itemKey in item) {
+                            if (typeof item[itemKey] !== 'object' && item[itemKey] !== datum[itemKey]) {
+                                return false;
+                            }
+                        }
+                        return true;
+                    });
+                    return !!match;
+                }
+                else if (this._table._selectedDimensionInChart?.length) {
+                    const match = this._table._selectedDimensionInChart.every(item => {
+                        if (typeof item.value !== 'object' && datum[item.key] !== item.value) {
+                            return false;
+                        }
+                        return true;
+                    });
+                    return !!match;
+                }
+                return false;
+            };
+            const selected_reverse = (datum) => {
+                if (this._table._selectedDataItemsInChart.length >= 1) {
+                    const match = this._table._selectedDataItemsInChart.find(item => {
+                        for (const itemKey in item) {
+                            if (typeof item[itemKey] !== 'object' && item[itemKey] !== datum[itemKey]) {
+                                return false;
+                            }
+                        }
+                        return true;
+                    });
+                    return !match;
+                }
+                else if (this._table._selectedDimensionInChart?.length) {
+                    const match = this._table._selectedDimensionInChart.every(item => {
+                        if (typeof item.value !== 'object' && datum[item.key] !== item.value) {
+                            return false;
+                        }
+                        return true;
+                    });
+                    return !match;
+                }
+                return false;
+            };
             const state = {
                 vtable_selected: {
                     filter: (datum) => {
-                        if (this._table._selectedDataItemsInChart.length >= 1) {
-                            const match = this._table._selectedDataItemsInChart.find(item => {
-                                for (const itemKey in item) {
-                                    if (typeof item[itemKey] !== 'object' && item[itemKey] !== datum[itemKey]) {
-                                        return false;
-                                    }
-                                }
-                                return true;
-                            });
-                            return !!match;
+                        if (this._table.options.chartDimensionLinkage?.selectedStateFilter) {
+                            return this._table.options.chartDimensionLinkage.selectedStateFilter(datum);
                         }
-                        else if (this._table._selectedDimensionInChart?.length) {
-                            const match = this._table._selectedDimensionInChart.every(item => {
-                                if (typeof item.value !== 'object' && datum[item.key] !== item.value) {
-                                    return false;
-                                }
-                                return true;
-                            });
-                            return !!match;
+                        if (this._table._selectedDataMode === 'click') {
+                            return select_filter(datum);
                         }
                         return false;
                     }
                 },
                 vtable_selected_reverse: {
                     filter: (datum) => {
-                        if (this._table._selectedDataItemsInChart.length >= 1) {
-                            const match = this._table._selectedDataItemsInChart.find(item => {
-                                for (const itemKey in item) {
-                                    if (typeof item[itemKey] !== 'object' && item[itemKey] !== datum[itemKey]) {
-                                        return false;
-                                    }
-                                }
-                                return true;
-                            });
-                            return !match;
+                        if (this._table.options.chartDimensionLinkage?.selectedReverseStateFilter) {
+                            return this._table.options.chartDimensionLinkage.selectedReverseStateFilter(datum);
                         }
-                        else if (this._table._selectedDimensionInChart?.length) {
-                            const match = this._table._selectedDimensionInChart.every(item => {
-                                if (typeof item.value !== 'object' && datum[item.key] !== item.value) {
-                                    return false;
-                                }
-                                return true;
-                            });
-                            return !match;
+                        if (this._table._selectedDataMode === 'click') {
+                            return selected_reverse(datum);
+                        }
+                        return false;
+                    }
+                },
+                inBrush: {
+                    filter: (datum) => {
+                        if (this._table.options.chartDimensionLinkage?.inBrushStateFilter) {
+                            return this._table.options.chartDimensionLinkage.inBrushStateFilter(datum);
+                        }
+                        if (this._table._selectedDataMode === 'brush') {
+                            return select_filter(datum);
+                        }
+                        return false;
+                    }
+                },
+                outOfBrush: {
+                    filter: (datum) => {
+                        if (this._table.options.chartDimensionLinkage?.outOfBrushStateFilter) {
+                            return this._table.options.chartDimensionLinkage.outOfBrushStateFilter(datum);
+                        }
+                        if (this._table._selectedDataMode === 'brush') {
+                            return selected_reverse(datum);
                         }
                         return false;
                     }
@@ -91565,6 +91911,7 @@
         pivotSortState;
         dataset;
         _selectedDataItemsInChart = [];
+        _selectedDataMode = 'click';
         _selectedDimensionInChart = [];
         _chartEventMap = {};
         _axes;
@@ -92754,6 +93101,12 @@
             const headerNodes = layoutMap.getCellHeaderPathsWithTreeNode(col, row);
             return headerNodes;
         }
+        disableDimensionHoverToAllChartInstances() {
+            disableDimensionHoverToAllChartInstances();
+        }
+        enableDimensionHoverToAllChartInstances() {
+            enableDimensionHoverToAllChartInstances();
+        }
     }
 
     class Circle extends Circle$1 {
@@ -93315,7 +93668,7 @@
     }
 
     registerForVrender();
-    const version = "1.22.11-alpha.4";
+    const version = "1.22.11-alpha.6";
     function getIcons() {
         return get$2();
     }