docs: 周常丰富文档和 demo (#2976)

* fix(test): 修复测试问题

* docs(bar): 条形图增加 shape 配置文档

* docs: 增加使用 react-tooltip 的 demo 案例

Author: visiky

docs/api/plots/line.zh.md

@@ -127,7 +127,7 @@ const data = [
 
 `markdown:docs/common/theme.zh.md`
 
-### 自定义 ✨
+### 定制使用 ✨
 
 #### customInfo
 

examples/column/grouped/demo/meta.json

@@ -59,6 +59,15 @@
         "en": "IntervalPadding of grouped column plot"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/lRokVhHkrr/61d333f8-9d15-4327-b70f-8e026453cf70.png"
+    },
+    {
+      "filename": "rc-tooltip.jsx",
+      "title": {
+        "zh": "自定义 react tooltip",
+        "en": "Customize React Tooltip"
+      },
+      "new": true,
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/djrdqmlrYh/rc-tooltip.png"
     }
   ]
 }

examples/column/grouped/demo/rc-tooltip.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Column } from '@antv/g2plot';
+import { get } from '@antv/util';
+import { Tooltip } from 'rc-for-plots';
+
+const Plot = () => {
+  const $container = React.useRef();
+  const $plot = React.useRef();
+  let $tooltipId;
+  const [data, changeData] = React.useState([]);
+
+  React.useEffect(() => {
+    // 建议使用 uniqueId
+    $tooltipId = `tooltip${Math.random()}`;
+    const div = document.createElement('div');
+    div.id = $tooltipId;
+    document.body.appendChild(div);
+
+    return () => {
+      document.body.removeChild(div);
+    };
+  }, []);
+
+  // 初始化加载，fetch 数据
+  React.useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json')
+      .then((data) => data.json())
+      .then((data) => {
+        changeData(data);
+      });
+  }, []);
+
+  const options = React.useMemo(() => {
+    const seriesField = 'type';
+    const yField = 'value';
+
+    return {
+      data: [],
+      isGroup: true,
+      xField: 'city',
+      yField,
+      seriesField: 'type',
+      tooltip: {
+        // 使用该方式，无法设置 enterable. 若有的话，可以考虑监听 tooltip show/hide/change 事件，进行展示
+        customContent: (title, items) => {
+          let container = document.getElementById($tooltipId);
+          if (!container) {
+            container = document.createElement('div');
+            container.id = $tooltipId;
+          }
+          const plotBox = $container.current?.getBoundingClientRect();
+          if (items.length && plotBox) {
+            const position = { x: items[0].x, y: items[0].y };
+            const total = items.reduce((sum, d) => sum + (d.data[yField] || null), 0);
+            const portal = ReactDOM.createPortal(
+              // 可以使用自定义的 react tooltip 组件
+              <Tooltip
+                x={position.x + plotBox.x}
+                y={position.y + plotBox.y - 36}
+                header={false}
+                details={
+                  <Tooltip.Detail
+                    data={[
+                      { label: '城市', value: title },
+                      ...items.map((item) => ({
+                        label: get(item, ['data', seriesField]),
+                        value: get(item, ['data', yField]),
+                      })),
+                    ]}
+                  />
+                }
+                footer={<Tooltip.Footer tip={`总计: ${total}`} />}
+              />,
+              container
+            );
+            ReactDOM.render(portal, container);
+          }
+
+          return container;
+        },
+      },
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (!$container?.current) return;
+    const newOptions = { ...options, data };
+    if (!$plot?.current) {
+      $plot.current = new Column($container.current, newOptions);
+      $plot.current.render();
+    } else {
+      $plot.current.update(newOptions);
+    }
+  }, [options]);
+
+  React.useEffect(() => {
+    if ($plot?.current) {
+      $plot.current.changeData(data);
+    }
+  }, [data]);
+
+  return <div ref={$container} />;
+};
+
+ReactDOM.render(<Plot />, document.getElementById('container'));

examples/line/multiple/demo/meta.json

@@ -34,7 +34,6 @@
         "zh": "折线趋势填充",
         "en": "Line with area fill"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/iQezVzeT%24x/line-area.gif"
     },
     {

examples/more-plots/box/demo/meta.json

@@ -42,7 +42,6 @@
         "zh": "设置箱线图 label",
         "en": "Box plot label"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/swwLHN2Br0/4fce6597-3c82-44c4-b72c-d73560b18ac4.png"
     },
     {

examples/more-plots/sunburst/demo/meta.json

@@ -82,7 +82,6 @@
         "zh": "配置激活展示的层级数",
         "en": "Config active display depth"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/y9BD5CSBrF/sunburst-active-level.gif"
     }
   ]

gatsby-browser.js

@@ -6,5 +6,6 @@ window.react = require('react');
 window.reactDom = require('react-dom');
 window.antd = require('antd');
 window.chromaJs = require('chroma-js');
+window.rcForPlots = require('rc-for-plots');
 
 require('antd/lib/alert/style/index.css');

package.json

@@ -100,6 +100,7 @@
     "miz": "^1.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.1",
+    "rc-for-plots": "^0.0.1",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-i18next": "^11.7.0",

src/utils/data.ts

@@ -10,6 +10,7 @@ import { pick } from './pick';
  * @param field
  */
 export function adjustYMetaByZero(data: Data, field: string): Meta {
+  if (!data) return {};
   // 过滤出数字数据
   const numberData = data.filter((datum: Datum) => {
     const v = get(datum, [field]);