docs: 润色文档细节 & 修复一些错误的文档示例地址

packages/s2-core/README.md

@@ -142,7 +142,7 @@ const s2DataConfig = {
 ```ts
 const s2Options = {
   width: 600,
-  height: 600,
+  height: 600
 }
 ```
 
@@ -214,9 +214,6 @@ yarn site:start
   <a>
     <img width="300" height="auto" alt="DingTalk" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2VvTSZmI4vYAAAAAAAAAAAAADmJ7AQ/original">
   </a>
-  <a>
-    <img width="300" height="auto" alt="qq" src="https://gw.alipayobjects.com/zos/antfincdn/v4TlwgORE/qq_qr_code.JPG">
-  </a>
 </p>
 
 ## 👬 Contributors

packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts

@@ -9,12 +9,13 @@ import { SeriesNumberHeader } from '@/facet/header/series-number';
 const s2 = createPivotSheet(
   {
     ...DEFAULT_OPTIONS,
-    frozenFirstRowPivot: true,
+    frozenFirstRow: true,
     totals: { row: { showGrandTotals: true, reverseLayout: true } },
     showSeriesNumber: true,
   },
   { useSimpleData: false },
 );
+
 describe('Frozen Row Header Test', () => {
   test.each(['grid', 'tree'])(
     'frozen row header group api',

packages/s2-core/__tests__/unit/facet/pivot-facet-frozen-spec.ts

@@ -1,29 +1,30 @@
 /**
  * pivot mode pivot test.
  */
-import { createPivotSheet } from 'tests/util/helpers';
 import type { IGroup } from '@antv/g-canvas';
 import { get } from 'lodash';
+import { createPivotSheet } from 'tests/util/helpers';
 
-import type { PivotSheet, SpreadSheet } from '@antv/s2';
+import type { PivotSheet, S2Options } from '@antv/s2';
 import { FrozenRowCell, SeriesNumberCell } from '@/cell';
-import { getFrozenRowCfgPivot } from '@/facet/utils';
 import {
   FrozenGroup,
   KEY_GROUP_ROW_HEADER_FROZEN,
   KEY_GROUP_ROW_SCROLL,
 } from '@/common';
 import type { FrozenFacet } from '@/facet/frozen-facet';
+import { getFrozenRowCfgPivot } from '@/facet/utils';
 
-const defaultOptions = {
-  frozenFirstRowPivot: true,
+const defaultS2Options: S2Options = {
+  frozenFirstRow: true,
   totals: {
     row: {
       showGrandTotals: true,
       reverseLayout: true,
     },
   },
 };
+
 const enableFrozenFistRowOption = {
   frozenRowCount: 1,
   frozenColCount: 0,
@@ -32,6 +33,7 @@ const enableFrozenFistRowOption = {
   enableFrozenFirstRow: true,
   frozenRowHeight: 30,
 };
+
 const disableFrozenFistRowOption = {
   ...enableFrozenFistRowOption,
   frozenRowCount: 0,
@@ -43,7 +45,7 @@ let s2: PivotSheet;
 
 describe('test getFrozenRowCfgPivot', () => {
   beforeEach(() => {
-    s2 = createPivotSheet(defaultOptions, { useSimpleData: false });
+    s2 = createPivotSheet(defaultS2Options, { useSimpleData: false });
   });
 
   afterEach(() => {
@@ -76,7 +78,7 @@ describe('test getFrozenRowCfgPivot in tree', () => {
   beforeEach(() => {
     s2 = createPivotSheet(
       {
-        ...defaultOptions,
+        ...defaultS2Options,
         hierarchyType: 'tree',
         pagination: {
           pageSize: 0,
@@ -106,7 +108,7 @@ describe('test getFrozenRowCfgPivot in tree', () => {
   test('showSeriesNumber has totals', () => {
     s2.setOptions({
       showSeriesNumber: true,
-      ...defaultOptions,
+      ...defaultS2Options,
     });
     s2.render();
 
@@ -118,7 +120,7 @@ describe('test getFrozenRowCfgPivot in tree', () => {
 
 describe('test cell XYIndexes frozen first row', () => {
   beforeEach(() => {
-    s2 = createPivotSheet(defaultOptions, { useSimpleData: false });
+    s2 = createPivotSheet(defaultS2Options, { useSimpleData: false });
     s2.render();
   });
 
@@ -338,7 +340,7 @@ describe('test frozen group', () => {
   beforeEach(() => {
     s2 = createPivotSheet(
       {
-        ...defaultOptions,
+        ...defaultS2Options,
         showSeriesNumber: true,
       },
       { useSimpleData: false },

packages/s2-core/src/common/interface/s2Options.ts

@@ -126,7 +126,8 @@ export interface S2TableSheetOptions {
 // Pivot sheet options
 export interface S2PivotSheetOptions {
   // pivot sheet type: frozen head row, default false
-  frozenFirstRowPivot?: boolean;
+  // TODO: 2.0 版本统一在 frozen: { ... } 命名空间下
+  frozenFirstRow?: boolean;
 }
 
 export interface S2Options<

packages/s2-core/src/facet/utils.ts

@@ -545,19 +545,19 @@ export const areAllFieldsEmpty = (fields: Fields) => {
 export const getFrozenRowCfgPivot = (
   options: Pick<
     S2Options,
-    'frozenFirstRowPivot' | 'pagination' | 'hierarchyType' | 'showSeriesNumber'
+    'frozenFirstRow' | 'pagination' | 'hierarchyType' | 'showSeriesNumber'
   >,
   rowNodes: Node[],
 ): S2TableSheetOptions & {
   frozenRowHeight: number;
   enableFrozenFirstRow: boolean;
 } => {
-  const { pagination, frozenFirstRowPivot, hierarchyType, showSeriesNumber } =
+  const { pagination, frozenFirstRow, hierarchyType, showSeriesNumber } =
     options;
   const enablePagination = pagination && pagination.pageSize;
   let enableFrozenFirstRow = false;
   const headNode = rowNodes?.[0];
-  if (!enablePagination && frozenFirstRowPivot) {
+  if (!enablePagination && frozenFirstRow) {
     // first node no children: entire row
     enableFrozenFirstRow = headNode?.children?.length === 0;
     const treeMode = hierarchyType === 'tree' || hierarchyType === 'customTree';

packages/s2-react/README.md

@@ -105,7 +105,7 @@ const s2DataConfig = {
 ```ts
 const s2Options = {
   width: 600,
-  height: 480,
+  height: 480
 }
 ```
 
@@ -117,18 +117,17 @@ const s2Options = {
 <div id="container"></div>
 ```
 
-```ts
+```tsx
+import ReactDOM from 'react-dom'
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-const container = document.getElementById('container');
-
 ReactDOM.render(
   <SheetComponent
     dataCfg={s2DataConfig}
     options={s2Options}
   />,
-  document.getElementById('container'),
+  document.getElementById('container')
 );
 ```
 

packages/s2-react/playground/config.ts

@@ -80,6 +80,7 @@ export const s2Options: SheetComponentOptions = {
   debug: true,
   width: 600,
   height: 400,
+  frozenFirstRow: true,
   showSeriesNumber: false,
   interaction: {
     enableCopy: true,

s2-site/docs/api/components/drill-down.zh.md

@@ -19,7 +19,7 @@ const s2Options = {
 />
 ```
 
-​📊 查看 [React 版下钻 demo](/examples/react-component/drill-dwon#for-pivot)
+​📊 查看 [React 版下钻 demo](/examples/react-component/drill-down#for-pivot)
 
 ## Vue 下钻组件
 

s2-site/docs/api/general/S2Options.zh.md

@@ -32,9 +32,9 @@ const s2Options = {
 | style | [Style](#style) |  |    | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等 |
 | frozenRowCount | `number` |  |    | 冻结行的数量，从顶部开始计数 （明细表有效） |
 | frozenColCount | `number` |  |    | 冻结列的数量，从左侧开始计数 （明细表有效） |
-| frozenTrailingRowCount | `number` |    |  | 冻结行数量，从底部开始计数 （明细表有效） |
-| frozenTrailingColCount | `number` |    |  | 冻结列的数量，从右侧开始计数 （明细表有效） |
-| frozenFirstRowPivot | `boolean` |  |   `false` | 首行不存在子节点时, 冻结首行, 适用于聚合模式总计置于顶部冻结总计行, 树状模式冻结首行等场景 (透视表有效) | `@antv/[email protected]` |
+| frozenTrailingRowCount | `number` |    |  | 冻结行数量，从底部开始计数（明细表有效） |
+| frozenTrailingColCount | `number` |    |  | 冻结列的数量，从右侧开始计数（明细表有效） |
+| frozenFirstRow | `boolean` |  |   `false` | 首行不存在子节点时，冻结首行（透视表有效）, 适用于聚合模式总计置于顶部冻结总计行，树状模式冻结首行等场景。| `@antv/s2@^1.53.0` |
 | hdAdapter | `boolean` |  |   `true` | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter) |
 | mergedCellsInfo | [MergedCellInfo[][]](#mergedcellinfo) |    |  | 合并单元格信息 |
 | placeholder |  `string \| (meta: Record<string, any>) => string` |    |  | 空单元格的填充内容 |
@@ -52,8 +52,8 @@ const s2Options = {
 | layoutDataPosition | [layoutDataPosition](#layoutdataposition)   |  |  | 自定义数据 |
 | filterDisplayDataItem | [FilterDataItemCallback](#filterdataitemcallback) |  |    | 过滤数据 |
 | mappingDisplayDataItem | [MappingDataItemCallback](#mappingdataitemcallback) |  |    | 转换数据，用于 tooltip 显示 |
-| dataSet | [DataSet](#dataset) |  |  |   自定义数据集 |
-| supportCSSTransform | `boolean` |  |   `false` | 开启后支持 CSS transform, 解决父元素设置 `transform` 后，鼠标坐标响应不正确的问题  |
+| dataSet | [DataSet](#dataset) |  |  | 自定义数据集 |
+| supportCSSTransform | `boolean` |  | `false` | 开启后支持 CSS transform, 解决父元素设置 `transform` 后，鼠标坐标响应不正确的问题  |
 | devicePixelRatio | `number` |  |   `window.devicePixelRatio` | 自定义设备像素比  |
 
 <embed src="@/docs/common/interaction.zh.md"></embed>

s2-site/docs/manual/basic/analysis/drill-down.zh.md

@@ -3,7 +3,6 @@ title: 维度下钻
 order: 13
 ---
 
-
 S2 提供的「维度下钻」的能力，可以为你挖掘不同维度下更详细的数据，让你的数据洞察变得更清晰。
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/J7bnG8lcf/xiazuan.gif" height="400" alt="preview" />
@@ -88,24 +87,25 @@ const PartDrillDown = {
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { SheetComponent } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
 
 const s2Options = {
   hierarchyType: 'tree', // 树形结构
 };
 
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-    partDrillDown={PartDrillDown}
-  />,
-  document.getElementById('container'),
-);
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+      partDrillDown={PartDrillDown}
+    />
+  )
+}
 ```
 
-<Playground path='react-component/drill-dwon/demo/for-pivot.tsx' rid='container'></playground>
+<Playground path='react-component/drill-down/demo/for-pivot.tsx' rid='container'></playground>
 
 ## 使用场景
 

s2-site/docs/manual/basic/analysis/editable-mode.zh.md

@@ -3,21 +3,25 @@ title: 编辑表
 order: 3
 ---
 
-## 明细表简介
+## 简介
 
-编辑表是 `S2` 明细表的衍生形态之一。在提供完整的明细表的分析功能之外，还支持对数据的修改操作。
+编辑表是 `S2` 明细表的衍生形态之一，基于 `React` 版本的明细表封装，在提供完整的明细表的分析功能之外，还支持对数据的修改操作。
 
 <img alt="editable-mode" src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*9RoBT5FIJG0AAAAAAAAAAAAAARQnAQ" width="600">
 
 ## 使用
 
+:::warning{title="注意"}
+编辑表的原理本质上是在 `Canvas` 表格上增加一个 `div` 蒙层，来实现对数据的编辑，如果想在 `@antv/s2` 和 `@antv/s2-vue` 中使用，请自行参考 [React 版本的实现](https://github.com/antvis/S2/blob/b81b7957b9e8b8e1fbac9ebc6cacdf45a14e5412/packages/s2-react/src/components/sheets/editable-sheet/index.tsx#L7) 进行封装。
+:::
+
+<Playground path='react-component/sheet/demo/editable' rid='container'></playground>
+
 ```html
 <div id="container"></div>
 ```
 
-### React 组件方式
-
-```typescript
+```tsx
 import React from "react";
 import ReactDOM from "react-dom";
 import { SheetComponent } from '@antv/s2-react';
@@ -160,17 +164,19 @@ const s2Options = {
 // 4, 渲染
 ReactDOM.render(
   <SheetComponent
-    sheetType="editable" // 此处指定sheetType为editable
+    sheetType="editable" // 此处指定 sheetType 为 editable
     dataCfg={s2DataCfg}
     options={s2Options}
+    onDataCellEditEnd={(meta) => {
+      console.log('onDataCellEditEnd', meta);
+    }}
   />,
   document.getElementById('container')
 );
 ```
 
-## 特性
+## 效果
 
-效果如图：
-<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*9RoBT5FIJG0AAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />
+[查看示例](/examples/react-component/sheet#editable)
 
-[playground 地址](/examples/react-component/sheet#editable)
+<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*9RoBT5FIJG0AAAAAAAAAAAAAARQnAQ" width="600" alt="preview" />

s2-site/docs/manual/basic/analysis/strategy.zh.md

@@ -16,7 +16,7 @@ order: 9
 <details>
 <summary>点击查看趋势分析表 options 配置</summary>
 
-```js
+```ts
 const s2Options = {
   width: 600,
   height: 480,
@@ -56,21 +56,20 @@ const s2Options = {
 
 </details>
 
-```ts
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from "@antv/s2-react";
 import '@antv/s2-react/dist/style.min.css';
 
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataCfg}
-    options={s2Options}
-    sheetType="strategy"
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataCfg}
+      options={s2Options}
+      sheetType="strategy"
+    />
+  )
+}
 ```
 
 <Playground path='react-component/sheet/demo/strategy.tsx' rid='container'></playground>

s2-site/docs/manual/basic/analysis/switcher.zh.md

@@ -32,18 +32,17 @@ const switcherFields = {
 
 ```js
 import React from "react";
-import ReactDOM from "react-dom";
 import { Switcher } from "@antv/s2-react";
 
 const onSubmit = (result) => {
   console.log("result:", result);
 };
 
-ReactDOM.render(
-  <Switcher {...switcherFields} onSubmit={onSubmit} />,
-  document.getElementById("container")
-);
-
+const App = () => {
+  return (
+    <Switcher {...switcherFields} onSubmit={onSubmit} />
+  )
+}
 ```
 
 <Playground path='react-component/switcher/demo/pure-switcher.tsx' rid='container'></playground>