@visactor/vtable 1.22.11 → 1.22.12-alpha.0

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}`;
@@ -48974,9 +49015,46 @@
         return hoverMode;
     }
 
+    let brushingChartInstance;
+    let brushingChartInstanceCellPos = { col: -1, row: -1 };
+    function setBrushingChartInstance(chartInstance, col, row) {
+        brushingChartInstance = chartInstance;
+        brushingChartInstanceCellPos = { col, row };
+    }
+    function clearAndReleaseBrushingChartInstance(scenegraph) {
+        enableTooltipToAllChartInstances();
+        const cellGroup = scenegraph.getCell(brushingChartInstanceCellPos.col, brushingChartInstanceCellPos.row);
+        if (cellGroup?.firstChild?.deactivate) {
+            cellGroup?.firstChild?.deactivate?.(scenegraph.table, {
+                forceRelease: true,
+                releaseChartInstance: true,
+                releaseColumnChartInstance: false,
+                releaseRowChartInstance: false,
+                releaseAllChartInstance: false
+            });
+        }
+        if (isValid$1(chartInstanceListColumnByColumnDirection[brushingChartInstanceCellPos.col])) {
+            delete chartInstanceListColumnByColumnDirection[brushingChartInstanceCellPos.col][brushingChartInstanceCellPos.row];
+        }
+        if (isValid$1(chartInstanceListRowByRowDirection[brushingChartInstanceCellPos.row])) {
+            delete chartInstanceListRowByRowDirection[brushingChartInstanceCellPos.row][brushingChartInstanceCellPos.col];
+        }
+        brushingChartInstance = undefined;
+        brushingChartInstanceCellPos = { col: -1, row: -1 };
+    }
+    function getBrushingChartInstance() {
+        return brushingChartInstance;
+    }
+    function getBrushingChartInstanceCellPos() {
+        return brushingChartInstanceCellPos;
+    }
     const chartInstanceListColumnByColumnDirection = {};
     const chartInstanceListRowByRowDirection = {};
+    const delayRunDimensionHoverTimerForColumnDirection = [];
+    const delayRunDimensionHoverTimerForRowDirection = [];
+    const delayRunDimensionHoverTimerForViewRange = [];
     function generateChartInstanceListByColumnDirection(col, dimensionValueOrXValue, positionValueOrYValue, canvasXY, table, hideTooltip = false, isScatter = false) {
+        clearDelayRunDimensionHoverTimerForColumnDirection();
         if (!isValid$1(chartInstanceListColumnByColumnDirection[col])) {
             chartInstanceListColumnByColumnDirection[col] = {};
         }
@@ -48986,9 +49064,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;
                 }
@@ -48997,44 +49075,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) {
@@ -49047,6 +49094,7 @@
                         }
                     }
                     else {
+                        const cellBoundry = table.getCellRelativeRect(col, i);
                         const bodyBoundryTop = table.frozenRowCount
                             ? table.getCellRelativeRect(col, table.frozenRowCount - 1).bottom
                             : 0;
@@ -49057,43 +49105,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);
+            delayRunDimensionHoverTimerForColumnDirection.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) {
+        clearDelayRunDimensionHoverTimerForRowDirection();
         if (!isValid$1(chartInstanceListRowByRowDirection[row])) {
             chartInstanceListRowByRowDirection[row] = {};
         }
@@ -49103,9 +49140,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;
                 }
@@ -49114,44 +49151,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) {
@@ -49164,6 +49170,7 @@
                         }
                     }
                     else {
+                        const cellBoundry = table.getCellRelativeRect(i, row);
                         const bodyBoundryLeft = table.frozenColCount
                             ? table.getCellRelativeRect(table.frozenColCount - 1, row).right
                             : 0;
@@ -49174,22 +49181,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);
+            delayRunDimensionHoverTimerForRowDirection.push(timer);
             table.scenegraph.updateNextFrame();
         }
     }
-    function clearChartInstanceListByRowDirection(row, excludedCol, table) {
+    function generateChartInstanceListByViewRange(datum, table, deactivate = false) {
+        clearDelayRunDimensionHoverTimerForViewRange();
+        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);
+                delayRunDimensionHoverTimerForViewRange.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) {
@@ -49197,9 +49370,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
@@ -49210,6 +49384,80 @@
         }
         delete chartInstanceListRowByRowDirection[row];
     }
+    function clearDelayRunDimensionHoverTimerForColumnDirection() {
+        for (const timer of delayRunDimensionHoverTimerForColumnDirection) {
+            clearTimeout(timer);
+        }
+        delayRunDimensionHoverTimerForColumnDirection.length = 0;
+    }
+    function clearDelayRunDimensionHoverTimerForRowDirection() {
+        for (const timer of delayRunDimensionHoverTimerForRowDirection) {
+            clearTimeout(timer);
+        }
+        delayRunDimensionHoverTimerForRowDirection.length = 0;
+    }
+    function clearDelayRunDimensionHoverTimerForViewRange() {
+        for (const timer of delayRunDimensionHoverTimerForViewRange) {
+            clearTimeout(timer);
+        }
+        delayRunDimensionHoverTimerForViewRange.length = 0;
+    }
+    function clearDelayRunDimensionHoverTimers() {
+        for (const timer of delayRunDimensionHoverTimerForColumnDirection) {
+            clearTimeout(timer);
+        }
+        delayRunDimensionHoverTimerForColumnDirection.length = 0;
+        for (const timer of delayRunDimensionHoverTimerForRowDirection) {
+            clearTimeout(timer);
+        }
+        delayRunDimensionHoverTimerForRowDirection.length = 0;
+        for (const timer of delayRunDimensionHoverTimerForViewRange) {
+            clearTimeout(timer);
+        }
+        delayRunDimensionHoverTimerForViewRange.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);
+        }
+    }
+    let disabledTooltipToAllChartInstances = false;
+    function isDisabledTooltipToAllChartInstances() {
+        return disabledTooltipToAllChartInstances;
+    }
+    function disableTooltipToAllChartInstances() {
+        disabledTooltipToAllChartInstances = true;
+        clearDelayRunDimensionHoverTimers();
+        for (const col in chartInstanceListColumnByColumnDirection) {
+            for (const row in chartInstanceListColumnByColumnDirection[col]) {
+                chartInstanceListColumnByColumnDirection[col][row].disableTooltip(true);
+                chartInstanceListColumnByColumnDirection[col][row].hideTooltip();
+            }
+        }
+        for (const row in chartInstanceListRowByRowDirection) {
+            for (const col in chartInstanceListRowByRowDirection[row]) {
+                chartInstanceListRowByRowDirection[row][col].disableTooltip(true);
+                chartInstanceListRowByRowDirection[row][col].hideTooltip();
+            }
+        }
+    }
+    function enableTooltipToAllChartInstances() {
+        disabledTooltipToAllChartInstances = false;
+        for (const col in chartInstanceListColumnByColumnDirection) {
+            for (const row in chartInstanceListColumnByColumnDirection[col]) {
+                chartInstanceListColumnByColumnDirection[col][row].disableTooltip(false);
+            }
+        }
+        for (const row in chartInstanceListRowByRowDirection) {
+            for (const col in chartInstanceListRowByRowDirection[row]) {
+                chartInstanceListRowByRowDirection[row][col].disableTooltip(false);
+            }
+        }
+    }
 
     function isValidAlignDomain(domain) {
         return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(domain[1]) && domain[1] >= domain[0];
@@ -50169,6 +50417,7 @@
         type = 'chart';
         chartInstance;
         activeChartInstance;
+        activeChartInstanceLastViewBox = null;
         activeChartInstanceHoverOnMark = null;
         justShowMarkTooltip = undefined;
         justShowMarkTooltipTimer = Date.now();
@@ -50213,7 +50462,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,
@@ -50266,7 +50514,7 @@
                         }
                     }
                 },
-                componentShowContent: table.options.chartDimensionLinkage &&
+                componentShowContent: table.options.chartDimensionLinkage?.showTooltip &&
                     this.attribute.spec.type !== 'scatter'
                     ? {
                         tooltip: {
@@ -50287,21 +50535,63 @@
             table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
             this.activeChartInstance.on('click', (params) => {
                 if (this.attribute.spec.select?.enable === false) {
-                    table.scenegraph.updateChartState(null);
+                    if (this.attribute.spec.interactions.find((interaction) => interaction.type === 'element-select' && interaction.isMultiple)) {
+                        table.scenegraph.updateChartState(params?.datum, 'multiple-select');
+                    }
+                    else {
+                        table.scenegraph.updateChartState(null, undefined);
+                    }
+                }
+                else if (this.attribute.spec.select?.enable === true && this.attribute.spec.select?.mode === 'multiple') {
+                    table.scenegraph.updateChartState(params?.datum, 'multiple-select');
                 }
                 else if (Chart.temp) {
-                    table.scenegraph.updateChartState(params?.datum);
+                    table.scenegraph.updateChartState(null, 'brush');
+                    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) {
+                        clearAndReleaseBrushingChartInstance(table.scenegraph);
+                    }
+                    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) => {
+                    if (isDisabledTooltipToAllChartInstances()) {
+                        return;
+                    }
+                    this.activeChartInstance.disableTooltip(false);
                     const dimensionInfo = params?.dimensionInfo[0];
                     const canvasXY = params?.event?.canvas;
                     const viewport = params?.event?.viewport;
@@ -50352,13 +50642,11 @@
                             }
                             else if (prev_justShowMarkTooltip === false && justShowMarkTooltip === true) {
                                 delayRunDimensionHover = false;
-                                clearTimeout(this.delayRunDimensionHoverTimer);
-                                this.delayRunDimensionHoverTimer = undefined;
+                                this.clearDelayRunDimensionHoverTimer();
                             }
                             else if (prev_justShowMarkTooltip === true && justShowMarkTooltip === true) {
                                 delayRunDimensionHover = false;
-                                clearTimeout(this.delayRunDimensionHoverTimer);
-                                this.delayRunDimensionHoverTimer = undefined;
+                                this.clearDelayRunDimensionHoverTimer();
                             }
                             if (params.action === 'enter' ||
                                 params.action === 'move' ||
@@ -50374,8 +50662,11 @@
                                     }
                                 }
                                 else {
-                                    clearTimeout(this.delayRunDimensionHoverTimer);
+                                    this.clearDelayRunDimensionHoverTimer();
                                     this.delayRunDimensionHoverTimer = setTimeout(() => {
+                                        if (isDisabledTooltipToAllChartInstances()) {
+                                            return;
+                                        }
                                         if (indicatorsAsCol) {
                                             generateChartInstanceListByRowDirection(row, dimensionValue, null, canvasXY, table, justShowMarkTooltip, false);
                                         }
@@ -50436,23 +50727,32 @@
                 });
             }
             table._bindChartEvent?.(this.activeChartInstance);
+            if (isDisabledTooltipToAllChartInstances()) {
+                this.activeChartInstance.disableTooltip(true);
+            }
         }
         static temp = 1;
-        deactivate(table, { releaseChartInstance = true, releaseColumnChartInstance = true, releaseRowChartInstance = true } = {}) {
+        clearDelayRunDimensionHoverTimer() {
+            clearTimeout(this.delayRunDimensionHoverTimer);
+            this.delayRunDimensionHoverTimer = undefined;
+        }
+        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;
+            this.clearDelayRunDimensionHoverTimer();
             if (releaseChartInstance) {
-                this.activeChartInstance?.updateViewBox({
-                    x1: -1000,
-                    x2: -800,
-                    y1: -1000,
-                    y2: -800
-                }, false, false);
-                this.activeChartInstance?.release();
-                this.activeChartInstance = null;
+                if (this.activeChartInstance &&
+                    (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?.();
@@ -50472,11 +50772,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) {
@@ -50487,12 +50792,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) {
@@ -50761,7 +51073,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;
@@ -50784,13 +51095,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();
@@ -56884,9 +57202,13 @@
         });
     }
     function clearChartCacheImage(scenegraph) {
+        const brushingCellPos = getBrushingChartInstanceCellPos();
         for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
             const columnGroup = scenegraph.getColGroup(c);
             columnGroup?.getChildren()?.forEach((cellNode) => {
+                if (brushingCellPos && brushingCellPos.col === cellNode.col && brushingCellPos.row === cellNode.row) {
+                    return;
+                }
                 cellNode.children.forEach((node) => {
                     if (node.type === 'chart') {
                         node.cacheCanvas = null;
@@ -56932,9 +57254,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) {
@@ -56963,7 +57286,18 @@
                 }
                 newSelectedDataItemsInChart.push(selectedState);
             }
-            if (!isEqual(table._selectedDataItemsInChart, newSelectedDataItemsInChart)) {
+            if (selectedDataMode === 'multiple-select') {
+                if (datum === null || datum === undefined || datum?.length === 0 || Object.keys(datum).length === 0) {
+                    table._selectedDataItemsInChart = [];
+                }
+                else {
+                    table._selectedDataItemsInChart.push(...newSelectedDataItemsInChart);
+                }
+                table.internalProps.layoutMap.updateDataStateToChartInstance();
+                clearChartCacheImage(scenegraph);
+                table.scenegraph.updateNextFrame();
+            }
+            else if (!isEqual(table._selectedDataItemsInChart, newSelectedDataItemsInChart)) {
                 table._selectedDataItemsInChart = newSelectedDataItemsInChart;
                 table.internalProps.layoutMap.updateDataStateToChartInstance();
                 clearChartCacheImage(scenegraph);
@@ -58201,38 +58535,63 @@
         resetResidentHoverIcon(col, row) {
             resetResidentHoverIcon(col, row, this);
         }
-        deactivateChart(col, row) {
+        deactivateChart(col, row, forceRelease = false) {
+            if (forceRelease) {
+                const brushingChartInstanceCellPos = getBrushingChartInstanceCellPos();
+                const brushingChartInstance = getBrushingChartInstance();
+                if (brushingChartInstanceCellPos && brushingChartInstance) {
+                    clearAndReleaseBrushingChartInstance(this);
+                    clearCellChartCacheImage(brushingChartInstanceCellPos.col, brushingChartInstanceCellPos.row, this);
+                }
+            }
             if (col === -1 || row === -1) {
                 return;
             }
             const cellGroup = this.getCell(col, row);
             if (cellGroup?.firstChild?.deactivate) {
+                if (forceRelease) {
+                    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);
             }
@@ -58289,8 +58648,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) {
@@ -63577,7 +63945,8 @@
                 return;
             }
             if (table.isPivotChart() && eventArgsSet?.eventArgs?.target.type !== 'chart') {
-                table.scenegraph.updateChartState(null);
+                table.scenegraph.updateChartState(null, undefined);
+                table.scenegraph.deactivateChart(-1, -1, true);
             }
             if (eventArgsSet.eventArgs?.target !== stateManager.residentHoverIcon?.icon) {
                 stateManager.hideMenu();
@@ -63646,7 +64015,8 @@
                     else {
                         if (!eventManager.checkCellFillhandle(eventArgsSet) &&
                             (eventManager.checkColumnResize(eventArgsSet, true) || eventManager.checkRowResize(eventArgsSet, true))) {
-                            table.scenegraph.updateChartState(null);
+                            table.scenegraph.updateChartState(null, undefined);
+                            table.scenegraph.deactivateChart(-1, -1, true);
                             stateManager.updateInteractionState(InteractionState.grabing);
                             return;
                         }
@@ -63891,7 +64261,8 @@
                     !eventManager.checkCellFillhandle(eventArgsSet) &&
                     !stateManager.columnResize.resizing &&
                     eventManager.checkColumnResize(eventArgsSet, true)) {
-                    table.scenegraph.updateChartState(null);
+                    table.scenegraph.updateChartState(null, undefined);
+                    table.scenegraph.deactivateChart(-1, -1, true);
                     stateManager.updateInteractionState(InteractionState.grabing);
                     const { eventArgs } = eventArgsSet;
                     if (!eventArgs?.targetCell) {
@@ -63938,7 +64309,8 @@
                 }
                 stateManager.endSelectCells(true, isHasSelected);
                 stateManager.updateCursor();
-                table.scenegraph.updateChartState(null);
+                table.scenegraph.updateChartState(null, undefined);
+                table.scenegraph.deactivateChart(-1, -1, true);
             }
             else if (table.eventManager.isDraging && stateManager.isSelecting()) {
                 stateManager.endSelectCells();
@@ -64129,6 +64501,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);
                 }
@@ -64322,6 +64698,9 @@
             if (stateManager.interactionState !== InteractionState.scrolling) {
                 stateManager.updateInteractionState(InteractionState.scrolling);
             }
+            scenegraph.table.stateManager.hideMenu();
+            scenegraph.table.editorManager?.completeEdit();
+            table.scenegraph.deactivateChart(-1, -1, true);
             const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
             throttleVerticalWheel(ratio, e);
         });
@@ -64333,6 +64712,9 @@
             if (stateManager.interactionState !== InteractionState.scrolling) {
                 stateManager.updateInteractionState(InteractionState.scrolling);
             }
+            scenegraph.table.stateManager.hideMenu();
+            scenegraph.table.editorManager?.completeEdit();
+            table.scenegraph.deactivateChart(-1, -1, true);
             const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
             throttleHorizontalWheel(ratio);
         });
@@ -64626,7 +65008,11 @@
             table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
             table.eventManager.isDown = true;
             const target = e.target;
-            if (!table.getElement().contains(target) && !table.internalProps.menuHandler.containElement(target)) {
+            if (!table.getElement().contains(target) &&
+                !table.internalProps.menuHandler.containElement(target) &&
+                (!table.options.customConfig?.shouldTreatAsClickOnTable ||
+                    (table.options.customConfig?.shouldTreatAsClickOnTable &&
+                        !table.options.customConfig?.shouldTreatAsClickOnTable(e)))) {
                 const isCompleteEdit = table.editorManager?.completeEdit(e);
                 getPromiseValue(isCompleteEdit, isCompleteEdit => {
                     if (isCompleteEdit === false) {
@@ -64638,6 +65024,8 @@
                         stateManager.endSelectCells(true, isHasSelected);
                     }
                 });
+                table.scenegraph.updateChartState(null, undefined);
+                table.scenegraph.deactivateChart(-1, -1, true);
             }
         };
         eventManager.globalEventListeners.push({
@@ -70293,7 +70681,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.22.11";
+        version = "1.22.12-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -87249,6 +87637,8 @@
             this._indicators?.forEach(indicatorObject => {
                 indicatorObject.chartInstance?.release();
             });
+            clearAllChartInstanceList(this._table, true);
+            clearAndReleaseBrushingChartInstance(this._table.scenegraph);
         }
         getHeadNode(col, row) {
             let dimensions;
@@ -87394,53 +87784,95 @@
             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' ||
+                            this._table._selectedDataMode === 'multiple-select') {
+                            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' ||
+                            this._table._selectedDataMode === 'multiple-select') {
+                            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;
                     }
@@ -87449,14 +87881,16 @@
             return state;
         }
         updateDataStateToChartInstance(activeChartInstance) {
-            if (activeChartInstance?.getSpec().select?.enable !== false) {
+            if (activeChartInstance?.getSpec().select?.enable !== false ||
+                activeChartInstance?.getSpec().interactions.find((interaction) => interaction.type === 'element-select')) {
                 if (!activeChartInstance) {
                     activeChartInstance = this._table._getActiveChartInstance();
                 }
                 const state = this._generateChartState();
                 this._indicators.forEach((_indicatorObject) => {
                     const chartInstance = _indicatorObject.chartInstance;
-                    if (_indicatorObject.chartSpec.select?.enable !== false) {
+                    if (_indicatorObject.chartSpec.select?.enable !== false ||
+                        _indicatorObject.chartSpec.interactions.find((interaction) => interaction.type === 'element-select')) {
                         chartInstance.updateState(state);
                     }
                 });
@@ -87464,7 +87898,8 @@
             }
         }
         updateDataStateToActiveChartInstance(activeChartInstance) {
-            if (activeChartInstance?.getSpec().select?.enable !== false) {
+            if (activeChartInstance?.getSpec().select?.enable !== false ||
+                activeChartInstance?.getSpec().interactions.find((interaction) => interaction.type === 'element-select')) {
                 if (!activeChartInstance) {
                     activeChartInstance = this._table._getActiveChartInstance();
                 }
@@ -91726,6 +92161,7 @@
         pivotSortState;
         dataset;
         _selectedDataItemsInChart = [];
+        _selectedDataMode = 'click';
         _selectedDimensionInChart = [];
         _chartEventMap = {};
         _axes;
@@ -91901,6 +92337,8 @@
         }) {
             const internalProps = this.internalProps;
             super.updateOption(options, updateConfig);
+            this.scenegraph.updateChartState(null, undefined);
+            this.scenegraph.deactivateChart(-1, -1, true);
             this.layoutNodeId = { seqId: 0 };
             this.internalProps.columns = cloneDeep(options.columns);
             this.internalProps.rows = cloneDeep(options.rows);
@@ -92830,6 +93268,8 @@
         setRecords(records) {
             this.internalProps.layoutMap.release();
             clearChartRenderQueue();
+            this.scenegraph.updateChartState(null, undefined);
+            this.scenegraph.deactivateChart(-1, -1, true);
             const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.options.records = this.internalProps.records = records;
             const options = this.options;
@@ -92915,6 +93355,12 @@
             const headerNodes = layoutMap.getCellHeaderPathsWithTreeNode(col, row);
             return headerNodes;
         }
+        disableTooltipToAllChartInstances() {
+            disableTooltipToAllChartInstances();
+        }
+        enableTooltipToAllChartInstances() {
+            enableTooltipToAllChartInstances();
+        }
     }
 
     class Circle extends Circle$1 {
@@ -93476,7 +93922,7 @@
     }
 
     registerForVrender();
-    const version = "1.22.11";
+    const version = "1.22.12-alpha.0";
     function getIcons() {
         return get$2();
     }