feat: scatter chart supported quadrant (#1522)

lxfu1 · liufu.lf · web-flow · commit 471a7dd98af4 · 2020-09-05T20:10:58.000+08:00
* feat: scatter chart supported quadrant

* fix: resolve conversation

Co-authored-by: liufu.lf &lt;liufu.lf@antfin.com&gt;
diff --git a/__tests__/unit/plots/scatter/quadrant-spec.ts b/__tests__/unit/plots/scatter/quadrant-spec.ts
@@ -0,0 +1,62 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('size: number options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      sizeField: 'weight',
+      size: [5, 10],
+      xAxis: {
+        nice: true,
+      },
+      quadrant: {
+        xBaseline: 80,
+        yBaseline: 170,
+        labels: [
+          {
+            content: 'Male decrease,\nfemale increase',
+          },
+          {
+            content: 'Female decrease,\nmale increase',
+          },
+          {
+            content: 'Female & male decrease',
+          },
+          {
+            content: 'Female &\n male increase',
+          },
+        ],
+      },
+    });
+
+    scatter.render();
+
+    // @ts-ignore
+    const { option } = scatter.chart.annotation();
+    expect(option.length).toBe(10);
+    const regions = option.filter((item) => item.type === 'region');
+    const texts = option.filter((item) => item.type === 'text');
+    const lines = option.filter((item) => item.type === 'line');
+    expect(regions.length).toBe(4);
+    expect(texts.length).toBe(4);
+    expect(lines.length).toBe(2);
+    // @ts-ignore
+    expect(regions[0].style.opacity).toBe(0.4);
+    expect(regions[0].top).not.toBeTruthy();
+    expect(texts[0].top).toBeTruthy();
+    // @ts-ignore
+    const hasLabel = texts.find((item) => item.content === 'Female & male decrease');
+    expect(hasLabel).toBeTruthy();
+    // @ts-ignore
+    expect(lines[0].style.lineWidth).toBe(1);
+    // @ts-ignore
+    expect(lines[0].end).toEqual(['max', 170]);
+  });
+});
diff --git a/examples/scatter/basic/demo/meta.json b/examples/scatter/basic/demo/meta.json
@@ -43,6 +43,14 @@
         "en": "Bubble chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*_lGkQrhj53gAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "quadrant.ts",
+      "title": {
+        "zh": "散点图-气泡四象限",
+        "en": "Bubble chart quadrant"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tdedT4uaPaYAAAAAAAAAAABkARQnAQ"
     }
   ]
 }
diff --git a/examples/scatter/basic/demo/quadrant.ts b/examples/scatter/basic/demo/quadrant.ts
@@ -0,0 +1,50 @@
+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',
+            },
+          },
+        },
+      },
+      quadrant: {
+        xBaseline: 0,
+        yBaseline: 0,
+        labels: [
+          {
+            content: 'Male decrease,\nfemale increase',
+          },
+          {
+            content: 'Female decrease,\nmale increase',
+          },
+          {
+            content: 'Female & male decrease',
+          },
+          {
+            content: 'Female &\n male increase',
+          },
+        ],
+      },
+    });
+    scatterPlot.render();
+  });
diff --git a/src/plots/scatter/adaptor.ts b/src/plots/scatter/adaptor.ts
@@ -1,8 +1,9 @@
-import { isFunction, isNumber, isString } from '@antv/util';
+import { isFunction, isNumber, isString, deepMix } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { tooltip, interaction, animation, theme, scale } from '../../adaptor/common';
 import { findGeometry } from '../../utils';
+import { getQuadrantDefaultConfig } from './util';
 import { ScatterOptions } from './types';
 
 /**
@@ -143,12 +144,54 @@ function label(params: Params<ScatterOptions>): Params<ScatterOptions> {
   return params;
 }
 
+/**
+ * 四象限
+ * @param params
+ */
+function quadrant(params: Params<ScatterOptions>): Params<ScatterOptions> {
+  const { chart, options } = params;
+  const { quadrant } = options;
+
+  if (quadrant) {
+    const { xBaseline = 0, yBaseline = 0, labels, regionStyle, lineStyle } = quadrant;
+    const defaultConfig = getQuadrantDefaultConfig(xBaseline, yBaseline);
+    // 仅支持四象限
+    const quadrants = new Array(4).join(',').split(',');
+    quadrants.forEach((_: string, index: number) => {
+      chart.annotation().region({
+        top: false,
+        ...defaultConfig.regionStyle[index].position,
+        style: deepMix({}, defaultConfig.regionStyle[index].style, regionStyle?.[index]),
+      });
+      chart.annotation().text({
+        top: true,
+        ...deepMix({}, defaultConfig.labelStyle[index], labels?.[index]),
+      });
+    });
+    // 生成坐标轴
+    chart.annotation().line({
+      top: false,
+      start: ['min', yBaseline],
+      end: ['max', yBaseline],
+      style: deepMix({}, defaultConfig.lineStyle, lineStyle),
+    });
+    chart.annotation().line({
+      top: false,
+      start: [xBaseline, 'min'],
+      end: [xBaseline, 'max'],
+      style: deepMix({}, defaultConfig.lineStyle, lineStyle),
+    });
+  }
+
+  return params;
+}
+
 /**
  * 散点图适配器
  * @param chart
  * @param options
  */
 export function adaptor(params: Params<ScatterOptions>) {
   // flow 的方式处理所有的配置到 G2 API
-  return flow(field, meta, axis, legend, tooltip, style, label, interaction, animation, theme)(params);
+  return flow(field, meta, axis, legend, tooltip, style, label, interaction, quadrant, animation, theme)(params);
 }
diff --git a/src/plots/scatter/types.ts b/src/plots/scatter/types.ts
@@ -1,6 +1,5 @@
-import { Options } from '../../types';
+import { Options, RegionPositionBaseOption, TextOption, AnnotationPosition } from '../../types';
 import { ShapeStyle } from '../../types/style';
-import { Label } from '../../types/label';
 
 interface PointStyle {
   /** 填充色 会覆盖 color 配置  */
@@ -19,26 +18,21 @@ interface PointStyle {
   readonly strokeOpacity?: number;
 }
 
+interface Labels extends Omit<TextOption, 'position'> {
+  position?: AnnotationPosition;
+}
+
 interface Quadrant {
-  /** 是否显示  */
-  readonly visible?: boolean;
   /** x 方向上的象限分割基准线，默认为 0  */
   readonly xBaseline?: number;
   /** y 方向上的象限分割基准线，默认为 0  */
   readonly yBaseline?: number;
   /** 配置象限分割线的样式  */
-  readonly lineStyle?: ShapeStyle;
+  readonly lineStyle?: RegionPositionBaseOption;
   /** 象限样式 */
-  readonly regionStyle?: RegionStyle[];
+  readonly regionStyle?: RegionPositionBaseOption[];
   /** 象限文本配置  */
-  readonly label?: Label;
-}
-
-interface RegionStyle {
-  /** 填充色  */
-  readonly fill?: string;
-  /** 不透明度  */
-  readonly opacity?: number;
+  readonly labels?: Labels[];
 }
 
 interface TrendLine {
diff --git a/src/plots/scatter/util.ts b/src/plots/scatter/util.ts
@@ -0,0 +1,105 @@
+/**
+ * 获取四象限默认配置
+ * @param {number} xBaseline
+ * @param {number} yBaseline
+ */
+export function getQuadrantDefaultConfig(xBaseline: number, yBaseline: number) {
+  // 文本便宜距离
+  const textOffset = 10;
+  // 四象限默认样式
+  const defaultConfig: { [key: string]: any } = {
+    regionStyle: [
+      {
+        position: {
+          start: [xBaseline, 'max'],
+          end: ['max', yBaseline],
+        },
+        style: {
+          fill: '#d8d0c0',
+          opacity: 0.4,
+        },
+      },
+      {
+        position: {
+          start: ['min', 'max'],
+          end: [xBaseline, yBaseline],
+        },
+        style: {
+          fill: '#a3dda1',
+          opacity: 0.4,
+        },
+      },
+      {
+        position: {
+          start: ['min', yBaseline],
+          end: [xBaseline, 'min'],
+        },
+        style: {
+          fill: '#d8d0c0',
+          opacity: 0.4,
+        },
+      },
+      {
+        position: {
+          start: [xBaseline, yBaseline],
+          end: ['max', 'min'],
+        },
+        style: {
+          fill: '#a3dda1',
+          opacity: 0.4,
+        },
+      },
+    ],
+    lineStyle: {
+      stroke: '#9ba29a',
+      lineWidth: 1,
+    },
+    labelStyle: [
+      {
+        position: ['max', yBaseline],
+        offsetX: -textOffset,
+        offsetY: -textOffset,
+        style: {
+          textAlign: 'right',
+          textBaseline: 'bottom',
+          fontSize: 14,
+          fill: '#ccc',
+        },
+      },
+      {
+        position: ['min', yBaseline],
+        offsetX: textOffset,
+        offsetY: -textOffset,
+        style: {
+          textAlign: 'left',
+          textBaseline: 'bottom',
+          fontSize: 14,
+          fill: '#ccc',
+        },
+      },
+      {
+        position: ['min', yBaseline],
+        offsetX: textOffset,
+        offsetY: textOffset,
+        style: {
+          textAlign: 'left',
+          textBaseline: 'top',
+          fontSize: 14,
+          fill: '#ccc',
+        },
+      },
+      {
+        position: ['max', yBaseline],
+        offsetX: -textOffset,
+        offsetY: textOffset,
+        style: {
+          textAlign: 'right',
+          textBaseline: 'top',
+          fontSize: 14,
+          fill: '#ccc',
+        },
+      },
+    ],
+  };
+  return defaultConfig;
+}
diff --git a/src/types/common.ts b/src/types/common.ts
@@ -1,3 +1,4 @@
+import { AnnotationPosition, RegionPositionBaseOption, TextOption } from '@antv/g2/lib/interface';
 import { Axis } from './axis';
 import { Label } from './label';
 import { Tooltip } from './tooltip';
@@ -7,6 +8,9 @@ import { Animation } from './animation';
 import { State } from './state';
 import { Slider } from './slider';
 
+/** annotation position */
+export { AnnotationPosition, RegionPositionBaseOption, TextOption };
+
 /** 一条数据记录 */
 export type Datum = Record<string, any>;
 

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,14 @@`
`43`	`43`	`"en": "Bubble chart"`
`44`	`44`	`},`
`45`	`45`	`"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*_lGkQrhj53gAAAAAAAAAAABkARQnAQ"`
	`46`	`+ },`
	`47`	`+ {`
	`48`	`+ "filename": "quadrant.ts",`
	`49`	`+ "title": {`
	`50`	`+ "zh": "散点图-气泡四象限",`
	`51`	`+ "en": "Bubble chart quadrant"`
	`52`	`+ },`
	`53`	`+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tdedT4uaPaYAAAAAAAAAAABkARQnAQ"`
`46`	`54`	`}`
`47`	`55`	`]`
`48`	`56`	`}`