diff --git a/common/changes/@visactor/vtable/666-bug-editor-object-setIn-columns_2023-12-01-08-22.json b/common/changes/@visactor/vtable/666-bug-editor-object-setIn-columns_2023-12-01-08-22.json new file mode 100644 index 000000000..3345ec3fe --- /dev/null +++ b/common/changes/@visactor/vtable/666-bug-editor-object-setIn-columns_2023-12-01-08-22.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: editor object set in column be cloned\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/fix-release_resize_remove_2023-12-01-02-25.json b/common/changes/@visactor/vtable/fix-release_resize_remove_2023-12-01-02-25.json new file mode 100644 index 000000000..f2477ced4 --- /dev/null +++ b/common/changes/@visactor/vtable/fix-release_resize_remove_2023-12-01-02-25.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: release tableInstance after resize event trigger\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/refactor-ts-define-optimize_2023-12-01-04-33.json b/common/changes/@visactor/vtable/refactor-ts-define-optimize_2023-12-01-04-33.json new file mode 100644 index 000000000..4b920d92b --- /dev/null +++ b/common/changes/@visactor/vtable/refactor-ts-define-optimize_2023-12-01-04-33.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "refactor: ts define optimize\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/refactor-ts-define-optimize_2023-12-01-07-39.json b/common/changes/@visactor/vtable/refactor-ts-define-optimize_2023-12-01-07-39.json new file mode 100644 index 000000000..b8e353cdd --- /dev/null +++ b/common/changes/@visactor/vtable/refactor-ts-define-optimize_2023-12-01-07-39.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: columnWidthComputeMode only-header\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file diff --git a/docs/assets/guide/en/basic_function/row_height_column_width.md b/docs/assets/guide/en/basic_function/row_height_column_width.md index 343286a7e..afeff858d 100644 --- a/docs/assets/guide/en/basic_function/row_height_column_width.md +++ b/docs/assets/guide/en/basic_function/row_height_column_width.md @@ -34,10 +34,9 @@ const table = new VTable.ListTable({ defaultColWidth: 100, }); ``` +## Default Column Width for Row Header -## Row header default column width - -In addition to the default column width setting, VTable also supports setting the column width for row headers. Pass`defaultHeaderColWidth`The configuration item can be set. The configuration item can be set to one, which corresponds to the width of each row header column. The following code example shows how to set the width of the first row header column to 50 and the width of the second row header column to 60: +In addition to setting the default column width, VTable also supports setting the column width specifically for the row header. This can be achieved using the `defaultHeaderColWidth` configuration option, which can be an array representing the widths of each level of row header columns. The following code example demonstrates how to set the column width to 50 for the first-level row header column and 60 for the second-level row header column: ```javascript const table = new VTable.ListTable({ @@ -45,6 +44,12 @@ const table = new VTable.ListTable({ }); ``` +Please note that this configuration only applies to row headers. If you have column headers, this configuration option will not be considered (the logic will be based on the widths defined in the body section). + +Specifically: +- For transposed basic tables, if you configure `defaultHeaderColWidth: [50, 'auto']`, it means that the first column of the transposed table header has a width of 50, and the second column adjusts its width based on the content of the cells. +- For pivot tables, if you configure `defaultHeaderColWidth: [50, 'auto']`, it means that the first column of the row header (first-level dimension) has a width of 50, and the second column (second-level dimension) adjusts its width based on the content of the cells. + ## Column width limit: maxWidth + minWidth In the process of configuring column widths, you may encounter scenarios where you need to limit the maximum or minimum column width of a column. VTable provides `maxWidth` and `maxWidth` Configuration items to limit the maximum and minimum column widths for each column. The following code example shows how to set a column to a maximum column width of 200 and a minimum column width of 50: @@ -151,4 +156,11 @@ The calculation mode of table row height `heightMode` can also be configured as - Adaptive container height mode (adaptive): Use the height of the container to allocate the height of each row. - Automatic line height mode (autoHeight): Automatically calculate line height based on content, based on fontSize and lineHeight. The related configuration item `autoWrapText` automatically wraps lines, and can calculate the line height based on the multi-line text content after line wrapping. +# FAQ +## Setting Adaptive Content for Specific Columns to Calculate Column Width +If you don't want to calculate the column width for every column, you can use the `width` property in the `columns` configuration instead of setting `widthMode: 'autoWidth'`. + +## Adapting Column Width Based on Header Content +If you only need to calculate the width based on the header content, you can use `columnWidthComputeMode: 'only-header'`. However, you need to use it in conjunction with `widthMode: 'autoWidth'`. + So far, we have introduced the table row height and column width calculation function in VTable, including row height, column width configuration, and table width mode. By mastering these functions, you can display and analyze data in VTable more conveniently to meet various practical needs. \ No newline at end of file diff --git a/docs/assets/guide/zh/basic_function/row_height_column_width.md b/docs/assets/guide/zh/basic_function/row_height_column_width.md index 3c7bc1bd7..e3a395b55 100644 --- a/docs/assets/guide/zh/basic_function/row_height_column_width.md +++ b/docs/assets/guide/zh/basic_function/row_height_column_width.md @@ -2,7 +2,23 @@ 在数据分析领域，表格是一种常见的数据展示方式。正确设置表格的行高列宽对于提高数据可读性和美观性具有重要意义。本教程将围绕 VTable 中的表格行高列宽计算功能，带了解如何正确配置行高和列宽以满足实际需求。 -# 行高配置 +# 列宽计算模式 + +在 VTable 中，表格列宽度的计算模式`widthMode`可以配置为 `standard`（标准模式）、`adaptive`（自适应容器宽度模式）或 `autoWidth`（自动列宽模式）。[demo示例](https://visactor.io/vtable/demo/basic-functionality/width-mode-autoWidth)。（如果设置了`widthMode: 'autoWidth'`, 那么每一个单元格都会参与计算宽度，可想而知这个计算过程是需要耗费性能的。） + +- 标准模式（standard）：表格使用`width` 属性指定的宽度作为列宽度，如未指定，则采用 `defaultColWidth`或`defaultHeaderColWidth ` 设定的默认列宽。 +- 自适应容器宽度模式（adaptive）：在自适应容器宽度模式下表格使用容器的宽度分配列宽度(每列宽度的比例基于standard模式中的宽度值)。[demo示例](https://visactor.io/vtable/demo/basic-functionality/width-mode-adaptive) +- 自动列宽模式（autoWidth）：在自动宽度模式下，根据列头和 body 单元格中的内容自动计算列宽度，忽略设置的 `width` 属性和 `defaultColWidth`。 + +# 行高计算模式 + +表格行高度的计算模式`heightMode`也可以配置为 `standard`（标准模式）、`adaptive`（自适应容器宽度模式）或 `autoHeight`（自动行高模式）。 + +- 标准模式（standard）：采用 `defaultRowHeight` 及 `defaultHeaderRowHeight` 作为行高。 +- 自适应容器高度模式（adaptive）：使用容器的高度分配每行高度。 +- 自动行高模式（autoHeight）：根据内容自动计算行高，计算依据fontSize和lineHeight。相关搭配设置项`autoWrapText`自动换行，可以根据换行后的多行文本内容来计算行高。 + +# 行高相关配置 ## 默认行高 @@ -24,7 +40,45 @@ const table = new VTable.ListTable({ }); ``` -# 列宽配置 +## 行高撑满容器：autoFillHeight +配置项 autoFillHeight，用于控制是否自动撑满容器高度。区别于高度模式`heightMode`的`adaptive`的自适应容器的效果，autoFillHeight 控制的是只有当行数较少的时候，表格可以自动撑满容器高度，但是当行数超过容器的时候根据真实情况来定行高可出现滚动条。 +```javascript +const table = new VTable.ListTable({ + autoFillHeight: true +}); +``` + +# 列宽相关配置 + +## 列宽width +可以在列属性中配置具体的宽度值，或者百分比或者'auto'自动计算列宽。 +``` +width?: number | string; +``` +基本表格配置列宽： + +```javascript +const table = new VTable.ListTable({ + columns: [ + { + // ...其他配置项 + width: 200, + }, + ], +}); +``` + +透视表列宽配置： +```javascript +const table = new VTable.PivotTable({ + indicators: [ + { + // ...其他配置项 + width: 200, + }, + ], +}); +``` ## 默认列宽 @@ -38,7 +92,7 @@ const table = new VTable.ListTable({ ## 行表头默认列宽 -除了默认列宽的设置，VTable还支持针对行表头的列宽进行设置。通过`defaultHeaderColWidth`配置项进行设置，该配置项可以设定为一个，分别对应各级行表头列的宽度。以下代码示例展示了如何设置一级行表头列宽为 50，二级行表头列宽为 60： +除了默认列宽的设置，VTable还支持针对行表头的列宽进行设置。通过`defaultHeaderColWidth`配置项进行设置，该配置项可以设定为一个，分别对应各级`行表头`列的宽度。以下代码示例展示了如何设置一级行表头列宽为 50，二级行表头列宽为 60： ```javascript const table = new VTable.ListTable({ @@ -46,6 +100,12 @@ const table = new VTable.ListTable({ }); ``` +需要注意的是：这个配置仅针对行表头起作用，如果是列表头的话是不考虑这个配置项的（会按body部分定义的宽度设置来执行逻辑）。 + +具体的如： +- 转置基本表格，如配置 defaultHeaderColWidth: [50, 'auto'], 表示转置表格的表头第一列宽度50，第二列按单元格内容适应宽度 +- 透视表，如配置 defaultHeaderColWidth: [50, 'auto'], 表示透视表的行表头第一列宽度50（也即第一级维度），第二列（第二级维度）按单元格内容适应宽度。 + ## 列宽限制配置：maxWidth+minWidth 在配置列宽的过程中，您可能遇到需要限制某一列最大或最小列宽的场景。VTable 提供了 `maxWidth` 和 `maxWidth` 配置项，用于限制每一列的最大和最小列宽。以下代码示例展示了如何设置某一列的最大列宽为 200，最小列宽为 50： @@ -93,29 +153,30 @@ const table = new VTable.ListTable({ autoFillWidth: true }); ``` +## 按内容计算列宽只计算表头或者body部分：columnWidthComputeMode +计算内容宽度时限定只计算表头内容，或者body单元格内容，或者全部都适应计算。 -## 行高撑满容器：autoFillHeight -配置项 autoFillHeight，用于控制是否自动撑满容器高度。区别于高度模式`heightMode`的`adaptive`的自适应容器的效果，autoFillHeight 控制的是只有当行数较少的时候，表格可以自动撑满容器高度，但是当行数超过容器的时候根据真实情况来定行高可出现滚动条。 +配置项定义： +``` + columnWidthComputeMode?: 'normal' | 'only-header' | 'only-body'; +``` +用法 ```javascript const table = new VTable.ListTable({ - autoFillHeight: true + columns: [ + { + // ...其他配置项 + columnWidthComputeMode： 'only-header' + }, + ], }); ``` -# 列宽计算模式 +# FAQ +## 特定列设置自适应内容来计算列宽 +如果并不是想每一列都需要计算列宽，可以使用columns中的width来定义，而不用设置`widthMode: 'autoWidth'`。 +## 列宽根据表头内容自适应 +如果只需要计算表头内容宽度的话，可以用`columnWidthComputeMode: 'only-header'`来实现。不过需配合设置`widthMode:'autoWidth'`使用。 -在 VTable 中，表格列宽度的计算模式`widthMode`可以配置为 `standard`（标准模式）、`adaptive`（自适应容器宽度模式）或 `autoWidth`（自动列宽模式）。[demo示例](https://visactor.io/vtable/demo/basic-functionality/width-mode-autoWidth) - -- 标准模式（standard）：表格使用`width` 属性指定的宽度作为列宽度，如未指定，则采用 `defaultColWidth`或`defaultHeaderColWidth ` 设定的默认列宽。 -- 自适应容器宽度模式（adaptive）：在自适应容器宽度模式下表格使用容器的宽度分配列宽度(每列宽度的比例基于standard模式中的宽度值)。[demo示例](https://visactor.io/vtable/demo/basic-functionality/width-mode-adaptive) -- 自动列宽模式（autoWidth）：在自动宽度模式下，根据列头和 body 单元格中的内容自动计算列宽度，忽略设置的 `width` 属性和 `defaultColWidth`。 - -# 行高计算模式 - -表格行高度的计算模式`heightMode`也可以配置为 `standard`（标准模式）、`adaptive`（自适应容器宽度模式）或 `autoHeight`（自动行高模式）。 - -- 标准模式（standard）：采用 `defaultRowHeight` 及 `defaultHeaderRowHeight` 作为行高。 -- 自适应容器高度模式（adaptive）：使用容器的高度分配每行高度。 -- 自动行高模式（autoHeight）：根据内容自动计算行高，计算依据fontSize和lineHeight。相关搭配设置项`autoWrapText`自动换行，可以根据换行后的多行文本内容来计算行高。 -至此，我们已经介绍了 VTable 中的表格行高列宽计算功能，包括行高、列宽配置，以及表格宽度模式。通过掌握这些功能，您可以更便捷地 VTable 中进行数据展示与分析，现各种实际需求。 \ No newline at end of file +至此，我们已经介绍了 VTable 中的表格行高列宽计算功能，包括行高、列宽配置，以及表格宽度模式。通过掌握这些功能，您可以更便捷地 VTable 中进行数据展示与分析，现各种实际需求。 diff --git a/packages/react-vtable/src/components/pivot/pivot-dimension.tsx b/packages/react-vtable/src/components/pivot/pivot-dimension.tsx index 49c9e7589..37c0a0561 100644 --- a/packages/react-vtable/src/components/pivot/pivot-dimension.tsx +++ b/packages/react-vtable/src/components/pivot/pivot-dimension.tsx @@ -1,8 +1,9 @@ import type { BaseComponentProps } from '../base-component'; import { createComponent } from '../base-component'; -import type { IDimension } from '@visactor/vtable'; +import type { IRowDimension, IColumnDimension } from '@visactor/vtable'; -export type PivotDimensionProps = IDimension & BaseComponentProps; +export type RowPivotDimensionProps = IRowDimension & BaseComponentProps; +export type ColumnPivotDimensionProps = IColumnDimension & BaseComponentProps; -export const PivotColumnDimension = createComponent('PivotColumnDimension', 'columns'); -export const PivotRowDimension = createComponent('PivotRowDimension', 'rows'); +export const PivotColumnDimension = createComponent('PivotColumnDimension', 'columns'); +export const PivotRowDimension = createComponent('PivotRowDimension', 'rows'); diff --git a/packages/vtable/examples/editor/date-editor.ts b/packages/vtable/examples/editor/date-editor.ts index a8e8baa42..db397082c 100644 --- a/packages/vtable/examples/editor/date-editor.ts +++ b/packages/vtable/examples/editor/date-editor.ts @@ -1,5 +1,5 @@ import * as VTable from '../../src'; -import { DateInputEditor } from '@visactor/vtable-editors'; +import { DateInputEditor, InputEditor } from '@visactor/vtable-editors'; const CONTAINER_ID = 'vTable'; const date_editor = new DateInputEditor({}); @@ -143,7 +143,15 @@ export function createTable() { { field: 'hobbies', title: 'hobbies', - width: 200 + width: 200, + editor(args) { + if (args.row % 3 === 0) { + return new InputEditor({}); + } else if (args.row % 3 === 1) { + return new DateInputEditor({}); + } + return null; + } }, { field: 'birthday', diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 43f736435..dafbf93c5 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -66,6 +66,12 @@ export class ListTable extends BaseTable implements ListTableAPI { : options.header ? cloneDeep(options.header) : []; + options.columns.forEach((colDefine, index) => { + //如果editor 是一个IEditor的实例 需要这样重新赋值 否则clone后变质了 + if (colDefine.editor) { + internalProps.columns[index].editor = colDefine.editor; + } + }); this.showHeader = options.showHeader ?? true; @@ -125,6 +131,11 @@ export class ListTable extends BaseTable implements ListTableAPI { updateColumns(columns: ColumnsDefine) { const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row }; this.internalProps.columns = cloneDeep(columns); + columns.forEach((colDefine, index) => { + if (colDefine.editor) { + this.internalProps.columns[index].editor = colDefine.editor; + } + }); this.options.columns = columns; this.refreshHeader(); this.scenegraph.clearCells(); @@ -308,6 +319,11 @@ export class ListTable extends BaseTable implements ListTableAPI { : options.header ? cloneDeep(options.header) : []; + options.columns.forEach((colDefine, index) => { + if (colDefine.editor) { + internalProps.columns[index].editor = colDefine.editor; + } + }); // 处理转置 this.transpose = options.transpose ?? false; // 更新表头 diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index 3d7f5ef5a..32d56cd06 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -14,7 +14,8 @@ import type { IDimensionInfo, SortOrder, IPagination, - CellLocation + CellLocation, + IIndicator } from './ts-types'; import { HierarchyState } from './ts-types'; import { PivotHeaderLayoutMap } from './layout/pivot-header-layout'; @@ -66,6 +67,12 @@ export class PivotTable extends BaseTable implements PivotTableAPI { this.internalProps.columns = cloneDeep(options.columns); this.internalProps.rows = cloneDeep(options.rows); this.internalProps.indicators = cloneDeep(options.indicators); + options.indicators?.forEach((indicatorDefine, index) => { + //如果editor 是一个IEditor的实例 需要这样重新赋值 否则clone后变质了 + if (typeof indicatorDefine === 'object' && indicatorDefine?.editor) { + (this.internalProps.indicators[index] as IIndicator).editor = indicatorDefine.editor; + } + }); this.internalProps.columnTree = options.indicatorsAsCol && !options.columns?.length && !options.columnTree ? [] : cloneDeep(options.columnTree); this.internalProps.rowTree = @@ -199,6 +206,11 @@ export class PivotTable extends BaseTable implements PivotTableAPI { this.internalProps.columns = cloneDeep(options.columns); this.internalProps.rows = cloneDeep(options.rows); this.internalProps.indicators = !options.indicators?.length ? [] : cloneDeep(options.indicators); + options.indicators?.forEach((indicatorDefine, index) => { + if (typeof indicatorDefine === 'object' && indicatorDefine?.editor) { + (this.internalProps.indicators[index] as IIndicator).editor = indicatorDefine.editor; + } + }); this.internalProps.columnTree = options.indicatorsAsCol && !options.columns?.length && !options.columnTree ? [] : cloneDeep(options.columnTree); this.internalProps.rowTree = diff --git a/packages/vtable/src/event/EventHandler.ts b/packages/vtable/src/event/EventHandler.ts index 3606f7b6f..96c116f28 100644 --- a/packages/vtable/src/event/EventHandler.ts +++ b/packages/vtable/src/event/EventHandler.ts @@ -210,6 +210,11 @@ export class EventHandler { } } + for (const key in this.reseizeListeners) { + const resizeObserver: ResizeObserver = this.reseizeListeners[key]; + resizeObserver?.disConnect(); + } + this.listeners = {}; } release(): void { diff --git a/packages/vtable/src/event/VChartEventProxy.ts b/packages/vtable/src/event/VChartEventProxy.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index 55d8e16dc..dbfb352cd 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -14,7 +14,10 @@ import type { ICornerDefine, IDimensionInfo, IExtensionRowDefine, - IPagination + IPagination, + IColumnDimension, + IRowDimension, + FieldData } from '../ts-types'; import { HierarchyState } from '../ts-types'; import type { @@ -59,8 +62,8 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { private _rowHeaderCellIds: number[][] = []; private _rowHeaderCellIds_FULL: number[][] = []; private _columnWidths: WidthData[] = []; - rowsDefine: (IDimension | string)[]; - columnsDefine: (IDimension | string)[]; + rowsDefine: (IRowDimension | string)[]; + columnsDefine: (IColumnDimension | string)[]; indicatorsDefine: (IIndicator | string)[]; columnPaths: number[][] = []; private _headerObjects: HeaderData[] = []; @@ -490,9 +493,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { isPivotCorner: false // customInfo: dimensionInfo?.customInfo }, - width: dimensionInfo?.width, - minWidth: dimensionInfo?.minWidth, - maxWidth: dimensionInfo?.maxWidth, + width: (dimensionInfo as IRowDimension)?.width, + minWidth: (dimensionInfo as IRowDimension)?.minWidth, + maxWidth: (dimensionInfo as IRowDimension)?.maxWidth, showSort: indicatorInfo?.showSort ?? dimensionInfo?.showSort, description: dimensionInfo?.description }; @@ -600,7 +603,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { const cell: HeaderData = { id, title: hd.value, - field: hd.dimensionKey, + field: hd.dimensionKey as FieldData, //如果不是整棵树的叶子节点，都靠左显示 style: hd.level + 1 === totalLevel || typeof dimensionInfo?.headerStyle === 'function' @@ -626,16 +629,16 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { dropDownMenu: dimensionInfo?.dropDownMenu, pivotInfo: { value: hd.value, - dimensionKey: hd.dimensionKey, + dimensionKey: hd.dimensionKey as string, isPivotCorner: false // customInfo: dimensionInfo?.customInfo }, hierarchyLevel: hd.level, dimensionTotalLevel: totalLevel, hierarchyState: hd.level + 1 === totalLevel ? undefined : hd.hierarchyState, - width: dimensionInfo?.width, - minWidth: dimensionInfo?.minWidth, - maxWidth: dimensionInfo?.maxWidth, + width: (dimensionInfo as IRowDimension)?.width, + minWidth: (dimensionInfo as IRowDimension)?.minWidth, + maxWidth: (dimensionInfo as IRowDimension)?.maxWidth, parentCellId: roots[roots.length - 1] }; @@ -674,7 +677,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { private _addCornerHeaders(dimensionKeys: (string | number)[] | null, dimensions: (string | IDimension)[]) { const results: HeaderData[] = []; if (dimensionKeys) { - dimensionKeys.forEach((dimensionKey: string, key: number) => { + dimensionKeys.forEach((dimensionKey: string | number, key: number) => { const id = ++sharedVar.seqId; // const dimensionInfo: IDimension = // (this.rowsDefine?.find(dimension => @@ -695,7 +698,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { ? dimensionInfo.title : dimensionKey === 'axis' ? '' - : dimensionKey, + : (dimensionKey as string), field: '维度名称', style: this.cornerSetting.headerStyle, headerType: this.cornerSetting.headerType ?? 'text', @@ -813,7 +816,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { if (mainDimensionFirstRowKey) { const dimension = this.rowsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === mainDimensionFirstRowKey - ) as IDimension; + ) as IRowDimension; dimension && (returnWidths[0 + (this.rowHeaderTitle ? 1 : 0)] = { width: dimension.width, @@ -824,9 +827,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { this._extensionRowDimensionKeys?.forEach((extensionRowDimensionKeys, index) => { const curDimensionFirstRowKey = extensionRowDimensionKeys[0]; if (curDimensionFirstRowKey) { - const dimension = this.extensionRows[index].rows?.find((dimension: string | IDimension) => + const dimension = this.extensionRows[index].rows?.find((dimension: string | IRowDimension) => typeof dimension === 'string' ? false : dimension.dimensionKey === curDimensionFirstRowKey - ) as IDimension; + ) as IRowDimension; dimension && (returnWidths[index + 1 + (this.rowHeaderTitle ? 1 : 0)] = { width: dimension.width, @@ -849,7 +852,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { this.rowDimensionKeys.forEach((objKey, index) => { const dimension = this.rowsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === objKey - ) as IDimension; + ) as IRowDimension; dimension && (returnWidths[index + (this.rowHeaderTitle ? 1 : 0)] = { width: dimension.width, @@ -869,9 +872,9 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { }; } } else { - let width: string | number = 0; - let maxWidth: string | number; - let minWidth: string | number; + let width: string | number | undefined = 0; + let maxWidth: string | number | undefined; + let minWidth: string | number | undefined; let isAuto; this._indicators?.forEach((obj, index) => { if (typeof obj.width === 'number') { @@ -1395,7 +1398,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { // if (indicatorData) return indicatorData; const paths = this.getCellHeaderPaths(_col, _row); if (this.indicatorsAsCol) { - const indicatorKey = paths.colHeaderPaths.find(colPath => colPath.indicatorKey)?.indicatorKey; + const indicatorKey = paths.colHeaderPaths?.find(colPath => colPath.indicatorKey)?.indicatorKey; return ( this._indicators?.find(indicator => indicator.indicatorKey === indicatorKey) ?? this._indicators[0] ?? { @@ -1407,7 +1410,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { } ); } - const indicatorKey = paths.rowHeaderPaths.find(rowPath => rowPath.indicatorKey)?.indicatorKey; + const indicatorKey = paths.rowHeaderPaths?.find(rowPath => rowPath.indicatorKey)?.indicatorKey; return ( this._indicators?.find(indicator => indicator.indicatorKey === indicatorKey) ?? this._indicators[0] ?? { @@ -1552,8 +1555,8 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { } const recordCol = this.getBodyIndexByCol(col); const recordRow = this.getBodyIndexByRow(row) + this.currentPageStartIndex; - let colPath; - let rowPath: IPivotLayoutHeadNode[]; + let colPath: IPivotLayoutHeadNode[] = []; + let rowPath: IPivotLayoutHeadNode[] = []; if (row >= 0 && recordCol >= 0) { colPath = this.columnDimensionTree.getTreePath( recordCol, @@ -1574,12 +1577,11 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { // rowPath = this.rowDimensionTree.getTreePath(recordRow, col + hd.hierarchyLevel); // } // 考虑多层级的ExtensionRowTree - rowPath = []; const row_pathIds = this._rowHeaderCellIds[recordRow]; //获取当前行的cellId 但这个cellId不是各级维度都有的 下面逻辑就是找全路径然后再去各个树找path的过程 let findTree = this.rowDimensionTree; //第一棵寻找的树是第一列的维度树 主树 let level = 0; //level和col对应，代表一层层树找的过程 while (findTree) { - const pathIds = []; // pathIds记录寻找当前树需要匹配的cellId + const pathIds: (number | string)[] = []; // pathIds记录寻找当前树需要匹配的cellId let cellId: LayoutObjectId = row_pathIds[level]; //row_pathIds中每个值对应了pathIds的一个节点cellId pathIds.push(cellId); while (true) { diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 01c75804d..1c2039d0f 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -43,7 +43,9 @@ import type { IIndicator, StickCell, CustomMergeCell, - CustomMerge + CustomMerge, + IColumnDimension, + IRowDimension } from '.'; import type { TooltipOptions } from './tooltip'; import type { IWrapTextGraphicAttribute } from '../scenegraph/graphic/text'; @@ -688,9 +690,9 @@ export interface PivotTableProtected extends IBaseTableProtected { /** 行表头树型结构 */ rowTree?: IHeaderTreeDefine[]; /** 定义行上各个维度具体配置项和样式定义 */ - rows?: (IDimension | string)[]; // (string | IDimension)[]; 后续支持数据分析的透视表 支持string配置 + rows?: (IRowDimension | string)[]; // (string | IDimension)[]; 后续支持数据分析的透视表 支持string配置 /** 定义列上各个维度具体配置项和样式定义 */ - columns?: (IDimension | string)[]; // (string | IDimension)[]; + columns?: (IColumnDimension | string)[]; // (string | IDimension)[]; /** 定义指标具体配置项和样式定义 包含表头和body的定义*/ indicators?: (IIndicator | string)[]; // (string | IIndicator)[]; } @@ -703,9 +705,9 @@ export interface PivotChartProtected extends IBaseTableProtected { /** 行表头维度结构 */ rowTree?: IHeaderTreeDefine[]; /** 定义行上各个维度具体配置项和样式定义 */ - rows?: (IDimension | string)[]; // (string | IDimension)[]; 后续支持数据分析的透视表 支持string配置 + rows?: (IRowDimension | string)[]; // (string | IDimension)[]; 后续支持数据分析的透视表 支持string配置 /** 定义列上各个维度具体配置项和样式定义 */ - columns?: (IDimension | string)[]; // (string | IDimension)[]; + columns?: (IColumnDimension | string)[]; // (string | IDimension)[]; /** 定义指标具体配置项和样式定义 包含表头和body的定义*/ indicators?: (IIndicator | string)[]; // (string | IIndicator)[]; } diff --git a/packages/vtable/src/ts-types/pivot-table/dimension/index.ts b/packages/vtable/src/ts-types/pivot-table/dimension/index.ts index 7a435a38e..3c3b03234 100644 --- a/packages/vtable/src/ts-types/pivot-table/dimension/index.ts +++ b/packages/vtable/src/ts-types/pivot-table/dimension/index.ts @@ -2,4 +2,9 @@ import type { IImageDimension } from './image-dimension'; import type { ILinkDimension } from './link-dimension'; import type { ITextDimension } from './multilinetext-dimension'; -export type IDimension = ILinkDimension | IImageDimension | ITextDimension; +export type IDimension = IRowDimension | IColumnDimension; +export type IRowDimension = ILinkDimension | IImageDimension | ITextDimension; +export type IColumnDimension = Omit< + ILinkDimension | IImageDimension | ITextDimension, + 'width' | 'minWidth' | 'maxWidth' +>; diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts index 61515dc44..1cb9f35fa 100644 --- a/packages/vtable/src/ts-types/table-engine.ts +++ b/packages/vtable/src/ts-types/table-engine.ts @@ -6,7 +6,15 @@ import type { Rect } from '../tools/Rect'; import type { BaseTableAPI, BaseTableConstructorOptions } from './base-table'; import type { IDataConfig } from './new-data-set'; import type { Either } from '../tools/helper'; -import type { IChartIndicator, ICornerDefine, IDimension, IIndicator, ITitleDefine } from './pivot-table'; +import type { + IChartIndicator, + IColumnDimension, + ICornerDefine, + IDimension, + IIndicator, + IRowDimension, + ITitleDefine +} from './pivot-table'; import type { ColumnsDefine } from './list-table'; import type { ICellAxisOption, ITableAxisOption } from './component/axis'; import type { IEditor } from '@visactor/vtable-editors'; @@ -196,9 +204,9 @@ export interface PivotTableConstructorOptions extends BaseTableConstructorOption // dimensions?: IDimension[]; /** 定义行上各个维度具体配置项和样式定义 */ - rows?: (IDimension | string)[]; // (string | IDimension)[]; 后续支持数据分析的透视表 支持string配置 + rows?: (IRowDimension | string)[]; // (string | IDimension)[]; 后续支持数据分析的透视表 支持string配置 /** 定义列上各个维度具体配置项和样式定义 */ - columns?: (IDimension | string)[]; // (string | IDimension)[]; + columns?: (IColumnDimension | string)[]; // (string | IDimension)[]; /** 定义指标具体配置项和样式定义 包含表头和body的定义*/ indicators?: (IIndicator | string)[]; // (string | IIndicator)[]; @@ -262,9 +270,9 @@ export interface PivotChartConstructorOptions extends BaseTableConstructorOption // dimensions?: IDimension[]; /** 定义行上各个维度具体配置项和样式定义 */ - rows?: (IDimension | string)[]; // (string | IDimension)[]; 后续支持数据分析的透视表 支持string配置 + rows?: (IRowDimension | string)[]; // (string | IDimension)[]; 后续支持数据分析的透视表 支持string配置 /** 定义列上各个维度具体配置项和样式定义 */ - columns?: (IDimension | string)[]; // (string | IDimension)[]; + columns?: (IColumnDimension | string)[]; // (string | IDimension)[]; /** 定义指标具体配置项和样式定义 包含表头和body的定义*/ indicators?: (IChartIndicator | string)[]; // (string | IIndicator)[]; @@ -387,7 +395,7 @@ export interface IDimensionHeaderNode { } export interface IExtensionRowDefine { - rows: (IDimension | string)[]; + rows: (IRowDimension | string)[]; rowTree: IHeaderTreeDefine[] | ((args: { dimensionKey: string | number; value: string }[]) => IHeaderTreeDefine[]); }