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

package/dist/vtable.js

@@ -4237,7 +4237,7 @@
                 if (!superTheme.rightFrozenStyle || !obj.rightFrozenStyle) {
                     return this._rightFrozen;
                 }
-                const header = ingoreNoneValueMerge({}, this.defaultStyle, superTheme.rightFrozenStyle, obj.rightFrozenStyle);
+                const header = ingoreNoneValueMerge({}, this.defaultStyle, this.rowHeaderStyle, superTheme.rightFrozenStyle, obj.rightFrozenStyle);
                 this._rightFrozen = this.getStyle(header);
             }
             return this._rightFrozen;
@@ -4248,7 +4248,7 @@
                 if (!superTheme.bottomFrozenStyle || !obj.bottomFrozenStyle) {
                     return this._bottomFrozen;
                 }
-                const header = ingoreNoneValueMerge({}, this.defaultStyle, superTheme.bottomFrozenStyle, obj.bottomFrozenStyle);
+                const header = ingoreNoneValueMerge({}, this.defaultStyle, this.headerStyle, superTheme.bottomFrozenStyle, obj.bottomFrozenStyle);
                 this._bottomFrozen = this.getStyle(header);
             }
             return this._bottomFrozen;
@@ -36525,7 +36525,7 @@
             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';
@@ -39557,7 +39557,6 @@
         const absoluteLeftIcons = [];
         const absoluteRightIcons = [];
         let contentWidth;
-        let contentHeight;
         let leftIconWidth = 0;
         let leftIconHeight = 0;
         let rightIconWidth = 0;
@@ -39582,7 +39581,7 @@
                 wrapText.name = 'text';
                 cellGroup.appendChild(wrapText);
                 contentWidth = wrapText.AABBBounds.width();
-                contentHeight = wrapText.AABBBounds.height();
+                wrapText.AABBBounds.height();
             }
         }
         else {
@@ -39721,7 +39720,7 @@
                 cellGroup.appendChild(cellContent);
                 cellContent.layout();
                 contentWidth = cellContent.AABBBounds.width();
-                contentHeight = cellContent.AABBBounds.height();
+                cellContent.AABBBounds.height();
             }
             else {
                 if (cellGroup.firstChild) {
@@ -39731,15 +39730,13 @@
                     cellGroup.appendChild(textMark);
                 }
                 contentWidth = textMark.AABBBounds.width();
-                contentHeight = textMark.AABBBounds.height();
+                textMark.AABBBounds.height();
             }
         }
         const width = autoColWidth
             ? leftIconWidth + contentWidth + rightIconWidth
             : cellWidth - (padding[1] + padding[3]);
-        const height = autoRowHeight
-            ? Math.max(leftIconHeight, contentHeight, rightIconHeight)
-            : cellHeight - (padding[0] + padding[2]);
+        const height = cellHeight - (padding[0] + padding[2]);
         cellGroup.forEachChildren((child) => {
             if (child.role === 'icon-left') {
                 child.setAttribute('x', child.attribute.x + padding[3]);
@@ -41646,7 +41643,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
                 });
@@ -41658,7 +41655,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();
@@ -41726,6 +41723,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');
@@ -41734,7 +41742,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) {
@@ -42444,16 +42453,17 @@
         }
         if (table.widthMode === 'adaptive') {
             table._clearColRangeWidthsMap();
-            const totalDrawWidth = table.tableNoFrameWidth;
+            const totalDrawWidth = table.tableNoFrameWidth - table.getFrozenColsWidth() - table.getRightFrozenColsWidth();
             let actualWidth = 0;
-            for (let col = 0; col < table.colCount; col++) {
+            for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                 actualWidth += table.getColWidth(col);
             }
             const factor = totalDrawWidth / actualWidth;
-            for (let col = 0; col < table.colCount; col++) {
+            for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                 let colWidth;
-                if (col === table.colCount - 1) {
-                    colWidth = totalDrawWidth - table.getColsWidth(0, table.colCount - 2);
+                if (col === table.colCount - table.rightFrozenColCount - 1) {
+                    colWidth =
+                        totalDrawWidth - table.getColsWidth(table.frozenColCount, table.colCount - table.rightFrozenColCount - 2);
                 }
                 else {
                     colWidth = Math.round(table.getColWidth(col) * factor);
@@ -42468,14 +42478,14 @@
             let actualHeaderWidth = 0;
             for (let col = 0; col < table.colCount; col++) {
                 const colWidth = table.getColWidth(col);
-                if (col < table.frozenColCount) {
+                if (col < table.frozenColCount || col >= table.colCount - table.rightFrozenColCount) {
                     actualHeaderWidth += colWidth;
                 }
                 actualWidth += colWidth;
             }
             if (actualWidth < canvasWidth && actualWidth - actualHeaderWidth > 0) {
                 const factor = (canvasWidth - actualHeaderWidth) / (actualWidth - actualHeaderWidth);
-                for (let col = table.frozenColCount; col < table.colCount; col++) {
+                for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                     table.setColWidth(col, table.getColWidth(col) * factor, false, true);
                 }
             }
@@ -42699,7 +42709,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) {
@@ -42740,7 +42750,7 @@
                 }
             }
         }
-        else if (table.heightMode === 'adaptive') {
+        if (table.heightMode === 'adaptive') {
             table._clearRowRangeHeightsMap();
             const totalDrawHeight = table.tableNoFrameHeight - table.getFrozenRowsHeight() - table.getBottomFrozenRowsHeight();
             let actualHeight = 0;
@@ -42764,6 +42774,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') {
@@ -42974,12 +42995,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);
@@ -42999,6 +43014,7 @@
         if (cellTheme?.text?.textBaseline) {
             textBaseline = cellTheme?.text?.textBaseline;
         }
+        const autoRowHeight = table.heightMode === 'autoHeight';
         const autoColWidth = colWidth === 'auto';
         const autoWrapText = headerStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const lineClamp = headerStyle.lineClamp;
@@ -43029,7 +43045,7 @@
             if (mayHaveIcon) {
                 icons = table.getCellIcons(col, row);
             }
-            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, false, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme);
+            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme);
             if (cellTheme?._vtable?.marked) {
                 const mark = createArc({
                     x: cellGroup.attribute.width,
@@ -43250,7 +43266,12 @@
             const dataValue = table.getCellOriginValue(col, row);
             cellGroup = createCellGroup(table, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme);
             const progressBarGroup = createProgressBarCell(define, style, colWidth, value, dataValue, col, row, padding, table);
-            cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
+            if (cellGroup.firstChild) {
+                cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
+            }
+            else {
+                cellGroup.appendChild(progressBarGroup);
+            }
         }
         else if (type === 'sparkline') {
             cellGroup = createSparkLineCellGroup(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, table, cellTheme);
@@ -43259,6 +43280,9 @@
     }
     function updateCell$1(col, row, table, addNew) {
         const oldCellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
+        if (!addNew && oldCellGroup.role === 'empty') {
+            return undefined;
+        }
         const type = table.isHeader(col, row)
             ? table._getHeaderLayoutMap(col, row).headerType
             : table.getBodyColumnType(col, row);
@@ -43998,6 +44022,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';
             }
@@ -44924,12 +44952,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)
-                        });
                     }
                 });
             });
@@ -45787,10 +45809,15 @@
                 return;
             }
             this.updateColWidth(col, width - oldWidth);
+            this.table._clearColRangeWidthsMap(col);
         }
         setRowHeight(row, height) {
             const oldHeight = this.table.getRowHeight(row);
+            if (oldHeight === height) {
+                return;
+            }
             this.updateRowHeight(row, height - oldHeight);
+            this.table._clearRowRangeHeightsMap(row);
         }
         setX(x) {
             this.table.scenegraph.proxy.setX(-x);
@@ -45833,16 +45860,17 @@
         dealWidthMode() {
             const table = this.table;
             if (table.widthMode === 'adaptive') {
-                const totalDrawWidth = table.tableNoFrameWidth;
+                const totalDrawWidth = table.tableNoFrameWidth - table.getFrozenColsWidth() - table.getRightFrozenColsWidth();
                 let actualWidth = 0;
-                for (let col = 0; col < table.colCount; col++) {
+                for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                     actualWidth += table.getColWidth(col);
                 }
                 const factor = totalDrawWidth / actualWidth;
-                for (let col = 0; col < table.colCount; col++) {
+                for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                     let colWidth;
-                    if (col === table.colCount - 1) {
-                        colWidth = totalDrawWidth - table.getColsWidth(0, table.colCount - 2);
+                    if (col === table.colCount - table.rightFrozenColCount - 1) {
+                        colWidth =
+                            totalDrawWidth - table.getColsWidth(table.frozenColCount, table.colCount - table.rightFrozenColCount - 2);
                     }
                     else {
                         colWidth = Math.round(table.getColWidth(col) * factor);
@@ -45856,14 +45884,14 @@
                 let actualHeaderWidth = 0;
                 for (let col = 0; col < table.colCount; col++) {
                     const colWidth = table.getColWidth(col);
-                    if (col < table.frozenColCount) {
+                    if (col < table.frozenColCount || col >= table.colCount - table.rightFrozenColCount) {
                         actualHeaderWidth += colWidth;
                     }
                     actualWidth += colWidth;
                 }
                 if (actualWidth < canvasWidth && actualWidth - actualHeaderWidth > 0) {
                     const factor = (canvasWidth - actualHeaderWidth) / (actualWidth - actualHeaderWidth);
-                    for (let col = table.frozenColCount; col < table.colCount; col++) {
+                    for (let col = table.frozenColCount; col < table.colCount - table.rightFrozenColCount; col++) {
                         this.setColWidth(col, table.getColWidth(col) * factor);
                     }
                 }
@@ -46943,13 +46971,16 @@
         constructor(table) {
             this.table = table;
             this.initState();
-            this.setHoverState();
-            this.setSelectState();
-            this.setFrozenState();
             this.updateVerticalScrollBar = this.updateVerticalScrollBar.bind(this);
             this.updateHorizontalScrollBar = this.updateHorizontalScrollBar.bind(this);
         }
         initState() {
+            this._initState();
+            this.setHoverState();
+            this.setSelectState();
+            this.setFrozenState();
+        }
+        _initState() {
             this.interactionState = InteractionState.default;
             this.select = {
                 highlightScope: HighlightScope.single,
@@ -47194,10 +47225,10 @@
             this.table.stateManeger.updateSelectPos(-1, -1);
             this.table.scenegraph.updateNextFrame();
         }
-        updateResizeCol(x, y) {
-            x = Math.ceil(x);
-            y = Math.ceil(y);
-            let detaX = x - this.columnResize.x;
+        updateResizeCol(xInTable, yInTable) {
+            xInTable = Math.ceil(xInTable);
+            yInTable = Math.ceil(yInTable);
+            let detaX = xInTable - this.columnResize.x;
             if (Math.abs(detaX) < 1) {
                 return;
             }
@@ -47228,8 +47259,8 @@
             if (this.table.widthMode === 'adaptive' && this.columnResize.col < this.table.colCount - 1) {
                 this.table.scenegraph.updateColWidth(this.columnResize.col + 1, -detaX);
             }
-            this.columnResize.x = x;
-            this.table.scenegraph.component.updateResizeCol(this.columnResize.col, y);
+            this.columnResize.x = xInTable;
+            this.table.scenegraph.component.updateResizeCol(this.columnResize.col, yInTable);
             if (this.columnResize.col < this.table.frozenColCount &&
                 !this.table.isPivotTable() &&
                 !this.table.transpose) {
@@ -47744,25 +47775,38 @@
     function bindTableGroupListener(eventManeger) {
         const table = eventManeger.table;
         const stateManeger = table.stateManeger;
-        table.scenegraph.tableGroup.addEventListener('pointermove', (e) => {
+        document.body.addEventListener('pointermove', (e) => {
             if (eventManeger.touchSetTimeout) {
                 clearTimeout(eventManeger.touchSetTimeout);
                 eventManeger.touchSetTimeout = undefined;
             }
-            const eventArgsSet = getCellEventArgsSet(e);
+            const { x, y } = table._getMouseAbstractPoint(e, false);
             if (stateManeger.interactionState === InteractionState.scrolling) {
                 return;
             }
             if (stateManeger.interactionState === InteractionState.grabing) {
                 if (stateManeger.isResizeCol()) {
-                    eventManeger.dealColumnResize(eventArgsSet);
-                    if (eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
+                    eventManeger.dealColumnResize(x, y);
+                    if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
                         table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN, {
                             col: table.stateManeger.columnResize.col,
                             colWidth: table.getColWidth(table.stateManeger.columnResize.col)
                         });
                     }
                 }
+            }
+        });
+        table.scenegraph.tableGroup.addEventListener('pointermove', (e) => {
+            if (eventManeger.touchSetTimeout) {
+                clearTimeout(eventManeger.touchSetTimeout);
+                eventManeger.touchSetTimeout = undefined;
+            }
+            const eventArgsSet = getCellEventArgsSet(e);
+            if (stateManeger.interactionState === InteractionState.scrolling) {
+                return;
+            }
+            if (stateManeger.interactionState === InteractionState.grabing) {
+                if (stateManeger.isResizeCol()) ;
                 else if (stateManeger.isMoveCol()) {
                     eventManeger.dealColumnMover(eventArgsSet);
                 }
@@ -47771,7 +47815,7 @@
                 }
                 return;
             }
-            if (eventManeger.checkColumnResize(eventArgsSet)) {
+            if (stateManeger.isResizeCol() || eventManeger.checkColumnResize(eventArgsSet)) {
                 stateManeger.updateCursor('col-resize');
             }
             else {
@@ -47875,9 +47919,11 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerleave', (e) => {
-            stateManeger.updateInteractionState(InteractionState.default);
+            if (!stateManeger.isResizeCol()) {
+                stateManeger.updateInteractionState(InteractionState.default);
+                stateManeger.updateCursor();
+            }
             eventManeger.dealTableHover();
-            stateManeger.updateCursor();
             const target = e.target;
             if (target && !target.isDescendantsOf(table.scenegraph.tableGroup)) {
                 table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, {
@@ -47889,6 +47935,9 @@
         });
         table.scenegraph.tableGroup.addEventListener('pointerupoutside', (e) => {
             console.log('pointerupoutside');
+            if (stateManeger.isResizeCol()) {
+                endResizeCol(table);
+            }
             stateManeger.updateInteractionState(InteractionState.default);
             eventManeger.dealTableHover();
             eventManeger.dealTableSelect();
@@ -47964,17 +48013,7 @@
             if (stateManeger.interactionState === 'grabing') {
                 stateManeger.updateInteractionState(InteractionState.default);
                 if (stateManeger.isResizeCol()) {
-                    table.stateManeger.endResizeCol();
-                    if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END)) {
-                        const columns = [];
-                        for (let col = 0; col < table.colCount; col++) {
-                            columns.push(table.getColWidth(col));
-                        }
-                        table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
-                            col: table.stateManeger.columnResize.col,
-                            columns
-                        });
-                    }
+                    endResizeCol(table);
                 }
                 else if (stateManeger.isMoveCol()) {
                     table.stateManeger.endMoveCol();
@@ -48141,6 +48180,19 @@
             }
         });
     }
+    function endResizeCol(table) {
+        table.stateManeger.endResizeCol();
+        if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END)) {
+            const columns = [];
+            for (let col = 0; col < table.colCount; col++) {
+                columns.push(table.getColWidth(col));
+            }
+            table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
+                col: table.stateManeger.columnResize.col,
+                columns
+            });
+        }
+    }
 
     function bindScrollBarListener(eventManeger) {
         const table = eventManeger.table;
@@ -48671,8 +48723,8 @@
             }
             return false;
         }
-        dealColumnResize(eventArgsSet) {
-            this.table.stateManeger.updateResizeCol(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+        dealColumnResize(xInTable, yInTable) {
+            this.table.stateManeger.updateResizeCol(xInTable, xInTable);
         }
         chechColumnMover(eventArgsSet) {
             const { eventArgs } = eventArgsSet;
@@ -49179,6 +49231,9 @@
             this._secondElement = createMenuDomElement$1();
             this._secondElement.sub = true;
             this._showChildrenIndex = -1;
+            this._rootElement.addEventListener('wheel', e => {
+                e.stopPropagation();
+            });
             this._rootElement?.addEventListener('mousedown', e => {
                 e.stopPropagation();
                 e.preventDefault();
@@ -49292,6 +49347,9 @@
                     }, 300);
                 }
             });
+            this._secondElement?.addEventListener('wheel', e => {
+                e.stopPropagation();
+            });
             this._secondElement?.addEventListener('mousemove', e => {
                 if (this._rootElement.classList.contains(HIDDEN_CLASSNAME$1)) {
                     return;
@@ -50442,7 +50500,7 @@
                     const { event } = e;
                     const { left, right, top, bottom } = position.rect;
                     const abstractPos = table._getMouseAbstractPoint(event, false);
-                    if (!(abstractPos &&
+                    if (!(abstractPos.inTable &&
                         abstractPos.x >= left - 5 &&
                         abstractPos.x <= right + 5 &&
                         abstractPos.y >= top - 5 &&
@@ -50541,6 +50599,9 @@
         constructor(table) {
             this._handler = new EventHandler();
             this._rootElement = createMenuDomElement();
+            this._rootElement.addEventListener('wheel', e => {
+                e.stopPropagation();
+            });
             this._rootElement?.addEventListener('mousedown', e => {
                 e.stopPropagation();
                 e.preventDefault();
@@ -50852,10 +50913,10 @@
                 if (table.internalProps.menu?.renderMode === 'html') {
                     const abstractPos = table._getMouseAbstractPoint(e.event, false);
                     let menu = null;
-                    if (abstractPos && typeof table.internalProps.menu?.contextMenuItems === 'function') {
+                    if (abstractPos.inTable && typeof table.internalProps.menu?.contextMenuItems === 'function') {
                         menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row), e.row);
                     }
-                    else if (abstractPos && Array.isArray(table.internalProps.menu?.contextMenuItems)) {
+                    else if (abstractPos.inTable && Array.isArray(table.internalProps.menu?.contextMenuItems)) {
                         menu = table.internalProps.menu?.contextMenuItems;
                     }
                     this._bindToCell(e.col, e.row, 'context-menu', {
@@ -51120,11 +51181,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);
@@ -51175,6 +51236,7 @@
             };
         }
         dispose() {
+            this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent);
             this.legendComponent = null;
         }
     }
@@ -51221,11 +51283,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);
@@ -51247,6 +51309,7 @@
             return this._titleComponent;
         }
         dispose() {
+            this.table.scenegraph.stage.defaultLayer.removeChild(this._titleComponent);
             this._titleComponent = null;
         }
         _getTitleAttrs() {
@@ -51314,7 +51377,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.9.3-alpha.2";
+        version = "0.9.3-alpha.4";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51861,7 +51924,8 @@
             if (this.heightMode === 'standard' &&
                 this.internalProps.layoutMap &&
                 endRow >= this.columnHeaderLevelCount &&
-                !this.bottomFrozenRowCount) {
+                !this.bottomFrozenRowCount &&
+                !this.hasAutoImageColumn()) {
                 for (let i = startRow; i < this.columnHeaderLevelCount; i++) {
                     h += this.getRowHeight(i);
                 }
@@ -52375,6 +52439,9 @@
             this.dataSet = new DataSet();
             this.scenegraph.clearCells();
             this.stateManeger.initState();
+            this._updateSize();
+            this.internalProps.legends?.dispose();
+            this.internalProps.title?.dispose();
             if (options.legends) {
                 internalProps.legends = new TableLegend(options.legends, this);
                 this.scenegraph.tableGroup.setAttributes({
@@ -52437,7 +52504,7 @@
             const table = this;
             let e;
             if (!evt) {
-                return null;
+                return { inTable: false, x: undefined, y: undefined };
             }
             if (isTouchEvent(evt)) {
                 e = evt.changedTouches[0];
@@ -52448,11 +52515,12 @@
             const clientX = e.clientX || e.pageX + window.scrollX;
             const clientY = e.clientY || e.pageY + window.scrollY;
             const rect = table.internalProps.canvas.getBoundingClientRect();
+            let inTable = true;
             if (rect.right <= clientX) {
-                return null;
+                inTable = false;
             }
             if (rect.bottom <= clientY) {
-                return null;
+                inTable = false;
             }
             const currentWidth = rect.width;
             const originWidth = this.canvas.offsetWidth || currentWidth;
@@ -52462,31 +52530,7 @@
             const heightRatio = currentHeight / originHeight;
             const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0) - table.tableX;
             const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - table.tableY;
-            return { x, y };
-        }
-        _getCellEventArgsSet(e) {
-            const abstractPos = this._getMouseAbstractPoint(e);
-            if (!abstractPos) {
-                return {};
-            }
-            const cell = this.getCellAt(abstractPos.x, abstractPos.y);
-            if (cell.col < 0 || cell.row < 0) {
-                return {
-                    abstractPos,
-                    cell
-                };
-            }
-            const eventArgs = {
-                col: cell.col,
-                row: cell.row,
-                event: e,
-                rect: cell.rect
-            };
-            return {
-                abstractPos,
-                cell,
-                eventArgs
-            };
+            return { x, y, inTable };
         }
         getTheme() {
             return this.internalProps.theme;
@@ -52651,7 +52695,7 @@
             return this.internalProps.layoutMap.columnHeaderLevelCount;
         }
         get records() {
-            return this.internalProps.records || null;
+            return this.internalProps.records;
         }
         get dataSource() {
             return this.internalProps.dataSource;
@@ -53336,6 +53380,14 @@
             }
             return customLayout;
         }
+        hasAutoImageColumn() {
+            return this.internalProps.layoutMap.columnObjects.find((column) => {
+                if (column.columnType === 'image' && column.define.imageAutoSizing) {
+                    return true;
+                }
+                return false;
+            });
+        }
     }
 
     var core = /*#__PURE__*/Object.freeze({
@@ -53470,6 +53522,219 @@
         numberFormat: numberFormat
     });
 
+    function getAxisConfigInPivotChart(col, row, layout) {
+        if (!layout._table.isPivotChart()) {
+            return undefined;
+        }
+        if (layout.indicatorsAsCol) {
+            if (layout.hasTwoIndicatorAxes &&
+                row === layout.columnHeaderLevelCount - 1 &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, layout.columnHeaderLevelCount - 1);
+                let defaultKey = indicatorKeys[1];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
+                if (!defaultKey) {
+                    return undefined;
+                }
+                const data = layout.dataset.collectedValues[defaultKey + '_align']
+                    ? layout.dataset.collectedValues[defaultKey + '_align']
+                    : layout.dataset.collectedValues[defaultKey];
+                const index = layout.getRecordIndexByCol(col);
+                const range = data[layout.getColKeysPath()[index][Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]];
+                const axisOption = getAxisOption(col, row, 'top', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({}, axisOption, {
+                    orient: 'top',
+                    type: 'linear',
+                    range: range,
+                    label: {
+                        flush: true
+                    },
+                    title: {
+                        visible: false
+                    }
+                });
+            }
+            else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
+                let defaultKey = indicatorKeys[0];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
+                const data = layout.dataset.collectedValues[defaultKey + '_align']
+                    ? layout.dataset.collectedValues[defaultKey + '_align']
+                    : layout.dataset.collectedValues[defaultKey];
+                const index = layout.getRecordIndexByCol(col);
+                const range = data[layout.getColKeysPath()[index][Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]];
+                let indicatorInfo = null;
+                indicatorKeys.forEach(key => {
+                    const info = layout.getIndicatorInfo(key);
+                    if (info) {
+                        indicatorInfo = info;
+                    }
+                });
+                const axisOption = getAxisOption(col, row, 'bottom', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({}, axisOption, {
+                    orient: 'bottom',
+                    type: 'linear',
+                    range: range,
+                    label: {
+                        flush: true
+                    },
+                    title: {
+                        text: indicatorInfo?.caption,
+                        autoRotate: true
+                    }
+                });
+            }
+            else if (col === layout.rowHeaderLevelCount - 1 &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row)[0];
+                if (isArray$3(rowDimensionKey)) {
+                    rowDimensionKey = rowDimensionKey[0];
+                }
+                const data = layout.dataset.collectedValues[rowDimensionKey];
+                const recordRow = layout.getRecordIndexByRow(row);
+                const rowPath = layout.getRowKeysPath()[recordRow];
+                const domain = data[rowPath[rowPath.length - 1]];
+                const axisOption = getAxisOption(col, row, 'left', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({}, axisOption, {
+                    orient: 'left',
+                    type: 'band',
+                    data: Array.from(domain).reverse(),
+                    title: {
+                        visible: false
+                    }
+                });
+            }
+        }
+        else {
+            if (col === layout.rowHeaderLevelCount - 1 &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
+                let defaultKey = indicatorKeys[0];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
+                const data = layout.dataset.collectedValues[defaultKey + '_align']
+                    ? layout.dataset.collectedValues[defaultKey + '_align']
+                    : layout.dataset.collectedValues[defaultKey];
+                const index = layout.getRecordIndexByRow(row);
+                const range = data[layout.getRowKeysPath()[index][Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)]];
+                let indicatorInfo = null;
+                indicatorKeys.forEach(key => {
+                    const info = layout.getIndicatorInfo(key);
+                    if (info) {
+                        indicatorInfo = info;
+                    }
+                });
+                const axisOption = getAxisOption(col, row, 'left', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({}, axisOption, {
+                    orient: 'left',
+                    type: 'linear',
+                    range: range,
+                    label: {
+                        flush: true
+                    },
+                    title: {
+                        text: indicatorInfo?.caption,
+                        autoRotate: true
+                    }
+                });
+            }
+            else if (col === layout.colCount - layout.rightFrozenColCount &&
+                row >= layout.columnHeaderLevelCount &&
+                row < layout.rowCount - layout.bottomFrozenRowCount) {
+                const indicatorKeys = layout.getIndicatorKeyInChartSpec(layout.rowHeaderLevelCount - 1, row);
+                let defaultKey = indicatorKeys[1];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
+                if (!defaultKey) {
+                    return undefined;
+                }
+                const data = layout.dataset.collectedValues[defaultKey + '_align']
+                    ? layout.dataset.collectedValues[defaultKey + '_align']
+                    : layout.dataset.collectedValues[defaultKey];
+                const index = layout.getRecordIndexByRow(row);
+                const range = data[layout.getRowKeysPath()[index][Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)]];
+                const axisOption = getAxisOption(col, row, 'right', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({}, axisOption, {
+                    orient: 'right',
+                    type: 'linear',
+                    range: range,
+                    label: {
+                        flush: true
+                    },
+                    title: {
+                        visible: false
+                    }
+                });
+            }
+            else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
+                col >= layout.rowHeaderLevelCount &&
+                col < layout.colCount - layout.rightFrozenColCount) {
+                let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
+                if (isArray$3(columnDimensionKey)) {
+                    columnDimensionKey = columnDimensionKey[0];
+                }
+                const data = layout.dataset.collectedValues[columnDimensionKey];
+                const recordCol = layout.getRecordIndexByCol(col);
+                const colPath = layout.getColKeysPath()[recordCol];
+                const domain = data[colPath[colPath.length - 1]];
+                const axisOption = getAxisOption(col, row, 'bottom', layout);
+                if (axisOption?.visible === false) {
+                    return;
+                }
+                return merge$2({}, axisOption, {
+                    orient: 'bottom',
+                    type: 'band',
+                    data: Array.from(domain),
+                    title: {
+                        visible: false
+                    }
+                });
+            }
+        }
+        return undefined;
+    }
+    function getAxisOption(col, row, orient, layout) {
+        const spec = layout.getRawChartSpec(col, row);
+        if (spec && isArray$3(spec.axes)) {
+            const axisOption = spec.axes.find((axis) => {
+                return axis.orient === orient;
+            });
+            if (axisOption) {
+                return axisOption;
+            }
+        }
+        const axisOption = layout._table.pivotChartAxes.find(axisOption => {
+            return axisOption.orient === orient;
+        });
+        return axisOption;
+    }
+
     function getRawChartSpec(col, row, layout) {
         const paths = layout.getCellHeaderPaths(col, row);
         let indicatorObj;
@@ -53507,16 +53772,15 @@
                     ? layout.dataset.collectedValues[key + '_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');
-                });
+                const axisOption = getAxisOption(col, row, index === 0 ? 'bottom' : 'top', layout);
                 axes.push(merge$2({}, 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];
@@ -53527,9 +53791,7 @@
             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';
-            });
+            const axisOption = getAxisOption(col, row, 'left', layout);
             axes.push(merge$2({}, axisOption, {
                 type: 'band',
                 orient: 'left',
@@ -53553,16 +53815,15 @@
                     ? layout.dataset.collectedValues[key + '_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');
-                });
+                const axisOption = getAxisOption(col, row, index === 0 ? 'left' : 'right', layout);
                 axes.push(merge$2({}, 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];
@@ -53573,9 +53834,7 @@
             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';
-            });
+            const axisOption = getAxisOption(col, row, 'bottom', layout);
             axes.push(merge$2({}, axisOption, {
                 type: 'band',
                 orient: 'bottom',
@@ -54383,7 +54642,6 @@
                 internalProps.disposables.forEach(disposable => disposable?.dispose?.());
                 internalProps.disposables = null;
             }
-            this._updateSize();
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
             }
@@ -54494,8 +54752,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;
@@ -56164,216 +56422,6 @@
         }
     }
 
-    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
-                    }
-                });
-            }
-        }
-        return undefined;
-    }
-
     const EMPTY_HEADER = {
         isEmpty: true,
         id: undefined,
@@ -57498,6 +57546,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 = [];
@@ -58278,7 +58343,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;
@@ -58323,7 +58388,7 @@
             this.registerAggregator(AggregationType.MIN, MinAggregator);
             this.registerAggregator(AggregationType.AVG, AvgAggregator);
         }
-        setRecords(records) {
+        setRecords() {
             this.processRecords();
         }
         processCollectedValuesWithSumBy() {
@@ -58357,10 +58422,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 = {};
@@ -58384,7 +58461,7 @@
             }
             return isReserved;
         }
-        processRecord(record) {
+        processRecord(record, assignedIndicatorKey) {
             this.derivedFieldRules?.forEach((derivedFieldRule, i) => {
                 record[derivedFieldRule.fieldName] = derivedFieldRule.derivedFunc(record);
             });
@@ -58464,7 +58541,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);
                         }
@@ -59067,7 +59147,6 @@
                 internalProps.disposables.forEach(disposable => disposable?.dispose?.());
                 internalProps.disposables = null;
             }
-            this._updateSize();
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
             }
@@ -59289,10 +59368,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);
@@ -59308,9 +59387,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);
                 }
@@ -59392,9 +59471,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);
@@ -59470,8 +59548,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);
@@ -59508,7 +59585,6 @@
                 internalProps.disposables.forEach(disposable => disposable?.dispose?.());
                 internalProps.disposables = null;
             }
-            this._updateSize();
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
             }
@@ -59529,9 +59605,7 @@
             if (internalProps.headerEvents) {
                 internalProps.headerEvents.forEach((id) => this.unlisten(id));
             }
-            if (this.internalProps.enableDataAnalysis) {
-                internalProps.layoutMap = new PivotLayoutMap(this, this.dataset);
-            }
+            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,10 +59750,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);
@@ -59695,9 +59769,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);
                 }
@@ -59908,9 +59982,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
                         });
                     }
@@ -59997,7 +60074,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];
@@ -60654,7 +60732,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.9.3-alpha.2";
+    const version = "0.9.3-alpha.4";
     function getIcons() {
         return get$1();
     }