docs: update docs

site/.dumi/global.ts

@@ -1,9 +1,10 @@
 require('./style.css');
-// require('./github-markdown-light.css');
 require('./prism-one-light.css');
 
 if (window) {
   (window as any).g2 = extendG2(require('../../src'));
+  (window as any).G2 = (window as any).g2;
+  (window as any).s2 = require('@antv/s2');
   (window as any).d3Hierarchy = require('d3-hierarchy');
   (window as any).d3ScaleChromatic = require('d3-scale-chromatic');
   (window as any).d3Interpolate = require('d3-interpolate');
@@ -26,6 +27,7 @@ if (window) {
   (window as any).React = require('react');
   (window as any).dataSet = require('@antv/data-set');
   (window as any).lodash = require('lodash');
+  (window as any).table = table;
 }
 
 if (
@@ -38,6 +40,58 @@ if (
   );
 }
 
+// TODO 支持 csv 格式的数据
+async function table(
+  data, // 数组（inline data）或者一个对象（online data）
+  {
+    rows = 10, // 展现的行数
+    index = true, // 是否展示序列号
+    width = 'fit', // 表格宽度，fit 表示和容器保持一致，否者为指定像素值
+    height = null, // 表格高度，优先级比 rows 高，单位为像素值
+  } = {},
+) {
+  // Create container.
+  const container = document.createElement('div');
+  container.style.width = '100%';
+
+  const dataOf = async () => {
+    if (Array.isArray(data)) return data;
+    const { url } = data;
+    return fetch(url).then((res) => res.json());
+  };
+  const widthOf = () => {
+    if (width !== 'fit') return width;
+    const style = getComputedStyle(container);
+    const w = container.clientWidth || parseInt(style.width, 0);
+    return w;
+  };
+  const heightOf = () => {
+    if (typeof height === 'number') return height;
+    return rows * 30 + 30;
+  };
+
+  let sheet;
+
+  // Render after container mounted to compute width.
+  requestAnimationFrame(async () => {
+    const data1 = await dataOf();
+    const { TableSheet } = (window as any).s2;
+    sheet = new TableSheet(
+      container,
+      { data: data1, fields: { columns: Object.keys(data1[0]) } },
+      { width: widthOf(), height: heightOf(), showSeriesNumber: index },
+    );
+    sheet.render();
+  });
+
+  // @ts-ignore
+  container.clear = () => {
+    sheet.destroy();
+  };
+
+  return container;
+}
+
 // 对 G2 的 Chart 对象进行扩展
 // 1. 可以自定义 spec 的展示内容和 key 的排序
 // 2. 在 render 的时候触发 spec 事件抛出 spec，用于展示 spec
@@ -134,6 +188,13 @@ function extendG2(g2) {
       window.dispatchEvent(event);
       return super.render();
     }
+    getContainer() {
+      const node = super.getContainer();
+      const chart = this;
+      node.style.overflow = 'auto';
+      node.clear = () => chart.destroy();
+      return node;
+    }
   }
   return { ...rest, Chart };
 }

site/.dumi/style.css

@@ -15,3 +15,7 @@
 .dumi-default-table {
   margin: 0 !important;
 }
+
+.g2-tooltip-list-item {
+  margin-left: 0px !important;
+}

site/.dumirc.ts

@@ -49,23 +49,23 @@ export default defineConfig({
     navs: [
       // 头部的菜单列表
       {
-        slug: 'manual/introduction',
+        slug: 'docs/manual/introduction',
         title: {
-          zh: '教程',
-          en: 'Tutorials',
+          zh: '文档',
+          en: 'Docs',
         },
         order: 3,
       },
       {
-        slug: 'spec/overview',
+        slug: 'docs/spec/overview',
         title: {
-          zh: '文档',
-          en: 'Documentation',
+          zh: '选项',
+          en: 'Spec',
         },
         order: 2,
       },
       {
-        slug: 'api/overview',
+        slug: 'docs/api/overview',
         title: {
           zh: 'API',
           en: 'API',
@@ -80,13 +80,6 @@ export default defineConfig({
         },
         order: 0,
       },
-      // {
-      //   slug: 'theme',
-      //   title: {
-      //     zh: '主题',
-      //     en: 'Theme',
-      //   },
-      // },
     ],
     ecosystems: [
       // 头部的菜单中的「周边生态」
@@ -101,28 +94,28 @@ export default defineConfig({
     docs: [
       // manual
       {
-        slug: 'manual/single-view',
+        slug: 'manual/introduction',
         title: {
-          zh: '基础',
-          en: 'General',
+          zh: '简介',
+          en: 'Introduction',
         },
-        order: 3,
+        order: 1,
       },
       {
-        slug: 'manual/theme',
+        slug: 'manual/core',
         title: {
-          zh: '风格',
-          en: 'Style',
+          zh: '核心概念',
+          en: 'Core Concepts',
         },
-        order: 10,
+        order: 2,
       },
       {
-        slug: 'manual/more',
+        slug: 'manual/extra-topics',
         title: {
-          zh: '更多',
-          en: 'More',
+          zh: '进阶主题',
+          en: 'Extra Topics',
         },
-        order: 11,
+        order: 3,
       },
       // docs
       {