docs: api 走查 (antvis#1880)

* docs: api 走查 * fix: conversation
jinhuiWong · Nov 15, 2020 · 15b091a · 15b091a
1 parent 15f442e
commit 15b091a
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 16 deletions.
diff --git a/__tests__/unit/core/index-spec.ts b/__tests__/unit/core/index-spec.ts
@@ -177,15 +177,17 @@ describe('core', () => {
   });
 
   it('getChartSize', () => {
-    const line = new Line(createDiv(), {
+    createDiv('', document.body, 'changeSize');
+    document.getElementById('changeSize').style.width = '0px';
+    const line = new Line('changeSize', {
       data: partySupport.filter((o) => o.type === 'FF'),
       xField: 'date',
       yField: 'value',
     });
 
     line.render();
-    expect(line.chart.height).toBe(300);
-
+    expect(line.chart.width).toBe(400);
+    expect(line.chart.height).toBe(400);
     line.destroy();
   });
 });
diff --git a/__tests__/utils/dom.ts b/__tests__/utils/dom.ts
@@ -2,6 +2,7 @@
  * 创建一个 div 节点，并放到 container，默认放到 body 上
  * @param title
  * @param container
+ * @param id  容器 id
  */
 export function createDiv(title: string = '', container: HTMLElement = document.body, id?: string): HTMLElement {
   const div = document.createElement('div');
@@ -13,10 +14,6 @@ export function createDiv(title: string = '', container: HTMLElement = document.
     container.appendChild(titleDiv);
   }
 
-  if (id) {
-    div.setAttribute('id', id);
-  }
-
   container.appendChild(div);
 
   return div;

diff --git a/docs/manual/plots/scatter.en.md b/docs/manual/plots/scatter.en.md
@@ -72,9 +72,9 @@ scatterPlot.render();
 
 点大小映射对应的数据字段名。
 
-#### size 
+#### size
 
-<description>**optional** \_number | [number, number] | Function_</description>
+<description>**optional** \_number | [number, number] | Function\_</description>
 
 [**DEMO1**](../../scatter/basic#color-mapping)
 
@@ -106,7 +106,7 @@ scatterPlot.render();
 
 点形状映射对应的数据字段名。
 
-#### shape 
+#### shape
 
 <description>**optional** \_string | string[] | Function\_</description>
 
@@ -139,7 +139,7 @@ scatterPlot.render();
 }
 ```
 
-#### pointStyle 
+#### pointStyle
 
 <description>**optional** _object_</description>
 
@@ -192,6 +192,48 @@ scatterPlot.render();
 
 `markdown:docs/common/component.en.md`
 
+#### quadrant
+
+[**DEMO**](../../scatter/basic#quadrant)
+
+<description>**optional** _object_</description>
+
+四象限组件。
+
+| 细分配置    | 类型     | 功能描述                                   |
+| ----------- | -------- | ------------------------------------------ |
+| xBaseline   | number   | x 方向上的象限分割基准线，默认为 0         |
+| yBaseline   | number   | y 方向上的象限分割基准线，默认为 0         |
+| lineStyle   | object   | 配置象限分割线的样式，详细配置参考绘图属性 |
+| regionStyle | object[] | 象限样式，详细配置参考绘图属性             |
+| labels      | object[] | 象限文本配置，详细配置参考绘图属性         |
+
+#### regressionLine
+
+[**DEMO**](../../scatter/basic#line)
+
+<description>**optional** _object_</description>
+
+回归线。
+
+| 细分配置  | 类型                                                                | 功能描述                                                         |
+| --------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| type      | string                                                              | 回归线类型, exp \| linear \| loess \| log \| poly \| pow \| quad |
+| style     | object                                                              | 配置回归线样式，详细配置参考绘图属性                             |
+| algorithm | Array<[number, number]> \| ((data: any) => Array<[number, number]>) | 自定义算法，优先级高于 type                                      |
+
+```ts
+regressionLine: {
+  algorithm: () => {
+    return [
+      [8, 6],
+      [16, 7],
+      [24, 7],
+    ];
+  },
+}
+```
+
 ### Event
 
 `markdown:docs/common/events.en.md`

diff --git a/docs/manual/plots/scatter.zh.md b/docs/manual/plots/scatter.zh.md
@@ -72,9 +72,9 @@ scatterPlot.render();
 
 点大小映射对应的数据字段名。
 
-#### size 
+#### size
 
-<description>**optional** \_number | [number, number] | Function_</description>
+<description>**optional** \_number | [number, number] | Function\_</description>
 
 [**DEMO1**](../../scatter/basic#color-mapping)
 
@@ -106,7 +106,7 @@ scatterPlot.render();
 
 点形状映射对应的数据字段名。
 
-#### shape 
+#### shape
 
 <description>**optional** \_string | string[] | Function\_</description>
 
@@ -139,7 +139,7 @@ scatterPlot.render();
 }
 ```
 
-#### pointStyle 
+#### pointStyle
 
 <description>**optional** _object_</description>
 
@@ -192,6 +192,48 @@ scatterPlot.render();
 
 `markdown:docs/common/component.zh.md`
 
+#### quadrant
+
+[**DEMO**](../../scatter/basic#quadrant)
+
+<description>**optional** _object_</description>
+
+四象限组件。
+
+| 细分配置    | 类型     | 功能描述                                   |
+| ----------- | -------- | ------------------------------------------ |
+| xBaseline   | number   | x 方向上的象限分割基准线，默认为 0         |
+| yBaseline   | number   | y 方向上的象限分割基准线，默认为 0         |
+| lineStyle   | object   | 配置象限分割线的样式，详细配置参考绘图属性 |
+| regionStyle | object[] | 象限样式，详细配置参考绘图属性             |
+| labels      | object[] | 象限文本配置，详细配置参考绘图属性         |
+
+#### regressionLine
+
+[**DEMO**](../../scatter/basic#line)
+
+<description>**optional** _object_</description>
+
+回归线。
+
+| 细分配置  | 类型                                                                | 功能描述                                                         |
+| --------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| type      | string                                                              | 回归线类型, exp \| linear \| loess \| log \| poly \| pow \| quad |
+| style     | object                                                              | 配置回归线样式，详细配置参考绘图属性                             |
+| algorithm | Array<[number, number]> \| ((data: any) => Array<[number, number]>) | 自定义算法，优先级高于 type                                      |
+
+```ts
+regressionLine: {
+  algorithm: () => {
+    return [
+      [8, 6],
+      [16, 7],
+      [24, 7],
+    ];
+  },
+}
+```
+
 ### 事件
 
 `markdown:docs/common/events.zh.md`

diff --git a/examples/scatter/basic/demo/custom-shape.ts b/examples/scatter/basic/demo/custom-shape.ts
@@ -0,0 +1,61 @@
+import { Scatter, G2 } from '@antv/g2plot';
+
+// 注册主体有 point | interval | polygon | line 等，详细参考 G2: https://g2.antv.vision/
+G2.registerShape('point', 'custom-shape', {
+  draw(cfg, group) {
+    const cx = cfg.x;
+    const cy = cfg.y;
+    const radius = cfg.size || 5;
+    const polygon = group.addShape('path', {
+      attrs: {
+        path: [['M', cx - radius, cy - radius], ['L', cx + radius, cy - radius], ['L', cx, cy + radius], ['Z']],
+        ...cfg.defaultStyle,
+        ...cfg.style,
+      },
+    });
+    return polygon;
+  },
+});
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/3e4db10a-9da1-4b44-80d8-c128f42764a8.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const scatterPlot = new Scatter('container', {
+      appendPadding: 30,
+      data,
+      xField: 'xG conceded',
+      yField: 'Shot conceded',
+      shape: 'custom-shape',
+      pointStyle: {
+        lineWidth: 2,
+      },
+      size: 6,
+      yAxis: {
+        nice: true,
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
+      },
+      tooltip: {
+        showMarkers: false,
+      },
+      xAxis: {
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
+      },
+      label: {},
+    });
+    scatterPlot.render();
+  });
diff --git a/examples/scatter/basic/demo/meta.json b/examples/scatter/basic/demo/meta.json
@@ -43,6 +43,14 @@
         "en": "Bubble plot yAxis on the right"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0luHTJODdMUAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "custom-shape.ts",
+      "title": {
+        "zh": "散点图-自定义图形",
+        "en": "Scatter plot custom shape"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*zfwOTZE7KwcAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/src/core/plot.ts b/src/core/plot.ts
@@ -83,7 +83,7 @@ export abstract class Plot<O extends PickOptions> extends EE {
    */
   private getChartSize(width: number, height: number): Size {
     const chartSize = getContainerSize(this.container);
-    return { width: width || chartSize.width, height: height || chartSize.height || 300 };
+    return { width: width || chartSize.width || 400, height: height || chartSize.height || 400 };
   }
 
   /**