docs: 优化官网配置和样式 & 支持 monorepo 本地调试

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"
+  }
 }

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"

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"

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",

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"

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;
+  }
+}

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',
+    },
+  ]);
 }

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,22 +251,20 @@ export default defineConfig({
       },
     ],
     playground: {
-      playgroundDidMount: 'console.log("playgroundDidMount");',
-      playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
       devDependencies: {
         typescript: 'latest',
       },
       htmlCodeTemplate: `<!DOCTYPE html>
         <html>
           <head>
             <meta charset="UTF-8">
-            <title>{{title}}</title>
+            <title>{{ title }}</title>
           </head>
           <body>
             <div id="container" />
-            <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
+            <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.min.js"></script>
             <script>
-        {{code}}
+              {{ code }}
             </script>
           </body>
         </html>`,
@@ -435,10 +433,15 @@ export default defineConfig({
       },
     ],
   },
+  mfsu: false,
   alias: {
     '@': __dirname,
   },
   styles: ['/site.css'],
   links: [],
   scripts: [],
+  monorepoRedirect: {
+    peerDeps: true,
+    srcDir: ['src', 'esm', 'lib'],
+  },
 });

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: []
   },
 };
 ```
 
-<Playground path='analysis/conditions/demo/text.ts' rid='container' height='300'></playground>
+<Playground path='analysis/conditions/demo/text.ts' rid='text' height='300'></playground>
 
 ## 配置解释
 
@@ -65,20 +67,20 @@ const s2Options = {
   style="width: 100%; outline: none; border-collapse: collapse;"
 >
   <tbody>
-  <tr style="height: 33px;" >
+    <tr style="height: 33px;" >
       <td style="text-align: center;width:74px;">
-      透视表
+        透视表
       </td>
       <td>
-          <Playground path="analysis/conditions/demo/text.ts" rid='pivot' height='300'></playground>
+        <Playground path="analysis/conditions/demo/text.ts" rid='pivot' height='300'></playground>
       </td>
     </tr>
     <tr>
       <td style="text-align: center;width:74px;">
         明细表
       </td>
-        <td >
-          <Playground path="analysis/conditions/demo/table-text.ts" rid='table' height='300'></playground>
+      <td >
+        <Playground path="analysis/conditions/demo/table-text.ts" rid='table' height='300'></playground>
       </td>
     </tr>
   </tbody>
@@ -102,7 +104,7 @@ const s2Options = {
 | maxValue  | 仅用于**柱状图**字段标记且 `isCompare` 为 `true` 时，定制柱状图最大值                                                                           | `number`  | -      |      |
 | fieldValue | 仅用于**柱状图**字段标记且 `isCompare` 为 `true` 时，定制柱状图的长度                                                                           | `number`  | -      |      |
 
-> 如果`mapping`函数返回值为空，则表明不渲染该单元格的字段标记
+> 如果 `mapping` 函数返回值为空，则表明不渲染该单元格的字段标记
 
 <embed src="@/docs/common/icon.zh.md"></embed>​
 
@@ -116,7 +118,7 @@ const s2Options = {
 
 `price` 字段的图标位于文本右侧，`cost` 字段的图标位于文本左侧：
 
-<Playground path="analysis/conditions/demo/icon.ts" rid='icon' height="200"></playground>
+<Playground path="analysis/conditions/demo/icon.ts" rid='condition-icon' height="200"></playground>
 
 ### 自定义柱状图范围
 
@@ -125,13 +127,13 @@ const s2Options = {
 
 `price` 字段使用自定义模式，`cost` 字段使用默认模式：
 
-<Playground path="analysis/conditions/demo/interval.ts" rid='interval'></playground>
+<Playground path="analysis/conditions/demo/interval.ts" rid='condition-interval'></playground>
 
 ### 双向柱状图
 
 当柱状图的区间有正负之分时，并搭配 `mapping` 函数返回值的 `fill` 属性，即可绘制出带有不同颜色的正负双向柱状图：
 
-<Playground path="analysis/conditions/demo/bidirectional-interval.ts" rid='bidirectional'></playground>
+<Playground path="analysis/conditions/demo/bidirectional-interval.ts" rid='condition-bidirectional'></playground>
 
 ​📊 查看更多 [字段标记示例](/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` 字段使用渐变色：
-<Playground path="analysis/conditions/demo/gradient-interval.ts" rid='gradient'></playground>
+<Playground path="analysis/conditions/demo/gradient-interval.ts" rid='condition-gradient-interval'></playground>
 
 ​📊 查看更多 [字段标记示例](/examples/analysis/conditions#gradient-interval)。
 
@@ -150,6 +152,6 @@ const s2Options = {
 当标记背景颜色较暗时，文本颜色将变为白色。当标记背景颜色明亮时，文本颜色默认为黑色。
 优先级： `background condition` 的 `intelligentReverseTextColor` < `text condition` 的 `fill`
 
-<Playground path="analysis/conditions/demo/intelligent-background.ts" rid='intelligentReverseTextColor'></playground>
+<Playground path="analysis/conditions/demo/intelligent-background.ts" rid='condition-intelligent-background'></playground>
 
 ​📊 查看更多 [字段标记示例](/examples/analysis/conditions#intelligent-background)。

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();