From ddbee015a89fc8ef7ceb324950e9fc9cf018bc74 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Fri, 27 Oct 2023 16:49:15 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E6=98=8E=E7=BB=86=E8=A1=A8=E5=8D=95=E5=85=83=E6=A0=BC?= =?UTF-8?q?=20&=20=E8=87=AA=E5=AE=9A=E4=B9=89=20mini=20=E5=9B=BE=E6=96=87?= =?UTF-8?q?=E6=A1=A3=20(#2394)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/manual/advanced/custom/hook.zh.md | 10 +- .../docs/manual/basic/analysis/strategy.zh.md | 8 +- s2-site/examples/case/art/demo/lost-text.tsx | 292 ++++++++++++++++++ s2-site/examples/case/art/demo/meta.json | 10 +- .../custom/custom-cell/demo/corner-header.ts | 5 +- .../custom-cell/demo/custom-specified-cell.ts | 95 +++++- .../custom-cell/demo/custom-table-cell.ts | 139 +++++++++ .../custom/custom-cell/demo/data-cell.ts | 36 +-- .../custom/custom-cell/demo/meta.json | 18 +- .../custom/custom-cell/demo/mini-chart.ts | 178 +++++++++++ .../custom/custom-cell/demo/totals-cell.ts | 2 +- .../custom-layout/demo/custom-coordinate.ts | 22 ++ .../demo/custom-data-position.ts | 22 ++ .../demo/custom-layout-arrange.ts | 22 ++ .../demo/custom-layout-hierarchy.ts | 22 ++ .../custom-layout/demo/custom-value-order.ts | 22 ++ .../sheet/demo/strategy-mini-chart.tsx | 5 + 17 files changed, 856 insertions(+), 52 deletions(-) create mode 100644 s2-site/examples/case/art/demo/lost-text.tsx create mode 100644 s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts create mode 100644 s2-site/examples/custom/custom-cell/demo/mini-chart.ts diff --git a/s2-site/docs/manual/advanced/custom/hook.zh.md b/s2-site/docs/manual/advanced/custom/hook.zh.md index a395b2e60c..b527c4ce92 100644 --- a/s2-site/docs/manual/advanced/custom/hook.zh.md +++ b/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 diff --git a/s2-site/docs/manual/basic/analysis/strategy.zh.md b/s2-site/docs/manual/basic/analysis/strategy.zh.md index 39d1c72a64..0ca2bdf96f 100644 --- a/s2-site/docs/manual/basic/analysis/strategy.zh.md +++ b/s2-site/docs/manual/basic/analysis/strategy.zh.md @@ -176,7 +176,13 @@ const s2Options = { -配置如下： +### 在普通透视表中使用 + +如果不依赖 `React`, 想在 `@antv/s2` 普通的透视表中使用 mini 图，可以参考这个 [示例](/zh/examples/custom/custom-cell/#mini-chart) + + + +### API diff --git a/s2-site/examples/case/art/demo/lost-text.tsx b/s2-site/examples/case/art/demo/lost-text.tsx new file mode 100644 index 0000000000..898564f3e2 --- /dev/null +++ b/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: ( +
+

💐 通关啦 💐

+

+ S2 + 多维交叉分析表格是多维交叉分析领域的表格解决方案，数据驱动视图，提供底层核心库、基础组件库、业务场景库，具备自由扩展的能力，让开发者既能开箱即用，也能基于自身场景自由发挥。 +

+

+ + 前往官网 https://s2.antv.antgroup.com/ + +

+
+ ), + }); + this.spreadsheet.interaction.addIntercepts([InterceptType.HOVER]); + } + + bindEvents() { + // 角头: 一键三连 + this.addCornerCellInteraction(); + // 行头: 多选全部偶数行 + this.addRowCellInteraction(); + // 列头: 调整列宽/刷选全部 + this.addColCellInteraction(); + // 数值: 键盘方向键移动端选中单元格到右下角 + this.addDataCellInteraction(); + } + + addCornerCellInteraction() { + const countMap: Record = { + 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( + +

+ 单元格的文字都消失了, 想办法让文字全部显示出来. + + 查看代码 + +

+
    +
  • + + 列头可以 "调整" 成三个尺码: s (6px) M (66px) L (666px) + +
    • +
  • + 列头10个单元格可以 "圈" 在一起 +
    • +
  • + 行头多选, 让它显示斑马纹 +
    • +
  • + 有一个数值单元格喜欢待在角落 ↑ ↓ ← → +
    • +
  • + 搞不定, 试试看看 + + 基础交互 + + 章节或试试 长按一键三连 +
    • +
+ + ), + }} + />, + document.getElementById('container'), + ); + }); diff --git a/s2-site/examples/case/art/demo/meta.json b/s2-site/examples/case/art/demo/meta.json index 4472e98d6c..77f7574aa4 100644 --- a/s2-site/examples/case/art/demo/meta.json +++ b/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" } ] } diff --git a/s2-site/examples/custom/custom-cell/demo/corner-header.ts b/s2-site/examples/custom/custom-cell/demo/corner-header.ts index 1b40471866..4d65f8ea4f 100644 --- a/s2-site/examples/custom/custom-cell/demo/corner-header.ts +++ b/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(); }); diff --git a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts index 086cf0dec2..31f93077a4 100644 --- a/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts @@ -1,8 +1,8 @@ /* eslint-disable max-classes-per-file */ -import { PivotSheet, DataCell, ColCell } from '@antv/s2'; +import { PivotSheet, DataCell, ColCell, CornerCell, RowCell } from '@antv/s2'; /** - * 自定义 DataCell，给特定单元格设置背景色, 文字大小, 颜色 + * 自定义 DataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等... * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts */ class CustomDataCell extends DataCell { @@ -62,7 +62,7 @@ class CustomDataCell extends DataCell { } /** - * 自定义 ColCell, 给特定单元格设置文字大小, 颜色 + * 自定义 ColCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等... * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/col-cell.ts */ class CustomColCell extends ColCell { @@ -70,7 +70,7 @@ class CustomColCell extends ColCell { const defaultTextStyle = super.getTextStyle(); // 指定列 - if (this.meta.rowIndex % 2 === 0) { + if (this.meta.colIndex % 2 === 0) { return { ...defaultTextStyle, fontSize: 16, @@ -102,6 +102,81 @@ class CustomColCell extends ColCell { } } +/** + * 自定义 CornerCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等... + * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/corner-cell.ts + */ +class CustomCornerCell extends CornerCell { + getBackgroundColor() { + // 特定数据 + if (this.meta.field === 'province') { + return { + backgroundColor: 'red', + backgroundColorOpacity: 0.2, + }; + } + + return super.getBackgroundColor(); + } + + getTextStyle() { + const defaultTextStyle = super.getTextStyle(); + + if (this.meta.field === 'type') { + return { + ...defaultTextStyle, + fill: '#06a', + fontSize: 20, + fontWeight: 200, + }; + } + + return super.getTextStyle(); + } +} + +/** + * 自定义 RowCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等... + * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts + */ +class CustomRowCell extends RowCell { + getBackgroundColor() { + // 特定数据 + if (this.meta.field === 'province') { + return { + backgroundColor: 'red', + backgroundColorOpacity: 0.2, + }; + } + + return super.getBackgroundColor(); + } + + getTextStyle() { + const defaultTextStyle = super.getTextStyle(); + + if (this.meta.field === 'type') { + return { + ...defaultTextStyle, + fill: '#06a', + fontSize: 20, + fontWeight: 200, + }; + } + + if (this.meta.rowIndex >= 1) { + return { + ...defaultTextStyle, + fill: '#dcdcdc', + fontSize: 20, + fontWeight: 700, + }; + } + + return super.getTextStyle(); + } +} + fetch( 'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json', ) @@ -120,16 +195,20 @@ fetch( const s2Options = { width: 600, height: 480, - dataCell: (viewMeta) => { - return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + cornerCell: (node, spreadsheet, headerConfig) => { + return new CustomCornerCell(node, spreadsheet, headerConfig); }, - // rowCell 同理, 请参考示例 colCell: (node, spreadsheet, headerConfig) => { return new CustomColCell(node, spreadsheet, headerConfig); }, + rowCell: (node, spreadsheet, headerConfig) => { + return new CustomRowCell(node, spreadsheet, headerConfig); + }, + dataCell: (viewMeta) => { + return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + }, }; const s2 = new PivotSheet(container, s2DataConfig, s2Options); - // 使用 s2.render(); }); diff --git a/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts new file mode 100644 index 0000000000..7a3e822182 --- /dev/null +++ b/s2-site/examples/custom/custom-cell/demo/custom-table-cell.ts @@ -0,0 +1,139 @@ +/* eslint-disable max-classes-per-file */ +import { TableColCell, TableDataCell, TableSheet } from '@antv/s2'; + +/** + * 自定义 DataCell，通过复写基类方法, 给特定单元格设置背景色, 文字大小, 颜色等... + * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-data-cell.ts + */ +class CustomDataCell extends TableDataCell { + getBackgroundColor() { + // 特定数据 + if (this.meta.fieldValue >= 6000) { + return { + backgroundColor: 'red', + backgroundColorOpacity: 0.2, + }; + } + + return super.getBackgroundColor(); + } + + getTextStyle() { + const defaultTextStyle = super.getTextStyle(); + // 序号 + + if (this.meta.colIndex === 0) { + return { + ...defaultTextStyle, + fontWeight: 600, + textAlign: 'center', + }; + } + + // 指定列 + if (this.meta.rowIndex % 2 === 0 && this.meta.colIndex > 0) { + return { + ...defaultTextStyle, + fontSize: 16, + fill: '#396', + textAlign: 'left', + }; + } + + // 指定数据 + if (this.meta.fieldValue >= 600 || this.meta.fieldValue === '沙发') { + return { + ...defaultTextStyle, + fontSize: 14, + fontWeight: 700, + fill: '#f63', + textAlign: 'center', + }; + } + + // 指定单元格 + if (this.meta.id === '7-root[&]省份') { + return { + ...defaultTextStyle, + fontSize: 12, + fontWeight: 200, + fill: '#dcdcdc', + opacity: 0.9, + textAlign: 'right', + }; + } + + // 使用默认处理 + return super.getTextStyle(); + } +} + +/** + * 自定义 ColCell, 通过复写基类方法, 给特定单元格设置文字大小, 颜色等... + * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/table-col-cell.ts + */ +class CustomColCell extends TableColCell { + getTextStyle() { + const defaultTextStyle = super.getTextStyle(); + + // 指定列 + if (this.meta.colIndex % 2 === 0) { + return { + ...defaultTextStyle, + fontSize: 16, + fill: '#396', + textAlign: 'left', + }; + } + + // 指定层级 + if (this.meta.level >= 0) { + return { + ...defaultTextStyle, + fill: 'pink', + textAlign: 'center', + }; + } + + // 指定文本 + if (this.meta.label === '子类别') { + return { + ...defaultTextStyle, + fontSize: 22, + textAlign: 'right', + }; + } + + // 使用默认处理 + return super.getTextStyle(); + } +} + +fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json', +) + .then((res) => res.json()) + .then((res) => { + const container = document.getElementById('container'); + const s2DataConfig = { + fields: { + columns: ['province', 'city', 'type', 'sub_type', 'number'], + }, + meta: res.meta, + data: res.data, + }; + const s2Options = { + width: 600, + height: 480, + showSeriesNumber: true, + colCell: (node, spreadsheet, headerConfig) => { + return new CustomColCell(node, spreadsheet, headerConfig); + }, + dataCell: (viewMeta) => { + return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + }, + }; + const s2 = new TableSheet(container, s2DataConfig, s2Options); + + s2.render(); + }); diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts index 8a93ca9805..dc936cfeb0 100644 --- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts @@ -1,5 +1,4 @@ -import { PivotSheet, DataCell, drawObjectText } from '@antv/s2'; -import { isObject } from 'lodash'; +import { DataCell, PivotSheet } from '@antv/s2'; /** * 自定义 DataCell，给数值单元格添加背景图 @@ -15,15 +14,6 @@ class CustomDataCell extends DataCell { }, }); } - - // 当配置对象时，完全接管绘制（实现趋势表的mini图功能） - protected drawTextShape() { - if (isObject(this.getMeta().fieldValue)) { - drawObjectText(this); - } else { - super.drawTextShape(); - } - } } fetch( @@ -39,28 +29,7 @@ fetch( values: ['number'], }, meta: res.meta, - data: [ - ...res.data, - // 用于绘制 mini 图的数据 - { - province: '海南省', - city: '三亚市', - type: '家具', - sub_type: '桌子', - number: { - values: { - type: 'line', - data: [ - { date: '周一', value: 110 }, - { date: '周二', value: 150 }, - { date: '周三', value: 90 }, - { date: '周三', value: 190 }, - ], - encode: { x: 'date', y: 'value' }, - }, - }, - }, - ], + data: res.data, }; const s2Options = { @@ -75,6 +44,5 @@ fetch( }; const s2 = new PivotSheet(container, s2DataConfig, s2Options); - // 使用 s2.render(); }); diff --git a/s2-site/examples/custom/custom-cell/demo/meta.json b/s2-site/examples/custom/custom-cell/demo/meta.json index cc500816a2..05f3f82822 100644 --- a/s2-site/examples/custom/custom-cell/demo/meta.json +++ b/s2-site/examples/custom/custom-cell/demo/meta.json @@ -58,7 +58,7 @@ "zh": "自定义特定单元格", "en": "custom specified cell" }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*KJqYQKjxIwIAAAAAAAAAAAAAARQnAQ" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GSh4R6qdC5IAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "custom-merged-cell.ts", @@ -67,6 +67,22 @@ "en": "custom merged cell" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B7mTTZYFjv8AAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "custom-table-cell.ts", + "title": { + "zh": "自定义明细表单元格", + "en": "custom table cell" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-uLETb4gK9AAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "mini-chart.ts", + "title": { + "zh": "自定义 mini 图", + "en": "custom mini chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*apnIT4KXP3YAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/s2-site/examples/custom/custom-cell/demo/mini-chart.ts b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts new file mode 100644 index 0000000000..ee007fa585 --- /dev/null +++ b/s2-site/examples/custom/custom-cell/demo/mini-chart.ts @@ -0,0 +1,178 @@ +import { PivotSheet, DataCell, drawObjectText } from '@antv/s2'; +import { isArray, isObject } from 'lodash'; + +/** + * 自定义 DataCell，使用 drawObjectText 绘制简易的 mini 图 + * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/data-cell.ts + */ +class CustomDataCell extends DataCell { + // 当数值为对象时，完全接管绘制, 使用内置的 `drawObjectText` 根据不同的数据结构 (见下方) 绘制不同的图形 + drawTextShape() { + const { fieldValue } = this.getMeta(); + + if (isObject(fieldValue) || isArray(fieldValue)) { + drawObjectText(this); + return; + } + + super.drawTextShape(); + } +} + +fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json', +) + .then((res) => res.json()) + .then((res) => { + const container = document.getElementById('container')!; + const s2DataConfig = { + fields: { + rows: ['province', 'city'], + columns: ['type', 'sub_type'], + values: ['number'], + }, + meta: res.meta, + data: [ + // 用于绘制 mini 图的数据, 数据结构请查阅: https://s2.antv.antgroup.com/manual/basic/analysis/strategy#%E9%85%8D%E7%BD%AE-mini-%E5%9B%BE + { + province: '海南省', + city: '三亚市', + type: '家具', + sub_type: '桌子', + number: { + // 折线图 + values: { + type: 'line', + data: [ + { + year: '2017', + value: -368, + }, + { + year: '2018', + value: 368, + }, + { + year: '2019', + value: 368, + }, + { + year: '2020', + value: 368, + }, + { + year: '2021', + value: 268, + }, + { + year: '2022', + value: 168, + }, + ], + encode: { x: 'year', y: 'value' }, + }, + }, + }, + { + province: '海南省', + city: '三亚市', + type: '家具', + sub_type: '沙发', + number: { + // 柱状图 + values: { + type: 'bar', + data: [ + { + year: '2017', + value: -368, + }, + { + year: '2018', + value: 328, + }, + { + year: '2019', + value: 38, + }, + { + year: '2020', + value: 168, + }, + { + year: '2021', + value: 268, + }, + { + year: '2022', + value: 368, + }, + ], + encode: { x: 'year', y: 'value' }, + }, + }, + }, + { + province: '海南省', + city: '三亚市', + type: '办公用品', + sub_type: '笔', + number: { + // 多列文本 + values: [ + [3877, -4324, '42%'], + [3877, 4324, '-42%'], + ], + }, + }, + { + province: '海南省', + city: '三亚市', + type: '办公用品', + sub_type: '纸张', + number: { + // 子弹图 + values: { + measure: 0.3, + target: 0.76, + }, + }, + }, + ...res.data, + ], + }; + + const s2Options = { + width: 1000, + height: 680, + style: { + cellCfg: { + height: 40, + }, + }, + conditions: { + text: [ + { + field: 'number', + mapping: (value, cellInfo) => { + const { meta, colIndex } = cellInfo || {}; + if (colIndex === 0 || !value || !meta?.fieldValue) { + return { + fill: '#000', + }; + } + return { + fill: value > 0 ? '#FF4D4F' : '#29A294', + }; + }, + }, + ], + }, + dataCell: (viewMeta) => { + return new CustomDataCell(viewMeta, viewMeta?.spreadsheet); + }, + }; + const s2 = new PivotSheet(container, s2DataConfig, s2Options); + + s2.render(); + }); diff --git a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts index e716f275d2..5c140c1f7c 100644 --- a/s2-site/examples/custom/custom-cell/demo/totals-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/totals-cell.ts @@ -1,7 +1,7 @@ import { PivotSheet, RowCell, renderRect } from '@antv/s2'; /** - * 继承 RowCell, 单独修改小计/总计的背景色和文字颜色 + * 继承 RowCell, 单独修改行小计/行总计的背景色和文字颜色 (继承 ColCell, 列小计/列总计 同理) * 查看更多方法 https://github.com/antvis/S2/blob/master/packages/s2-core/src/cell/row-cell.ts */ class CustomTotalsRowCell extends RowCell { diff --git a/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts b/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts index a4e721a4f1..0df1e0189b 100644 --- a/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts +++ b/s2-site/examples/custom/custom-layout/demo/custom-coordinate.ts @@ -13,6 +13,28 @@ fetch( values: ['number'], }, data: res.data, + meta: [ + { + field: 'number', + name: '数量', + }, + { + field: 'province', + name: '省份', + }, + { + field: 'city', + name: '城市', + }, + { + field: 'type', + name: '类别', + }, + { + field: 'sub_type', + name: '子类别', + }, + ], }; const s2Options = { diff --git a/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts b/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts index 2ca7fa1f57..fa7c5460c0 100644 --- a/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts +++ b/s2-site/examples/custom/custom-layout/demo/custom-data-position.ts @@ -13,6 +13,28 @@ fetch( values: ['number'], }, data: res.data, + meta: [ + { + field: 'number', + name: '数量', + }, + { + field: 'province', + name: '省份', + }, + { + field: 'city', + name: '城市', + }, + { + field: 'type', + name: '类别', + }, + { + field: 'sub_type', + name: '子类别', + }, + ], }; const s2Options = { diff --git a/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts index 26f8249c57..b233076ca5 100644 --- a/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts +++ b/s2-site/examples/custom/custom-layout/demo/custom-layout-arrange.ts @@ -13,6 +13,28 @@ fetch( values: ['number'], }, data: res.data, + meta: [ + { + field: 'number', + name: '数量', + }, + { + field: 'province', + name: '省份', + }, + { + field: 'city', + name: '城市', + }, + { + field: 'type', + name: '类别', + }, + { + field: 'sub_type', + name: '子类别', + }, + ], }; const s2Options = { diff --git a/s2-site/examples/custom/custom-layout/demo/custom-layout-hierarchy.ts b/s2-site/examples/custom/custom-layout/demo/custom-layout-hierarchy.ts index bd0fc3e70c..746ec39187 100644 --- a/s2-site/examples/custom/custom-layout/demo/custom-layout-hierarchy.ts +++ b/s2-site/examples/custom/custom-layout/demo/custom-layout-hierarchy.ts @@ -45,6 +45,28 @@ fetch( }, ], ], + meta: [ + { + field: 'number', + name: '数量', + }, + { + field: 'province', + name: '省份', + }, + { + field: 'city', + name: '城市', + }, + { + field: 'type', + name: '类别', + }, + { + field: 'sub_type', + name: '子类别', + }, + ], }; const s2Options = { diff --git a/s2-site/examples/custom/custom-layout/demo/custom-value-order.ts b/s2-site/examples/custom/custom-layout/demo/custom-value-order.ts index ba02eedb84..1bd014dc1c 100644 --- a/s2-site/examples/custom/custom-layout/demo/custom-value-order.ts +++ b/s2-site/examples/custom/custom-layout/demo/custom-value-order.ts @@ -16,6 +16,28 @@ fetch( customValueOrder: 1, }, data: res.data, + meta: [ + { + field: 'number', + name: '数量', + }, + { + field: 'province', + name: '省份', + }, + { + field: 'city', + name: '城市', + }, + { + field: 'type', + name: '类别', + }, + { + field: 'sub_type', + name: '子类别', + }, + ], }; const s2Options = { diff --git a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx index 5de2358db1..f4b2632e37 100644 --- a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx +++ b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx @@ -3,6 +3,11 @@ import ReactDOM from 'react-dom'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; +/** + * 该示例为 React 版本的趋势分析表 + * 如何在普通图表中使用, 请查看: https://s2.antv.antgroup.com/zh/examples/custom/custom-cell#mini-chart + */ + fetch( 'https://gw.alipayobjects.com/os/bmw-prod/b942d973-7364-4fad-a10a-369426a61376.json', )