fix: 代码走查 (#1539)

* fix: 优化散点图

* fix: 修复散点图 field 相关逻辑

* fix: tests

Co-authored-by: liufu.lf <liufu.lf@antfin.com>

__tests__/unit/plots/scatter/color-spec.ts

@@ -34,6 +34,7 @@ describe('scatter', () => {
       data,
       xField: 'weight',
       yField: 'height',
+      colorField: 'gender',
       color: ['#e764ff', '#2b0033'],
       xAxis: {
         nice: true,

__tests__/unit/plots/scatter/legend-spec.ts

@@ -0,0 +1,83 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('legend: false', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shapeField: 'gender',
+      xAxis: {
+        nice: true,
+      },
+      legend: false,
+    });
+
+    scatter.render();
+    const legendController = scatter.chart.getController('legend');
+    // @ts-ignore
+    const { option } = legendController;
+    expect(option).toBeUndefined();
+  });
+
+  it('legend: true', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shapeField: 'gender',
+      shape: ['circle', 'square'],
+      colorField: 'gender',
+      xAxis: {
+        nice: true,
+      },
+      legend: true,
+    });
+
+    scatter.render();
+
+    const legendController = scatter.chart.getController('legend');
+    // @ts-ignore
+    const { option } = legendController;
+    expect(option).not.toBeUndefined();
+    expect(legendController.getComponents().length).toBe(1);
+    expect(legendController.getComponents()[0].id).toBe('legend-gender');
+  });
+  it('legend: postion options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shapeField: 'gender',
+      shape: ['circle', 'square'],
+      colorField: 'gender',
+      xAxis: {
+        nice: true,
+      },
+      legend: {
+        position: 'top-right',
+      },
+    });
+
+    scatter.render();
+
+    const legendController = scatter.chart.getController('legend');
+    // @ts-ignore
+    const { option } = legendController;
+    expect(option).not.toBeUndefined();
+    expect(legendController.getComponents().length).toBe(1);
+    expect(legendController.getComponents()[0].id).toBe('legend-gender');
+    expect(legendController.getComponents()[0].direction).toBe('top-right');
+  });
+});

__tests__/unit/plots/scatter/shape-spec.ts

@@ -11,6 +11,7 @@ describe('scatter', () => {
       data,
       xField: 'weight',
       yField: 'height',
+      shapeField: 'gender',
       shape: 'hollow-diamond',
       xAxis: {
         nice: true,
@@ -35,6 +36,7 @@ describe('scatter', () => {
       data,
       xField: 'weight',
       yField: 'height',
+      shapeField: 'gender',
       shape: ['circle', 'square'],
       xAxis: {
         nice: true,
@@ -66,8 +68,8 @@ describe('scatter', () => {
       yField: 'height',
       shapeField: 'gender',
       size: 10,
-      shape: (gender: string) => {
-        if (gender === 'female') {
+      shape: (...args) => {
+        if (args[args.length - 1] === 'female') {
           return 'square';
         }
         return 'circle';

__tests__/unit/plots/scatter/size-spec.ts

@@ -41,6 +41,7 @@ describe('scatter', () => {
       data,
       xField: 'weight',
       yField: 'height',
+      sizeField: 'gender',
       size: [5, 10],
       xAxis: {
         nice: true,

src/plots/heatmap/types.ts

@@ -15,7 +15,7 @@ export interface HeatmapOptions extends Options {
   /** 热力格子中图形的尺寸比例，可选，只有当 shapeType 和 sizeField 至少指定一项后才生效 */
   readonly sizeRatio?: number;
   /** 热力图形样式 */
-  readonly heatmapStyle?: ShapeStyle | ((x: any, y: any, color: any) => ShapeStyle);
+  readonly heatmapStyle?: ShapeStyle | ((x: any, y: any, color?: any, size?: any) => ShapeStyle);
 }
 
 export const SHAPE_TYPES = tuple('circle', 'square');

src/plots/histogram/types.ts

@@ -18,5 +18,5 @@ export interface HistogramOptions extends Options {
   readonly stackField?: string;
 
   /** 柱子样式配置，可选 */
-  readonly columnStyle?: ShapeStyle | ((x: any, y: any, color?: any) => ShapeStyle);
+  readonly columnStyle?: ShapeStyle | ((range: any, count?: any) => ShapeStyle);
 }

src/plots/pie/types.ts

@@ -44,7 +44,7 @@ export interface PieOptions extends Options {
   readonly innerRadius?: number;
 
   /** 饼图图形样式 */
-  readonly pieStyle?: ShapeStyle | ((...args: string[]) => ShapeStyle);
+  readonly pieStyle?: ShapeStyle | ((angle: string, color: string) => ShapeStyle);
 
   /**
    * 指标卡组件: 显示在环图中心，可以代替tooltip，显示环图数据的总计值和各项数据

src/plots/scatter/adaptor.ts

@@ -1,4 +1,4 @@
-import { isFunction, isNumber, isString, deepMix } from '@antv/util';
+import { isFunction, deepMix, isString, isArray } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { tooltip, interaction, animation, theme, scale } from '../../adaptor/common';
@@ -24,30 +24,30 @@ function field(params: Params<ScatterOptions>): Params<ScatterOptions> {
   }
 
   // shape
-  if (shape) {
-    if (isString(shape)) {
-      geometry.shape(shape);
-    } else {
-      geometry.shape(shapeField || xField, shape);
-    }
+  if (isFunction(shape)) {
+    geometry.shape(`${xField}*${yField}*${colorField}*${sizeField}*${shapeField}`, shape);
+  } else if (isArray(shape) && shapeField) {
+    geometry.shape(shapeField, shape);
+  } else if (isString(shape) || isString(shapeField)) {
+    geometry.shape((shape || shapeField) as string);
   }
 
   // color
-  if (color) {
-    if (isString(color)) {
-      geometry.color(color);
-    } else {
-      geometry.color(colorField || xField, color);
-    }
+  if (isFunction(color)) {
+    geometry.color(`${xField}*${yField}*${colorField}*${sizeField}*${shapeField}`, color);
+  } else if (isArray(color) && colorField) {
+    geometry.color(colorField, color);
+  } else if (isString(color) || isString(colorField)) {
+    geometry.color((color || colorField) as string);
   }
 
   // size
-  if (size) {
-    if (isNumber(size)) {
-      geometry.size(size);
-    } else {
-      geometry.size(sizeField || xField, size);
-    }
+  if (isFunction(size)) {
+    geometry.size(`${xField}*${yField}*${colorField}*${sizeField}*${shapeField}`, size);
+  } else if (isArray(size) && sizeField) {
+    geometry.size(sizeField, size);
+  } else if (isString(size) || isString(sizeField)) {
+    geometry.size((size || sizeField) as string);
   }
 
   return params;
@@ -89,10 +89,18 @@ function axis(params: Params<ScatterOptions>): Params<ScatterOptions> {
  */
 function legend(params: Params<ScatterOptions>): Params<ScatterOptions> {
   const { chart, options } = params;
-  const { legend, colorField } = options;
+  const { legend, colorField, shapeField, sizeField } = options;
+
+  if (legend) {
+    chart.legend(shapeField || colorField, legend);
+  } else {
+    chart.legend(false);
+    chart.legend(colorField, false);
+  }
 
-  if (legend && colorField) {
-    chart.legend(colorField, legend);
+  // 隐藏连续图例
+  if (sizeField) {
+    chart.legend(sizeField, false);
   }
 
   return params;
@@ -104,13 +112,13 @@ function legend(params: Params<ScatterOptions>): Params<ScatterOptions> {
  */
 function style(params: Params<ScatterOptions>): Params<ScatterOptions> {
   const { chart, options } = params;
-  const { xField, yField, pointStyle, colorField } = options;
+  const { xField, yField, pointStyle, colorField, sizeField, shapeField } = options;
 
   const geometry = chart.geometries[0];
 
   if (pointStyle && geometry) {
     if (isFunction(pointStyle)) {
-      geometry.style(`${xField}*${yField}*${colorField}`, pointStyle);
+      geometry.style(`${xField}*${yField}*${colorField}*${sizeField}*${shapeField}`, pointStyle);
     } else {
       geometry.style(pointStyle);
     }

src/plots/scatter/index.ts

@@ -1,4 +1,4 @@
-import { deepMix } from '@antv/util';
+import { deepMix, isBoolean } from '@antv/util';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { ScatterOptions } from './types';
@@ -18,15 +18,19 @@ export class Scatter extends Plot<ScatterOptions> {
     return adaptor;
   }
 
-  protected getDefaultOptions() {
+  protected getDefaultOptions(options: ScatterOptions) {
+    const { shapeField, colorField, legend } = options;
     return deepMix({}, super.getDefaultOptions(), {
       size: 4,
       /** pointStyle 跟随主题默认样式 */
       tooltip: {
         shared: null,
         showTitle: false,
       },
-      shape: 'circle',
+      /**
+       * legend 没有指定时根据 shapeField 和 colorField 来设置默认值
+       */
+      legend: isBoolean(legend) ? legend : legend || !!(shapeField || colorField),
     });
   }
 }

src/plots/scatter/types.ts

@@ -58,13 +58,13 @@ export interface ScatterOptions extends Options {
   /** 点大小映射对应的数据字段名 */
   readonly sizeField?: string;
   /** 散点图大小 */
-  readonly size?: number | [number, number] | ((value: number) => number);
+  readonly size?: number | [number, number] | ((x: any, y: any, color?: any, size?: any, shape?: any) => number);
   /** 点形状映射对应的数据字段名 */
   readonly shapeField?: string;
   /** 散点图形状 */
-  readonly shape?: string | string[] | ((shape: string) => string);
+  readonly shape?: string | string[] | ((x: any, y: any, color?: any, size?: any, shape?: any) => string);
   /** 散点图样式 */
-  readonly pointStyle?: PointStyle | ((x: number, y: number, colorfield?: string) => ShapeStyle);
+  readonly pointStyle?: PointStyle | ((x: any, y: any, color?: any, size?: any, shape?: any) => ShapeStyle);
   /** 点颜色映射对应的数据字段名 */
   readonly colorField?: string;
   /** 四象限组件 */