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

antvis · Oct 26, 2023 · 9308e55 · 9308e55
1 parent 2443762
commit 9308e55
Show file tree

Hide file tree

Showing 7 changed files with 367 additions and 12 deletions.
diff --git a/packages/s2-core/__tests__/bugs/issue-2385-spec.ts b/packages/s2-core/__tests__/bugs/issue-2385-spec.ts
@@ -0,0 +1,57 @@
+/**
+ * @description spec for issue #2385
+ * https://github.com/antvis/S2/issues/2385
+ */
+import { createPivotSheet, getContainer } from '../util/helpers';
+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);
+  });
+});
diff --git a/packages/s2-core/__tests__/data/data-issue-2385.json b/packages/s2-core/__tests__/data/data-issue-2385.json
@@ -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
+  }
+}
diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
@@ -294,6 +294,7 @@ export class PivotFacet extends BaseFacet {
         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(
@@ -307,7 +308,10 @@ export class PivotFacet extends BaseFacet {
         colIconStyle,
       );
       const leafNodeRoughWidth =
-        this.spreadsheet.measureTextWidthRoughly(leafNodeLabel) + iconWidth;
+        this.spreadsheet.measureTextWidthRoughly(
+          leafNodeLabel,
+          colCellTextStyle,
+        ) + iconWidth;
 
       // 采样 50 个 label，逐个计算找出最长的 label
       let maxDataLabel: string;
@@ -334,8 +338,10 @@ export class PivotFacet extends BaseFacet {
                 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;
@@ -345,7 +351,6 @@ export class PivotFacet extends BaseFacet {
         }
       }
 
-      // compare result
       const isLeafNodeWidthLonger = leafNodeRoughWidth > maxDataLabelWidth;
       const maxLabel = isLeafNodeWidthLonger ? leafNodeLabel : maxDataLabel;
       const appendedWidth = isLeafNodeWidthLonger ? iconWidth : 0;
@@ -354,10 +359,20 @@ export class PivotFacet extends BaseFacet {
         '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