From 10f2aae31a9f6c8c7a313b447f4bb54070551670 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Tue, 19 Dec 2023 19:54:07 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=92=8C=E6=A0=B7=E5=BC=8F=20=20&=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=20monorepo=20=E6=9C=AC=E5=9C=B0=E8=B0=83?= =?UTF-8?q?=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 13 +++- packages/s2-core/package.json | 4 +- packages/s2-react/package.json | 4 +- packages/s2-shared/package.json | 10 +++ packages/s2-vue/package.json | 4 +- s2-site/.dumi/global.less | 19 +++++ s2-site/.dumi/global.ts | 30 +++++++- s2-site/.dumirc.ts | 17 ++-- s2-site/docs/manual/basic/conditions.zh.md | 36 +++++---- .../analysis/conditions/demo/background.ts | 17 ++-- .../conditions/demo/bidirectional-interval.ts | 6 +- .../conditions/demo/gradient-interval.ts | 11 +-- .../examples/analysis/conditions/demo/icon.ts | 16 ++-- .../conditions/demo/intelligent-background.ts | 7 +- .../analysis/conditions/demo/interval.ts | 9 ++- .../analysis/conditions/demo/meta.json | 10 ++- .../conditions/demo/multi-background.ts | 25 +++--- .../conditions/demo/multi-conditions.ts | 17 ++-- .../conditions/demo/table-text-row.ts | 77 +++++++++++++++++++ .../analysis/conditions/demo/table-text.ts | 10 +-- .../examples/analysis/conditions/demo/text.ts | 19 ++--- s2-site/package.json | 14 ++-- s2-site/playground/sheet-component/index.tsx | 1 - 23 files changed, 274 insertions(+), 102 deletions(-) create mode 100644 s2-site/.dumi/global.less create mode 100644 s2-site/examples/analysis/conditions/demo/table-text-row.ts diff --git a/package.json b/package.json index 9cffc671cb..1dcb151fa9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,16 @@ { "name": "@antv/s2", "private": true, + "license": "MIT", + "homepage": "https://s2.antv.antgroup.com", + "author": "https://github.com/orgs/antvis/people", + "repository": { + "type": "git", + "url": "https://github.com/antvis/S2.git" + }, + "bugs": { + "url": "https://github.com/antvis/S2/issues" + }, "workspaces": [ "packages/*" ], @@ -179,6 +189,5 @@ "vite": "^2.9.5", "vite-plugin-imp": "^2.1.8", "vue-jest": "^5.0.0-alpha.10" - }, - "license": "MIT" + } } diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json index 0bc11bcb36..7536515891 100644 --- a/packages/s2-core/package.json +++ b/packages/s2-core/package.json @@ -4,6 +4,7 @@ "version": "1.54.0", "main": "lib/index.js", "unpkg": "dist/index.min.js", + "jsdelivr": "dist/index.min.js", "module": "esm/index.js", "types": "esm/index.d.ts", "src": "src/index.ts", @@ -17,7 +18,8 @@ }, "repository": { "type": "git", - "url": "https://github.com/antvis/S2.git" + "url": "https://github.com/antvis/S2.git", + "directory": "packages/s2-core" }, "bugs": { "url": "https://github.com/antvis/S2/issues" diff --git a/packages/s2-react/package.json b/packages/s2-react/package.json index 4fbc9ea27f..577fa8b237 100644 --- a/packages/s2-react/package.json +++ b/packages/s2-react/package.json @@ -4,6 +4,7 @@ "version": "1.46.0", "main": "lib/index.js", "unpkg": "dist/index.min.js", + "jsdelivr": "dist/index.min.js", "module": "esm/index.js", "types": "esm/index.d.ts", "description": "use S2 with react", @@ -16,7 +17,8 @@ }, "repository": { "type": "git", - "url": "https://github.com/antvis/S2.git" + "url": "https://github.com/antvis/S2.git", + "directory": "packages/s2-react" }, "bugs": { "url": "https://github.com/antvis/S2/issues" diff --git a/packages/s2-shared/package.json b/packages/s2-shared/package.json index 2abeb7b9c0..36addf5ac4 100644 --- a/packages/s2-shared/package.json +++ b/packages/s2-shared/package.json @@ -6,6 +6,16 @@ "types": "temp/index.d.ts", "description": "internal utility functions and constants shared across s2 packages.", "license": "MIT", + "homepage": "https://s2.antv.antgroup.com", + "author": "https://github.com/orgs/antvis/people", + "repository": { + "type": "git", + "url": "https://github.com/antvis/S2.git", + "directory": "packages/s2-shared" + }, + "bugs": { + "url": "https://github.com/antvis/S2/issues" + }, "scripts": { "build": "run-s clean build:dts", "clean": "rimraf temp", diff --git a/packages/s2-vue/package.json b/packages/s2-vue/package.json index fe42925fd6..6c9e68f206 100644 --- a/packages/s2-vue/package.json +++ b/packages/s2-vue/package.json @@ -4,6 +4,7 @@ "version": "1.6.0", "main": "lib/index.js", "unpkg": "dist/index.min.js", + "jsdelivr": "dist/index.min.js", "module": "esm/index.js", "types": "esm/index.d.ts", "description": "use S2 with vue", @@ -16,7 +17,8 @@ }, "repository": { "type": "git", - "url": "https://github.com/antvis/S2.git" + "url": "https://github.com/antvis/S2.git", + "directory": "packages/s2-vue" }, "bugs": { "url": "https://github.com/antvis/S2/issues" diff --git a/s2-site/.dumi/global.less b/s2-site/.dumi/global.less new file mode 100644 index 0000000000..4309701f4d --- /dev/null +++ b/s2-site/.dumi/global.less @@ -0,0 +1,19 @@ +.dumi-default-table { + margin: 0 !important; +} + +// h3 { +// border-bottom: none !important; +// } + +ul { + margin-bottom: 16px !important; +} + +.dumi-default-source-code { + margin: 24px 0; + + .prism-code { + background-color: #f6f8fa !important; + } +} diff --git a/s2-site/.dumi/global.ts b/s2-site/.dumi/global.ts index e71f3a6392..ac7aca8ae9 100644 --- a/s2-site/.dumi/global.ts +++ b/s2-site/.dumi/global.ts @@ -20,6 +20,32 @@ if (window) { ( window as any ).inputNumberCss = require('antd/es/input-number/style/index.css'); - (window as any).s2Css = require('@antv/s2/dist/style.min.css'); - (window as any).s2ReactCss = require('@antv/s2-react/dist/style.min.css'); + // (window as any).s2Css = require('@antv/s2/dist/style.min.css'); + // (window as any).s2ReactCss = require('@antv/s2-react/dist/style.min.css'); + + // 码云和老网站统一跳转 antgroup 新域名 + const hosts = ['s2.antv.vision', 'antv-s2.gitee.io']; + if (hosts.includes(location.host)) { + console.log(require('../package.json').homepage); + (window as any).location.href = location.href.replace( + location.origin, + require('../package.json').homepage || 'https://s2.antv.antgroup.com', + ); + } + + // 能获取到 version 说明没有走 dumi 的代理, 运行的 node_modules 的包 + console.table([ + { + package: '@antv/s2', + version: (window as any).s2?.version || 'development', + }, + { + package: '@antv/s2-react', + version: (window as any).s2React?.version || 'development', + }, + { + package: '@antv/s2-vue', + version: (window as any).s2Vue?.version || 'development', + }, + ]); } diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts index 0550b2349d..333d5778aa 100644 --- a/s2-site/.dumirc.ts +++ b/s2-site/.dumirc.ts @@ -21,7 +21,7 @@ export default defineConfig({ defaultLanguage: 'zh', // 默认语言 isAntVSite: false, // 是否是 AntV 的大官网 footerTheme: 'light', // 白色 底部主题 - siteUrl: 'https://antv.antgroup.com', // 官网地址 + siteUrl: 'https://s2.antv.antgroup.com', // 官网地址 githubUrl: repository.url, // GitHub 地址 showSearch: true, // 是否显示搜索框 showGithubCorner: true, // 是否显示头部的 GitHub icon @@ -31,7 +31,7 @@ export default defineConfig({ showWxQrcode: true, // 是否显示头部菜单的微信公众号 showChartResize: true, // 是否在 demo 页展示图表视图切换 showAPIDoc: true, // 是否在 demo 页展示API文档 - themeSwitcher: 'g2', + es5: false, // 案例代码是否编译到 es5` docsearchOptions: { // 头部搜索框配置 versionV3: true, @@ -251,8 +251,6 @@ export default defineConfig({ }, ], playground: { - playgroundDidMount: 'console.log("playgroundDidMount");', - playgroundWillUnmount: 'console.log("playgroundWillUnmount");', devDependencies: { typescript: 'latest', }, @@ -260,13 +258,13 @@ export default defineConfig({ - {{title}} + {{ title }}
- + `, @@ -435,10 +433,15 @@ export default defineConfig({ }, ], }, + mfsu: false, alias: { '@': __dirname, }, styles: ['/site.css'], links: [], scripts: [], + monorepoRedirect: { + peerDeps: true, + srcDir: ['src', 'esm', 'lib'], + }, }); diff --git a/s2-site/docs/manual/basic/conditions.zh.md b/s2-site/docs/manual/basic/conditions.zh.md index 8d1a5dda2c..0aaedac692 100644 --- a/s2-site/docs/manual/basic/conditions.zh.md +++ b/s2-site/docs/manual/basic/conditions.zh.md @@ -5,10 +5,10 @@ order: 4 S2 自带字段标记特性。用户可以根据业务语义设置不同的渲染逻辑，实现重点数据的标记和分析。字段标记类型包括： -* 文本 (text) 字段标记 （所有单元格类型） -* 背景 (background) 字段标记 （所有单元格类型） -* 柱状图 (interval) 字段标记 （仅支持数据单元格） -* 图标 (icon) 字段标记 （目前支持透视表数据单元格、行头和列头单元格） +* `文本` (text) 字段标记 （所有单元格类型） +* `背景` (background) 字段标记 （所有单元格类型） +* `柱状图` (interval) 字段标记 （仅支持数据单元格） +* `图标` (icon) 字段标记 （目前支持透视表数据单元格、行头和列头单元格） 下图直观展示了四种字段标记的形态： @@ -19,7 +19,6 @@ S2 自带字段标记特性。用户可以根据业务语义设置不同的渲 `S2` 字段标记特性通过配置 `s2Options` 中 [`Conditions`](/docs/api/general/S2Options#conditions) 属性。 ```ts -// 构建 options const s2Options = { width: 600, height: 600, @@ -36,11 +35,14 @@ const s2Options = { }, }, ], + background: [], + interval: [], + icon: [] }, }; ``` - + ## 配置解释 @@ -65,20 +67,20 @@ const s2Options = { style="width: 100%; outline: none; border-collapse: collapse;" > - + - 透视表 + 透视表 - + 明细表 - - + + @@ -102,7 +104,7 @@ const s2Options = { | maxValue | 仅用于**柱状图**字段标记且 `isCompare` 为 `true` 时，定制柱状图最大值 | `number` | - | | | fieldValue | 仅用于**柱状图**字段标记且 `isCompare` 为 `true` 时，定制柱状图的长度 | `number` | - | | -> 如果`mapping`函数返回值为空，则表明不渲染该单元格的字段标记 +> 如果 `mapping` 函数返回值为空，则表明不渲染该单元格的字段标记 ​ @@ -116,7 +118,7 @@ const s2Options = { `price` 字段的图标位于文本右侧，`cost` 字段的图标位于文本左侧： - + ### 自定义柱状图范围 @@ -125,13 +127,13 @@ const s2Options = { `price` 字段使用自定义模式，`cost` 字段使用默认模式： - + ### 双向柱状图 当柱状图的区间有正负之分时，并搭配 `mapping` 函数返回值的 `fill` 属性，即可绘制出带有不同颜色的正负双向柱状图： - + ​📊 查看更多 [字段标记示例](/examples/analysis/conditions#bidirectional-interval)。 @@ -140,7 +142,7 @@ const s2Options = { `S2` 的底层图形绘制采用 [AntV/g](https://g.antv.vision/zh/docs/guide/introduce) 渲染引擎 ，借助其强大的绘制能力，`fill` 字段不仅仅是颜色属性，还可以使用 [渐变色](https://g.antv.vision/zh/docs/api/shape/attrs#%E6%B8%90%E5%8F%98%E8%89%B2)、[纹理](https://g.antv.vision/zh/docs/api/shape/attrs#%E7%BA%B9%E7%90%86) 等。 `price` 字段使用渐变色： - + ​📊 查看更多 [字段标记示例](/examples/analysis/conditions#gradient-interval)。 @@ -150,6 +152,6 @@ const s2Options = { 当标记背景颜色较暗时，文本颜色将变为白色。当标记背景颜色明亮时，文本颜色默认为黑色。 优先级： `background condition` 的 `intelligentReverseTextColor` < `text condition` 的 `fill` - + ​📊 查看更多 [字段标记示例](/examples/analysis/conditions#intelligent-background)。 diff --git a/s2-site/examples/analysis/conditions/demo/background.ts b/s2-site/examples/analysis/conditions/demo/background.ts index 4213ad03d3..def1bb22ca 100644 --- a/s2-site/examples/analysis/conditions/demo/background.ts +++ b/s2-site/examples/analysis/conditions/demo/background.ts @@ -1,4 +1,4 @@ -import { PivotSheet, EXTRA_FIELD } from '@antv/s2'; +import { PivotSheet, EXTRA_FIELD, S2Options } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', @@ -7,7 +7,7 @@ fetch( .then((dataCfg) => { const container = document.getElementById('container'); - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { @@ -18,7 +18,7 @@ fetch( // 行头 { field: 'city', - mapping() { + mapping(value, record) { return { // fill 是背景字段下唯一必须的字段，用于指定文本颜色 fill: '#DECFEA', @@ -28,7 +28,7 @@ fetch( // 列头 { field: 'sub_type', - mapping() { + mapping(value, record) { return { fill: '#BBDEDE', }; @@ -37,8 +37,8 @@ fetch( // 单独控制角头 { field: 'type', - mapping(field) { - if (field === '类别') { + mapping(value, record) { + if (value === '类别') { return { fill: '#FCEBB9', }; @@ -48,7 +48,7 @@ fetch( // 单独配置指标名 { field: EXTRA_FIELD, - mapping() { + mapping(value, record) { return { fill: '#5B8FF9', }; @@ -57,7 +57,7 @@ fetch( // 配置数据单元格 { field: 'number', - mapping() { + mapping(value, record) { return { fill: '#CDDDFD', }; @@ -66,6 +66,7 @@ fetch( ], }, }; + const s2 = new PivotSheet(container, dataCfg, s2Options); s2.render(); diff --git a/s2-site/examples/analysis/conditions/demo/bidirectional-interval.ts b/s2-site/examples/analysis/conditions/demo/bidirectional-interval.ts index 11edd7e502..346baf83f9 100644 --- a/s2-site/examples/analysis/conditions/demo/bidirectional-interval.ts +++ b/s2-site/examples/analysis/conditions/demo/bidirectional-interval.ts @@ -1,4 +1,4 @@ -import { PivotSheet } from '@antv/s2'; +import { PivotSheet, S2Options } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/4e49b398-5121-4f00-9607-4854aedd5a21.json', @@ -7,7 +7,7 @@ fetch( .then((dataCfg) => { const container = document.getElementById('container'); - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { @@ -17,7 +17,7 @@ fetch( interval: [ { field: 'delta', - mapping(value) { + mapping(value, record) { return { fill: value >= 0 ? '#80BFFF' : '#F4664A', }; diff --git a/s2-site/examples/analysis/conditions/demo/gradient-interval.ts b/s2-site/examples/analysis/conditions/demo/gradient-interval.ts index 2a2394fcba..ea49188a3a 100644 --- a/s2-site/examples/analysis/conditions/demo/gradient-interval.ts +++ b/s2-site/examples/analysis/conditions/demo/gradient-interval.ts @@ -1,4 +1,4 @@ -import { PivotSheet } from '@antv/s2'; +import { PivotSheet, S2Options } from '@antv/s2'; // 可借助 tinygradient 完成功能更全面的颜色过渡 function getGradient(rate, startColor, endColor) { @@ -24,20 +24,20 @@ fetch( .then((dataCfg) => { const container = document.getElementById('container'); - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { - hoverHighlight: false, + hoverHighlight: true, }, conditions: { interval: [ { field: 'number', - mapping(fieldValue) { + mapping(value, record) { const maxValue = 7789; const minValue = 352; - const rage = (fieldValue - minValue) / (maxValue - minValue); + const rage = (value - minValue) / (maxValue - minValue); const color = getGradient(rage, '#95F0FF', '#3A9DBF'); return { @@ -50,6 +50,7 @@ fetch( ], }, }; + const s2 = new PivotSheet(container, dataCfg, s2Options); s2.render(); diff --git a/s2-site/examples/analysis/conditions/demo/icon.ts b/s2-site/examples/analysis/conditions/demo/icon.ts index 35483b0fe9..128b0b3c25 100644 --- a/s2-site/examples/analysis/conditions/demo/icon.ts +++ b/s2-site/examples/analysis/conditions/demo/icon.ts @@ -1,4 +1,4 @@ -import { PivotSheet } from '@antv/s2'; +import { PivotSheet, S2Options } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', @@ -7,18 +7,19 @@ fetch( .then((dataCfg) => { const container = document.getElementById('container'); - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, + showDefaultHeaderActionIcon: true, interaction: { - hoverHighlight: false, + hoverHighlight: true, }, conditions: { icon: [ // 行头 { field: 'city', - mapping() { + mapping(value, record) { return { // icon 用于指定图标条件格式所使用的 icon 类型 icon: 'Trend', @@ -29,8 +30,8 @@ fetch( // 列头 { field: 'sub_type', - mapping(fieldValue) { - if (fieldValue !== '子类别') { + mapping(value, record) { + if (value !== '子类别') { return { icon: 'CellDown', fill: '#025DF4', @@ -42,7 +43,7 @@ fetch( { field: 'number', position: 'left', - mapping() { + mapping(value, record) { return { icon: 'CellUp', fill: '#2498D1', @@ -52,6 +53,7 @@ fetch( ], }, }; + const s2 = new PivotSheet(container, dataCfg, s2Options); s2.render(); diff --git a/s2-site/examples/analysis/conditions/demo/intelligent-background.ts b/s2-site/examples/analysis/conditions/demo/intelligent-background.ts index 18e8f53d3c..85a7e0951e 100644 --- a/s2-site/examples/analysis/conditions/demo/intelligent-background.ts +++ b/s2-site/examples/analysis/conditions/demo/intelligent-background.ts @@ -1,4 +1,4 @@ -import { PivotSheet } from '@antv/s2'; +import { PivotSheet, S2Options } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', @@ -7,7 +7,7 @@ fetch( .then((dataCfg) => { const container = document.getElementById('container'); - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { @@ -17,7 +17,7 @@ fetch( background: [ { field: 'number', - mapping() { + mapping(value, record) { return { // fill 是背景字段下唯一必须的字段，用于指定文本颜色 fill: '#000', @@ -28,6 +28,7 @@ fetch( ], }, }; + const s2 = new PivotSheet(container, dataCfg, s2Options); s2.render(); diff --git a/s2-site/examples/analysis/conditions/demo/interval.ts b/s2-site/examples/analysis/conditions/demo/interval.ts index 2dce6f6e74..33c52d7093 100644 --- a/s2-site/examples/analysis/conditions/demo/interval.ts +++ b/s2-site/examples/analysis/conditions/demo/interval.ts @@ -1,4 +1,4 @@ -import { PivotSheet } from '@antv/s2'; +import { PivotSheet, S2Options } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', @@ -7,17 +7,17 @@ fetch( .then((dataCfg) => { const container = document.getElementById('container'); - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { - hoverHighlight: false, + hoverHighlight: true, }, conditions: { interval: [ { field: 'number', - mapping(value) { + mapping(value, record) { return { fill: '#80BFFF', // 自定义柱状图范围 @@ -31,6 +31,7 @@ fetch( ], }, }; + const s2 = new PivotSheet(container, dataCfg, s2Options); s2.render(); diff --git a/s2-site/examples/analysis/conditions/demo/meta.json b/s2-site/examples/analysis/conditions/demo/meta.json index 6fae0af0a7..8e0b756ca0 100644 --- a/s2-site/examples/analysis/conditions/demo/meta.json +++ b/s2-site/examples/analysis/conditions/demo/meta.json @@ -82,7 +82,15 @@ "zh": "开启文字智能反色", "en": "Intelligent background" }, - "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oUICMHjOA/7fd723cb-fc2a-45a5-a0ab-a2840127a48a.png" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8aotQqx_OWUAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "table-text-row.ts", + "title": { + "zh": "文本标记 - 标记整行", + "en": "Row text condition" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JOuBSp89h3sAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/s2-site/examples/analysis/conditions/demo/multi-background.ts b/s2-site/examples/analysis/conditions/demo/multi-background.ts index 0d04d7ba69..c826509c14 100644 --- a/s2-site/examples/analysis/conditions/demo/multi-background.ts +++ b/s2-site/examples/analysis/conditions/demo/multi-background.ts @@ -1,4 +1,4 @@ -import { PivotSheet } from '@antv/s2'; +import { PivotSheet, S2Options } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', @@ -7,7 +7,7 @@ fetch( .then((dataCfg) => { const container = document.getElementById('container'); - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { @@ -17,8 +17,8 @@ fetch( text: [ { field: 'number', - mapping(fieldValue) { - if (fieldValue >= 7000) { + mapping(value, record) { + if (value >= 7000) { return { fill: '#fff', }; @@ -29,24 +29,28 @@ fetch( background: [ { field: 'number', - mapping(fieldValue) { - if (fieldValue <= 1397) { + mapping(value, record) { + if (value <= 1397) { return { fill: '#B8E1FF', }; - } else if (fieldValue <= 2797) { + } + if (value <= 2797) { return { fill: '#9AC5FF', }; - } else if (fieldValue <= 4191) { + } + if (value <= 4191) { return { fill: '#7DAAFF', }; - } else if (fieldValue <= 5588) { + } + if (value <= 5588) { return { fill: '#5B8FF9', }; - } else if (fieldValue <= 6985) { + } + if (value <= 6985) { return { fill: '#3D76DD', }; @@ -59,6 +63,7 @@ fetch( ], }, }; + const s2 = new PivotSheet(container, dataCfg, s2Options); s2.render(); diff --git a/s2-site/examples/analysis/conditions/demo/multi-conditions.ts b/s2-site/examples/analysis/conditions/demo/multi-conditions.ts index 9cff6c0aee..3cfe83528a 100644 --- a/s2-site/examples/analysis/conditions/demo/multi-conditions.ts +++ b/s2-site/examples/analysis/conditions/demo/multi-conditions.ts @@ -1,4 +1,4 @@ -import { PivotSheet } from '@antv/s2'; +import { PivotSheet, S2Options } from '@antv/s2'; // 可借助 tinygradient 完成功能更全面的颜色过渡 function getGradient(rate, startColor, endColor) { @@ -25,7 +25,7 @@ fetch( const container = document.getElementById('container'); const s2DataConfig = dataCfg; - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { @@ -35,7 +35,7 @@ fetch( text: [ { field: 'number', - mapping() { + mapping(value, record) { return { fill: '#142C61', }; @@ -46,7 +46,7 @@ fetch( { field: 'number', position: 'right', - mapping() { + mapping(value, record) { return { icon: 'Trend', fill: '#142C61', @@ -57,7 +57,7 @@ fetch( background: [ { field: 'number', - mapping() { + mapping(value, record) { return { fill: '#E0E9FD', }; @@ -67,12 +67,12 @@ fetch( interval: [ { field: 'number', - mapping(fieldValue) { + mapping(value, record) { const maxValue = 7789; const minValue = 0; - const rage = (fieldValue - minValue) / (maxValue - minValue); - + const rage = (value - minValue) / (maxValue - minValue); const color = getGradient(rage, '#5083F5', '#F7B46F'); + return { fill: `l(0) 0:#5083F5 1:${color}`, isCompare: true, @@ -83,6 +83,7 @@ fetch( ], }, }; + const s2 = new PivotSheet(container, s2DataConfig, s2Options); s2.setThemeCfg({ name: 'colorful' }); s2.render(); diff --git a/s2-site/examples/analysis/conditions/demo/table-text-row.ts b/s2-site/examples/analysis/conditions/demo/table-text-row.ts new file mode 100644 index 0000000000..4556d66146 --- /dev/null +++ b/s2-site/examples/analysis/conditions/demo/table-text-row.ts @@ -0,0 +1,77 @@ +import { S2Options, TableSheet } from '@antv/s2'; + +fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/986d48ce-cfdf-475d-980c-553762770928.json', +) + .then((res) => res.json()) + .then((data) => { + const container = document.getElementById('container'); + const s2DataConfig = { + fields: { + columns: ['province', 'city', 'type', 'price', 'cost'], + }, + meta: [ + { + field: 'province', + name: '省份', + }, + { + field: 'city', + name: '城市', + }, + { + field: 'type', + name: '商品类别', + }, + { + field: 'price', + name: '价格', + }, + { + field: 'cost', + name: '成本', + }, + ], + data, + }; + + const s2Options: S2Options = { + width: 600, + height: 480, + interaction: { + hoverHighlight: true, + }, + conditions: { + text: [ + { + // 使用正则, 匹配所有数据 + field: /.*/, + mapping(value, record) { + console.log(value, record); + + // 如果价格低于 10, 整行标记 + if (record.price < 10) { + return { + fill: '#30BF78', + }; + } + + // 如果价格高于 20, 整行标记 + if (record.price > 20) { + return { + fill: '#FF4D4F', + }; + } + + return '#000'; + }, + }, + ], + }, + }; + + // 透视表同理, 请举一反三 + const s2 = new TableSheet(container, s2DataConfig, s2Options); + + s2.render(); + }); diff --git a/s2-site/examples/analysis/conditions/demo/table-text.ts b/s2-site/examples/analysis/conditions/demo/table-text.ts index 25c99f29eb..cfe9bb1341 100644 --- a/s2-site/examples/analysis/conditions/demo/table-text.ts +++ b/s2-site/examples/analysis/conditions/demo/table-text.ts @@ -1,4 +1,4 @@ -import { TableSheet } from '@antv/s2'; +import { S2Options, TableSheet } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/986d48ce-cfdf-475d-980c-553762770928.json', @@ -35,17 +35,17 @@ fetch( data, }; - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { - hoverHighlight: false, + hoverHighlight: true, }, conditions: { text: [ { field: 'price', - mapping(fieldValue, data) { + mapping(value, record) { return { fill: '#30BF78', }; @@ -53,7 +53,7 @@ fetch( }, { field: new RegExp('co*'), - mapping(fieldValue, data) { + mapping(value, record) { return { fill: '#F4664A', }; diff --git a/s2-site/examples/analysis/conditions/demo/text.ts b/s2-site/examples/analysis/conditions/demo/text.ts index 4de67376e7..462055137d 100644 --- a/s2-site/examples/analysis/conditions/demo/text.ts +++ b/s2-site/examples/analysis/conditions/demo/text.ts @@ -1,4 +1,4 @@ -import { PivotSheet, EXTRA_FIELD } from '@antv/s2'; +import { PivotSheet, EXTRA_FIELD, S2Options } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', @@ -7,18 +7,18 @@ fetch( .then((dataCfg) => { const container = document.getElementById('container'); - const s2Options = { + const s2Options: S2Options = { width: 600, height: 480, interaction: { - hoverHighlight: false, + hoverHighlight: true, }, conditions: { text: [ // 行头 { field: 'city', - mapping() { + mapping(value, record) { return { // fill 是文本字段标记下唯一必须的字段，用于指定文本颜色 fill: '#DB6BCF', @@ -28,7 +28,7 @@ fetch( // 列头 { field: 'sub_type', - mapping() { + mapping(value, record) { return { fill: '#025DF4', }; @@ -37,8 +37,8 @@ fetch( // 单独控制角头 { field: 'type', - mapping(field) { - if (field === '类别') { + mapping(value, record) { + if (value === '类别') { return { fill: '#327039', }; @@ -48,7 +48,7 @@ fetch( // 单独配置指标名 { field: EXTRA_FIELD, - mapping() { + mapping(value, record) { return { fill: '#5B8FF9', }; @@ -57,7 +57,7 @@ fetch( // 配置数据单元格 { field: 'number', - mapping() { + mapping(value, record) { return { fill: '#2498D1', }; @@ -66,6 +66,7 @@ fetch( ], }, }; + const s2 = new PivotSheet(container, dataCfg, s2Options); s2.render(); diff --git a/s2-site/package.json b/s2-site/package.json index 7de0bb3d67..9559d4819a 100644 --- a/s2-site/package.json +++ b/s2-site/package.json @@ -13,10 +13,10 @@ "homepage": "https://s2.antv.antgroup.com", "repository": { "type": "git", - "url": "https://github.com/antvis/s2" + "url": "https://github.com/antvis/S2.git" }, "bugs": { - "url": "https://github.com/antvis/s2/issues" + "url": "https://github.com/antvis/S2/issues" }, "scripts": { "start": "yarn develop", @@ -29,13 +29,13 @@ }, "dependencies": { "@ant-design/icons": "^4.8.1", - "@antv/dumi-theme-antv": "^0.4.3", + "@antv/dumi-theme-antv": "^0.4.5", "@antv/g-canvas": "^0.5.12", - "@antv/s2": "^1.52.0", - "@antv/s2-react": "^1.44.2", - "antd": "^4.24.14", + "@antv/s2": "^1.54.1", + "@antv/s2-react": "^1.46.0", + "antd": "^4.24.15", "copy-to-clipboard": "^3.3.3", - "dumi": "^2.2.14", + "dumi": "^2.2.16", "gh-pages": "^3.1.0", "lodash": "^4.17.21", "react-color": "^2.19.3" diff --git a/s2-site/playground/sheet-component/index.tsx b/s2-site/playground/sheet-component/index.tsx index a02e9ff7c7..c5e81281fe 100644 --- a/s2-site/playground/sheet-component/index.tsx +++ b/s2-site/playground/sheet-component/index.tsx @@ -7,7 +7,6 @@ import { generatePalette, } from '@antv/s2'; import type { SheetType, Adaptive } from '@antv/s2-shared'; -import '@antv/s2-react/dist/style.min.css'; import { concat, isEmpty, merge } from 'lodash'; import { sheetDataCfg, subTotalsDimensions } from './config'; import './index.less';