docs: add demos (#1423)

* docs: add demos * docs: review modify * fix: 修复默认配置引起的单测问题 * fix: review modify * fix: 删除多余目录 * fix: 删除多余空格 Co-authored-by: liufu.lf <liufu.lf@antfin.com>
antvis · Aug 25, 2020 · b316592 · b316592
1 parent 07b03a7
commit b316592
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 19 deletions.
diff --git a/__tests__/unit/plots/line/axis-spec.ts b/__tests__/unit/plots/line/axis-spec.ts
@@ -28,6 +28,7 @@ describe('line', () => {
         },
       },
       yAxis: {
+        nice: false,
         tickCount: 3,
         min: 500,
       },

diff --git a/__tests__/unit/plots/radar/axis-spec.ts b/__tests__/unit/plots/radar/axis-spec.ts
@@ -80,7 +80,7 @@ describe('radar axis 设置', () => {
     const yAxes = getAxes(radar.chart)[1];
     expect(xAxes.component.get('label').style.fill).toBe('red');
     expect(xAxes.component.get('grid').line.style.lineWidth).toBe(0);
-    expect(yAxes.component.get('ticks').length).toBe(3);
+    expect(yAxes.component.get('ticks').length).toBe(4);
     expect(yAxes.component.get('tickCount')).toBe(4);
   });
 

diff --git a/__tests__/unit/plots/scatter/default-config-spec.ts b/__tests__/unit/plots/scatter/default-config-spec.ts
@@ -0,0 +1,24 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('default config', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      size: 10,
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+    const { options } = scatter;
+    // @ts-ignore
+    expect(options.tooltip.offset).toBe(20);
+  });
+});
diff --git a/examples/scatter/basic/demo/basic.js → examples/scatter/basic/demo/basic.ts b/examples/scatter/basic/demo/basic.js → examples/scatter/basic/demo/basic.ts
@@ -4,18 +4,27 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
   .then((res) => res.json())
   .then((data) => {
     const scatterPlot = new Scatter('container', {
-      width: 400,
-      height: 300,
       appendPadding: 10,
       data,
       xField: 'Revenue (Millions)',
       yField: 'Rating',
       shape: 'circle',
+      yAxis: {
+        grid: {},
+      },
       xAxis: {
-        visible: true,
+        min: -100,
+        nice: true,
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
       },
       pointStyle: {
-        stroke: '#777',
+        stroke: '#fff',
       },
     });
     scatterPlot.render();

diff --git a/examples/scatter/basic/demo/color-mapping.js → examples/scatter/basic/demo/color-mapping.ts b/examples/scatter/basic/demo/color-mapping.js → examples/scatter/basic/demo/color-mapping.ts
@@ -4,21 +4,29 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
   .then((res) => res.json())
   .then((data) => {
     const scatterPlot = new Scatter('container', {
-      width: 400,
-      height: 300,
       appendPadding: 10,
       data,
       xField: 'Revenue (Millions)',
       yField: 'Rating',
       shape: 'circle',
       colorField: 'Genre',
       sizeField: 'Rating',
-      size: [2, 6],
-      xAxis: {
+      size: [2, 5],
+      yAxis: {
         nice: true,
       },
+      xAxis: {
+        min: -100,
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
+      },
       pointStyle: {
-        stroke: '#777',
+        stroke: '#fff',
       },
     });
     scatterPlot.render();

diff --git a/examples/scatter/basic/demo/label.ts b/examples/scatter/basic/demo/label.ts
@@ -0,0 +1,30 @@
+import { Scatter } from '@antv/g2plot';
+
+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',
+      colorField: 'Result',
+      color: ['#c71e1d', '#ffca76', '#09bb9f'],
+      size: 5,
+      shape: 'circle',
+      pointStyle: {
+        fillOpacity: 1,
+      },
+      xAxis: {
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
+      },
+      label: {},
+    });
+    scatterPlot.render();
+  });
diff --git a/examples/scatter/basic/demo/meta.json b/examples/scatter/basic/demo/meta.json
@@ -5,28 +5,44 @@
   },
   "demos": [
     {
-      "filename": "basic.js",
+      "filename": "basic.ts",
       "title": {
         "zh": "基础散点图",
         "en": "basic Scatter chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Cu0wSYK_U6YAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "color-mapping.js",
+      "filename": "color-mapping.ts",
       "title": {
         "zh": "散点图颜色映射",
         "en": "the color mapping of Scatter chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Mds9Q7-zeHMAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "shape-mapping.js",
+      "filename": "shape-mapping.ts",
       "title": {
         "zh": "散点形状色映射",
         "en": "the shape mapping of Scatter chart"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kRFIJ2OlFs/FE726B54-2352-47F5-AAF9-B17D281CE513.png"
+    },
+    {
+      "filename": "label.ts",
+      "title": {
+        "zh": "散点图图形标签",
+        "en": "Scatter chart label"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*XlOeS4YAHbYAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "size.ts",
+      "title": {
+        "zh": "散点图-气泡",
+        "en": "Bubble chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*_lGkQrhj53gAAAAAAAAAAABkARQnAQ"
     }
   ]
 }
diff --git a/examples/scatter/basic/demo/shape-mapping.js → examples/scatter/basic/demo/shape-mapping.ts b/examples/scatter/basic/demo/shape-mapping.js → examples/scatter/basic/demo/shape-mapping.ts
@@ -4,20 +4,30 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
   .then((res) => res.json())
   .then((data) => {
     const scatterPlot = new Scatter('container', {
-      width: 400,
-      height: 300,
       appendPadding: 10,
       data,
       xField: 'Revenue (Millions)',
       yField: 'Rating',
       shapeField: 'Genre',
       shape: ['circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'hyphen', 'line', 'cross'],
       colorField: 'Genre',
+      size: 6,
+      yAxis: {
+        nice: true,
+      },
       xAxis: {
+        min: -100,
         nice: true,
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
       },
       pointStyle: {
-        stroke: '#777',
+        stroke: '#fff',
       },
     });
     scatterPlot.render();

diff --git a/examples/scatter/basic/demo/size.ts b/examples/scatter/basic/demo/size.ts
@@ -0,0 +1,32 @@
+import { Scatter } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747ad9a.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const scatterPlot = new Scatter('container', {
+      appendPadding: 30,
+      data,
+      xField: 'change in female rate',
+      yField: 'change in male rate',
+      sizeField: 'pop',
+      colorField: 'continent',
+      color: ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
+      size: [4, 30],
+      shape: 'circle',
+      pointStyle: {
+        fillOpacity: 0.8,
+      },
+      xAxis: {
+        min: -25,
+        max: 5,
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
+      },
+    });
+    scatterPlot.render();
+  });
diff --git a/src/core/plot.ts b/src/core/plot.ts
@@ -3,13 +3,39 @@ import { deepMix } from '@antv/util';
 import EE from '@antv/event-emitter';
 import { bind } from 'size-sensor';
 import { Adaptor } from './adaptor';
-import { ChartOptions, Data, Size } from '../types';
+import { ChartOptions, Options, Data, Size } from '../types';
 import { getContainerSize } from '../utils';
 
 /**
  * 所有 plot 的基类
  */
 export abstract class Plot<O extends ChartOptions> extends EE {
+  /** 默认配置 */
+  private defaultOptions: Partial<Options> = {
+    renderer: 'canvas',
+    tooltip: {
+      shared: true,
+      showCrosshairs: true,
+      crosshairs: {
+        type: 'x',
+      },
+      offset: 20,
+    },
+    xAxis: {
+      nice: true,
+      label: {
+        autoRotate: true,
+        autoHide: true,
+      },
+    },
+    yAxis: {
+      nice: true,
+      label: {
+        autoHide: true,
+        autoRotate: false,
+      },
+    },
+  };
   /** plot 类型名称 */
   public abstract readonly type: string = 'base';
   /** plot 的 schema 配置 */
@@ -81,8 +107,8 @@ export abstract class Plot<O extends ChartOptions> extends EE {
    * 获取默认的 options 配置项
    * 每个组件都可以复写
    */
-  protected getDefaultOptions(): Partial<O> {
-    return {};
+  protected getDefaultOptions(): Partial<Options> {
+    return this.defaultOptions;
   }
 
   /**

diff --git a/src/plots/scatter/index.ts b/src/plots/scatter/index.ts
@@ -1,3 +1,4 @@
+import { deepMix } from '@antv/util';
 import { Plot } from '../../core/plot';
 import { ScatterOptions } from './types';
 import { adaptor } from './adaptor';
@@ -16,4 +17,23 @@ export class Scatter extends Plot<ScatterOptions> {
   protected getSchemaAdaptor(): Adaptor<ScatterOptions> {
     return adaptor;
   }
+
+  protected getDefaultOptions() {
+    return deepMix({}, super.getDefaultOptions(), {
+      size: 4,
+      pointStyle: {
+        lineWidth: 1,
+        strokeOpacity: 1,
+        fillOpacity: 0.95,
+        stroke: '#fff',
+      },
+      tooltip: {
+        shared: null,
+        showTitle: false,
+        showMarkers: false,
+        showCrosshairs: false,
+      },
+      shape: 'circle',
+    });
+  }
 }