docs: 新增自定义明细表单元格 & 自定义 mini 图文档

s2-site/docs/manual/advanced/custom/hook.zh.md

@@ -31,23 +31,23 @@ order: 1
 
 ## dataCell
 
-改变数据单元格的默认实现，需要继承自 [dataCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#data-cell)
+修改数据单元格的默认实现，需要继承自 [DataCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts) （明细表对应 [TableDataCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-data-cell.ts))，复写某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#data-cell)
 
 ## rowCell
 
-改变行头单元格的默认实现，需要继承自 [rowCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#row-cell)
+修改行头单元格的默认实现，需要继承自 [RowCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts)，复写某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#row-cell)
 
 ## colCell
 
-改变列头单元格的默认实现，需要继承自 [colCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#col-cell)
+修改列头单元格的默认实现，需要继承自 [ColCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts)（明细表对应 [TableColCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-col-cell.ts))，复写某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#col-cell)
 
 ## cornerCell
 
-改变角头单元格的默认实现，需要继承自 [cornerCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/corner-cell.ts)，覆盖某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#corner-cell)
+修改角头单元格的默认实现，需要继承自 [TableCornerCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/corner-cell.ts)（明细表对应 [TableCornerCell](https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-corner-cell.ts))，复写某些方法，比如字体样式、背景样式等。[例子](/examples/custom/custom-cell#corner-cell)
 
 ## cornerHeader
 
-改变角头的默认实现，需要继承自 [Group](https://g.antv.vision/zh/docs/api/group)，覆盖某些方法，比如渲染内容更换等。[例子](/examples/custom/custom-cell#corner-cell)
+修改角头的默认实现，需要继承自 [Group](https://g.antv.vision/zh/docs/api/group)，复写某些方法，比如渲染内容更换等。[例子](/examples/custom/custom-cell#corner-header)
 
 ## frame
 

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

@@ -176,7 +176,13 @@ const s2Options = {
 
 <Playground path='react-component/sheet/demo/strategy-mini-chart.tsx' rid='container2'></playground>
 
-配置如下：
+### 在普通透视表中使用
+
+如果不依赖 `React`, 想在 `@antv/s2` 普通的透视表中使用 mini 图，可以参考这个 [示例](/zh/examples/custom/custom-cell/#mini-chart)
+
+<Playground path='custom/custom-cell/demo/mini-chart.ts' rid='container3'></playground>
+
+### API
 
 <embed src="@/docs/common/mini-chart.zh.md"></embed>
 

s2-site/examples/case/art/demo/lost-text.tsx

@@ -0,0 +1,292 @@
+/* eslint-disable max-classes-per-file */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { SheetComponent } from '@antv/s2-react';
+import { Tag } from 'antd';
+import {
+  BaseEvent,
+  CellTypes,
+  getTheme,
+  InterceptType,
+  S2Event,
+  CornerCell,
+} from '@antv/s2';
+
+import '@antv/s2-react/dist/style.min.css';
+
+const Theme = {
+  rowCell: {
+    text: {
+      opacity: 0,
+    },
+    bolderText: {
+      opacity: 0,
+    },
+    measureText: {
+      opacity: 0,
+    },
+  },
+  colCell: {
+    text: {
+      opacity: 0,
+    },
+    bolderText: {
+      opacity: 0,
+    },
+    measureText: {
+      opacity: 0,
+    },
+  },
+  dataCell: {
+    text: {
+      opacity: 0,
+    },
+  },
+};
+
+class CustomCornerCell extends CornerCell {
+  drawBackgroundShape() {
+    this.addShape('rect', {
+      attrs: {
+        ...this.getCellArea(),
+        fill: '#E0E9FD',
+      },
+    });
+  }
+
+  getCornerText() {
+    return '👍🏻';
+  }
+}
+
+class CustomInteraction extends BaseEvent {
+  timer = null;
+
+  count = 0;
+
+  changeCell(cellType: CellTypes) {
+    this.count++;
+
+    const defaultTheme = getTheme(null)?.[cellType];
+    this.spreadsheet.setTheme({
+      [cellType]: defaultTheme,
+    });
+    this.spreadsheet.render(false);
+
+    if (this.count >= 3) {
+      clearInterval(this.timer);
+      this.showSuccessTips();
+    }
+  }
+
+  resetCell() {
+    this.count = 0;
+    this.spreadsheet.setTheme(Theme);
+    this.spreadsheet.render(false);
+  }
+
+  showSuccessTips() {
+    const rect = this.spreadsheet.getCanvasElement().getBoundingClientRect();
+
+    this.spreadsheet.showTooltip({
+      position: {
+        x: rect.width / 2 + rect.left,
+        y: rect.height / 2 + rect.top,
+      },
+      content: (
+        <div
+          style={{
+            padding: 20,
+            textAlign: 'center',
+          }}
+        >
+          <h3>💐 通关啦 💐</h3>
+          <p>
+            S2
+            多维交叉分析表格是多维交叉分析领域的表格解决方案，数据驱动视图，提供底层核心库、基础组件库、业务场景库，具备自由扩展的能力，让开发者既能开箱即用，也能基于自身场景自由发挥。
+          </p>
+          <p>
+            <a href="https://s2.antv.antgroup.com" target="__blank">
+              前往官网 https://s2.antv.antgroup.com/
+            </a>
+          </p>
+        </div>
+      ),
+    });
+    this.spreadsheet.interaction.addIntercepts([InterceptType.HOVER]);
+  }
+
+  bindEvents() {
+    // 角头: 一键三连
+    this.addCornerCellInteraction();
+    // 行头: 多选全部偶数行
+    this.addRowCellInteraction();
+    // 列头: 调整列宽/刷选全部
+    this.addColCellInteraction();
+    // 数值: 键盘方向键移动端选中单元格到右下角
+    this.addDataCellInteraction();
+  }
+
+  addCornerCellInteraction() {
+    const countMap: Record<number, CellTypes> = {
+      0: CellTypes.ROW_CELL,
+      1: CellTypes.COL_CELL,
+      2: CellTypes.DATA_CELL,
+    };
+
+    this.spreadsheet.on(S2Event.CORNER_CELL_MOUSE_DOWN, () => {
+      clearInterval(this.timer);
+      this.resetCell();
+
+      this.timer = setInterval(() => {
+        this.changeCell(countMap[this.count]);
+      }, 1000);
+    });
+
+    this.spreadsheet.on(S2Event.CORNER_CELL_MOUSE_UP, () => {
+      clearInterval(this.timer);
+
+      if (this.count < 3) {
+        this.resetCell();
+      }
+    });
+  }
+
+  addDataCellInteraction() {
+    this.spreadsheet.on(S2Event.DATA_CELL_SELECT_MOVE, (cells) => {
+      const { colIndex, rowIndex } = cells[0];
+
+      const isLastCell = colIndex === 3 && rowIndex === 7;
+      if (isLastCell) {
+        this.changeCell(CellTypes.DATA_CELL);
+      }
+    });
+  }
+
+  addColCellInteraction() {
+    this.spreadsheet.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, ({ info }) => {
+      const rules = [6, 66, 666];
+      if (rules.includes(info.resizedWidth)) {
+        this.changeCell(CellTypes.COL_CELL);
+      }
+    });
+
+    this.spreadsheet.on(S2Event.COL_CELL_BRUSH_SELECTION, (colCells) => {
+      const isAllSelected =
+        colCells.length === this.spreadsheet.getColumnNodes().length;
+      if (isAllSelected) {
+        this.changeCell(CellTypes.COL_CELL);
+      }
+    });
+  }
+
+  addRowCellInteraction() {
+    this.spreadsheet.on(S2Event.GLOBAL_SELECTED, (cells) => {
+      const selectedOddRowCells = cells.filter((cell) => {
+        const meta = cell.getMeta();
+        return cell.cellType === CellTypes.ROW_CELL && meta.rowIndex % 2 !== 0;
+      });
+
+      const isAllOddRowCellsSelected = selectedOddRowCells.length === 4;
+      if (isAllOddRowCellsSelected) {
+        this.changeCell(CellTypes.ROW_CELL);
+      }
+    });
+  }
+}
+
+export const s2Options = {
+  debug: true,
+  width: 600,
+  height: 400,
+  showSeriesNumber: false,
+  showDefaultHeaderActionIcon: false,
+  interaction: {
+    enableCopy: true,
+    // 防止 mac 触摸板横向滚动触发浏览器返回, 和移动端下拉刷新
+    overscrollBehavior: 'none',
+    brushSelection: {
+      data: true,
+      col: true,
+      row: true,
+    },
+    hoverFocus: false,
+    hoverHighlight: false,
+    customInteractions: [
+      {
+        key: 'CustomInteraction',
+        interaction: CustomInteraction,
+      },
+    ],
+  },
+  tooltip: {
+    showTooltip: false,
+  },
+  hierarchyType: 'grid',
+  style: {
+    rowCfg: {
+      width: 100,
+    },
+    cellCfg: {
+      width: 50,
+      height: 30,
+    },
+  },
+  cornerCell: (...args) => new CustomCornerCell(...args),
+};
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then((dataCfg) => {
+    ReactDOM.render(
+      <SheetComponent
+        dataCfg={dataCfg}
+        options={s2Options}
+        themeCfg={{ theme: Theme }}
+        header={{
+          description: (
+            <>
+              <h4>
+                <span>单元格的文字都消失了, 想办法让文字全部显示出来.</span>
+                <a
+                  href="https://codesandbox.io/s/brave-pine-kki1xp?file=/src/index.tsx"
+                  target="__blank"
+                >
+                  查看代码
+                </a>
+              </h4>
+              <ul>
+                <li>
+                  <Tag>
+                    列头可以 "调整" 成三个尺码: s (6px) M (66px) L (666px)
+                  </Tag>
+                </li>
+                <li>
+                  <Tag>列头10个单元格可以 "圈" 在一起</Tag>
+                </li>
+                <li>
+                  <Tag>行头多选, 让它显示斑马纹</Tag>
+                </li>
+                <li>
+                  <Tag>有一个数值单元格喜欢待在角落 ↑ ↓ ← →</Tag>
+                </li>
+                <li>
+                  搞不定, 试试看看
+                  <a
+                    href="https://s2.antv.antgroup.com/manual/advanced/interaction/basic"
+                    target="__blank"
+                  >
+                    基础交互
+                  </a>
+                  章节或试试 <Tag>长按一键三连</Tag>
+                </li>
+              </ul>
+            </>
+          ),
+        }}
+      />,
+      document.getElementById('container'),
+    );
+  });

s2-site/examples/case/art/demo/meta.json

@@ -15,10 +15,18 @@
     {
       "filename": "time-spend-abstract.tsx",
       "title": {
-        "zh": "想如何度过一天(抽象版)",
+        "zh": "想如何度过一天 (抽象版)",
         "en": "How to spend the day"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/lN8USZvMEV/f6b5e06f-5def-4db8-a9c8-826e347d0fa1.png"
+    },
+    {
+      "filename": "lost-text.tsx",
+      "title": {
+        "zh": "消失的文字 (交互小游戏)",
+        "en": "Lost text"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3WDCR7PZY6MAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

s2-site/examples/custom/custom-cell/demo/corner-header.ts

@@ -8,13 +8,17 @@ import { get } from 'lodash';
  */
 class CustomCornerHeader extends Group {
   node;
+
   backgroundShape;
+
   textShape;
+
   constructor(node) {
     super({});
     this.node = node;
     this.initCornerHeader();
   }
+
   initCornerHeader() {
     this.initBg();
     this.initText();
@@ -77,6 +81,5 @@ fetch(
     };
     const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
-    // 使用
     s2.render();
   });