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.

Sign up for GitHub

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

fix(layout): 修复在紧凑模式列头宽度未按文本自适应 close #2385 #2392

Merged
merged 2 commits into from
Oct 27, 2023
Merged

fix(layout): 修复在紧凑模式列头宽度未按文本自适应 close #2385 #2392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9308e55
fix(layout): 修复在紧凑模式列头宽度未按文本自适应 close #2385
lijinke666 Oct 26, 2023
0e31107
chore: 还原配置
lijinke666 Oct 26, 2023
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
57 changes: 57 additions & 0 deletions packages/s2-core/__tests__/bugs/issue-2385-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/**
* @description spec for issue #2385
* https://github.com/antvis/S2/issues/2385
*/
import { createPivotSheet, getContainer } from '../util/helpers';

Check warning on line 5 in packages/s2-core/__tests__/bugs/issue-2385-spec.ts

View workflow job for this annotation

GitHub Actions / lint (18) 

'createPivotSheet' is defined but never used
import * as mockDataConfig from '../data/data-issue-2385.json';
import type { S2Options } from '../../src';
import { PivotSheet, TableSheet } from '@/sheet-type';

const s2Options: S2Options = {
width: 800,
height: 600,
style: {
cellCfg: {
width: 200,
},
layoutWidthType: 'compact',
},
};

describe('Compare Layout Tests', () => {
test('should get max col width for pivot sheet', () => {
const s2 = new PivotSheet(getContainer(), mockDataConfig, s2Options);
s2.setTheme({
dataCell: {
text: {
fontSize: 20,
},
},
});
s2.render();

const colLeafNodes = s2.facet.layoutResult.colLeafNodes;
expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(179);
expect(Math.floor(colLeafNodes[1].width)).toEqual(98);
});

test('should get max col width for table sheet', () => {
const s2 = new TableSheet(getContainer(), mockDataConfig, s2Options);
s2.setDataCfg({
fields: {
columns: ['price'],
},
});
s2.setTheme({
dataCell: {
text: {
fontSize: 20,
},
},
});
s2.render();

const colLeafNodes = s2.facet.layoutResult.colLeafNodes;
expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(165);
});
});
272 changes: 272 additions & 0 deletions packages/s2-core/__tests__/data/data-issue-2385.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,272 @@
{
"data": [
{
"province": "浙江",
"city": "杭州",
"type": "笔",
"price": "11111111"
},
{
"province": "浙江",
"city": "杭州",
"type": "纸张",
"price": "2"
},
{
"province": "浙江",
"city": "舟山",
"type": "笔",
"price": "2"
},
{
"province": "浙江",
"city": "舟山",
"type": "纸张",
"price": "133.333"
},
{
"province": "吉林",
"city": "长春",
"type": "笔",
"price": "3"
},
{
"province": "吉林",
"city": "长春",
"type": "纸张",
"price": "2"
},
{
"province": "吉林",
"city": "白山",
"type": "笔",
"price": "4"
},
{
"province": "吉林",
"city": "白山",
"type": "纸张",
"price": "1"
},
{
"province": "浙江",
"city": "杭州",
"type": "笔",
"price": "11111111111111111"
},
{
"province": "浙江",
"city": "杭州",
"type": "纸张",
"price": "2"
},
{
"province": "浙江",
"city": "舟山",
"type": "笔",
"price": "2"
},
{
"province": "浙江",
"city": "舟山",
"type": "纸张",
"price": "666.333"
},
{
"province": "吉林",
"city": "长春",
"type": "笔",
"price": "3"
},
{
"province": "吉林",
"city": "长春",
"type": "纸张",
"price": "2"
},
{
"province": "吉林",
"city": "白山",
"type": "笔",
"price": "4"
},
{
"province": "吉林",
"city": "白山",
"type": "纸张",
"price": "1"
},
{
"province": "浙江",
"city": "杭州",
"type": "笔",
"cost": "33.333"
},
{
"province": "浙江",
"city": "杭州",
"type": "纸张",
"cost": "1.5"
},
{
"province": "浙江",
"city": "舟山",
"type": "笔",
"cost": "1.5"
},
{
"province": "浙江",
"city": "舟山",
"type": "纸张",
"cost": "0.2"
},
{
"province": "吉林",
"city": "长春",
"type": "笔",
"cost": "2"
},
{
"province": "吉林",
"city": "长春",
"type": "纸张",
"cost": "1"
},
{
"province": "吉林",
"city": "白山",
"type": "笔",
"cost": "3"
},
{
"province": "吉林",
"city": "白山",
"type": "纸张",
"cost": "33.333"
},
{
"price": "15.5"
},
{
"province": "浙江",
"price": "5.5"
},
{
"province": "浙江",
"city": "杭州",
"price": "3"
},
{
"province": "浙江",
"city": "舟山",
"price": "2.5"
},
{
"province": "吉林",
"price": "10"
},
{
"province": "吉林",
"city": "长春",
"price": "5"
},
{
"province": "吉林",
"city": "白山",
"price": "5"
},
{
"type": "笔",
"price": "10"
},
{
"type": "笔",
"province": "浙江",
"price": "3"
},
{
"type": "笔",
"province": "吉林",
"price": "7"
},
{
"type": "纸张",
"price": "5.5"
},
{
"type": "纸张",
"province": "浙江",
"price": "2.5"
},
{
"type": "纸张",
"province": "吉林",
"price": "3"
},
{
"cost": "10.2"
},
{
"province": "浙江",
"cost": "3.7"
},
{
"province": "浙江",
"city": "杭州",
"cost": "2"
},
{
"province": "浙江",
"city": "舟山",
"cost": "1.7"
},
{
"province": "吉林",
"cost": "6.5"
},
{
"province": "吉林",
"city": "长春",
"cost": "3"
},
{
"province": "吉林",
"city": "白山",
"cost": "3.5"
},
{
"type": "笔",
"cost": "7"
},
{
"type": "笔",
"province": "浙江",
"cost": "2"
},
{
"type": "笔",
"province": "吉林",
"cost": "5"
},
{
"type": "纸张",
"cost": "3.2"
},
{
"type": "纸张",
"province": "浙江",
"cost": "1.7"
},
{
"type": "纸张",
"province": "吉林",
"cost": "1.5"
}
],
"fields": {
"rows": ["province", "city"],
"columns": ["type"],
"values": ["price"],
"valueInCols": true
}
}
25 changes: 20 additions & 5 deletions packages/s2-core/src/facet/pivot-facet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@
cell: colCellStyle,
icon: colIconStyle,
} = this.spreadsheet.theme.colCell;
const { text: dataCellTextStyle } = this.spreadsheet.theme.dataCell;

// leaf node rough width
const cellFormatter = this.spreadsheet.dataSet.getFieldFormatter(
Expand All @@ -307,7 +308,10 @@
colIconStyle,
);
const leafNodeRoughWidth =
this.spreadsheet.measureTextWidthRoughly(leafNodeLabel) + iconWidth;
this.spreadsheet.measureTextWidthRoughly(
leafNodeLabel,
colCellTextStyle,
) + iconWidth;

// 采样 50 个 label，逐个计算找出最长的 label
let maxDataLabel: string;
Expand All @@ -334,8 +338,10 @@
cellData[EXTRA_FIELD],
)?.(valueData) ?? valueData;
const cellLabel = `${formattedValue}`;
const cellLabelWidth =
this.spreadsheet.measureTextWidthRoughly(cellLabel);
const cellLabelWidth = this.spreadsheet.measureTextWidthRoughly(
cellLabel,
dataCellTextStyle,
);

if (cellLabelWidth > maxDataLabelWidth) {
maxDataLabel = cellLabel;
Expand All @@ -345,7 +351,6 @@
}
}

// compare result
const isLeafNodeWidthLonger = leafNodeRoughWidth > maxDataLabelWidth;
const maxLabel = isLeafNodeWidthLonger ? leafNodeLabel : maxDataLabel;
const appendedWidth = isLeafNodeWidthLonger ? iconWidth : 0;
Expand All @@ -354,10 +359,20 @@
'Max Label In Col:',
col.field,
maxLabel,
maxDataLabelWidth,
);

// 取列头/数值字体最大的文本宽度 https://github.com/antvis/S2/issues/2385
const maxTextWidth = this.spreadsheet.measureTextWidth(maxLabel, {
...colCellTextStyle,
fontSize: Math.max(
dataCellTextStyle.fontSize,
colCellTextStyle.fontSize,
),
});

return (
this.spreadsheet.measureTextWidth(maxLabel, colCellTextStyle) +
maxTextWidth +
colCellStyle.padding?.left +
colCellStyle.padding?.right +
appendedWidth
Expand Down Expand Up @@ -553,7 +568,7 @@
const dimensionGroup = isSubTotal
? totalConfig.subTotalsGroupDimensions || []
: totalConfig.totalsGroupDimensions || [];
const multipleMap: number[] = Array.from({ length: maxLevel + 1 }, () => 1);

Check warning on line 571 in packages/s2-core/src/facet/pivot-facet.ts

View check run for this annotation

Codecov / codecov/patch

packages/s2-core/src/facet/pivot-facet.ts#L571 

Added line #L571 was not covered by tests
for (let level = maxLevel; level > 0; level--) {
const currentField = fields[level] as string;
// 若不符合【分组维度包含此维度】或【者指标维度下非单指标维度】，此表头单元格为空，将宽高合并到上级单元格
Expand Down
Loading
Loading