feat(liquid): add new plot liquid

__tests__/unit/plots/liquid/index-spec.ts

@@ -0,0 +1,27 @@
+import { Liquid } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+describe('liquid', () => {
+  it('liquid', () => {
+    const liquid = new Liquid(createDiv(), {
+      width: 600,
+      height: 300,
+      autoFit: false,
+      percent: 0.75,
+    });
+
+    liquid.render();
+
+    expect(liquid.chart.geometries[0].elements.length).toBe(1);
+    expect(liquid.options.radius).toBe(0.9);
+
+    // @ts-ignore
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('r')).toBe(135);
+
+    // 宽 < 高，按照高度来设置 radius
+    liquid.changeSize(300, 500);
+
+    // @ts-ignore
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('r')).toBe(135); // circle
+  });
+});

__tests__/unit/plots/liquid/liquid-style-spec.ts

@@ -0,0 +1,39 @@
+import { Liquid } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+describe('liquid', () => {
+  it('liquidStyle', () => {
+    const liquid = new Liquid(createDiv(), {
+      width: 600,
+      height: 300,
+      percent: 0.25,
+      liquidStyle: (v: number) => {
+        return {
+          fill: v > 0.75 ? 'red' : 'green',
+        };
+      },
+      color: () => 'blue',
+    });
+
+    liquid.render();
+
+    // @ts-ignore
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('stroke')).toBe('blue'); // circle
+    // @ts-ignore
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill')).toBe('green'); // wave path
+
+    // @ts-ignore
+    liquid.chart.getController('annotation').clear(true);
+
+    liquid.chart.clear();
+
+    liquid.update({
+      ...liquid.options,
+      percent: 0.8,
+    });
+
+    // G2 chart.clear 的时候，geometry 销毁了，但是 container 还保留的，内存泄露。
+    // @ts-ignore
+    expect(liquid.chart.middleGroup.getChildren()[1].getChildren()[0].getChildren()[0].attr('fill')).toBe('red'); // wave path
+  });
+});

src/index.ts

@@ -63,6 +63,9 @@ export { Heatmap, HeatmapOptions } from './plots/heatmap';
 // 箱线图及类型定义 | author by [BBSQQ](https://github.com/BBSQQ)
 export { Box, BoxOptions } from './plots/box';
 
+// 水波图及类型定义 | author by [CarisL](https://github.com/CarisL), [hustcc](https://github.com/hustcc)
+export { Liquid, LiquidOptions } from './plots/liquid';
+
 // 以下开放自定义图表开发的能力（目前仅仅是孵化中）
 
 /** 所有开放图表都使用 G2Plot 作为入口开发，理论上官方的所有图表都可以走 G2Plot 的入口（暂时不处理） */

src/plots/_template/adaptor.ts

@@ -34,7 +34,7 @@ export function meta(params: Params<TemplateOptions>): Params<TemplateOptions> {
   )(params);
 }
 /**
- * 折线图适配器
+ * 图适配器
  * @param chart
  * @param options
  */

src/plots/liquid/adaptor.ts

@@ -0,0 +1,92 @@
+import { isFunction } from '@antv/util';
+import { interaction, animation, theme, scale } from '../../adaptor/common';
+import { Params } from '../../core/adaptor';
+import { flow } from '../../utils';
+import { LiquidOptions } from './types';
+
+const CAT_VALUE = 'liquid';
+
+/**
+ * geometry 处理
+ * @param params
+ */
+function geometry(params: Params<LiquidOptions>): Params<LiquidOptions> {
+  const { chart, options } = params;
+  const { percent, color, liquidStyle, radius } = options;
+
+  const data = [{ percent, type: CAT_VALUE }];
+
+  chart.data(data);
+
+  chart.scale({
+    percent: {
+      min: 0,
+      max: 1,
+    },
+  });
+
+  // @ts-ignore
+  const geometry = chart.interval().position('type*percent').shape('liquid-fill-gauge');
+
+  // 只能通过这样的方式，将 radius 传入到自定义 shape 中，最好是 Geometry 提供传入自定义数据的能力
+  geometry.style({
+    liquidRadius: radius,
+  });
+
+  // radius 放到 columnWidthRatio 中。
+  // 保证横向的大小是根据  redius 生成的
+  chart.theme({
+    columnWidthRatio: radius,
+  });
+
+  if (color) {
+    geometry.color('percent', color);
+  }
+
+  if (liquidStyle) {
+    geometry.style('percent', (v: number) => {
+      return isFunction(liquidStyle) ? liquidStyle(v) : liquidStyle;
+    });
+  }
+
+  // 关闭组件
+  chart.legend(false);
+  chart.axis(false);
+  chart.tooltip(false);
+
+  return params;
+}
+
+/**
+ * 统计指标文档
+ * @param params
+ */
+function statistic(params: Params<LiquidOptions>): Params<LiquidOptions> {
+  const { chart, options } = params;
+  const { statistic, percent } = options;
+
+  const { style, formatter } = statistic;
+
+  // annotation
+  chart.annotation().text({
+    top: true,
+    position: {
+      type: CAT_VALUE,
+      percent: 0.5,
+    },
+    content: isFunction(formatter) ? formatter(percent) : `${percent}`,
+    style: isFunction(style) ? style(percent) : style,
+  });
+
+  return params;
+}
+
+/**
+ * 水波图适配器
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params<LiquidOptions>) {
+  // flow 的方式处理所有的配置到 G2 API
+  return flow(geometry, statistic, scale({}), animation, theme, interaction)(params);
+}

src/plots/liquid/index.ts

@@ -0,0 +1,38 @@
+import { Plot } from '../../core/plot';
+import { Adaptor } from '../../core/adaptor';
+import { LiquidOptions } from './types';
+import { adaptor } from './adaptor';
+// register liquid shape
+import './shapes/liquid';
+
+export { LiquidOptions };
+
+/**
+ * 传说中的水波图
+ */
+export class Liquid extends Plot<LiquidOptions> {
+  /** 图表类型 */
+  public type: string = 'liquid';
+
+  protected getDefaultOptions(): Partial<LiquidOptions> {
+    return {
+      color: '#6a99f9',
+      radius: 0.9,
+      statistic: {
+        formatter: (v: number) => `${(v * 100).toFixed(2)}%`,
+        style: {
+          opacity: 0.75,
+          fontSize: 30,
+          textAlign: 'center',
+        },
+      },
+    };
+  }
+
+  /**
+   * 获取适配器
+   */
+  protected getSchemaAdaptor(): Adaptor<LiquidOptions> {
+    return adaptor;
+  }
+}