fix: 修复词云图 legend 配置不起效 修复 词云图 color 回调缺少其他数据 (#2787)

* fix: 修复词云图 legend 配置不起效 修复 词云图 color 回调缺少其他数据

* fix: 修复词云图 legend 配置不起效 修复 词云图 color 回调缺少其他数据 -2

* fix: 修复词云图 legend 配置不起效 修复 词云图 color 回调缺少其他数据 -3

Co-authored-by: ai-qing-hai <[email protected]>

Author: ai-qing-hai

__tests__/unit/plots/word-cloud/color-spec.ts

@@ -73,4 +73,23 @@ describe('word-cloud color option', () => {
 
     cloud.destroy();
   });
+
+  it('callback color', () => {
+    const cloud = new WordCloud(createDiv(), {
+      width: 400,
+      height: 300,
+      data: CountryEconomy,
+      wordField: 'Country',
+      weightField: 'GDP',
+      colorField: 'x',
+      color: (data) => {
+        expect(!!data['datum'] || !data['color']).toBe(true);
+        return 'red';
+      },
+    });
+
+    cloud.render();
+
+    cloud.destroy();
+  });
 });

__tests__/unit/plots/word-cloud/legend-spec.ts

@@ -53,4 +53,33 @@ describe('word-cloud', () => {
 
     cloud.destroy();
   });
+
+  it('配置 legend', async () => {
+    const cloud = new WordCloud(createDiv('x*y'), {
+      width: 400,
+      height: 300,
+      data: CountryEconomy,
+      wordField: 'Country',
+      weightField: 'GDP',
+      colorField: 'continent',
+      legend: {
+        position: 'left',
+        marker: { style: { fill: 'red' } },
+      },
+      animation: false,
+      wordStyle: {
+        // 本地跑 live 也会丢失一个 series，故此加上 font-size
+        fontSize: [12, 20],
+      },
+    });
+
+    cloud.render();
+
+    expect(cloud.options.legend).toMatchObject({
+      position: 'left',
+      marker: { style: { fill: 'red' } },
+    });
+
+    cloud.destroy();
+  });
 });

src/plots/word-cloud/adaptor.ts

@@ -1,9 +1,11 @@
+import { isFunction, get } from '@antv/util';
 import { Params } from '../../core/adaptor';
-import { tooltip, interaction, animation, theme, scale, state, legend } from '../../adaptor/common';
+import { tooltip, interaction, animation, theme, scale, state } from '../../adaptor/common';
 import { flow, deepAssign } from '../../utils';
 import { point } from '../../adaptor/geometries';
 import { WordCloudOptions } from './types';
 import { transform } from './utils';
+import { WORD_CLOUD_COLOR_FIELD } from './constant';
 
 /**
  * geometry 配置处理
@@ -20,7 +22,8 @@ function geometry(params: Params<WordCloudOptions>): Params<WordCloudOptions> {
     options: {
       xField: 'x',
       yField: 'y',
-      seriesField: colorField && 'color',
+      seriesField: colorField && WORD_CLOUD_COLOR_FIELD,
+      rawFields: isFunction(color) && [...get(options, 'rawFields', []), 'datum'],
       point: {
         color,
         shape: 'word-cloud',
@@ -50,6 +53,23 @@ function meta(params: Params<WordCloudOptions>): Params<WordCloudOptions> {
   )(params);
 }
 
+/**
+ * 词云图 legend 配置
+ * @param params
+ */
+export function legend(params: Params<WordCloudOptions>): Params<WordCloudOptions> {
+  const { chart, options } = params;
+  const { legend, colorField } = options;
+
+  if (legend === false) {
+    chart.legend(false);
+  } else if (colorField) {
+    chart.legend(WORD_CLOUD_COLOR_FIELD, legend);
+  }
+
+  return params;
+}
+
 /**
  * 词云图适配器
  * @param chart

src/plots/word-cloud/constant.ts

@@ -2,8 +2,11 @@ import { Plot } from '../../core/plot';
 import { Datum } from '../../types';
 import { deepAssign } from '../../utils';
 
+/** 词云图 color 通道映射字段 */
+export const WORD_CLOUD_COLOR_FIELD = 'color';
+
 /**
- * 旭日图 默认配置项
+ * 词云图 默认配置项
  */
 export const DEFAULT_OPTIONS = deepAssign({}, Plot.getDefaultOptions(), {
   timeInterval: 2000,
@@ -12,7 +15,7 @@ export const DEFAULT_OPTIONS = deepAssign({}, Plot.getDefaultOptions(), {
     showTitle: false,
     showMarkers: false,
     showCrosshairs: false,
-    fields: ['text', 'value', 'color'],
+    fields: ['text', 'value', WORD_CLOUD_COLOR_FIELD],
     formatter: (datum: Datum) => {
       return { name: datum.text, value: datum.value };
     },