fix: 修复分面图下多图例显示配置 (#3865)

* fix: 修复分面图下多图例显示配置

---------

Co-authored-by: 荊芥 <[email protected]>

Author: sersishen

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

@@ -0,0 +1,150 @@
+import { groupBy, size } from '@antv/util';
+import { Facet } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+describe('facet - legend', () => {
+  const data = [
+    {
+      name: 14513,
+      carat: 1.35,
+      cut: 'Ideal',
+      color: 'J',
+      clarity: 'VS2',
+      depth: 61.4,
+      table: 57,
+      price: 5862,
+      x: 7.1,
+      y: 7.13,
+      z: 4.37,
+    },
+    {
+      name: 28685,
+      carat: 0.3,
+      cut: 'Good',
+      color: 'G',
+      clarity: 'VVS1',
+      depth: 64,
+      table: 57,
+      price: 678,
+      x: 4.23,
+      y: 4.27,
+      z: 2.72,
+    },
+    {
+      name: 50368,
+      carat: 0.75,
+      cut: 'Ideal',
+      color: 'F',
+      clarity: 'SI2',
+      depth: 59.2,
+      table: 60,
+      price: 2248,
+      x: 5.87,
+      y: 5.92,
+      z: 3.49,
+    },
+    {
+      name: 7721,
+      carat: 0.26,
+      cut: 'Ideal',
+      color: 'F',
+      clarity: 'VS1',
+      depth: 60.9,
+      table: 57,
+      price: 580,
+      x: 4.13,
+      y: 4.11,
+      z: 2.51,
+    },
+    {
+      name: 31082,
+      carat: 0.33,
+      cut: 'Premium',
+      color: 'H',
+      clarity: 'VVS1',
+      depth: 61.4,
+      table: 59,
+      price: 752,
+      x: 4.42,
+      y: 4.44,
+      z: 2.72,
+    },
+    {
+      name: 26429,
+      carat: 1.52,
+      cut: 'Ideal',
+      color: 'G',
+      clarity: 'VVS1',
+      depth: 62.4,
+      table: 55,
+      price: 15959,
+      x: 7.3,
+      y: 7.39,
+      z: 4.58,
+    },
+  ];
+
+  const plot = new Facet(createDiv(), {
+    data,
+    type: 'rect',
+    fields: ['cut', 'clarity'],
+    cols: 3, // 超过3个换行
+    padding: [0, 10, 10],
+    appendPadding: 30,
+    axes: {},
+    meta: {
+      carat: {
+        sync: true,
+      },
+      price: {
+        sync: true,
+      },
+      cut: {
+        // 设置 sync 同步之后，可以按照 'cut' 进行颜色映射分类
+        sync: true,
+      },
+    },
+    colorField: 'color',
+    shapeField: 'cut',
+    sizeField: 'price',
+    // shapeLegend: false,
+    // legend: false,
+    // sizeLegend: { position: 'left' },
+    eachView: (view, f) => {
+      return {
+        type: 'scatter',
+        options: {
+          data: f?.data,
+          xField: 'carat',
+          yField: 'price',
+          colorField: 'color',
+          shapeField: 'cut',
+          sizeField: 'price',
+          pointStyle: { fillOpacity: 0.3, stroke: null },
+        },
+      };
+    },
+  });
+  plot.render();
+
+  it('bubble - default', () => {
+    const legendLen = plot.chart.getController('legend').getComponents()?.length;
+    // 气泡图默认只画 color legend 和 shape legend 且分开
+    expect(legendLen).toBe(2);
+  });
+
+  it('bubble - sizeLegend开启', () => {
+    plot.update({ sizeLegend: {} });
+    const legendLen = plot.chart.getController('legend').getComponents()?.length;
+    expect(legendLen).toBe(3);
+  });
+
+  it('bubble - legend关闭', () => {
+    plot.update({ legend: false });
+    expect(plot.chart.getController('legend').getComponents().length).toBe(2);
+  });
+
+  afterAll(() => {
+    plot.destroy();
+  });
+});

jest.config.js

@@ -22,5 +22,7 @@ module.exports = {
     'lodash-es': 'lodash',
     'd3-color': 'd3-color/dist/d3-color.min.js',
     'd3-interpolate': 'd3-interpolate/dist/d3-interpolate.min.js',
+    'd3-geo': 'd3-geo/build/d3-geo.min.js',
+    'd3-path': 'd3-path/dist/d3-path.min.js'
   },
 };

src/plots/facet/adaptor.ts

@@ -41,6 +41,14 @@ function facetAdaptor(params: Params<FacetOptions>): Params<FacetOptions> {
       } else {
         const plot = viewOptions as IPlot;
         const plotOptions = plot.options;
+
+        // 如果 view 内部没有指定映射字段，则使用 options 内指定的映射字段
+        ['seriesField', 'colorField', 'shapeField', 'sizeField', 'groupField'].forEach((key) => {
+          if (options[key] && typeof plotOptions[key] === 'undefined') {
+            plotOptions[key] = options[key];
+          }
+        });
+
         // @ts-ignore 仪表盘没 tooltip
         if (plotOptions.tooltip) {
           // 配置 tooltip 交互
@@ -56,7 +64,20 @@ function facetAdaptor(params: Params<FacetOptions>): Params<FacetOptions> {
 
 function component(params: Params<FacetOptions>): Params<FacetOptions> {
   const { chart, options } = params;
-  const { axes, meta, tooltip, coordinate, theme, legend, interactions, annotations } = options;
+  const {
+    axes,
+    meta,
+    tooltip,
+    coordinate,
+    theme,
+    legend,
+    interactions,
+    annotations,
+    shapeField,
+    sizeField,
+    shapeLegend,
+    sizeLegend,
+  } = options;
 
   // 3. meta 配置
   let scales: Record<string, any> = {};
@@ -91,6 +112,22 @@ function component(params: Params<FacetOptions>): Params<FacetOptions> {
 
   // 7. legend 配置（默认展示）
   chart.legend(legend);
+  const showLegend = legend !== false;
+  if (shapeField) {
+    if (shapeLegend) {
+      chart.legend(shapeField, shapeLegend);
+    } else {
+      chart.legend(shapeField, shapeLegend === false ? false : legend);
+    }
+  }
+
+  if (sizeField) {
+    chart.legend(sizeField, sizeLegend ? sizeLegend : false);
+  }
+  // /** 默认不展示 shape 图例，当 shapeLegend 为 undefined 也不展示图例 */
+  if (!showLegend && !shapeLegend && !sizeLegend) {
+    chart.legend(false);
+  }
 
   // theme 配置
   if (theme) {

src/plots/facet/types.ts

@@ -146,7 +146,32 @@ export interface FacetOptions<T extends keyof Types.FacetCfgMap = keyof Types.Fa
    */
   readonly legend?: Legend;
   /**
-   * @title 图例配置
+   * @title 交互配置
    */
   readonly interactions?: Interaction[];
+  /**
+   * @title 形状字段
+   * @description 形状映射字段
+   */
+  readonly shapeField?: string;
+  /**
+   * @title 颜色字段
+   * @description 颜色映射字段
+   */
+  readonly colorField?: string;
+  /**
+   * @title 大小字段
+   * @description 大小映射字段
+   */
+  readonly sizeField?: string;
+  /**
+   * @title 形状图例配置
+   * @description 形状图例的配置项
+   */
+  readonly shapeLegend?: Legend | false;
+  /**
+   * @title 大小图例配置
+   * @description 大小图例的配置项
+   */
+  readonly sizeLegend?: Legend | false;
 }