feat：新增打包图circle packing (#2178)

* feat：添加打包图circle packing

* fix：删除仓库地址

* fix：删除已内置的baseOptions

---------

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CirclePackingOptions } from '../../core';
+import { CommonConfig } from '../../interface';
+import { BaseChart } from '../base';
+
+export type CirclePackingConfig = CommonConfig<CirclePackingOptions>;
+
+const CirclePackingChart = (props: CirclePackingConfig) => <BaseChart {...props} chartType="CirclePacking" />;
+
+export default CirclePackingChart;

packages/plots/src/components/index.ts

@@ -20,6 +20,7 @@ import Gauge from './gauge';
 import Liquid from './liquid';
 import WordCloud from './wordCloud';
 import Treemap from './treemap';
+import CirclePacking from './circlePacking';
 import Violin from './violin';
 import BidirectionalBar from './bidirectional-bar';
 
@@ -44,6 +45,7 @@ export type { GaugeConfig } from './gauge';
 export type { LiquidConfig } from './liquid';
 export type { WordCloudConfig } from './wordCloud';
 export type { TreemapConfig } from './treemap';
+export type { CirclePackingConfig } from './circlePacking';
 export type { ViolinConfig } from './violin';
 export type { BidirectionalBarConfig } from './bidirectional-bar';
 
@@ -70,6 +72,7 @@ export {
   Liquid,
   WordCloud,
   Treemap,
+  CirclePacking,
   Violin,
   BidirectionalBar,
 };

packages/plots/src/core/index.ts

@@ -24,6 +24,7 @@ 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 type { CirclePackingOptions } from './plots/circlePacking';
 export type { ViolinOptions } from './plots/violin';
 export type { BidirectionalBarOptions } from './plots/bidirectional-bar';
 export * from './types';
@@ -54,6 +55,7 @@ import { Gauge } from './plots/gauge';
 import { Liquid } from './plots/liquid';
 import { WordCloud } from './plots/wordCloud';
 import { Treemap } from './plots/treemap';
+import { CirclePacking } from './plots/circlePacking';
 import { Violin } from './plots/violin';
 import { BidirectionalBar } from './plots/bidirectional-bar';
 
@@ -84,6 +86,7 @@ export const Plots = {
   Liquid,
   WordCloud,
   Treemap,
+  CirclePacking,
   Violin,
   BidirectionalBar,
 };

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

@@ -0,0 +1,14 @@
+import { flow, transformOptions } from '../../utils';
+import type { Adaptor } from '../../types';
+import type { CirclePackingOptions } from './type';
+
+type Params = Adaptor<CirclePackingOptions>;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+
+  return flow(transformOptions)(params);
+}

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

@@ -0,0 +1,40 @@
+import { Plot } from '../../base';
+import { adaptor } from './adaptor';
+
+import type { CirclePackingOptions } from './type';
+import type { Adaptor } from '../../types';
+
+export type { CirclePackingOptions };
+
+export class CirclePacking extends Plot<CirclePackingOptions> {
+  /** 图表类型 */
+  public type = 'CirclePacking';
+
+  /**
+   * 获取 circle packing 默认配置项
+   * 供外部使用
+   */
+  static getDefaultOptions(): Partial<CirclePackingOptions> {
+    return {
+      legend: false,
+      type: "view",
+      children: [{
+        type: "pack"
+      }]
+    };
+  }
+
+  /**
+   * 获取 打包图 默认配置
+   */
+  protected getDefaultOptions() {
+    return CirclePacking.getDefaultOptions();
+  }
+
+  /**
+   * 打包图适配器
+   */
+  protected getSchemaAdaptor(): (params: Adaptor<CirclePackingOptions>) => void {
+    return adaptor;
+  }
+}

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

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

site/.dumi/global.ts

@@ -7,4 +7,5 @@ if (window) {
   (window as any).lodashEs = require('lodash-es');
   /** 不要使用 link, react-dom 冲突 */
   (window as any).plots = require('@ant-design/plots');
+  (window as any).d3Interpolate = require('d3-interpolate');
 }

site/examples/statistics/treemap/demo/circlePacking.js

@@ -0,0 +1,27 @@
+
+
+import { CirclePacking } from '@ant-design/plots';
+import { interpolateHcl } from 'd3-interpolate';
+import React from 'react';
+import ReactDOM from 'react-dom';
+const DemoCirclePacking = () => {
+
+  const config = {
+    data: {
+      type: "fetch",
+      value: "https://assets.antv.antgroup.com/g2/flare.json",
+    },
+    valueField: "value",
+    colorField: "depth",
+    scale: {
+      color: {
+        domain: [0, 5],
+        range: ["hsl(152,80%,80%)", "hsl(228,30%,40%)"],
+        interpolate: interpolateHcl
+      },
+    },
+  };
+  return <CirclePacking {...config} />;
+};
+
+ReactDOM.render(<DemoCirclePacking />, document.getElementById('container'));

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

@@ -11,6 +11,14 @@
         "en": "Treemap Chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*Ob1jSbCUl8cAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "circlePacking.js",
+      "title": {
+        "zh": "Circle packing",
+        "en": "CirclePacking Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*epG0TaxEVTsAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

site/package.json

@@ -32,6 +32,7 @@
     "@types/react": "^16.14.8",
     "@types/react-dom": "^16.9.13",
     "cross-env": "^7.0.3",
+    "d3-interpolate": "^3.0.1",
     "dumi": "^2.1.14",
     "fecha": "^4.2.3",
     "gh-pages": "^2.1.1",