Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 增加树状模式下行头宽度配置 rowCell.treeWidth #2998

Merged
merged 9 commits into from
Nov 29, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ jobs:
# jest-electron 需要 macOS 环境, 但是 免费用户 并发有限制, 容易排队 https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
# runs-on: macos-latest # (目前 macos-latest 对应的是 Big Sur 11, macos-12 对应 Monterey 12)
# macOS 3-core CPU, 其他 2-core CPU
runs-on: macos-latest
# > macos-14 会导致 CI 的测试卡死, 没有任何报错!!!
runs-on: macos-13
if: "!contains(github.event.head_commit.message, '[skip ci]')"
strategy:
matrix:
Expand Down
2 changes: 1 addition & 1 deletion packages/s2-core/__tests__/benchmark/pivot-sheet-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ async function measurePivotSheetRender(
console.log(title, measure.duration);
}

describe('pivot sheet benchmark', () => {
describe.skip('pivot sheet benchmark', () => {
describe('single values', () => {
const baseDataCfg: S2DataConfig = {
fields: {
Expand Down
2 changes: 1 addition & 1 deletion packages/s2-core/__tests__/benchmark/table-sheet-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ async function measureTableSheetRender(
console.log(title, measure.duration);
}

describe('table sheet benchmark', () => {
describe.skip('table sheet benchmark', () => {
const baseDataCfg: S2DataConfig = {
fields: {
columns: ['province', 'city', 'type', 'subType', 'number'],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,26 @@ Array [
]
`;

exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests #RowCell should get custom tree row cell style 1`] = `
Array [
Object {
"height": 30,
"id": "root[&]浙江",
"width": 150,
},
Object {
"height": 30,
"id": "root[&]浙江[&]义乌",
"width": 150,
},
Object {
"height": 30,
"id": "root[&]浙江[&]杭州",
"width": 150,
},
]
`;

exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests should render default cell style 1`] = `
Array [
Object {
Expand Down
24 changes: 19 additions & 5 deletions packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,21 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
await s2.render();
await s2.render(false);

expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});

test('should get custom tree row cell style', async () => {
s2.setOptions({
hierarchyType: 'tree',
style: {
rowCell: {
treeWidth: 150,
},
},
});
await s2.render(false);

expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});
Expand All @@ -113,7 +127,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
await s2.render();
await s2.render(false);

expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});
Expand All @@ -131,7 +145,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
await s2.render();
await s2.render(false);

expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});
Expand All @@ -151,7 +165,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
await s2.render();
await s2.render(false);

expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});
Expand Down Expand Up @@ -200,7 +214,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
await s2.render();
await s2.render(false);

const rootRowNodes = s2.facet
.getRowNodes()
Expand Down
5 changes: 3 additions & 2 deletions packages/s2-core/__tests__/spreadsheet/custom-tree-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const s2Options: S2Options = {
hierarchyType: 'tree',
style: {
rowCell: {
width: 400,
treeWidth: 400,
},
},
};
Expand Down Expand Up @@ -208,7 +208,8 @@ describe('SpreadSheet Custom Tree Tests', () => {
s2.setOptions({
style: {
rowCell: {
width: 50,
treeWidth: 50,
width: 30,
},
},
});
Expand Down
6 changes: 3 additions & 3 deletions packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
import { CornerCell, DataCell } from '@/cell';
import {
DEFAULT_OPTIONS,
DEFAULT_ROW_CELL_TREE_WIDTH,
DEFAULT_STYLE,
DEFAULT_TREE_ROW_CELL_WIDTH,
} from '@/common/constant/options';
import type { ViewMeta } from '@/common/interface/basic';
import { Store } from '@/common/store';
Expand Down Expand Up @@ -261,11 +261,11 @@ describe('Pivot Mode Facet Test', () => {

expect(rowsHierarchy.getLeaves()).toHaveLength(8);
expect(rowsHierarchy.getNodes()).toHaveLength(10);
expect(rowsHierarchy.width).toBe(DEFAULT_TREE_ROW_CELL_WIDTH);
expect(rowsHierarchy.width).toBe(DEFAULT_ROW_CELL_TREE_WIDTH);
expect(rowCell?.width).toBeUndefined();

rowsHierarchy.getNodes().forEach((node, index) => {
expect(node.width).toBe(DEFAULT_TREE_ROW_CELL_WIDTH);
expect(node.width).toBe(DEFAULT_ROW_CELL_TREE_WIDTH);
expect(node.height).toBe(dataCell!.height!);
expect(node.x).toBe(0);
expect(node.y).toBe(node.height * index);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -523,14 +523,14 @@ describe('Interaction Row Column Resize Tests', () => {
info: { ...resizeInfo, resizedWidth: 5, resizedHeight: 0 },
style: {
rowCell: {
width: 5,
treeWidth: 5,
},
},
};

expect(resize).toHaveBeenCalledWith(newResizeInfo);
expect(treeWidthResize).toHaveBeenCalledWith(newResizeInfo);
expect(s2.options.style!.rowCell!.width).toEqual(resizeInfo.width);
expect(s2.options.style!.rowCell!.treeWidth).toEqual(resizeInfo.width);
});

test('should get horizontal filed resize style', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/s2-core/src/common/constant/options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export enum LayoutWidthType {

export const SPLIT_LINE_WIDTH = 1;

export const DEFAULT_TREE_ROW_CELL_WIDTH = 120;
export const DEFAULT_ROW_CELL_TREE_WIDTH = 120;

export const DEFAULT_CELL_TEXT_WORD_WRAP_STYLE: CellTextWordWrapStyle = {
wordWrap: true,
Expand Down
5 changes: 5 additions & 0 deletions packages/s2-core/src/common/interface/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,11 @@ export interface DataCellStyle extends CellTextWordWrapStyle {
}

export interface RowCellStyle extends BaseCellStyle, CellTextWordWrapStyle {
/**
* 树状结构的行头宽度
*/
treeWidth?: number;

/**
* 是否展示树状分层下的层级占位点
*/
Expand Down
10 changes: 7 additions & 3 deletions packages/s2-core/src/facet/pivot-facet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
} from 'lodash';
import { ColCell, RowCell, SeriesNumberCell } from '../cell';
import {
DEFAULT_TREE_ROW_CELL_WIDTH,
DEFAULT_ROW_CELL_TREE_WIDTH,
LAYOUT_SAMPLE_COUNT,
type IconTheme,
type MultiData,
Expand Down Expand Up @@ -804,6 +804,10 @@ export class PivotFacet extends FrozenFacet {
const { rowCell } = this.spreadsheet.options.style!;

// 1. 用户拖拽或手动指定的行头宽度优先级最高
if (isNumber(rowCell?.treeWidth)) {
return rowCell.treeWidth;
}

const customRowCellWidth = this.getCellCustomSize(null, rowCell?.width!);

if (isNumber(customRowCellWidth)) {
Expand All @@ -829,11 +833,11 @@ export class PivotFacet extends FrozenFacet {
this.rowCellTheme.padding?.right;

const width = Math.max(
customRowCellWidth ?? DEFAULT_TREE_ROW_CELL_WIDTH,
customRowCellWidth ?? DEFAULT_ROW_CELL_TREE_WIDTH,
maxLabelWidth,
);

return Number.isNaN(width) ? DEFAULT_TREE_ROW_CELL_WIDTH : width;
return Number.isNaN(width) ? DEFAULT_ROW_CELL_TREE_WIDTH : width;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/s2-core/src/interaction/row-column-resize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
eventType: S2Event.LAYOUT_RESIZE_TREE_WIDTH,
style: {
rowCell: {
width: displayWidth,
treeWidth: displayWidth,
},
},
};
Expand Down
3 changes: 2 additions & 1 deletion s2-site/docs/common/style.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ order: 3

| 参数 | 说明 | 类型 | 默认值 | 必选 |
| --- | --- | --- | --- | --- |
| width | 行单元格宽度,可根据当前行头节点动态设置,树状结构同样适用 | `number \| (rowNode: Node) => number` | 平铺:`96`, 树状:`120` | |
| width | 行单元格宽度,可根据当前行头节点动态设置,树状结构同样适用 | `number \| (rowNode: Node) => number` | | |
| treeWidth | 树状模式下行单元格宽度,优先级高于 `width`, 值为空时则默认使用 `width` | `number` | | |
| height | 行单元格高度,可根据当前行头节点动态设置 | `number \| (rowNode: Node) => number` | 30 | |
| collapseFields | 树状模式下行头自定义折叠节点。<br> 支持 id (`'root[&] 行头维度值'`) 和 维度 field (`'city'`) 两种格式,优先级大于 `collapseAll` 和 `expandDepth`, 设置为 `null` 时优先级最低。 [查看 demo](/examples/basic/pivot#tree) | `Record<string, boolean>` | | |
| collapseAll | 在树状结构模式下行头是否默认收起全部。 | `boolean` | `false` | |
Expand Down
6 changes: 3 additions & 3 deletions s2-site/docs/manual/migration-v2.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -364,21 +364,21 @@ const s2Options = {

2. Row Header Width Configuration Changes in Tree Structure

Deprecated `treeRowsWidth`, replaced with `rowCell.width`.
`treeRowsWidth`, replaced with `rowCell.treeWidth`.

```diff
const s2Options = {
hierarchyType: 'tree',
style: {
- treeRowsWidth: 200
+ rowCell: {
+ width: 200,
+ treeWidth: 200,
+ }
},
}
```

3. `customTree` and `customTreeItems` have been deprecated.
1. `customTree` and `customTreeItems` have been deprecated.

The original way of customizing tree structures has been deprecated. Now custom structures support both `flat` and `tree` modes.

Expand Down
6 changes: 3 additions & 3 deletions s2-site/docs/manual/migration-v2.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -364,21 +364,21 @@ const s2Options = {

2. 树状结构下行头宽度配置调整

废弃 `treeRowsWidth`, 使用 `rowCell.width` 代替
`treeRowsWidth` 重命名为 `rowCell.treeWidth`

```diff
const s2Options = {
hierarchyType: 'tree',
style: {
- treeRowsWidth: 200
+ rowCell: {
+ width: 200,
+ treeWidth: 200,
+ }
},
}
```

3. `customTree` 和 `customTreeItems` 已废弃。
1. `customTree` 和 `customTreeItems` 已废弃。

原本自定义树状结构的方式已废弃,现在自定义结构同时支持 `平铺` 和 `树状` 两种模式。

Expand Down
3 changes: 1 addition & 2 deletions s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,8 @@ fetch(
rowHeader: 0.5,
},
style: {
// 和平铺模式配置一致
rowCell: {
width: 200,
treeWidth: 200,
},
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ fetch(
},
style: {
rowCell: {
width: 400,
treeWidth: 400,
},
colCell: {
width: 200,
Expand Down
Loading