@visactor/vtable 0.9.3-alpha.3 → 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;
         }
@@ -36525,13 +36529,13 @@
             this.table = table;
             this.width = width;
             this.height = height;
-            this.option = merge$2({}, option, commonAxis);
+            this.option = merge$2({}, commonAxis, option);
             this.orient = option.orient ?? 'left';
             this.visible = option.visible ?? true;
             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)) {
@@ -41643,7 +41646,7 @@
                     renderCanvas: params.canvas,
                     mode: 'desktop-browser',
                     canvasControled: false,
-                    viewBox: params.viewBox,
+                    viewBox: { x1: 0, x2: 0, y1: 0, y2: 0 },
                     interactive: false,
                     animation: false
                 });
@@ -41655,7 +41658,7 @@
         }
         activate(table) {
             this.active = true;
-            const { x1, y1, x2, y2 } = this.attribute.viewBox;
+            const { x1, y1, x2, y2 } = this.getViewBox();
             const tableBound = table.scenegraph.tableGroup.globalAABBBounds;
             const bodyBound = new Bounds();
             bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
@@ -41723,6 +41726,17 @@
         updateData(data) {
             this.attribute.data = data;
         }
+        getViewBox() {
+            const cellGroup = this.parent;
+            const padding = this.attribute.cellPadding;
+            const table = this.stage.table;
+            return {
+                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
+                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
+                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
+                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
+            };
+        }
     }
 
     const ChartRender = Symbol.for('ChartRender');
@@ -41731,7 +41745,8 @@
         numberType = CHART_NUMBER_TYPE;
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
             const groupAttribute = getTheme(chart, params?.theme).group;
-            const { dataId, data, viewBox } = chart.attribute;
+            const { dataId, data } = chart.attribute;
+            const viewBox = chart.getViewBox();
             const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
             const { chartInstance, active, cacheCanvas, activeChartInstance } = chart;
             if (!active && cacheCanvas) {
@@ -42403,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;
@@ -42489,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') {
@@ -42526,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);
     }
@@ -42548,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);
@@ -42697,7 +43043,7 @@
     });
     function computeRowsHeight(table, rowStart, rowEnd) {
         const time = typeof window !== 'undefined' ? window.performance.now() : 0;
-        if (table.heightMode === 'autoHeight') {
+        if (table.heightMode === 'autoHeight' || table.heightMode === 'adaptive') {
             rowStart = rowStart ?? 0;
             rowEnd = rowEnd ?? table.rowCount - 1;
             if (rowStart === 0 && rowEnd === table.rowCount - 1) {
@@ -42738,7 +43084,7 @@
                 }
             }
         }
-        else if (table.heightMode === 'adaptive') {
+        if (table.heightMode === 'adaptive') {
             table._clearRowRangeHeightsMap();
             const totalDrawHeight = table.tableNoFrameHeight - table.getFrozenRowsHeight() - table.getBottomFrozenRowsHeight();
             let actualHeight = 0;
@@ -42762,6 +43108,17 @@
     }
     function computeRowHeight(row, startCol, endCol, table) {
         let maxHeight = 0;
+        if (table.isPivotChart() && row >= table.columnHeaderLevelCount) {
+            if (table.internalProps.layoutMap.indicatorsAsCol) {
+                const optimunHeight = table.internalProps.layoutMap.getOptimunHeightForChart(row);
+                if (optimunHeight > 0) {
+                    return optimunHeight;
+                }
+            }
+            else {
+                return table.getRowHeight(row);
+            }
+        }
         for (let col = startCol; col <= endCol; col++) {
             const customHeight = computeCustomRenderHeight(col, row, table);
             if (typeof customHeight === 'number') {
@@ -42972,12 +43329,6 @@
             dataId,
             data: table.getCellValue(col, row),
             cellPadding: padding,
-            viewBox: {
-                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
-                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + width - padding[1] + table.scrollLeft),
-                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
-                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + height - padding[2] + table.scrollTop)
-            },
             axes: table.internalProps.layoutMap.getChartAxes(col, row)
         });
         cellGroup.appendChild(chartGroup);
@@ -43810,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);
@@ -43846,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') {
@@ -43888,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);
         }
     }
@@ -44005,6 +44356,10 @@
         cellCache = new Map();
         constructor(table) {
             this.table = table;
+            if (this.table.isPivotChart()) {
+                this.rowLimit = 100;
+                this.colLimit = 100;
+            }
             if (this.table.internalProps.transpose) {
                 this.mode = 'row';
             }
@@ -44317,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;
         }
     }
@@ -44931,12 +45290,6 @@
                         node.cacheCanvas = null;
                         node.setAttribute('width', Math.ceil(width - node.attribute.cellPadding[3] - node.attribute.cellPadding[1]));
                         node.setAttribute('height', Math.ceil(height - node.attribute.cellPadding[0] - node.attribute.cellPadding[2]));
-                        node.setAttribute('viewBox', {
-                            x1: Math.ceil(cellNode.globalAABBBounds.x1 + node.attribute.cellPadding[3] + scenegraph.table.scrollLeft),
-                            x2: Math.ceil(cellNode.globalAABBBounds.x1 + width - node.attribute.cellPadding[1] + scenegraph.table.scrollLeft),
-                            y1: Math.ceil(cellNode.globalAABBBounds.y1 + node.attribute.cellPadding[0] + scenegraph.table.scrollTop),
-                            y2: Math.ceil(cellNode.globalAABBBounds.y1 + height - node.attribute.cellPadding[2] + scenegraph.table.scrollTop)
-                        });
                     }
                 });
             });
@@ -45486,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;
         }
@@ -47240,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 &&
@@ -47577,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)) {
@@ -47680,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;
@@ -47715,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') {
@@ -47723,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);
         });
     }
@@ -47946,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(() => {
@@ -48152,6 +48515,7 @@
                 const cellsEvent = {
                     ...cellInfo,
                     event: e.nativeEvent,
+                    federatedEvent: e,
                     cells: [],
                     targetIcon: icon
                         ? {
@@ -48525,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') {
@@ -48535,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') {
@@ -48607,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);
@@ -48625,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()) {
@@ -48709,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;
@@ -49397,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) {
@@ -49970,10 +50338,10 @@
         constructor(table) {
             this._table = table;
         }
-        dispose() {
+        release() {
             this.unbindTooltipElement();
             if (this._tooltipElement) {
-                this._tooltipElement.dispose?.();
+                this._tooltipElement.release?.();
             }
             this._tooltipElement = undefined;
         }
@@ -50125,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;
         }
@@ -50364,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;
@@ -50423,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;
                 }
@@ -50476,7 +50844,7 @@
                     }
                 }
             });
-            table.listen(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, e => {
+            table.on(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, e => {
                 if (isMobile()) {
                     return;
                 }
@@ -50497,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;
@@ -50505,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;
@@ -50542,10 +50910,10 @@
         constructor(table) {
             this._table = table;
         }
-        dispose() {
+        release() {
             this.unbindMenuElement();
             if (this._menuElement) {
-                this._menuElement.dispose();
+                this._menuElement.release();
             }
             this._menuElement = undefined;
         }
@@ -50629,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) {
@@ -50828,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;
@@ -50878,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();
@@ -50891,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;
@@ -50966,7 +51334,7 @@
         get input() {
             return this._input;
         }
-        dispose() {
+        release() {
         }
     }
 
@@ -51166,11 +51534,11 @@
             });
             if (this.orient === 'left') {
                 this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);
-                this.table.tableX = Math.ceil(width);
+                this.table.tableX += Math.ceil(width);
             }
             else if (this.orient === 'top') {
                 this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height);
-                this.table.tableY = Math.ceil(height);
+                this.table.tableY += Math.ceil(height);
             }
             else if (this.orient === 'right') {
                 this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);
@@ -51220,7 +51588,8 @@
                 height: height
             };
         }
-        dispose() {
+        release() {
+            this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent);
             this.legendComponent = null;
         }
     }
@@ -51267,11 +51636,11 @@
             }
             if (this._titleOption.orient === 'left') {
                 this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);
-                this.table.tableX = Math.ceil(width);
+                this.table.tableX += Math.ceil(width);
             }
             else if (this._titleOption.orient === 'top') {
                 this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height);
-                this.table.tableY = Math.ceil(height);
+                this.table.tableY += Math.ceil(height);
             }
             else if (this._titleOption.orient === 'right') {
                 this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);
@@ -51292,7 +51661,8 @@
             }
             return this._titleComponent;
         }
-        dispose() {
+        release() {
+            this.table.scenegraph.stage.defaultLayer.removeChild(this._titleComponent);
             this._titleComponent = null;
         }
         _getTitleAttrs() {
@@ -51360,7 +51730,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.9.3-alpha.3";
+        version = "0.9.3-alpha.5";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51479,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;
         }
@@ -51647,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) {
@@ -51808,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)) {
@@ -51823,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)) {
@@ -52251,7 +52539,7 @@
                 }
             }
         }
-        invalidate() {
+        render() {
             this.scenegraph.renderSceneGraph();
         }
         _toRelativeRect(absoluteRect) {
@@ -52340,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;
@@ -52420,8 +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();
             if (options.legends) {
                 internalProps.legends = new TableLegend(options.legends, this);
                 this.scenegraph.tableGroup.setAttributes({
@@ -52662,7 +52957,7 @@
                 this.dataSource.updatePager(this.pagerConf);
                 this.refreshRowColCount();
                 this.scenegraph.createSceneGraph();
-                this.invalidate();
+                this.render();
             }
         }
         get allowFrozenColCount() {
@@ -52675,7 +52970,7 @@
             return this.internalProps.layoutMap.columnHeaderLevelCount;
         }
         get records() {
-            return this.internalProps.records || null;
+            return this.internalProps.records;
         }
         get dataSource() {
             return this.internalProps.dataSource;
@@ -52685,7 +52980,7 @@
             _setDataSource(this, dataSource);
             this.refreshRowColCount();
             this.scenegraph.createSceneGraph();
-            this.invalidate();
+            this.render();
         }
         get autoWrapText() {
             return this.internalProps.autoWrapText;
@@ -52698,7 +52993,7 @@
             this.options.autoWrapText = autoWrapText;
             if (this.internalProps.layoutMap) {
                 this.refreshHeader();
-                this.invalidate();
+                this.render();
             }
         }
         get theme() {
@@ -52848,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) {
@@ -53162,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;
@@ -53368,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({
@@ -53535,20 +53836,25 @@
                 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 = layout._table.pivotChartAxes.find(axisOption => {
-                    return axisOption.orient === (index === 0 ? 'bottom' : 'top');
-                });
-                axes.push(merge$2({}, axisOption, {
+                const axisOption = getAxisOption(col, row, index === 0 ? 'bottom' : 'top', layout);
+                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
+                    seriesIndex: index,
+                    height: -1
                 }));
             });
             let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, col)[0];
@@ -53559,10 +53865,10 @@
             const recordRow = layout.getRecordIndexByRow(row);
             const rowPath = layout.getRowKeysPath()[recordRow];
             const domain = data[rowPath[rowPath.length - 1]];
-            const axisOption = layout._table.pivotChartAxes.find(axisOption => {
-                return axisOption.orient === 'left';
-            });
-            axes.push(merge$2({}, axisOption, {
+            const axisOption = getAxisOption(col, row, 'left', layout);
+            axes.push(merge$2({
+                domain: Array.from(domain)
+            }, axisOption, {
                 type: 'band',
                 orient: 'left',
                 label: { visible: false, space: 0 },
@@ -53570,8 +53876,7 @@
                 tick: { visible: false },
                 subTick: { visible: false },
                 title: { visible: false },
-                width: -1,
-                domain: Array.from(domain)
+                width: -1
             }));
         }
         else {
@@ -53581,20 +53886,25 @@
                 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 = layout._table.pivotChartAxes.find(axisOption => {
-                    return axisOption.orient === (index === 0 ? 'left' : 'right');
-                });
-                axes.push(merge$2({}, axisOption, {
+                const axisOption = getAxisOption(col, row, index === 0 ? 'left' : 'right', layout);
+                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
+                    seriesIndex: index,
+                    width: -1
                 }));
             });
             let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
@@ -53605,10 +53915,10 @@
             const recordCol = layout.getRecordIndexByCol(col);
             const colPath = layout.getColKeysPath()[recordCol];
             const domain = data[colPath[colPath.length - 1]];
-            const axisOption = layout._table.pivotChartAxes.find(axisOption => {
-                return axisOption.orient === 'bottom';
-            });
-            axes.push(merge$2({}, axisOption, {
+            const axisOption = getAxisOption(col, row, 'bottom', layout);
+            axes.push(merge$2({
+                domain: Array.from(domain)
+            }, axisOption, {
                 type: 'band',
                 orient: 'bottom',
                 visible: true,
@@ -53617,8 +53927,7 @@
                 tick: { visible: false },
                 subTick: { visible: false },
                 title: { visible: false },
-                height: -1,
-                domain: Array.from(domain)
+                height: -1
             }));
         }
         return axes;
@@ -53726,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;
         }
@@ -54277,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 {
@@ -54327,7 +54661,7 @@
             this.options.columns = columns;
             this.refreshHeader();
             setTimeout(() => {
-                this.invalidate();
+                this.render();
             }, 0);
         }
         get header() {
@@ -54338,7 +54672,7 @@
             this.options.header = header;
             this.refreshHeader();
             setTimeout(() => {
-                this.invalidate();
+                this.render();
             }, 0);
         }
         get transpose() {
@@ -54354,7 +54688,7 @@
                 this.internalProps.layoutMap.transpose = transpose;
                 this.refreshRowColCount();
                 this._resetFrozenColCount();
-                this.invalidate();
+                this.render();
             }
         }
         getCellValue(col, row) {
@@ -54411,11 +54745,10 @@
                     : [];
             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;
             }
-            this._updateSize();
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
             }
@@ -54425,7 +54758,7 @@
             else {
                 this._resetFrozenColCount();
                 this.scenegraph.createSceneGraph();
-                this.invalidate();
+                this.render();
             }
             return new Promise(resolve => {
                 setTimeout(resolve, 0);
@@ -54437,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;
@@ -54526,8 +54859,8 @@
         }
         getCellAddress(findTargetRecord, field) {
             let targetRecordIndex;
-            for (let i = 0; i < this.records.length; i++) {
-                const record = this.records[i];
+            for (let i = 0; i < this.internalProps.records.length; i++) {
+                const record = this.internalProps.records[i];
                 if (typeof findTargetRecord === 'function') {
                     if (findTargetRecord(record)) {
                         targetRecordIndex = i;
@@ -55397,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 },
@@ -56194,216 +56545,13 @@
         getChartDataId(col, row) {
             return getChartDataId(col, row, this);
         }
-    }
-
-    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 = layout._table.pivotChartAxes.find(axisOption => {
-                    return axisOption.orient === 'top';
-                });
-                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 = layout._table.pivotChartAxes.find(axisOption => {
-                    return axisOption.orient === 'bottom';
-                });
-                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.rowHeaderLevelCount &&
-                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 = layout._table.pivotChartAxes.find(axisOption => {
-                    return axisOption.orient === 'left';
-                });
-                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 = layout._table.pivotChartAxes.find(axisOption => {
-                    return axisOption.orient === 'left';
-                });
-                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 = layout._table.pivotChartAxes.find(axisOption => {
-                    return axisOption.orient === 'right';
-                });
-                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 = layout._table.pivotChartAxes.find(axisOption => {
-                    return axisOption.orient === 'bottom';
-                });
-                if (axisOption?.visible === false) {
-                    return;
-                }
-                return merge$2({}, axisOption, {
-                    orient: 'bottom',
-                    type: 'band',
-                    data: Array.from(domain),
-                    title: {
-                        visible: false
-                    }
-                });
-            }
+        release() {
+            const activeChartInstance = this._table._getActiveChartInstance();
+            activeChartInstance?.release();
+            this._indicators.forEach(indicatorObject => {
+                indicatorObject.chartInstance?.release();
+            });
         }
-        return undefined;
     }
 
     const EMPTY_HEADER = {
@@ -56918,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;
@@ -57530,6 +57696,23 @@
             const barWidth = this._chartItemSpanSize || 25;
             return (collectedValues?.length ?? 0) * (barWidth + barWidth / 3);
         }
+        getOptimunHeightForChart(row) {
+            const path = this.getCellHeaderPaths(this.rowHeaderLevelCount, row).rowHeaderPaths;
+            let collectedValues;
+            for (const key in this.dataset.collectValuesBy) {
+                if (this.dataset.collectValuesBy[key].type === 'yField' && !this.dataset.collectValuesBy[key].range) {
+                    collectedValues =
+                        this.dataset.collectedValues[key][path
+                            .map(pathObj => {
+                            return pathObj.value;
+                        })
+                            .join(this.dataset.stringJoinChar)];
+                    break;
+                }
+            }
+            const barWidth = this._chartItemSpanSize || 25;
+            return (collectedValues?.length ?? 0) * (barWidth + barWidth / 3);
+        }
         getIndicatorKeyInChartSpec(_col, _row) {
             const chartSpec = this.getRawChartSpec(_col, _row);
             const indicatorKeys = [];
@@ -57601,6 +57784,13 @@
             }
             return false;
         }
+        release() {
+            const activeChartInstance = this._table._getActiveChartInstance();
+            activeChartInstance?.release();
+            this._indicatorObjects.forEach(indicatorObject => {
+                indicatorObject.chartInstance?.release();
+            });
+        }
     }
 
     class FlatDataToObjects {
@@ -58310,7 +58500,7 @@
             if (records) {
                 this.records = records;
                 const t0 = typeof window !== 'undefined' ? window.performance.now() : 0;
-                this.setRecords(records);
+                this.setRecords();
                 this.processCollectedValuesWithSumBy();
                 this.processCollectedValuesWithSortBy();
                 const t1 = typeof window !== 'undefined' ? window.performance.now() : 0;
@@ -58355,7 +58545,7 @@
             this.registerAggregator(AggregationType.MIN, MinAggregator);
             this.registerAggregator(AggregationType.AVG, AvgAggregator);
         }
-        setRecords(records) {
+        setRecords() {
             this.processRecords();
         }
         processCollectedValuesWithSumBy() {
@@ -58389,10 +58579,22 @@
             if (this.dataConfig?.filterRules?.length >= 1) {
                 isNeedFilter = true;
             }
-            for (let i = 0, len = this.records.length; i < len; i++) {
-                const record = this.records[i];
-                if (!isNeedFilter || this.filterRecord(record)) {
-                    this.processRecord(record);
+            if (Array.isArray(this.records)) {
+                for (let i = 0, len = this.records.length; i < len; i++) {
+                    const record = this.records[i];
+                    if (!isNeedFilter || this.filterRecord(record)) {
+                        this.processRecord(record);
+                    }
+                }
+            }
+            else {
+                for (const key in this.records) {
+                    for (let i = 0, len = this.records[key].length; i < len; i++) {
+                        const record = this.records[key][i];
+                        if (!isNeedFilter || this.filterRecord(record)) {
+                            this.processRecord(record, key);
+                        }
+                    }
                 }
             }
             this.rowFlatKeys = {};
@@ -58416,7 +58618,7 @@
             }
             return isReserved;
         }
-        processRecord(record) {
+        processRecord(record, assignedIndicatorKey) {
             this.derivedFieldRules?.forEach((derivedFieldRule, i) => {
                 record[derivedFieldRule.fieldName] = derivedFieldRule.derivedFunc(record);
             });
@@ -58496,7 +58698,10 @@
                     if (!this.tree[flatRowKey]?.[flatColKey]?.[i]) {
                         this.tree[flatRowKey][flatColKey][i] = new this.aggregators[aggRule?.aggregationType ?? AggregationType.SUM](aggRule?.field ?? this.indicatorKeys[i], aggRule?.formatFun);
                     }
-                    if (aggRule?.field) {
+                    if (assignedIndicatorKey) {
+                        this.indicatorKeys[i] === assignedIndicatorKey && this.tree[flatRowKey]?.[flatColKey]?.[i].push(record);
+                    }
+                    else if (aggRule?.field) {
                         if (typeof aggRule?.field === 'string') {
                             isValid$1(record[aggRule?.field]) && this.tree[flatRowKey]?.[flatColKey]?.[i].push(record);
                         }
@@ -59095,11 +59300,10 @@
                 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;
             }
-            this._updateSize();
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
             }
@@ -59109,7 +59313,7 @@
             else {
                 this._resetFrozenColCount();
                 this.scenegraph.createSceneGraph();
-                this.invalidate();
+                this.render();
             }
             this.pivotSortState = [];
             if (options.pivotSortState) {
@@ -59122,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) {
@@ -59289,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++) {
@@ -59321,10 +59525,10 @@
             if (moveContext) {
                 if (moveContext.moveType === 'column') {
                     if (this.options.records?.[0]?.constructor === Array) {
-                        for (let row = 0; row < this.records.length; row++) {
-                            const sourceColumns = this.records[row].splice(moveContext.sourceIndex - this.rowHeaderLevelCount, moveContext.moveSize);
+                        for (let row = 0; row < this.internalProps.records.length; row++) {
+                            const sourceColumns = this.internalProps.records[row].splice(moveContext.sourceIndex - this.rowHeaderLevelCount, moveContext.moveSize);
                             sourceColumns.unshift(moveContext.targetIndex - this.rowHeaderLevelCount, 0);
-                            Array.prototype.splice.apply(this.records[row], sourceColumns);
+                            Array.prototype.splice.apply(this.internalProps.records[row], sourceColumns);
                         }
                     }
                     this.colWidthsMap.adjustOrder(moveContext.sourceIndex, moveContext.targetIndex, moveContext.moveSize);
@@ -59340,9 +59544,9 @@
                 }
                 else if (moveContext.moveType === 'row') {
                     if (this.options.records?.[0]?.constructor === Array) {
-                        const sourceRows = this.records.splice(moveContext.sourceIndex - this.columnHeaderLevelCount, moveContext.moveSize);
+                        const sourceRows = this.internalProps.records.splice(moveContext.sourceIndex - this.columnHeaderLevelCount, moveContext.moveSize);
                         sourceRows.unshift(moveContext.targetIndex - this.columnHeaderLevelCount, 0);
-                        Array.prototype.splice.apply(this.records, sourceRows);
+                        Array.prototype.splice.apply(this.internalProps.records, sourceRows);
                     }
                     this.rowHeightsMap.adjustOrder(moveContext.sourceIndex, moveContext.targetIndex, moveContext.moveSize);
                 }
@@ -59424,9 +59628,8 @@
             }
             this.setCustomStateNameToSpec();
             this.internalProps.dataConfig = { isPivotChart: true };
-            this.internalProps.enableDataAnalysis = true;
             this._axes = isArray$3(options.axes) ? options.axes : [];
-            if (this.internalProps.enableDataAnalysis && (options.rows || options.columns)) {
+            if (options.rows || options.columns) {
                 const rowKeys = options.rows.reduce((keys, rowObj) => {
                     if (typeof rowObj === 'string') {
                         keys.push(rowObj);
@@ -59502,8 +59705,7 @@
             super.updateOption(options);
             this.setCustomStateNameToSpec();
             internalProps.dataConfig = {};
-            this.internalProps.enableDataAnalysis = true;
-            if (this.internalProps.enableDataAnalysis && (options.rows || options.columns)) {
+            if (options.rows || options.columns) {
                 const rowKeys = options.rows.reduce((keys, rowObj) => {
                     if (typeof rowObj === 'string') {
                         keys.push(rowObj);
@@ -59536,11 +59738,10 @@
                 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;
             }
-            this._updateSize();
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
             }
@@ -59550,7 +59751,7 @@
             else {
                 this._resetFrozenColCount();
                 this.scenegraph.createSceneGraph();
-                this.invalidate();
+                this.render();
             }
             return new Promise(resolve => {
                 setTimeout(resolve, 0);
@@ -59559,11 +59760,9 @@
         refreshHeader() {
             const internalProps = this.internalProps;
             if (internalProps.headerEvents) {
-                internalProps.headerEvents.forEach((id) => this.unlisten(id));
-            }
-            if (this.internalProps.enableDataAnalysis) {
-                internalProps.layoutMap = new PivotLayoutMap(this, this.dataset);
+                internalProps.headerEvents.forEach((id) => this.off(id));
             }
+            internalProps.layoutMap = new PivotLayoutMap(this, this.dataset);
             for (let col = 0; col < internalProps.layoutMap.columnWidths.length; col++) {
                 const { width, minWidth, maxWidth } = internalProps.layoutMap.columnWidths?.[col] ?? {};
                 if (width && ((typeof width === 'string' && width !== 'auto') || (typeof width === 'number' && width > 0))) {
@@ -59676,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++) {
@@ -59708,10 +59907,10 @@
             if (moveContext) {
                 if (moveContext.moveType === 'column') {
                     if (this.options.records?.[0]?.constructor === Array) {
-                        for (let row = 0; row < this.records.length; row++) {
-                            const sourceColumns = this.records[row].splice(moveContext.sourceIndex - this.rowHeaderLevelCount, moveContext.moveSize);
+                        for (let row = 0; row < this.internalProps.records.length; row++) {
+                            const sourceColumns = this.internalProps.records[row].splice(moveContext.sourceIndex - this.rowHeaderLevelCount, moveContext.moveSize);
                             sourceColumns.unshift(moveContext.targetIndex - this.rowHeaderLevelCount, 0);
-                            Array.prototype.splice.apply(this.records[row], sourceColumns);
+                            Array.prototype.splice.apply(this.internalProps.records[row], sourceColumns);
                         }
                     }
                     this.colWidthsMap.adjustOrder(moveContext.sourceIndex, moveContext.targetIndex, moveContext.moveSize);
@@ -59727,9 +59926,9 @@
                 }
                 else if (moveContext.moveType === 'row') {
                     if (this.options.records?.[0]?.constructor === Array) {
-                        const sourceRows = this.records.splice(moveContext.sourceIndex - this.columnHeaderLevelCount, moveContext.moveSize);
+                        const sourceRows = this.internalProps.records.splice(moveContext.sourceIndex - this.columnHeaderLevelCount, moveContext.moveSize);
                         sourceRows.unshift(moveContext.targetIndex - this.columnHeaderLevelCount, 0);
-                        Array.prototype.splice.apply(this.records, sourceRows);
+                        Array.prototype.splice.apply(this.internalProps.records, sourceRows);
                     }
                     this.rowHeightsMap.adjustOrder(moveContext.sourceIndex, moveContext.targetIndex, moveContext.moveSize);
                 }
@@ -59940,9 +60139,12 @@
                         });
                     }
                     else {
+                        const field = this.options.indicatorsAsCol === false
+                            ? indicator.chartSpec.yField
+                            : indicator.chartSpec.xField;
                         aggregationRules.push({
                             indicatorKey: indicator.indicatorKey,
-                            field: indicator.indicatorKey,
+                            field: field ?? indicator.indicatorKey,
                             aggregationType: AggregationType.RECORD
                         });
                     }
@@ -59991,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);
+                    }
                 }
             }
         }
@@ -60015,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);
@@ -60029,7 +60235,8 @@
             const chartNode = cellGroup?.getChildren()?.[0];
             if (chartNode.attribute.chartInstance) {
                 const chartInstance = chartNode.attribute.chartInstance;
-                const { dataId, data, viewBox, axes } = chartNode.attribute;
+                const { dataId, data, axes } = chartNode.attribute;
+                const viewBox = chartNode.getViewBox();
                 axes.forEach((axis, index) => {
                     if (axis.type === 'linear') {
                         const chartAxis = chartInstance._chart._components[index];
@@ -60052,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) }
@@ -60686,7 +60893,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.9.3-alpha.3";
+    const version = "0.9.3-alpha.5";
     function getIcons() {
         return get$1();
     }