feat(theme): 新增度量值的主题配置, 修复小计总计主题配置不生效 close #1357

antvis · May 23, 2022 · bd2f9e7 · bd2f9e7
1 parent 264a9e9
commit bd2f9e7
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 37 deletions.
diff --git a/packages/s2-core/src/cell/col-cell.ts b/packages/s2-core/src/cell/col-cell.ts
@@ -15,8 +15,6 @@ import {
   CellBorderPosition,
   DefaultCellTheme,
   IconTheme,
-  TextAlign,
-  TextBaseline,
   TextTheme,
 } from '@/common/interface';
 import { AreaRange } from '@/common/interface/scroll';
@@ -26,7 +24,7 @@ import {
   getTextAndFollowingIconPosition,
   getTextAreaRange,
   adjustColHeaderScrollingViewport,
-  adjustColHeaderScrollingTextPostion,
+  adjustColHeaderScrollingTextPosition,
 } from '@/utils/cell/cell';
 import { renderIcon, renderLine, renderRect } from '@/utils/g-renders';
 import { isLastColumnAfterHidden } from '@/utils/hide-columns';
@@ -88,29 +86,19 @@ export class ColCell extends HeaderCell {
     );
   }
 
-  private getOriginalTextStyle(): TextTheme {
+  protected getTextStyle(): TextTheme {
     const { isLeaf, isTotals } = this.meta;
-    const { text, bolderText } = this.getStyle();
-    return isLeaf && !isTotals ? text : bolderText;
-  }
+    const { text, bolderText, measureText } = this.getStyle();
 
-  protected getTextStyle(): TextTheme {
-    const { isLeaf } = this.meta;
-    const textStyle = this.getOriginalTextStyle();
-    const hideMeasureColumn =
-      this.spreadsheet.options.style.colCfg.hideMeasureColumn;
-    let textAlign: TextAlign;
-    let textBaseline: TextBaseline;
-    if (isLeaf && !hideMeasureColumn) {
-      textAlign = this.theme.dataCell.text.textAlign;
-      textBaseline = this.theme.dataCell.text.textBaseline;
-    } else {
-      // 为方便 getTextAreaRange 计算文字位置
-      // textAlign 固定为 center
-      textAlign = 'center';
-      textBaseline = 'middle';
+    if (this.isMeasureField()) {
+      return measureText || bolderText;
+    }
+
+    if (isTotals || !isLeaf) {
+      return bolderText;
     }
-    return { ...textStyle, textAlign, textBaseline };
+
+    return text;
   }
 
   protected getMaxTextWidth(): number {
@@ -121,16 +109,19 @@ export class ColCell extends HeaderCell {
   protected getIconPosition(): Point {
     const { isLeaf } = this.meta;
     const iconStyle = this.getIconStyle();
+
     if (isLeaf) {
       return super.getIconPosition(this.getActionIconsCount());
     }
+
     const position = this.textAreaPosition;
 
     const totalSpace =
       this.actualTextWidth +
       this.getActionIconsWidth() -
       iconStyle.margin.right;
     const startX = position.x - totalSpace / 2;
+
     return {
       x: startX + this.actualTextWidth + iconStyle.margin.left,
       y: position.y - iconStyle.size / 2,
@@ -175,7 +166,7 @@ export class ColCell extends HeaderCell {
       width: width + (scrollContainsRowHeader ? cornerWidth : 0),
     };
 
-    const { textAlign } = this.getOriginalTextStyle();
+    const { textAlign } = this.getTextStyle();
     const adjustedViewport = adjustColHeaderScrollingViewport(
       viewport,
       textAlign,
@@ -196,7 +187,7 @@ export class ColCell extends HeaderCell {
 
     // textAreaRange.start 是以文字样式为 center 计算出的文字绘制点
     // 此处按实际样式(left or right)调整
-    const startX = adjustColHeaderScrollingTextPostion(
+    const startX = adjustColHeaderScrollingTextPosition(
       textAreaRange.start,
       textAreaRange.width - textAndIconSpace,
       textAlign,

diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
@@ -13,11 +13,10 @@ import {
 import { BaseHeaderConfig } from '@/facet/header/base';
 import { Node } from '@/facet/layout/node';
 import { includeCell } from '@/utils/cell/data-cell';
-import { S2Event } from '@/common/constant';
+import { EXTRA_FIELD, S2Event } from '@/common/constant';
 import { CellTypes } from '@/common/constant';
 import { getSortTypeIcon } from '@/utils/sort-action';
 import { SortParam } from '@/common/interface';
-import { TableColCell } from '@/cell/table-col-cell';
 
 export abstract class HeaderCell extends BaseCell<Node> {
   protected headerConfig: BaseHeaderConfig;
@@ -300,4 +299,8 @@ export abstract class HeaderCell extends BaseCell<Node> {
   public hideInteractionShape() {
     super.hideInteractionShape();
   }
+
+  public isMeasureField() {
+    return this.meta.field === EXTRA_FIELD;
+  }
 }
diff --git a/packages/s2-core/src/cell/row-cell.ts b/packages/s2-core/src/cell/row-cell.ts
@@ -359,13 +359,17 @@ export class RowCell extends HeaderCell {
   }
 
   protected getTextStyle(): TextTheme {
-    const { text, bolderText } = this.getStyle();
-    const style = this.isBolderText() ? bolderText : text;
+    const { text, bolderText, measureText } = this.getStyle();
 
-    return {
-      ...style,
-      textBaseline: 'top',
-    };
+    if (this.isMeasureField()) {
+      return measureText || bolderText;
+    }
+
+    if (this.isBolderText()) {
+      return bolderText;
+    }
+
+    return text;
   }
 
   protected getIconPosition() {

diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts
@@ -213,6 +213,8 @@ export interface DefaultCellTheme extends GridAnalysisCellTheme {
   bolderText?: TextTheme;
   /* 文本样式 */
   text?: TextTheme;
+  /* 度量值文本样式 */
+  measureText?: TextTheme;
   /* 单元格样式 */
   cell?: CellTheme;
   /* 图标样式 */

diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts
@@ -70,6 +70,16 @@ export const getTheme = (
       },
     },
     rowCell: {
+      measureText: {
+        fontFamily: FONT_FAMILY,
+        fontSize: 12,
+        fontWeight: 'normal',
+        fill: basicColors[14],
+        linkTextFill: basicColors[6],
+        opacity: 1,
+        textAlign: isTable ? 'center' : 'left',
+        textBaseline: 'top',
+      },
       bolderText: {
         fontFamily: FONT_FAMILY,
         fontSize: 12,
@@ -78,7 +88,7 @@ export const getTheme = (
         linkTextFill: basicColors[6],
         opacity: 1,
         textAlign: isTable ? 'center' : 'left',
-        textBaseline: 'middle',
+        textBaseline: 'top',
       },
       text: {
         fontFamily: FONT_FAMILY,
@@ -87,7 +97,7 @@ export const getTheme = (
         fill: basicColors[14],
         linkTextFill: basicColors[6],
         opacity: 1,
-        textBaseline: 'middle',
+        textBaseline: 'top',
         textAlign: isTable ? 'center' : 'left', // default align center for row cell in table mode
       },
       cell: {
@@ -150,6 +160,16 @@ export const getTheme = (
       seriesNumberWidth: 80,
     },
     colCell: {
+      measureText: {
+        fontFamily: FONT_FAMILY,
+        fontSize: 12,
+        fontWeight: isWindows() ? 'bold' : 520,
+        fill: basicColors[0],
+        opacity: 1,
+        // 默认数值字段和 dataCell 数值对齐
+        textAlign: 'right',
+        textBaseline: 'middle',
+      },
       bolderText: {
         fontFamily: FONT_FAMILY,
         fontSize: 12,

diff --git a/packages/s2-core/src/utils/cell/cell.ts b/packages/s2-core/src/utils/cell/cell.ts
@@ -382,7 +382,7 @@ export const adjustColHeaderScrollingViewport = (
  * @param textAlign
  * @returns
  */
-export const adjustColHeaderScrollingTextPostion = (
+export const adjustColHeaderScrollingTextPosition = (
   startX: number,
   restWidth: number,
   textAlign: TextAlign,

diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
@@ -102,6 +102,14 @@ export const s2Options: S2Options = {
   interaction: {
     enableCopy: true,
   },
+  // totals: {
+  //   col: {
+  //     showGrandTotals: true,
+  //     showSubTotals: true,
+  //     reverseLayout: true,
+  //     reverseSubLayout: false,
+  //   },
+  // },
 };
 
 export const sliderOptions: SliderSingleProps = {

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -148,7 +148,22 @@ function MainLayout() {
   const [sheetType, setSheetType] = React.useState<SheetType>('pivot');
   const [showPagination, setShowPagination] = React.useState(false);
   const [showTotals, setShowTotals] = React.useState(false);
-  const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({ name: 'default' });
+  const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({
+    name: 'default',
+    theme: {
+      colCell: {
+        // bolderText: {
+        //   textAlign: 'right',
+        // },
+        // text: {
+        //   textAlign: 'center',
+        // },
+        measureText: {
+          textAlign: 'right',
+        },
+      },
+    },
+  });
   const [themeColor, setThemeColor] = React.useState<string>('#FFF');
   const [showCustomTooltip, setShowCustomTooltip] = React.useState(false);
   const [adaptive, setAdaptive] = React.useState<Adaptive>(false);