feat(scatter): 散点图支持配置 shapeLegend & sizeLegend

Author: visiky

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

@@ -108,6 +108,7 @@ describe('scatter', () => {
   });
 
   it('color mapping with shape mapping, legends', () => {
+    scatter.update({ shapeLegend: {} });
     const legendController = scatter.chart.getController('legend');
     expect(legendController.getComponents().length).toBe(2);
     expect(legendController.getComponents()[0].component.get('items').length).toBe(3);

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

@@ -20,16 +20,15 @@ describe('scatter', () => {
     const legendController = scatter.chart.getController('legend');
     // @ts-ignore
     const { option } = legendController;
-    expect(option).toBe(false);
+    expect(option).toEqual({ height: false, weight: false });
     scatter.update({
       shapeField: 'gender',
     });
     // @ts-ignore
-    expect(scatter.chart.getController('legend').option).toEqual({
-      gender: undefined,
-      height: false,
-      weight: false,
-    });
+    expect(scatter.chart.getController('legend').option).toEqual({ height: false, weight: false });
+
+    expect(legendController.getComponents().length).toBe(1);
+
     scatter.update({
       shapeField: '',
       colorField: 'g',
@@ -197,4 +196,45 @@ describe('scatter', () => {
 
     scatter.destroy();
   });
+
+  const scatter = new Scatter(createDiv(), {
+    width: 400,
+    height: 300,
+    appendPadding: 10,
+    data: data.map((d) => ({ ...d, ['gender-1']: d.gender })),
+    xField: 'weight',
+    yField: 'height',
+    shapeField: 'gender',
+    xAxis: {
+      nice: true,
+    },
+  });
+
+  scatter.render();
+
+  it('not colorField, but shapeField, legend 会取 shapeField', () => {
+    const legendController = scatter.chart.getController('legend');
+    expect(legendController.getComponents().length).toBe(1);
+    expect(legendController.getComponents()[0].id).toBe('legend-gender');
+  });
+
+  it('shapeLegend toBe false', () => {
+    scatter.update({ shapeLegend: false });
+    const legendController = scatter.chart.getController('legend');
+    expect(legendController.getComponents().length).toBe(0);
+  });
+
+  it('当 colorField & shapeLegend 同字段时，shapeLegend false 会导致 colorLegend 关闭', () => {
+    scatter.update({ colorField: 'gender', shapeLegend: {} });
+    let legendController = scatter.chart.getController('legend');
+    expect(legendController.getComponents().length).toBe(1);
+
+    scatter.update({ shapeLegend: false });
+    legendController = scatter.chart.getController('legend');
+    expect(legendController.getComponents().length).toBe(0);
+  });
+
+  afterAll(() => {
+    scatter.destroy();
+  });
 });

src/plots/scatter/adaptor.ts

@@ -1,4 +1,4 @@
-import { isBoolean, isNumber } from '@antv/util';
+import { isNumber } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow, deepAssign } from '../../utils';
 import { point } from '../../adaptor/geometries';
@@ -120,17 +120,32 @@ function axis(params: Params<ScatterOptions>): Params<ScatterOptions> {
  */
 function legend(params: Params<ScatterOptions>): Params<ScatterOptions> {
   const { chart, options } = params;
-  const { legend, colorField, shapeField, sizeField } = options;
-  // legend 没有指定时根据 shapeField 和 colorField 来设置默认值
-  const showLegend = isBoolean(legend) ? legend : legend || !!(shapeField || colorField);
-  if (showLegend) {
-    colorField && chart.legend(colorField, legend);
-    shapeField && chart.legend(shapeField, legend);
-    // 隐藏连续图例
-    if (sizeField) {
-      chart.legend(sizeField, false);
-    }
-  } else {
+  const { legend, colorField, shapeField, sizeField, shapeLegend, sizeLegend } = options;
+
+  /** 1. legend 不为 false, 则展示图例, 优先展示 color 分类图例 */
+  const showLegend = legend !== false;
+  // 1. shapeLegend 为 false, 强制关闭 shape 映射图例
+  // 2.1 shapeLegend 不为空时，展示 shape 图例； 2.2 否则colorField 不存在，且 legend 存在时，可展示 shape 图例
+  const showShapeLegend = shapeField && shapeLegend !== false && ((showLegend && !colorField) || shapeLegend);
+  /** 默认没有 sizeField，则隐藏连续图例 */
+  const showSizeLegend = sizeLegend;
+
+  if (colorField) {
+    showLegend ? chart.legend(colorField, legend) : chart.legend(colorField, false);
+  }
+
+  // 优先取 shapeLegend，否则取 legend
+  if (showShapeLegend) {
+    chart.legend(shapeField, shapeLegend || legend);
+  } else if (shapeField && shapeLegend === false) {
+    chart.legend(shapeField, false);
+  }
+
+  if (sizeField) {
+    showSizeLegend ? chart.legend(sizeField, sizeLegend) : chart.legend(sizeField, false);
+  }
+
+  if (!showLegend && !showShapeLegend && !showSizeLegend) {
     chart.legend(false);
   }
 

src/plots/scatter/types.ts

@@ -46,10 +46,14 @@ export interface ScatterOptions extends Options {
   readonly type?: 'jitter' | 'stack' | 'symmetric' | 'dodge';
   /** 点大小映射对应的数据字段名 */
   readonly sizeField?: string;
+  /** size 对应的图例 */
+  readonly sizeLegend?: Options['legend'];
   /** 散点图大小 */
   readonly size?: SizeAttr;
   /** 点形状映射对应的数据字段名 */
   readonly shapeField?: string;
+  /** shape 对应的图例 */
+  readonly shapeLegend?: Options['legend'];
   /** 散点图形状 */
   readonly shape?: ShapeAttr;
   /** 散点图样式 */