@visactor/vtable 0.9.3-alpha.4 → 0.9.3-alpha.5

package/dist/vtable.js

@@ -350,7 +350,7 @@
             listeners: {},
             listenerData: {}
         };
-        listen(type, listener) {
+        on(type, listener) {
             const list = this.listenersData.listeners[type] || (this.listenersData.listeners[type] = []);
             list.push(listener);
             const id = idCount$1++;
@@ -368,14 +368,14 @@
             };
             return id;
         }
-        unlisten(id) {
+        off(id) {
             if (!this.listenersData) {
                 return;
             }
             this.listenersData.listenerData[id].remove();
         }
         addEventListener(type, listener, option) {
-            this.listen(type, listener);
+            this.on(type, listener);
         }
         removeEventListener(type, listener) {
             if (!this.listenersData) {
@@ -384,7 +384,7 @@
             for (const key in this.listenersData.listenerData) {
                 const listenerData = this.listenersData.listenerData[key];
                 if (listenerData.type === type && listenerData.listener === listener) {
-                    this.unlisten(key);
+                    this.off(key);
                 }
             }
         }
@@ -404,7 +404,7 @@
             }
             return list.map(listener => listener.call(this, event)).filter(r => isValid$1(r));
         }
-        dispose() {
+        release() {
             delete this.listenersData;
         }
     };
@@ -1644,7 +1644,7 @@
             }
             this.listeners = {};
         }
-        dispose() {
+        release() {
             if (Env.mode === 'node') {
                 return;
             }
@@ -36282,6 +36282,10 @@
         setExtraAttrFromSpec(nice, zero, range, expand) {
             this.nice = nice;
             this.zero = zero;
+            if (this.zero) {
+                range.min = Math.min(range.min, 0);
+                range.max = Math.max(range.max, 0);
+            }
             this.domain = range;
             this.expand = expand;
         }
@@ -36531,7 +36535,7 @@
             this.type = option.type ?? 'band';
             this.inverse = 'inverse' in option ? !!option.inverse : false;
             if (option.type === 'band') {
-                this.data = option.data;
+                this.data = option.domain;
             }
             this.initScale();
             this.initData();
@@ -36655,15 +36659,16 @@
         }
         updateScaleRange() {
             const { width, height } = this.getLayoutRect();
+            const inverse = this.option.inverse || false;
             let newRange = [0, 0];
             if (isXAxis(this.orient)) {
                 if (isValidNumber(width)) {
-                    newRange = [0, width];
+                    newRange = inverse ? [width, 0] : [0, width];
                 }
             }
             else {
                 if (isValidNumber(height)) {
-                    newRange = [height, 0];
+                    newRange = inverse ? [0, height] : [height, 0];
                 }
             }
             this.scale.updateRange(newRange);
@@ -37132,8 +37137,8 @@
             }
             return [];
         }
-        dispose() {
-            super.dispose?.();
+        release() {
+            super.release?.();
         }
         clearSortedMap() {
             this.currentIndexedData && (this.currentIndexedData.length = 0);
@@ -37240,8 +37245,8 @@
         recordPromiseCallBack(index, record) {
             this._recordCache[index] = record;
         }
-        dispose() {
-            super.dispose?.();
+        release() {
+            super.release?.();
         }
     }
 
@@ -37708,7 +37713,7 @@
                 if (table.dataSource.enableHierarchyState) {
                     table.refreshRowColCount();
                 }
-                table.invalidate();
+                table.render();
             })
         ];
     }
@@ -37717,7 +37722,7 @@
             const data = records;
             table.internalProps.records = records;
             const newDataSource = (table.internalProps.dataSource = CachedDataSource.ofArray(data, table.pagerConf, table.options.hierarchyExpandLevel ?? (table.hasHierarchyTreeHeader?.() ? 1 : undefined)));
-            table.addDisposable(newDataSource);
+            table.addReleaseObj(newDataSource);
         });
     }
     function _setDataSource(table, dataSource) {
@@ -37728,7 +37733,7 @@
                 }
                 else {
                     const newDataSource = (table.internalProps.dataSource = new CachedDataSource(dataSource));
-                    table.addDisposable(newDataSource);
+                    table.addReleaseObj(newDataSource);
                 }
             }
             else {
@@ -37798,9 +37803,6 @@
         }
         return orgWidth;
     }
-    function isAutoDefine(width) {
-        return Boolean(width && typeof width === 'string' && width.toLowerCase() === 'auto');
-    }
     function _getScrollableVisibleRect(table) {
         let frozenColsWidth = 0;
         if (table.internalProps.frozenColCount > 0) {
@@ -38247,7 +38249,7 @@
         return undefined;
     }
 
-    const regedIcons$2 = get$1();
+    get$1();
     function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
@@ -38284,7 +38286,7 @@
             y: padding[0],
             width: width - padding[1] - padding[3],
             height: height - padding[0] - padding[2],
-            image: value ?? regedIcons$2.damage_pic.svg,
+            image: value,
             cursor: 'pointer'
         });
         image.name = 'image';
@@ -38347,7 +38349,7 @@
     function updateImageCellContentWhileResize(cellGroup, col, row, table) {
         const image = cellGroup.getChildByName('image');
         const originImage = (typeof image.attribute.image !== 'string' && image.attribute.image) ||
-            image.resources.get(image.attribute.image).data;
+            image.resources?.get(image.attribute.image).data;
         if (!originImage) {
             return;
         }
@@ -39787,6 +39789,7 @@
         iconAttribute.height = icon.height;
         iconAttribute.visibleTime = icon.visibleTime ?? 'always';
         iconAttribute.funcType = icon.funcType;
+        iconAttribute.interactive = icon.interactive;
         let hierarchyOffset = 0;
         if (isNumber(col) &&
             isNumber(row) &&
@@ -40692,7 +40695,7 @@
             componentGroup.appendChild(this._menuInstance);
             this.bindEvent();
         }
-        dispose() {
+        release() {
         }
         attach(x, y, col, row, type, menuInfo) {
             if (type === MenuType.dropDown && this.checkDropDownMenuChange(col, row)) {
@@ -42415,6 +42418,312 @@
         bind(GroupRenderContribution).toService(AdjustColorGroupAfterRenderContribution);
     });
 
+    function getAxisConfigInPivotChart(col, row, layout) {
+        if (!layout._table.isPivotChart()) {
+            return undefined;
+        }
+        if (layout.indicatorsAsCol) {
+            if (layout.hasTwoIndicatorAxes &&
+                row === layout.columnHeaderLevelCount - 1 &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, layout.columnHeaderLevelCount - 1);
+                let defaultKey = indicatorKeys[1];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
+                if (!defaultKey) {
+                    return undefined;
+                }
+                const isZeroAlign = checkZeroAlign(col, row, 'top', layout);
+                const data = layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
+                    ? layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
+                    : layout.dataset.collectedValues[defaultKey];
+                const index = layout.getRecordIndexByCol(col);
+                const range = data[layout.getColKeysPath()[index][Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]];
+                const axisOption = getAxisOption(col, row, 'top', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({
+                    range: range
+                }, axisOption, {
+                    orient: 'top',
+                    type: 'linear',
+                    label: {
+                        flush: true
+                    }
+                });
+            }
+            else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
+                let defaultKey = indicatorKeys[0];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
+                const isZeroAlign = checkZeroAlign(col, row, 'bottom', layout);
+                const data = layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
+                    ? layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
+                    : layout.dataset.collectedValues[defaultKey];
+                const index = layout.getRecordIndexByCol(col);
+                const range = data[layout.getColKeysPath()[index][Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]];
+                let indicatorInfo = null;
+                indicatorKeys.forEach(key => {
+                    const info = layout.getIndicatorInfo(key);
+                    if (info) {
+                        indicatorInfo = info;
+                    }
+                });
+                const axisOption = getAxisOption(col, row, 'bottom', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({
+                    title: {
+                        visible: true,
+                        text: indicatorInfo?.caption,
+                        autoRotate: true
+                    },
+                    range: range
+                }, axisOption, {
+                    orient: 'bottom',
+                    type: 'linear',
+                    label: {
+                        flush: true
+                    }
+                });
+            }
+            else if (col === layout.rowHeaderLevelCount - 1 &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row)[0];
+                if (isArray$3(rowDimensionKey)) {
+                    rowDimensionKey = rowDimensionKey[0];
+                }
+                const data = layout.dataset.collectedValues[rowDimensionKey];
+                const recordRow = layout.getRecordIndexByRow(row);
+                const rowPath = layout.getRowKeysPath()[recordRow];
+                const domain = data[rowPath[rowPath.length - 1]];
+                const axisOption = getAxisOption(col, row, 'left', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({
+                    domain: Array.from(domain).reverse()
+                }, axisOption, {
+                    orient: 'left',
+                    type: 'band'
+                });
+            }
+        }
+        else {
+            if (col === layout.rowHeaderLevelCount - 1 &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
+                let defaultKey = indicatorKeys[0];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
+                const isZeroAlign = checkZeroAlign(col, row, 'left', layout);
+                const data = layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
+                    ? layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
+                    : layout.dataset.collectedValues[defaultKey];
+                const index = layout.getRecordIndexByRow(row);
+                const range = data[layout.getRowKeysPath()[index][Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)]];
+                let indicatorInfo = null;
+                indicatorKeys.forEach(key => {
+                    const info = layout.getIndicatorInfo(key);
+                    if (info) {
+                        indicatorInfo = info;
+                    }
+                });
+                const axisOption = getAxisOption(col, row, 'left', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({
+                    title: {
+                        visible: true,
+                        text: indicatorInfo?.caption,
+                        autoRotate: true
+                    },
+                    range: range
+                }, axisOption, {
+                    orient: 'left',
+                    type: 'linear',
+                    label: {
+                        flush: true
+                    }
+                });
+            }
+            else if (col === layout.colCount - layout.rightFrozenColCount &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                const indicatorKeys = layout.getIndicatorKeyInChartSpec(layout.rowHeaderLevelCount - 1, row);
+                let defaultKey = indicatorKeys[1];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
+                if (!defaultKey) {
+                    return undefined;
+                }
+                const isZeroAlign = checkZeroAlign(col, row, 'right', layout);
+                const data = layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
+                    ? layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
+                    : layout.dataset.collectedValues[defaultKey];
+                const index = layout.getRecordIndexByRow(row);
+                const range = data[layout.getRowKeysPath()[index][Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)]];
+                const axisOption = getAxisOption(col, row, 'right', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({
+                    range: range
+                }, axisOption, {
+                    orient: 'right',
+                    type: 'linear',
+                    label: {
+                        flush: true
+                    }
+                });
+            }
+            else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
+                if (isArray$3(columnDimensionKey)) {
+                    columnDimensionKey = columnDimensionKey[0];
+                }
+                const data = layout.dataset.collectedValues[columnDimensionKey];
+                const recordCol = layout.getRecordIndexByCol(col);
+                const colPath = layout.getColKeysPath()[recordCol];
+                const domain = data[colPath[colPath.length - 1]];
+                const axisOption = getAxisOption(col, row, 'bottom', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({
+                    domain: Array.from(domain)
+                }, axisOption, {
+                    orient: 'bottom',
+                    type: 'band'
+                });
+            }
+        }
+        return undefined;
+    }
+    function getAxisOption(col, row, orient, layout) {
+        const spec = layout.getRawChartSpec(col, row);
+        if (spec && isArray$3(spec.axes)) {
+            const axisOption = spec.axes.find((axis) => {
+                return axis.orient === orient;
+            });
+            if (axisOption) {
+                return axisOption;
+            }
+        }
+        const axisOption = layout._table.pivotChartAxes.find(axisOption => {
+            return axisOption.orient === orient;
+        });
+        return axisOption;
+    }
+    function checkZeroAlign(col, row, orient, layout) {
+        const orients = [];
+        if (orient === 'left' || orient === 'right') {
+            orients.push('left', 'right');
+        }
+        else if (orient === 'top' || orient === 'bottom') {
+            orients.push('top', 'bottom');
+        }
+        const spec = layout.getRawChartSpec(col, row);
+        let axesSpec;
+        if (spec && isArray$3(spec.axes)) {
+            axesSpec = spec.axes;
+        }
+        else {
+            axesSpec = layout._table.pivotChartAxes;
+        }
+        if (isArray$3(axesSpec)) {
+            const axes = [];
+            axesSpec.forEach((axis) => {
+                if (orients.includes(axis.orient)) {
+                    axes.push(axis);
+                }
+            });
+            for (let i = 0; i < axes.length; i++) {
+                const axis = axes[i];
+                if (axis.sync &&
+                    axis.sync.zeroAlign &&
+                    axis.sync.axisId &&
+                    axes.find(axisSync => {
+                        return axisSync.id === axis.sync.axisId;
+                    })) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    function computeAxisConpomentWidth(config, table) {
+        const attribute = merge$2({}, commonAxis, config);
+        const tickWidth = attribute.tick.width ?? 4;
+        let labelWidth = 0;
+        if (attribute.label.visible) {
+            if (attribute.type === 'band') {
+                const domain = attribute.domain;
+                domain.forEach((text) => {
+                    labelWidth = Math.max(labelWidth, table.measureText(text, {
+                        fontSize: attribute.label?.style?.fontSize,
+                        fontFamily: attribute.label?.style?.fontFamily
+                    }).width);
+                });
+            }
+            else {
+                const range = attribute.range;
+                const minNumber = Math.abs(range.min) > 1 ? Math.round(range.min) : range.min;
+                const maxNumber = Math.abs(range.max) > 1 ? Math.round(range.max) : range.max;
+                const minString = formatDecimal(minNumber);
+                const maxString = formatDecimal(maxNumber);
+                [minString, maxString].forEach(text => {
+                    labelWidth = Math.max(labelWidth, table.measureText(text, {
+                        fontSize: attribute.label?.style?.fontSize,
+                        fontFamily: attribute.label?.style?.fontFamily
+                    }).width + 2);
+                });
+            }
+            labelWidth += attribute.label.space ?? 4;
+        }
+        let titleWidth = 0;
+        if (attribute.title.visible && attribute.title.text) {
+            if (attribute.title.autoRotate) {
+                titleWidth =
+                    table.measureText(attribute.title.text, {
+                        fontSize: attribute.title?.style?.fontSize,
+                        fontFamily: attribute.title?.style?.fontFamily
+                    }).height + 2;
+            }
+            else {
+                titleWidth =
+                    table.measureText(attribute.title.text, {
+                        fontSize: attribute.title?.style?.fontSize,
+                        fontFamily: attribute.title?.style?.fontFamily
+                    }).width + 2;
+            }
+            titleWidth += attribute.title.space ?? 4;
+        }
+        return tickWidth + labelWidth + titleWidth;
+    }
+    function formatDecimal(number) {
+        if (typeof number !== 'number') {
+            number = Number(number);
+        }
+        return Number(number.toPrecision(1)).toString();
+    }
+
     function computeColsWidth(table, colStart, colEnd, update) {
         colStart = colStart ?? 0;
         colEnd = colEnd ?? table.colCount - 1;
@@ -42501,13 +42810,19 @@
     }
     function computeColWidth(col, startRow, endRow, table, forceCompute) {
         const { layoutMap, transpose } = table.internalProps;
-        const { width } = layoutMap?.getColumnWidthDefined(col) ?? {};
+        let { width } = layoutMap?.getColumnWidthDefined(col) ?? {};
         if (transpose) {
             if (table.widthMode === 'standard') {
                 if (table.isRowHeader(col, 0) || table.isCornerHeader(col, 0)) {
-                    return Array.isArray(table.defaultHeaderColWidth)
+                    const defaultWidth = Array.isArray(table.defaultHeaderColWidth)
                         ? table.defaultHeaderColWidth[col] ?? table.defaultColWidth
                         : table.defaultHeaderColWidth;
+                    if (defaultWidth === 'auto') {
+                        width = 'auto';
+                    }
+                    else {
+                        return defaultWidth;
+                    }
                 }
                 if (width !== 'auto') {
                     if (typeof width === 'string') {
@@ -42538,7 +42853,10 @@
             else if (width) {
                 return width;
             }
-            return table.getColWidth(col);
+            const defaultWidth = table.getColWidthDefine(col);
+            if (defaultWidth !== 'auto') {
+                return table.getColWidth(col);
+            }
         }
         return computeAutoColWidth(width, col, startRow, endRow, forceCompute, table);
     }
@@ -42560,6 +42878,22 @@
             }
         }
         for (let row = startRow; row <= endRow; row += deltaRow) {
+            if (table.isPivotChart()) {
+                const layout = table.internalProps.layoutMap;
+                const axisConfig = getAxisConfigInPivotChart(col, row, layout);
+                if (axisConfig) {
+                    const axisWidth = computeAxisConpomentWidth(axisConfig, table);
+                    if (typeof axisWidth === 'number') {
+                        maxWidth = Math.max(axisWidth, maxWidth);
+                        continue;
+                    }
+                }
+                else if (layout.isLeftBottomCorner(col, row) ||
+                    layout.isRightTopCorner(col, row) ||
+                    layout.isRightBottomCorner(col, row)) {
+                    continue;
+                }
+            }
             const customWidth = computeCustomRenderWidth(col, row, table);
             if (typeof customWidth === 'number') {
                 maxWidth = Math.max(customWidth, maxWidth);
@@ -43827,7 +44161,7 @@
             }
             proxy.rowStart = direction === 'up' ? proxy.rowStart + count : proxy.rowStart - count;
             proxy.rowEnd = direction === 'up' ? proxy.rowEnd + count : proxy.rowEnd - count;
-            checkFirstRowMerge(distStartRow, proxy);
+            checkFirstRowMerge(syncTopRow, proxy);
             updateRowContent(syncTopRow, syncBottomRow, proxy);
             if (proxy.table.heightMode === 'autoHeight') {
                 updateAutoRow(proxy.bodyLeftCol, proxy.bodyRightCol, syncTopRow, syncBottomRow, proxy.table, direction);
@@ -43863,7 +44197,7 @@
             }
             proxy.rowStart = distStartRow;
             proxy.rowEnd = distEndRow;
-            checkFirstRowMerge(distStartRow, proxy);
+            checkFirstRowMerge(syncTopRow, proxy);
             updateRowContent(syncTopRow, syncBottomRow, proxy);
             console.log('updateAutoRow', distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
             if (proxy.table.heightMode === 'autoHeight') {
@@ -43905,12 +44239,12 @@
     function updateCellGroupPosition(colGroup, direction, proxy) {
         if (direction === 'up') {
             const cellGroup = colGroup.firstChild;
-            proxy.updateCellGroupPosition(cellGroup, colGroup.lastChild.row + 1, colGroup.lastChild.attribute.y + colGroup.lastChild.attribute.height);
+            proxy.updateCellGroupPosition(cellGroup, colGroup.lastChild.row + 1, colGroup.lastChild.attribute.y + proxy.table.getRowHeight(colGroup.lastChild.row));
             colGroup.appendChild(cellGroup);
         }
         else {
             const cellGroup = colGroup.lastChild;
-            proxy.updateCellGroupPosition(cellGroup, colGroup.firstChild.row - 1, colGroup.firstChild.attribute.y - cellGroup.attribute.height);
+            proxy.updateCellGroupPosition(cellGroup, colGroup.firstChild.row - 1, colGroup.firstChild.attribute.y - proxy.table.getRowHeight(cellGroup.row));
             colGroup.insertBefore(cellGroup, colGroup.firstChild);
         }
     }
@@ -44338,11 +44672,15 @@
                     return cellGroup;
                 }
                 const cellGroup = this.table.scenegraph.getCell(col, row, getShadow);
-                cellGroup.row && this.cellCache.set(col, cellGroup);
+                if (cellGroup.col === col && cellGroup.row) {
+                    this.cellCache.set(col, cellGroup);
+                }
                 return cellGroup;
             }
             const cellGroup = this.table.scenegraph.getCell(col, row, getShadow);
-            cellGroup.row && this.cellCache.set(col, cellGroup);
+            if (cellGroup.col === col && cellGroup.row) {
+                this.cellCache.set(col, cellGroup);
+            }
             return cellGroup;
         }
     }
@@ -45501,7 +45839,10 @@
             }
             if (cell && cell.role === 'shadow-cell' && !getShadow) {
                 const range = this.table.getCellRange(col, row);
-                cell = this.getCell(range.start.col, range.start.row);
+                if (range.start.col === col && range.start.row === row) ;
+                else {
+                    cell = this.getCell(range.start.col, range.start.row);
+                }
             }
             return cell || emptyGroup;
         }
@@ -47255,10 +47596,17 @@
                 }
             }
             detaX = Math.ceil(detaX);
-            this.table.scenegraph.updateColWidth(this.columnResize.col, detaX);
             if (this.table.widthMode === 'adaptive' && this.columnResize.col < this.table.colCount - 1) {
+                const rightColWidth = this.table.getColWidth(this.columnResize.col + 1);
+                if (rightColWidth - detaX < 0) {
+                    detaX = rightColWidth;
+                }
+                this.table.scenegraph.updateColWidth(this.columnResize.col, detaX);
                 this.table.scenegraph.updateColWidth(this.columnResize.col + 1, -detaX);
             }
+            else {
+                this.table.scenegraph.updateColWidth(this.columnResize.col, detaX);
+            }
             this.columnResize.x = xInTable;
             this.table.scenegraph.component.updateResizeCol(this.columnResize.col, yInTable);
             if (this.columnResize.col < this.table.frozenColCount &&
@@ -47592,7 +47940,7 @@
 
     function bindMediaClick(table) {
         if (Env.mode === 'browser') {
-            table.listen(TABLE_EVENT_TYPE.CLICK_CELL, (e) => {
+            table.on(TABLE_EVENT_TYPE.CLICK_CELL, (e) => {
                 const { col, row } = e;
                 let type;
                 if (table.internalProps.layoutMap.isHeader(col, row)) {
@@ -47695,7 +48043,7 @@
     }
 
     function bindDrillEvent(table) {
-        table.listen(TABLE_EVENT_TYPE.MOUSEENTER_CELL, (e) => {
+        table.on(TABLE_EVENT_TYPE.MOUSEENTER_CELL, (e) => {
             const { col, row } = e;
             if (col === -1 || row === -1) {
                 return;
@@ -47730,7 +48078,7 @@
         if (!hasSparkLine) {
             return;
         }
-        table.listen(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, (e) => {
+        table.on(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, (e) => {
             const { col, row, x, y } = e;
             const type = table.getBodyColumnType(col, row);
             if (type !== 'sparkline') {
@@ -47738,7 +48086,7 @@
             }
             table.stateManeger.updateSparklineHoverPose(col, row, x, y);
         });
-        table.listen(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, (e) => {
+        table.on(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, (e) => {
             table.stateManeger.updateSparklineHoverPose(-1, -1, 0, 0);
         });
     }
@@ -47961,7 +48309,7 @@
             const hitIcon = eventArgsSet?.eventArgs?.target?.role?.startsWith('icon')
                 ? eventArgsSet.eventArgs.target
                 : undefined;
-            if (!hitIcon) {
+            if (!hitIcon || hitIcon.attribute.interactive === false) {
                 if (e.pointerType === 'touch') {
                     eventManeger.touchEnd = false;
                     eventManeger.touchSetTimeout = setTimeout(() => {
@@ -48167,6 +48515,7 @@
                 const cellsEvent = {
                     ...cellInfo,
                     event: e.nativeEvent,
+                    federatedEvent: e,
                     cells: [],
                     targetIcon: icon
                         ? {
@@ -48540,7 +48889,7 @@
         if (!table.isPivotChart()) {
             return;
         }
-        table.listen(TABLE_EVENT_TYPE.MOUSEENTER_CELL, e => {
+        table.on(TABLE_EVENT_TYPE.MOUSEENTER_CELL, e => {
             const cellGroup = table.scenegraph.getCell(e.col, e.row);
             cellGroup.forEachChildren(child => {
                 if (child.name === 'axis') {
@@ -48550,7 +48899,7 @@
                 }
             });
         });
-        table.listen(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, e => {
+        table.on(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, e => {
             const cellGroup = table.scenegraph.getCell(e.col, e.row);
             cellGroup.forEachChildren(child => {
                 if (child.name === 'axis') {
@@ -48622,7 +48971,7 @@
         }
         bindSelfEvent() {
             const stateManeger = this.table.stateManeger;
-            this.table.listen(TABLE_EVENT_TYPE.ICON_CLICK, iconInfo => {
+            this.table.on(TABLE_EVENT_TYPE.ICON_CLICK, iconInfo => {
                 const { col, row, x, y, funcType, icon } = iconInfo;
                 if (funcType === IconFuncTypeEnum.dropDown) {
                     stateManeger.triggerDropDownMenu(col, row, x, y);
@@ -48640,18 +48989,22 @@
                     this.table.toggleHierarchyState(col, row);
                 }
             });
-            this.table.listen(TABLE_EVENT_TYPE.DROPDOWNMENU_CLICK, () => {
+            this.table.on(TABLE_EVENT_TYPE.DROPDOWNMENU_CLICK, () => {
                 stateManeger.hideMenu();
             });
             if (checkHaveTextStick(this.table)) {
-                this.table.listen(TABLE_EVENT_TYPE.SCROLL, e => {
+                this.table.on(TABLE_EVENT_TYPE.SCROLL, e => {
                     handleTextStick(this.table);
                 });
             }
             bindMediaClick(this.table);
-            this.table.listen(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
-                if (this.table._canResizeColumn(e.col, e.row)) {
-                    this.table.scenegraph.updateAutoColWidth(e.col);
+            this.table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, (e) => {
+                if (e.federatedEvent) {
+                    const eventArgsSet = getCellEventArgsSet(e.federatedEvent);
+                    const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
+                    if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
+                        this.table.scenegraph.updateAutoColWidth(resizeCol.col);
+                    }
                 }
             });
             if (this.table.isPivotTable()) {
@@ -48724,7 +49077,7 @@
             return false;
         }
         dealColumnResize(xInTable, yInTable) {
-            this.table.stateManeger.updateResizeCol(xInTable, xInTable);
+            this.table.stateManeger.updateResizeCol(xInTable, yInTable);
         }
         chechColumnMover(eventArgsSet) {
             const { eventArgs } = eventArgsSet;
@@ -49412,13 +49765,13 @@
         get rootElement() {
             return this._rootElement;
         }
-        dispose() {
+        release() {
             this.unbindFromCell();
             const rootElement = this._rootElement;
             if (rootElement?.parentElement) {
                 rootElement.parentElement.removeChild(rootElement);
             }
-            this._handler.dispose();
+            this._handler.release();
             delete this._rootElement;
         }
         bindToCell(table, col, row, menuInstanceInfo) {
@@ -49985,10 +50338,10 @@
         constructor(table) {
             this._table = table;
         }
-        dispose() {
+        release() {
             this.unbindTooltipElement();
             if (this._tooltipElement) {
-                this._tooltipElement.dispose?.();
+                this._tooltipElement.release?.();
             }
             this._tooltipElement = undefined;
         }
@@ -50140,13 +50493,13 @@
             }
             return false;
         }
-        dispose() {
+        release() {
             this.unbindFromCell();
             const rootElement = this._rootElement;
             if (rootElement?.parentElement) {
                 rootElement.parentElement.removeChild(rootElement);
             }
-            this._handler?.dispose?.();
+            this._handler?.release?.();
             delete this._rootElement;
             delete this._messageElement;
         }
@@ -50379,10 +50732,10 @@
             this._bindTableEvent(table);
             this.confine = confine;
         }
-        dispose() {
+        release() {
             const tooltipInstances = this._tooltipInstances;
             for (const k in tooltipInstances) {
-                tooltipInstances[k]?.dispose?.();
+                tooltipInstances[k]?.release?.();
             }
             delete this._tooltipInstances;
             this._attachInfo = null;
@@ -50438,7 +50791,7 @@
             return cellInRange(info.range, col, row);
         }
         _bindTableEvent(table) {
-            table.listen(TABLE_EVENT_TYPE.MOUSEENTER_CELL, e => {
+            table.on(TABLE_EVENT_TYPE.MOUSEENTER_CELL, e => {
                 if (isMobile()) {
                     return;
                 }
@@ -50491,7 +50844,7 @@
                     }
                 }
             });
-            table.listen(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, e => {
+            table.on(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, e => {
                 if (isMobile()) {
                     return;
                 }
@@ -50512,7 +50865,7 @@
                     this._bindToCell(e.col, e.row);
                 }
             });
-            table.listen(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, e => {
+            table.on(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, e => {
                 if (e.related) {
                     if (this._isBindCell(e.related.col, e.related.row)) {
                         return;
@@ -50520,12 +50873,12 @@
                 }
                 this._unbindFromCell();
             });
-            table.listen(TABLE_EVENT_TYPE.SELECTED_CELL, e => {
+            table.on(TABLE_EVENT_TYPE.SELECTED_CELL, e => {
                 if (this._isBindCell(e.col, e.row)) {
                     this._unbindFromCell();
                 }
             });
-            table.listen(TABLE_EVENT_TYPE.SCROLL, e => {
+            table.on(TABLE_EVENT_TYPE.SCROLL, e => {
                 const info = this._attachInfo;
                 if (info?.tooltipOptions && info?.range?.start) {
                     const { col, row } = info.range.start;
@@ -50557,10 +50910,10 @@
         constructor(table) {
             this._table = table;
         }
-        dispose() {
+        release() {
             this.unbindMenuElement();
             if (this._menuElement) {
-                this._menuElement.dispose();
+                this._menuElement.release();
             }
             this._menuElement = undefined;
         }
@@ -50644,13 +50997,13 @@
         get rootElement() {
             return this._rootElement;
         }
-        dispose() {
+        release() {
             this.unbindFromCell();
             const rootElement = this._rootElement;
             if (rootElement?.parentElement) {
                 rootElement.parentElement.removeChild(rootElement);
             }
-            this._handler.dispose();
+            this._handler.release();
             delete this._rootElement;
         }
         bindToCell(table, col, row, menuInstanceInfo) {
@@ -50843,10 +51196,10 @@
             this._menuInstances = {};
             this._bindTableEvent(table);
         }
-        dispose() {
+        release() {
             const menuInstances = this._menuInstances;
             for (const k in menuInstances) {
-                menuInstances[k].dispose();
+                menuInstances[k].release();
             }
             delete this._menuInstances;
             this._attachInfo = null;
@@ -50893,7 +51246,7 @@
             return instance.pointInMenuElement(x, y);
         }
         _bindTableEvent(table) {
-            table.listen(TABLE_EVENT_TYPE.DROPDOWN_ICON_CLICK, e => {
+            table.on(TABLE_EVENT_TYPE.DROPDOWN_ICON_CLICK, e => {
                 if (this._attachInfo) {
                     if (this._isBindToCell(e.col, e.row)) {
                         this._unbindFromCell();
@@ -50906,10 +51259,10 @@
                     this._bindToCell(e.col, e.row, 'dropdown-menu');
                 }
             });
-            table.listen(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, e => {
+            table.on(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, e => {
                 this._unbindFromCell();
             });
-            table.listen(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, e => {
+            table.on(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, e => {
                 if (table.internalProps.menu?.renderMode === 'html') {
                     const abstractPos = table._getMouseAbstractPoint(e.event, false);
                     let menu = null;
@@ -50981,7 +51334,7 @@
         get input() {
             return this._input;
         }
-        dispose() {
+        release() {
         }
     }
 
@@ -51235,7 +51588,7 @@
                 height: height
             };
         }
-        dispose() {
+        release() {
             this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent);
             this.legendComponent = null;
         }
@@ -51308,7 +51661,7 @@
             }
             return this._titleComponent;
         }
-        dispose() {
+        release() {
             this.table.scenegraph.stage.defaultLayer.removeChild(this._titleComponent);
             this._titleComponent = null;
         }
@@ -51377,7 +51730,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.9.3-alpha.4";
+        version = "0.9.3-alpha.5";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51496,7 +51849,7 @@
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
         }
-        throttleInvalidate = throttle2(this.invalidate.bind(this), 200);
+        throttleInvalidate = throttle2(this.render.bind(this), 200);
         getParentElement() {
             return this.options.parentElement;
         }
@@ -51664,78 +52017,11 @@
             }
         }
         _colWidthDefineToPxWidth(width) {
-            if (isAutoDefine(width)) {
-                return _toPxWidth(this, this._calculateAutoColWidthExpr());
+            if (width === 'auto') {
+                return 0;
             }
             return _toPxWidth(this, width);
         }
-        _calculateAutoColWidthExpr() {
-            const fullWidth = this.internalProps.calcWidthContext.full;
-            let sumMin = 0;
-            const others = [];
-            let autoCount = 0;
-            const hasLimitsOnAuto = [];
-            for (let col = 0; col < this.internalProps.colCount; col++) {
-                const def = this.getColWidthDefine(col);
-                const limits = this._getColWidthLimits(col);
-                if (isAutoDefine(def)) {
-                    if (limits) {
-                        hasLimitsOnAuto.push(limits);
-                        if (limits.min) {
-                            sumMin += limits.min;
-                        }
-                    }
-                    autoCount++;
-                }
-                else {
-                    let expr = def;
-                    if (limits) {
-                        const orgWidth = _toPxWidth(this, expr);
-                        const newWidth = _applyColWidthLimits(limits, orgWidth);
-                        if (orgWidth !== newWidth) {
-                            expr = `${newWidth}px`;
-                        }
-                        sumMin += newWidth;
-                    }
-                    others.push(expr);
-                }
-                if (sumMin > fullWidth) {
-                    return '0px';
-                }
-            }
-            if (hasLimitsOnAuto.length && others.length) {
-                const autoPx = (fullWidth - _toPxWidth(this, `calc(${others.map(c => (typeof c === 'number' ? `${c}px` : c)).join(' + ')})`)) /
-                    autoCount;
-                hasLimitsOnAuto.forEach(limits => {
-                    if (limits.min && autoPx < limits.min) {
-                        others.push(limits.minDef);
-                        autoCount--;
-                    }
-                    else if (limits.max && limits.max < autoPx) {
-                        others.push(limits.maxDef);
-                        autoCount--;
-                    }
-                });
-                if (autoCount <= 0) {
-                    return `${autoPx}px`;
-                }
-            }
-            if (others.length) {
-                const strDefs = [];
-                let num = 0;
-                others.forEach(c => {
-                    if (typeof c === 'number') {
-                        num += c;
-                    }
-                    else {
-                        strDefs.push(c);
-                    }
-                });
-                strDefs.push(`${num}px`);
-                return `calc((100% - (${strDefs.join(' + ')})) / ${autoCount})`;
-            }
-            return `${100 / autoCount}%`;
-        }
         _getColWidthLimits(col) {
             const limit = this.colWidthsLimit[col];
             if (!limit) {
@@ -51825,12 +52111,7 @@
                             : this._adjustColWidth(endCol, this._colWidthDefineToPxWidth(width));
                 }
                 else {
-                    adjustW =
-                        this.isRowHeader(endCol, 0) || this.isCornerHeader(endCol, 0)
-                            ? Array.isArray(this.defaultHeaderColWidth)
-                                ? this.defaultHeaderColWidth[endCol] ?? this.internalProps.defaultColWidth
-                                : this.defaultHeaderColWidth
-                            : this.internalProps.defaultColWidth;
+                    adjustW = this.getColWidth(endCol);
                 }
                 const addWidth = cachedLowerColWidth + adjustW;
                 if (startCol >= 0 && endCol >= 0 && !Number.isNaN(addWidth)) {
@@ -51840,23 +52121,13 @@
             }
             let w = 0;
             for (let col = startCol; col <= endCol; col++) {
-                w +=
-                    this.isRowHeader(col, 0) || this.isCornerHeader(col, 0)
-                        ? Array.isArray(this.defaultHeaderColWidth)
-                            ? this.defaultHeaderColWidth[col] ?? this.internalProps.defaultColWidth
-                            : this.defaultHeaderColWidth
-                        : this.internalProps.defaultColWidth;
+                w += this.getColWidth(col);
             }
             this.colWidthsMap.each(startCol, endCol, (width, col) => {
                 w +=
                     (this.widthMode === 'adaptive' || this.transpose
                         ? Number(width)
-                        : this._adjustColWidth(col, this._colWidthDefineToPxWidth(width))) -
-                        (this.isRowHeader(col, 0) || this.isCornerHeader(col, 0)
-                            ? Array.isArray(this.defaultHeaderColWidth)
-                                ? this.defaultHeaderColWidth[col] ?? this.internalProps.defaultColWidth
-                                : this.defaultHeaderColWidth
-                            : this.internalProps.defaultColWidth);
+                        : this._adjustColWidth(col, this._colWidthDefineToPxWidth(width))) - this.getColWidth(col);
             });
             for (let col = startCol; col <= endCol; col++) {
                 if (this.colWidthsMap.has(col)) {
@@ -52268,7 +52539,7 @@
                 }
             }
         }
-        invalidate() {
+        render() {
             this.scenegraph.renderSceneGraph();
         }
         _toRelativeRect(absoluteRect) {
@@ -52357,24 +52628,27 @@
         getCellOverflowText(col, row) {
             return this.scenegraph.getCellOverflowText(col, row);
         }
-        addDisposable(disposable) {
-            if (!disposable || !disposable.dispose || typeof disposable.dispose !== 'function') {
-                throw new Error('not disposable!');
+        addReleaseObj(releaseObj) {
+            if (!releaseObj || !releaseObj.release || typeof releaseObj.release !== 'function') {
+                throw new Error('not releaseObj!');
             }
-            const disposables = (this.internalProps.disposables = this.internalProps.disposables || []);
-            disposables.push(disposable);
+            const releaseList = (this.internalProps.releaseList = this.internalProps.releaseList || []);
+            releaseList.push(releaseObj);
         }
         dispose() {
+            this.release();
+        }
+        release() {
             const internalProps = this.internalProps;
-            internalProps.tooltipHandler?.dispose?.();
-            internalProps.menuHandler?.dispose?.();
+            internalProps.tooltipHandler?.release?.();
+            internalProps.menuHandler?.release?.();
             IconCache.clearAll();
-            super.dispose?.();
-            internalProps.handler?.dispose?.();
-            internalProps.focusControl?.dispose?.();
-            if (internalProps.disposables) {
-                internalProps.disposables.forEach(disposable => disposable?.dispose?.());
-                internalProps.disposables = null;
+            super.release?.();
+            internalProps.handler?.release?.();
+            internalProps.focusControl?.release?.();
+            if (internalProps.releaseList) {
+                internalProps.releaseList.forEach(releaseObj => releaseObj?.release?.());
+                internalProps.releaseList = null;
             }
             this.scenegraph.stage.release();
             const { parentElement } = internalProps.element;
@@ -52437,11 +52711,12 @@
             internalProps.allowFrozenColCount = options.allowFrozenColCount ?? internalProps.colCount;
             internalProps.limitMaxAutoWidth = options.limitMaxAutoWidth ?? 450;
             this.dataSet = new DataSet();
+            internalProps.legends?.release();
+            internalProps.title?.release();
+            internalProps.layoutMap.release();
             this.scenegraph.clearCells();
             this.stateManeger.initState();
             this._updateSize();
-            this.internalProps.legends?.dispose();
-            this.internalProps.title?.dispose();
             if (options.legends) {
                 internalProps.legends = new TableLegend(options.legends, this);
                 this.scenegraph.tableGroup.setAttributes({
@@ -52682,7 +52957,7 @@
                 this.dataSource.updatePager(this.pagerConf);
                 this.refreshRowColCount();
                 this.scenegraph.createSceneGraph();
-                this.invalidate();
+                this.render();
             }
         }
         get allowFrozenColCount() {
@@ -52705,7 +52980,7 @@
             _setDataSource(this, dataSource);
             this.refreshRowColCount();
             this.scenegraph.createSceneGraph();
-            this.invalidate();
+            this.render();
         }
         get autoWrapText() {
             return this.internalProps.autoWrapText;
@@ -52718,7 +52993,7 @@
             this.options.autoWrapText = autoWrapText;
             if (this.internalProps.layoutMap) {
                 this.refreshHeader();
-                this.invalidate();
+                this.render();
             }
         }
         get theme() {
@@ -52868,7 +53143,7 @@
                 _setRecords(this, records);
             }
             this.scenegraph.createSceneGraph();
-            this.invalidate();
+            this.render();
             console.log('setRecords cost time:', (typeof window !== 'undefined' ? window.performance.now() : 0) - time);
         }
         setRecord(record, col, row) {
@@ -53182,7 +53457,7 @@
                 const top = this.getRowsHeight(0, cellAddr.row - 1);
                 this.scrollTop = Math.min(top - frozenHeight, this.getAllRowsHeight() - drawRange.height);
             }
-            this.invalidate();
+            this.render();
         }
         getCopyValue() {
             const ranges = this.stateManeger.select.ranges;
@@ -53388,6 +53663,12 @@
                 return false;
             });
         }
+        _getActiveChartInstance() {
+            const cellGroup = this.scenegraph.getCell(this.stateManeger.hover?.cellPos?.col, this.stateManeger.hover?.cellPos?.row);
+            return cellGroup?.getChildren()?.[0]?.type === 'chart'
+                ? cellGroup.getChildren()[0].activeChartInstance
+                : null;
+        }
     }
 
     var core = /*#__PURE__*/Object.freeze({
@@ -53522,219 +53803,6 @@
         numberFormat: numberFormat
     });
 
-    function getAxisConfigInPivotChart(col, row, layout) {
-        if (!layout._table.isPivotChart()) {
-            return undefined;
-        }
-        if (layout.indicatorsAsCol) {
-            if (layout.hasTwoIndicatorAxes &&
-                row === layout.columnHeaderLevelCount - 1 &&
-                col >= layout.rowHeaderLevelCount &&
-                col < layout.colCount - layout.rightFrozenColCount) {
-                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, layout.columnHeaderLevelCount - 1);
-                let defaultKey = indicatorKeys[1];
-                if (isArray$3(defaultKey)) {
-                    defaultKey = defaultKey[0];
-                }
-                if (!defaultKey) {
-                    return undefined;
-                }
-                const data = layout.dataset.collectedValues[defaultKey + '_align']
-                    ? layout.dataset.collectedValues[defaultKey + '_align']
-                    : layout.dataset.collectedValues[defaultKey];
-                const index = layout.getRecordIndexByCol(col);
-                const range = data[layout.getColKeysPath()[index][Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]];
-                const axisOption = getAxisOption(col, row, 'top', layout);
-                if (axisOption?.visible === false) {
-                    return;
-                }
-                return merge$2({}, axisOption, {
-                    orient: 'top',
-                    type: 'linear',
-                    range: range,
-                    label: {
-                        flush: true
-                    },
-                    title: {
-                        visible: false
-                    }
-                });
-            }
-            else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
-                col >= layout.rowHeaderLevelCount &&
-                col < layout.colCount - layout.rightFrozenColCount) {
-                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
-                let defaultKey = indicatorKeys[0];
-                if (isArray$3(defaultKey)) {
-                    defaultKey = defaultKey[0];
-                }
-                const data = layout.dataset.collectedValues[defaultKey + '_align']
-                    ? layout.dataset.collectedValues[defaultKey + '_align']
-                    : layout.dataset.collectedValues[defaultKey];
-                const index = layout.getRecordIndexByCol(col);
-                const range = data[layout.getColKeysPath()[index][Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]];
-                let indicatorInfo = null;
-                indicatorKeys.forEach(key => {
-                    const info = layout.getIndicatorInfo(key);
-                    if (info) {
-                        indicatorInfo = info;
-                    }
-                });
-                const axisOption = getAxisOption(col, row, 'bottom', layout);
-                if (axisOption?.visible === false) {
-                    return;
-                }
-                return merge$2({}, axisOption, {
-                    orient: 'bottom',
-                    type: 'linear',
-                    range: range,
-                    label: {
-                        flush: true
-                    },
-                    title: {
-                        text: indicatorInfo?.caption,
-                        autoRotate: true
-                    }
-                });
-            }
-            else if (col === layout.rowHeaderLevelCount - 1 &&
-                row >= layout.columnHeaderLevelCount &&
-                row < layout.rowCount - layout.bottomFrozenRowCount) {
-                let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row)[0];
-                if (isArray$3(rowDimensionKey)) {
-                    rowDimensionKey = rowDimensionKey[0];
-                }
-                const data = layout.dataset.collectedValues[rowDimensionKey];
-                const recordRow = layout.getRecordIndexByRow(row);
-                const rowPath = layout.getRowKeysPath()[recordRow];
-                const domain = data[rowPath[rowPath.length - 1]];
-                const axisOption = getAxisOption(col, row, 'left', layout);
-                if (axisOption?.visible === false) {
-                    return;
-                }
-                return merge$2({}, axisOption, {
-                    orient: 'left',
-                    type: 'band',
-                    data: Array.from(domain).reverse(),
-                    title: {
-                        visible: false
-                    }
-                });
-            }
-        }
-        else {
-            if (col === layout.rowHeaderLevelCount - 1 &&
-                row >= layout.columnHeaderLevelCount &&
-                row < layout.rowCount - layout.bottomFrozenRowCount) {
-                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
-                let defaultKey = indicatorKeys[0];
-                if (isArray$3(defaultKey)) {
-                    defaultKey = defaultKey[0];
-                }
-                const data = layout.dataset.collectedValues[defaultKey + '_align']
-                    ? layout.dataset.collectedValues[defaultKey + '_align']
-                    : layout.dataset.collectedValues[defaultKey];
-                const index = layout.getRecordIndexByRow(row);
-                const range = data[layout.getRowKeysPath()[index][Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)]];
-                let indicatorInfo = null;
-                indicatorKeys.forEach(key => {
-                    const info = layout.getIndicatorInfo(key);
-                    if (info) {
-                        indicatorInfo = info;
-                    }
-                });
-                const axisOption = getAxisOption(col, row, 'left', layout);
-                if (axisOption?.visible === false) {
-                    return;
-                }
-                return merge$2({}, axisOption, {
-                    orient: 'left',
-                    type: 'linear',
-                    range: range,
-                    label: {
-                        flush: true
-                    },
-                    title: {
-                        text: indicatorInfo?.caption,
-                        autoRotate: true
-                    }
-                });
-            }
-            else if (col === layout.colCount - layout.rightFrozenColCount &&
-                row >= layout.columnHeaderLevelCount &&
-                row < layout.rowCount - layout.bottomFrozenRowCount) {
-                const indicatorKeys = layout.getIndicatorKeyInChartSpec(layout.rowHeaderLevelCount - 1, row);
-                let defaultKey = indicatorKeys[1];
-                if (isArray$3(defaultKey)) {
-                    defaultKey = defaultKey[0];
-                }
-                if (!defaultKey) {
-                    return undefined;
-                }
-                const data = layout.dataset.collectedValues[defaultKey + '_align']
-                    ? layout.dataset.collectedValues[defaultKey + '_align']
-                    : layout.dataset.collectedValues[defaultKey];
-                const index = layout.getRecordIndexByRow(row);
-                const range = data[layout.getRowKeysPath()[index][Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)]];
-                const axisOption = getAxisOption(col, row, 'right', layout);
-                if (axisOption?.visible === false) {
-                    return;
-                }
-                return merge$2({}, axisOption, {
-                    orient: 'right',
-                    type: 'linear',
-                    range: range,
-                    label: {
-                        flush: true
-                    },
-                    title: {
-                        visible: false
-                    }
-                });
-            }
-            else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
-                col >= layout.rowHeaderLevelCount &&
-                col < layout.colCount - layout.rightFrozenColCount) {
-                let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
-                if (isArray$3(columnDimensionKey)) {
-                    columnDimensionKey = columnDimensionKey[0];
-                }
-                const data = layout.dataset.collectedValues[columnDimensionKey];
-                const recordCol = layout.getRecordIndexByCol(col);
-                const colPath = layout.getColKeysPath()[recordCol];
-                const domain = data[colPath[colPath.length - 1]];
-                const axisOption = getAxisOption(col, row, 'bottom', layout);
-                if (axisOption?.visible === false) {
-                    return;
-                }
-                return merge$2({}, axisOption, {
-                    orient: 'bottom',
-                    type: 'band',
-                    data: Array.from(domain),
-                    title: {
-                        visible: false
-                    }
-                });
-            }
-        }
-        return undefined;
-    }
-    function getAxisOption(col, row, orient, layout) {
-        const spec = layout.getRawChartSpec(col, row);
-        if (spec && isArray$3(spec.axes)) {
-            const axisOption = spec.axes.find((axis) => {
-                return axis.orient === orient;
-            });
-            if (axisOption) {
-                return axisOption;
-            }
-        }
-        const axisOption = layout._table.pivotChartAxes.find(axisOption => {
-            return axisOption.orient === orient;
-        });
-        return axisOption;
-    }
-
     function getRawChartSpec(col, row, layout) {
         const paths = layout.getCellHeaderPaths(col, row);
         let indicatorObj;
@@ -53768,17 +53836,23 @@
                 if (isArray$3(key)) {
                     key = key[0];
                 }
-                const data = layout.dataset.collectedValues[key + '_align']
-                    ? layout.dataset.collectedValues[key + '_align']
+                const isZeroAlign = checkZeroAlign(col, row, index === 0 ? 'bottom' : 'top', layout);
+                const data = layout.dataset.collectedValues[key + (isZeroAlign ? '_align' : '')]
+                    ? layout.dataset.collectedValues[key + (isZeroAlign ? '_align' : '')]
                     : layout.dataset.collectedValues[key];
                 const range = data[layout.getColKeysPath()[colIndex][Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]];
                 const axisOption = getAxisOption(col, row, index === 0 ? 'bottom' : 'top', layout);
-                axes.push(merge$2({}, axisOption, {
+                if (axisOption?.zero) {
+                    range.min = Math.min(range.min, 0);
+                    range.max = Math.max(range.max, 0);
+                }
+                axes.push(merge$2({
+                    range
+                }, axisOption, {
                     type: 'linear',
                     orient: index === 0 ? 'bottom' : 'top',
                     label: { visible: false },
                     title: { visible: false },
-                    range,
                     seriesIndex: index,
                     height: -1
                 }));
@@ -53792,7 +53866,9 @@
             const rowPath = layout.getRowKeysPath()[recordRow];
             const domain = data[rowPath[rowPath.length - 1]];
             const axisOption = getAxisOption(col, row, 'left', layout);
-            axes.push(merge$2({}, axisOption, {
+            axes.push(merge$2({
+                domain: Array.from(domain)
+            }, axisOption, {
                 type: 'band',
                 orient: 'left',
                 label: { visible: false, space: 0 },
@@ -53800,8 +53876,7 @@
                 tick: { visible: false },
                 subTick: { visible: false },
                 title: { visible: false },
-                width: -1,
-                domain: Array.from(domain)
+                width: -1
             }));
         }
         else {
@@ -53811,17 +53886,23 @@
                 if (isArray$3(key)) {
                     key = key[0];
                 }
-                const data = layout.dataset.collectedValues[key + '_align']
-                    ? layout.dataset.collectedValues[key + '_align']
+                const isZeroAlign = checkZeroAlign(col, row, index === 0 ? 'left' : 'right', layout);
+                const data = layout.dataset.collectedValues[key + (isZeroAlign ? '_align' : '')]
+                    ? layout.dataset.collectedValues[key + (isZeroAlign ? '_align' : '')]
                     : layout.dataset.collectedValues[key];
                 const range = data[layout.getRowKeysPath()[rowIndex][Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)]];
                 const axisOption = getAxisOption(col, row, index === 0 ? 'left' : 'right', layout);
-                axes.push(merge$2({}, axisOption, {
+                if (axisOption?.zero) {
+                    range.min = Math.min(range.min, 0);
+                    range.max = Math.max(range.max, 0);
+                }
+                axes.push(merge$2({
+                    range
+                }, axisOption, {
                     type: 'linear',
                     orient: index === 0 ? 'left' : 'right',
                     label: { visible: false },
                     title: { visible: false },
-                    range,
                     seriesIndex: index,
                     width: -1
                 }));
@@ -53835,7 +53916,9 @@
             const colPath = layout.getColKeysPath()[recordCol];
             const domain = data[colPath[colPath.length - 1]];
             const axisOption = getAxisOption(col, row, 'bottom', layout);
-            axes.push(merge$2({}, axisOption, {
+            axes.push(merge$2({
+                domain: Array.from(domain)
+            }, axisOption, {
                 type: 'band',
                 orient: 'bottom',
                 visible: true,
@@ -53844,8 +53927,7 @@
                 tick: { visible: false },
                 subTick: { visible: false },
                 title: { visible: false },
-                height: -1,
-                domain: Array.from(domain)
+                height: -1
             }));
         }
         return axes;
@@ -53953,6 +54035,24 @@
             }
             return false;
         }
+        isLeftBottomCorner(col, row) {
+            if (col < this.rowHeaderLevelCount && row >= this.rowCount - this.bottomFrozenRowCount) {
+                return true;
+            }
+            return false;
+        }
+        isRightTopCorner(col, row) {
+            if (col >= this.colCount - this.rightFrozenColCount && row < this.columnHeaderLevelCount) {
+                return true;
+            }
+            return false;
+        }
+        isRightBottomCorner(col, row) {
+            if (col >= this.colCount - this.rightFrozenColCount && row >= this.rowCount - this.bottomFrozenRowCount) {
+                return true;
+            }
+            return false;
+        }
         isCornerHeader(col, row) {
             return false;
         }
@@ -54504,6 +54604,13 @@
         getChartDataId(col, row) {
             return getChartDataId(col, row, this);
         }
+        release() {
+            const activeChartInstance = this._table._getActiveChartInstance();
+            activeChartInstance?.release();
+            this.columnObjects.forEach(indicatorObject => {
+                indicatorObject.chartInstance?.release();
+            });
+        }
     }
 
     class ListTable extends BaseTable {
@@ -54554,7 +54661,7 @@
             this.options.columns = columns;
             this.refreshHeader();
             setTimeout(() => {
-                this.invalidate();
+                this.render();
             }, 0);
         }
         get header() {
@@ -54565,7 +54672,7 @@
             this.options.header = header;
             this.refreshHeader();
             setTimeout(() => {
-                this.invalidate();
+                this.render();
             }, 0);
         }
         get transpose() {
@@ -54581,7 +54688,7 @@
                 this.internalProps.layoutMap.transpose = transpose;
                 this.refreshRowColCount();
                 this._resetFrozenColCount();
-                this.invalidate();
+                this.render();
             }
         }
         getCellValue(col, row) {
@@ -54638,9 +54745,9 @@
                     : [];
             this.transpose = options.transpose ?? false;
             this.refreshHeader();
-            if (internalProps.disposables) {
-                internalProps.disposables.forEach(disposable => disposable?.dispose?.());
-                internalProps.disposables = null;
+            if (internalProps.releaseList) {
+                internalProps.releaseList.forEach(releaseObj => releaseObj?.release?.());
+                internalProps.releaseList = null;
             }
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
@@ -54651,7 +54758,7 @@
             else {
                 this._resetFrozenColCount();
                 this.scenegraph.createSceneGraph();
-                this.invalidate();
+                this.render();
             }
             return new Promise(resolve => {
                 setTimeout(resolve, 0);
@@ -54663,7 +54770,7 @@
             const transpose = table.transpose;
             const showHeader = table.showHeader;
             if (internalProps.headerEvents) {
-                internalProps.headerEvents.forEach((id) => table.unlisten(id));
+                internalProps.headerEvents.forEach((id) => table.off(id));
             }
             const layoutMap = (internalProps.layoutMap = new SimpleHeaderLayoutMap(this, internalProps.columns ?? [], showHeader, table.options.hierarchyIndent));
             layoutMap.transpose = transpose;
@@ -55623,6 +55730,24 @@
             }
             return false;
         }
+        isLeftBottomCorner(col, row) {
+            if (col < this.rowHeaderLevelCount && row >= this.rowCount - this.bottomFrozenRowCount) {
+                return true;
+            }
+            return false;
+        }
+        isRightTopCorner(col, row) {
+            if (col >= this.colCount - this.rightFrozenColCount && row < this.columnHeaderLevelCount) {
+                return true;
+            }
+            return false;
+        }
+        isRightBottomCorner(col, row) {
+            if (col >= this.colCount - this.rightFrozenColCount && row >= this.rowCount - this.bottomFrozenRowCount) {
+                return true;
+            }
+            return false;
+        }
         getColumnHeaderRange() {
             return {
                 start: { col: this.rowHeaderLevelCount, row: 0 },
@@ -56420,6 +56545,13 @@
         getChartDataId(col, row) {
             return getChartDataId(col, row, this);
         }
+        release() {
+            const activeChartInstance = this._table._getActiveChartInstance();
+            activeChartInstance?.release();
+            this._indicators.forEach(indicatorObject => {
+                indicatorObject.chartInstance?.release();
+            });
+        }
     }
 
     const EMPTY_HEADER = {
@@ -56934,6 +57066,24 @@
             }
             return false;
         }
+        isLeftBottomCorner(col, row) {
+            if (col < this.rowHeaderLevelCount && row >= this.rowCount - this.bottomFrozenRowCount) {
+                return true;
+            }
+            return false;
+        }
+        isRightTopCorner(col, row) {
+            if (col >= this.colCount - this.rightFrozenColCount && row < this.columnHeaderLevelCount) {
+                return true;
+            }
+            return false;
+        }
+        isRightBottomCorner(col, row) {
+            if (col >= this.colCount - this.rightFrozenColCount && row >= this.rowCount - this.bottomFrozenRowCount) {
+                return true;
+            }
+            return false;
+        }
         isRowHeader(col, row) {
             if (col < this.rowHeaderLevelCount && row >= this.columnHeaderLevelCount) {
                 return true;
@@ -57634,6 +57784,13 @@
             }
             return false;
         }
+        release() {
+            const activeChartInstance = this._table._getActiveChartInstance();
+            activeChartInstance?.release();
+            this._indicatorObjects.forEach(indicatorObject => {
+                indicatorObject.chartInstance?.release();
+            });
+        }
     }
 
     class FlatDataToObjects {
@@ -59143,9 +59300,9 @@
                 this.dataset = new Dataset(internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, options.records);
             }
             this.refreshHeader();
-            if (internalProps.disposables) {
-                internalProps.disposables.forEach(disposable => disposable?.dispose?.());
-                internalProps.disposables = null;
+            if (internalProps.releaseList) {
+                internalProps.releaseList.forEach(releaseObj => releaseObj?.release?.());
+                internalProps.releaseList = null;
             }
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
@@ -59156,7 +59313,7 @@
             else {
                 this._resetFrozenColCount();
                 this.scenegraph.createSceneGraph();
-                this.invalidate();
+                this.render();
             }
             this.pivotSortState = [];
             if (options.pivotSortState) {
@@ -59169,7 +59326,7 @@
         refreshHeader() {
             const internalProps = this.internalProps;
             if (internalProps.headerEvents) {
-                internalProps.headerEvents.forEach((id) => this.unlisten(id));
+                internalProps.headerEvents.forEach((id) => this.off(id));
             }
             const records = this.options.records ?? this.internalProps.records;
             if (this.options.enableDataAnalysis) {
@@ -59336,7 +59493,7 @@
             this.internalProps.dataConfig.sortRules = sortRules;
             this.dataset.updateSortRules(sortRules);
             this.internalProps.layoutMap.updateDataset(this.dataset);
-            this.invalidate();
+            this.render();
         }
         updatePivotSortState(pivotSortStateConfig) {
             for (let i = 0; i < pivotSortStateConfig.length; i++) {
@@ -59581,9 +59738,9 @@
                 this.dataset = new Dataset(this.internalProps.dataConfig, rowKeys, columnKeys, indicatorKeys, options.records ?? this.internalProps.records, options.columnTree, options.rowTree);
             }
             this.refreshHeader();
-            if (internalProps.disposables) {
-                internalProps.disposables.forEach(disposable => disposable?.dispose?.());
-                internalProps.disposables = null;
+            if (internalProps.releaseList) {
+                internalProps.releaseList.forEach(releaseObj => releaseObj?.release?.());
+                internalProps.releaseList = null;
             }
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
@@ -59594,7 +59751,7 @@
             else {
                 this._resetFrozenColCount();
                 this.scenegraph.createSceneGraph();
-                this.invalidate();
+                this.render();
             }
             return new Promise(resolve => {
                 setTimeout(resolve, 0);
@@ -59603,7 +59760,7 @@
         refreshHeader() {
             const internalProps = this.internalProps;
             if (internalProps.headerEvents) {
-                internalProps.headerEvents.forEach((id) => this.unlisten(id));
+                internalProps.headerEvents.forEach((id) => this.off(id));
             }
             internalProps.layoutMap = new PivotLayoutMap(this, this.dataset);
             for (let col = 0; col < internalProps.layoutMap.columnWidths.length; col++) {
@@ -59718,7 +59875,7 @@
             this.internalProps.dataConfig.sortRules = sortRules;
             this.dataset.updateSortRules(sortRules);
             this.internalProps.layoutMap.updateDataset(this.dataset);
-            this.invalidate();
+            this.render();
         }
         updatePivotSortState(pivotSortStateConfig) {
             for (let i = 0; i < pivotSortStateConfig.length; i++) {
@@ -60036,22 +60193,26 @@
                 }
             });
         }
-        _getActiveChartInstance() {
-            const cellGroup = this.scenegraph.getCell(this.stateManeger.hover?.cellPos?.col, this.stateManeger.hover?.cellPos?.row);
-            return cellGroup?.getChildren()?.[0]?.type === 'chart'
-                ? cellGroup.getChildren()[0].activeChartInstance
-                : null;
-        }
-        listenChart(type, listener) {
-            this._chartEventMap[type] = listener;
+        onVChartEvent(type, query, callback) {
+            if (query) {
+                this._chartEventMap[type] = { callback, query };
+            }
+            else {
+                this._chartEventMap[type] = { callback };
+            }
         }
-        unlistenChart(type) {
+        offVChartEvent(type) {
             delete this._chartEventMap[type];
         }
         _bindChartEvent(activeChartInstance) {
             if (activeChartInstance) {
                 for (const key in this._chartEventMap) {
-                    activeChartInstance.on(key, this._chartEventMap[key]);
+                    if (this._chartEventMap[key].query) {
+                        activeChartInstance.on(key, this._chartEventMap[key].query, this._chartEventMap[key].callback);
+                    }
+                    else {
+                        activeChartInstance.on(key, this._chartEventMap[key].callback);
+                    }
                 }
             }
         }
@@ -60060,7 +60221,7 @@
             this.dataset.updateFilterRules(filterRules);
             clearChartCacheImage(this.scenegraph);
             updateChartData(this.scenegraph);
-            this.invalidate();
+            this.render();
         }
         setLegendSelected(selectedData) {
             this.internalProps.legends.legendComponent.setSelected(selectedData);
@@ -60098,7 +60259,7 @@
                 });
                 chartInstance.updateDataSync(dataId, data);
                 position = chartInstance.convertDatumToPosition(datum);
-                this.invalidate();
+                this.render();
             }
             return position
                 ? { x: Math.round(position.x + cellPosition.bounds.x1), y: Math.round(position.y + cellPosition.bounds.y1) }
@@ -60732,7 +60893,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.9.3-alpha.4";
+    const version = "0.9.3-alpha.5";
     function getIcons() {
         return get$1();
     }