feat(plots): add WorlCloud (#2133)

* feat(plots): add WorlCloud

* feat(plots): add WorlCloud

---------

Co-authored-by: Joel Alan <31396322+lxfu1@users.noreply.github.com>

packages/plots/src/components/index.ts

@@ -16,6 +16,7 @@ import Box from './box';
 import Bullet from './bullet';
 import Gauge from './gauge';
 import Liquid from './liquid';
+import WordCloud from './wordCloud';
 import Treemap from './treemap';
 
 export type { AreaConfig } from './area';
@@ -35,6 +36,7 @@ export type { BoxConfig } from './box';
 export type { BulletConfig } from './bullet';
 export type { GaugeConfig } from './gauge';
 export type { LiquidConfig } from './liquid';
+export type { WordCloudConfig } from './wordCloud';
 export type { TreemapConfig } from './treemap';
 
 export {
@@ -56,5 +58,6 @@ export {
   Bullet,
   Gauge,
   Liquid,
+  WordCloud,
   Treemap,
 };

packages/plots/src/components/wordCloud/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BaseChart } from '../base';
+
+import type { WordCloudOptions } from '../../core';
+import type { CommonConfig } from '../../interface';
+
+export type WordCloudConfig = CommonConfig<WordCloudOptions>;
+
+const WordCloudChart = (props: WordCloudConfig) => <BaseChart {...props} chartType="WordCloud" />;
+
+export default WordCloudChart;

packages/plots/src/core/constants/index.ts

@@ -51,6 +51,7 @@ export const TRANSFORM_OPTION_KEY = {
     shapeField: 'shape',
     seriesField: 'series',
     positionField: 'position',
+    textField: 'text',
     valueField: 'value',
     binField: 'x',
   },

packages/plots/src/core/index.ts

@@ -19,6 +19,7 @@ export type { BoxOptions } from './plots/box';
 export type { BulletOptions } from './plots/bullet';
 export type { GaugeOptions } from './plots/gauge';
 export type { LiquidOptions } from './plots/liquid';
+export type { WordCloudOptions } from './plots/wordCloud';
 export type { TreemapOptions } from './plots/treemap';
 export * from './types';
 
@@ -43,6 +44,7 @@ import { Box } from './plots/box';
 import { Bullet } from './plots/bullet';
 import { Gauge } from './plots/gauge';
 import { Liquid } from './plots/liquid';
+import { WordCloud } from './plots/wordCloud';
 import { Treemap } from './plots/treemap';
 
 export const Plots = {
@@ -67,5 +69,6 @@ export const Plots = {
   Bullet,
   Gauge,
   Liquid,
+  WordCloud,
   Treemap,
 };

packages/plots/src/core/plots/liquid/index.ts

@@ -1,7 +1,8 @@
 import { Plot } from '../../base';
-import type { Adaptor } from '../../types';
 import { adaptor } from './adaptor';
-import { LiquidOptions } from './type';
+
+import type { Adaptor } from '../../types';
+import type { LiquidOptions } from './type';
 
 export type { LiquidOptions };
 

packages/plots/src/core/plots/wordCloud/adaptor.ts

@@ -0,0 +1,22 @@
+import { flow, transformOptions } from '../../utils';
+import { mark } from '../../components';
+
+import type { Adaptor } from '../../types';
+import type { WordCloudOptions } from './type';
+
+type Params = Adaptor<WordCloudOptions>;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+  /**
+   * 图表差异化处理
+   */
+  const init = (params: Params) => {
+    return params;
+  };
+
+  return flow(init, transformOptions, mark)(params);
+}

packages/plots/src/core/plots/wordCloud/index.ts

@@ -0,0 +1,34 @@
+import { Plot } from '../../base';
+import { adaptor } from './adaptor';
+
+import type { WordCloudOptions } from './type';
+import type { Adaptor } from '../../types';
+
+export type { WordCloudOptions };
+
+export class WordCloud extends Plot<WordCloudOptions> {
+  /** 图表类型 */
+  public type = 'WordCloud';
+
+  /**
+   * 获取 词云图 默认配置项
+   * 供外部使用
+   */
+  static getDefaultOptions(): Partial<WordCloudOptions> {
+    return { type: 'view', children: [{ type: 'wordCloud' }] };
+  }
+
+  /**
+   * 获取 词云图 默认配置
+   */
+  protected getDefaultOptions() {
+    return WordCloud.getDefaultOptions();
+  }
+
+  /**
+   * 词云图适配器
+   */
+  protected getSchemaAdaptor(): (params: Adaptor<WordCloudOptions>) => void {
+    return adaptor;
+  }
+}

packages/plots/src/core/plots/wordCloud/type.ts

@@ -0,0 +1,3 @@
+import type { BaseOptions, Options } from '../../types/common';
+
+export type WordCloudOptions = Options & BaseOptions;

site/examples/statistics/wordCloud/demo/meta.json

@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "wordCloud.js",
+      "title": {
+        "zh": "词云图",
+        "en": "WordCloud Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2uvpTI0lHiYAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "wordCloud-image.js",
+      "title": {
+        "zh": "带图片遮罩的词云图",
+        "en": "WordCloud with image mask"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*zDm0SJEQSHwAAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}

site/examples/statistics/wordCloud/demo/wordCloud-image.js

@@ -0,0 +1,27 @@
+import { WordCloud } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoWordCloud = () => {
+  const config = {
+    width: 1000,
+    height: 400,
+    autoFit: false,
+    data: {
+      type: "fetch",
+      value:
+        "https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json",
+    },
+    layout: {
+      imageMask:
+        "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*LKU4TYEiB-4AAAAAAAAAAAAADmJ7AQ/original",
+      fontSize: 10,
+    },
+    colorField: 'name',
+    textField: 'name',
+    legend: false,
+  };
+  return <WordCloud {...config} />;
+};
+
+ReactDOM.render(<DemoWordCloud />, document.getElementById('container'));

site/examples/statistics/wordCloud/demo/wordCloud.js

@@ -0,0 +1,18 @@
+import { WordCloud } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoWordCloud = () => {
+  const config = {
+    paddingTop: 40,
+    data: {
+      type: "fetch",
+      value: "https://assets.antv.antgroup.com/g2/philosophy-word.json",
+    },
+    layout: { spiral: "rectangular" },
+    colorField: 'text',
+  };
+  return <WordCloud {...config} />;
+};
+
+ReactDOM.render(<DemoWordCloud />, document.getElementById('container'));

site/examples/statistics/wordCloud/index.en.md

@@ -0,0 +1,4 @@
+---
+title: WordCloud
+order: 13
+---

site/examples/statistics/wordCloud/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 词云图
+order: 13
+---