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

antvis · Mar 22, 2021 · 02b7604 · 02b7604
1 parent ce0c61b
commit 02b7604
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/__tests__/unit/plots/scatter/legend-spec.ts b/__tests__/unit/plots/scatter/legend-spec.ts
@@ -20,16 +20,16 @@ describe('scatter', () => {
     const legendController = scatter.chart.getController('legend');
     // @ts-ignore
     const { option } = legendController;
-    expect(option).toBe(false);
+    expect(option).toBe(undefined);
     scatter.update({
       shapeField: 'gender',
     });
     // @ts-ignore
     expect(scatter.chart.getController('legend').option).toEqual({
       gender: undefined,
-      height: false,
-      weight: false,
     });
+    expect(legendController.getComponents().length).toBe(1);
+
     scatter.update({
       shapeField: '',
       colorField: 'g',

diff --git a/src/plots/scatter/adaptor.ts b/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,18 +120,30 @@ 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);
+  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 = sizeField && sizeLegend;
+
   if (showLegend) {
-    colorField && chart.legend(colorField, legend);
-    shapeField && chart.legend(shapeField, legend);
-    // 隐藏连续图例
-    if (sizeField) {
-      chart.legend(sizeField, false);
-    }
-  } else {
+    chart.legend(colorField, legend);
+  }
+  if (showShapeLegend) {
+    // 优先取 shapeLegend，否则取 legend
+    chart.legend(shapeField, shapeLegend || legend);
+  }
+  if (showSizeLegend) {
+    chart.legend(sizeField, sizeLegend);
+  }
+  if (!showLegend && !showShapeLegend && !showSizeLegend) {
     chart.legend(false);
+  } else if (!showSizeLegend && sizeField) {
+    chart.legend(sizeField, false);
   }
 
   return params;

diff --git a/src/plots/scatter/types.ts b/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;
   /** 散点图样式 */