diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
index 281de69170..a60dd22a75 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
@@ -563,8 +563,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#3471F9",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -572,8 +570,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#5286FA",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -1142,8 +1138,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#7899ff",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -1151,8 +1145,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#7899ff",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -1721,8 +1713,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#326EF4",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -1730,8 +1720,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#326EF4",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -2300,8 +2288,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#BAC1CC",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -2309,8 +2295,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#BAC1CC",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -2879,8 +2863,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#326EF4",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -2888,8 +2870,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#326EF4",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -3458,8 +3438,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#326EF4",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -3467,8 +3445,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#326EF4",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
diff --git a/packages/s2-core/src/facet/header/frame.ts b/packages/s2-core/src/facet/header/frame.ts
index 3389b2a95d..bb777fd9fa 100644
--- a/packages/s2-core/src/facet/header/frame.ts
+++ b/packages/s2-core/src/facet/header/frame.ts
@@ -20,11 +20,11 @@ export class Frame extends Group {
}
public layout() {
- // corner底部的横线条
+ // corner 底部的横线条
this.addCornerBottomBorder();
- // corner右边的竖线条
+ // corner 右边的竖线条
this.addCornerRightBorder();
- // 一级纵向分割线两侧的shadow
+ // 一级纵向分割线两侧的 shadow
this.addSplitLineShadow();
}
@@ -43,7 +43,6 @@ export class Frame extends Group {
}
public static getVerticalBorderWidth(spreadsheet: SpreadSheet): number {
- // 交叉表一条竖线拉通即可
const { splitLine, cornerCell, colCell, dataCell } = spreadsheet.theme;
if (spreadsheet.isPivotMode()) {
@@ -89,7 +88,6 @@ export class Frame extends Group {
}
private addCornerRightBorder() {
- // 交叉表一条竖线拉通即可
const { cornerWidth, cornerHeight, viewportHeight, position, spreadsheet } =
this.cfg;
const {
@@ -101,39 +99,25 @@ export class Frame extends Group {
const frameVerticalWidth = Frame.getVerticalBorderWidth(spreadsheet);
const x = position.x + cornerWidth + frameVerticalWidth! / 2;
- if (spreadsheet.isPivotMode()) {
- const y2 =
- position.y + cornerHeight + horizontalBorderWidth! + viewportHeight;
-
- this.cornerRightBorder = renderLine(this, {
- x1: x,
- y1: position.y,
- x2: x,
- y2,
- stroke: verticalBorderColor,
- lineWidth: frameVerticalWidth,
- strokeOpacity: verticalBorderColorOpacity,
- });
-
- return;
- }
-
- // 明细表需要区分头部的边框和明细格子的边框
+ // 表头和表身的单元格背景色不同, 分割线不能一条线拉通, 不然视觉不协调.
+ // 分两条线绘制, 默认和分割线所在区域对应的单元格边框颜色保持一致
const {
verticalBorderColor: headerVerticalBorderColor,
verticalBorderColorOpacity: headerVerticalBorderColorOpacity,
- } = spreadsheet.options.seriesNumber?.enable
- ? spreadsheet.theme.cornerCell!.cell!
- : spreadsheet.theme.colCell!.cell!;
+ } =
+ spreadsheet.options.seriesNumber?.enable || spreadsheet.isPivotMode()
+ ? spreadsheet.theme.cornerCell!.cell!
+ : spreadsheet.theme.colCell!.cell!;
renderLine(this, {
x1: x,
y1: position.y,
x2: x,
y2: position.y + cornerHeight,
- stroke: headerVerticalBorderColor,
+ stroke: verticalBorderColor || headerVerticalBorderColor,
lineWidth: frameVerticalWidth,
- strokeOpacity: headerVerticalBorderColorOpacity,
+ strokeOpacity:
+ verticalBorderColorOpacity || headerVerticalBorderColorOpacity,
});
const {
@@ -146,9 +130,10 @@ export class Frame extends Group {
y1: position.y + cornerHeight + horizontalBorderWidth!,
x2: x,
y2: position.y + cornerHeight + horizontalBorderWidth! + viewportHeight,
- stroke: cellVerticalBorderColor,
+ stroke: verticalBorderColor || cellVerticalBorderColor,
lineWidth: frameVerticalWidth,
- strokeOpacity: cellVerticalBorderColorOpacity,
+ strokeOpacity:
+ verticalBorderColorOpacity || cellVerticalBorderColorOpacity,
});
}
@@ -167,6 +152,15 @@ export class Frame extends Group {
horizontalBorderWidth,
horizontalBorderColorOpacity,
} = spreadsheet.theme?.splitLine!;
+
+ const {
+ horizontalBorderColor: headerHorizontalBorderColor,
+ horizontalBorderColorOpacity: headerHorizontalBorderColorOpacity,
+ } =
+ spreadsheet.options.seriesNumber?.enable || spreadsheet.isPivotMode()
+ ? spreadsheet.theme.cornerCell!.cell!
+ : spreadsheet.theme.colCell!.cell!;
+
const x1 = position.x;
const x2 =
x1 +
@@ -181,9 +175,10 @@ export class Frame extends Group {
y1: y,
x2,
y2: y,
- stroke: horizontalBorderColor,
+ stroke: horizontalBorderColor || headerHorizontalBorderColor,
lineWidth: horizontalBorderWidth,
- opacity: horizontalBorderColorOpacity,
+ opacity:
+ horizontalBorderColorOpacity || headerHorizontalBorderColorOpacity,
});
}
@@ -200,7 +195,6 @@ export class Frame extends Group {
return;
}
- // do render...
this.addSplitLineLeftShadow();
this.addSplitLineRightShadow();
}
diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts
index 124303bda9..6bd4410e1a 100644
--- a/packages/s2-core/src/theme/index.ts
+++ b/packages/s2-core/src/theme/index.ts
@@ -497,11 +497,7 @@ export const getTheme = (
},
// ------------- split line -----------------
splitLine: {
- horizontalBorderColor: basicColors[12],
- horizontalBorderColorOpacity: 0.2,
horizontalBorderWidth: 2,
- verticalBorderColor: basicColors[11],
- verticalBorderColorOpacity: 0.25,
verticalBorderWidth: 2,
showShadow: true,
shadowWidth: 8,
diff --git a/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap b/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap
index 092d142832..b854363f3c 100644
--- a/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap
+++ b/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap
@@ -563,7 +563,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#5184F6",
"horizontalBorderColorOpacity": 1,
"horizontalBorderWidth": 2,
"shadowColors": Object {
@@ -572,7 +571,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#5184F6",
"verticalBorderColorOpacity": 1,
"verticalBorderWidth": 2,
},
@@ -1142,8 +1140,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#326EF4",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -1151,8 +1147,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#5184F6",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -1721,8 +1715,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#396",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -1730,8 +1722,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#52A87D",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -2300,8 +2290,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#326EF4",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -2309,8 +2297,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#326EF4",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -2879,8 +2865,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#326EF4",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -2888,8 +2872,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#5184F6",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -3458,8 +3440,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#B6C0D7",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 2,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -3467,8 +3447,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#B6C0D7",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 2,
},
}
@@ -4038,8 +4016,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
- "horizontalBorderColor": "#326EF4",
- "horizontalBorderColorOpacity": 0.2,
"horizontalBorderWidth": 0,
"shadowColors": Object {
"left": "rgba(0,0,0,0.1)",
@@ -4047,8 +4023,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
- "verticalBorderColor": "#5184F6",
- "verticalBorderColorOpacity": 0.25,
"verticalBorderWidth": 0,
},
}
diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
index acc79ef00f..64c8bac680 100644
--- a/packages/s2-react/playground/config.tsx
+++ b/packages/s2-react/playground/config.tsx
@@ -442,7 +442,7 @@ export const sliderOptions: SliderSingleProps = {
};
export const s2ThemeConfig: ThemeCfg = {
- name: 'default',
+ name: 'colorful',
theme: {},
};
diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
index 2d36efeaaa..f64ad79612 100644
--- a/s2-site/docs/api/general/S2Theme.zh.md
+++ b/s2-site/docs/api/general/S2Theme.zh.md
@@ -114,13 +114,13 @@ s2.setTheme({
| 参数 | 说明 | 类型 | 默认值 | 必选 |
| ---------------------------- | --------------------------------------------------------- | -------------------------------------- | -------------------------------------------------------- | ---- |
| horizontalBorderColor | 水平分割线颜色 | `string` | - | |
-| horizontalBorderColorOpacity | 水平分割线颜色透明度 | `number` | 0.2 | |
+| horizontalBorderColorOpacity | 水平分割线颜色透明度 | `number` | - | |
| horizontalBorderWidth | 水平分割线宽度 | `number` | 2 | |
| verticalBorderColor | 垂直分割线颜色 | `string` | - | |
-| verticalBorderColorOpacity | 垂直分割线颜色透明度 | `number` | 0.25 | |
+| verticalBorderColorOpacity | 垂直分割线颜色透明度 | `number` | - | |
| verticalBorderWidth | 垂直分割线宽度 | `number` | 2 | |
| showShadow | 分割线是否显示外阴影(行列冻结情况下) | `boolean` | `true` | |
-| shadowWidth | 阴影宽度 | `number` | 10 | |
+| shadowWidth | 阴影宽度 | `number` | 8 | |
| shadowColors | `left` : 线性变化左侧颜色
`right` : 线性变化右侧颜色 | `{left: string,`
`right: string}` | `{left: 'rgba(0,0,0,0.1)',`
`right: 'rgba(0,0,0,0)'}` | |
| borderDash | 分割线虚线 | `number \| string \| (string \| number)[]` | `[]` | |
diff --git a/s2-site/docs/common/totals.zh.md b/s2-site/docs/common/totals.zh.md
index 745a267137..63ddc33e36 100644
--- a/s2-site/docs/common/totals.zh.md
+++ b/s2-site/docs/common/totals.zh.md
@@ -19,7 +19,7 @@ order: 3
| 参数 | 说明 | 类型 | 默认值 | 必选 |
| ------------------- | ------------------------ | ------------ | ------- | ---- |
| showGrandTotals | 是否显示总计 | `boolean` | `false` | |
-| showSubTotals | 是否显示小计。当配置为对象时,always 控制是否在子维度不足 2 个时始终展示小计,默认不展示 | `boolean \| { always: boolean }` | `false` | |
+| showSubTotals | 是否显示小计。配置为对象时,`always` 用于控制当子维度小于 2 个时是否始终展示小计,默认展示 | `boolean \| { always: boolean }` | `false` | |
| subTotalsDimensions | 小计的汇总维度 | `string[]` | `[]` | |
| reverseGrandTotalsLayout | 总计布局位置,默认下或右 | `boolean` | `false` | |
| reverseSubTotalsLayout | 小计布局位置,默认下或右 | `boolean` | `false` | |
diff --git a/s2-site/docs/manual/basic/totals.zh.md b/s2-site/docs/manual/basic/totals.zh.md
index 21b061eae6..8f51a1ae2c 100644
--- a/s2-site/docs/manual/basic/totals.zh.md
+++ b/s2-site/docs/manual/basic/totals.zh.md
@@ -96,11 +96,11 @@ order: 5
| 参数 | 说明 | 类型 | 默认值 | 必选 |
| ------------------- | ------------------------ | ------------ | ------ | ---- |
-| showGrandTotals | 是否显示总计 | `boolean` | false | ✓ |
-| showSubTotals | 是否显示小计。当配置为对象时,always 控制是否在子维度不足 2 个时始终展示小计,默认不展示。 | `boolean \| { always: boolean }` | false | ✓ |
-| subTotalsDimensions | 小计的汇总维度 | `string[]` | [] | ✓ |
-| reverseGrandTotalsLayout | 总计布局位置,默认下或右 | `boolean` | false | ✓ |
-| reverseSubTotalsLayout | 小计布局位置,默认下或右 | `boolean` | false | ✓ |
+| showGrandTotals | 是否显示总计 | `boolean` | false | |
+| showSubTotals | 是否显示小计。配置为对象时,`always` 用于控制当子维度小于 2 个时是否始终展示小计,默认展示 | `boolean \| { always: boolean }` | false | |
+| subTotalsDimensions | 小计的汇总维度 | `string[]` | [] | |
+| reverseGrandTotalsLayout | 总计布局位置,默认下或右 | `boolean` | false | |
+| reverseSubTotalsLayout | 小计布局位置,默认下或右 | `boolean` | false | |
| grandTotalsLabel | 总计别名 | `string` | `总计` | |
| subTotalsLabel | 小计别名 | `string` | `小计` | |
| calcGrandTotals | 计算总计 | `CalcTotals` | | |
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index f6f844f472..eedb89c210 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -930,6 +930,19 @@ s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
+ dataCell.getValueRange()
```
+#### 分割线主题配置默认值变更
+
+分割线的 `颜色` 和 `透明度` 默认值移除,默认和所在区域对应的单元格保持一致。
+
+```diff
+splitLine: {
+- horizontalBorderColor: basicColors[12],
+- horizontalBorderColorOpacity: 0.2,
+- verticalBorderColor: basicColors[12],
+- verticalBorderColorOpacity: 0.25,
+}
+```
+
### 组件层 @antv/s2-react
#### 支持 React 18 和 Ant Design 5.0