feat(liquid): add new plot liquid

Author: hustcc

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

@@ -0,0 +1,25 @@
+import { Liquid } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+describe('liquid', () => {
+  it('liquid', () => {
+    const liquid = new Liquid(createDiv(), {
+      width: 600,
+      height: 300,
+      // autoFit: false,
+      appendPadding: 10,
+      percent: 0.75,
+      // color: (v: number) => {
+      //   return 'yellow';
+      // },
+      // color: 'blue',
+    });
+
+    liquid.render();
+
+    // @ts-ignore
+    window.liquid = liquid;
+
+    expect(liquid.chart.geometries[0].elements.length).toBe(1);
+  });
+});

src/index.ts

@@ -59,3 +59,6 @@ export { Heatmap, HeatmapOptions } from './plots/heatmap';
 
 // 箱线图及类型定义
 export { Box, BoxOptions } from './plots/box';
+
+// 水波图及类型定义
+export { Liquid, LiquidOptions } from './plots/liquid';

src/plots/liquid/adaptor.ts

@@ -0,0 +1,80 @@
+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 } = options;
+
+  const data = [{ percent, type: CAT_VALUE }];
+
+  chart.data(data);
+
+  chart.scale({
+    percent: {
+      min: 0,
+      max: 1,
+    },
+  });
+
+  const geometry = chart.interval().position('type*percent').shape('liquid-fill-gauge');
+
+  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,37 @@
+import { Plot } from '../../core/plot';
+import { LiquidOptions } from './types';
+import { adaptor } from './adaptor';
+import { Adaptor } from '../../core/adaptor';
+// register liquid shape
+import './shapes/liquid';
+
+export { LiquidOptions };
+
+/**
+ * 传说中的水波图
+ */
+export class Liquid extends Plot<LiquidOptions> {
+  /** 图表类型 */
+  public type: string = 'liquid';
+
+  protected getDefaultOptions(): Parital<LiquidOptions> {
+    return {
+      color: '#6a99f9',
+      statistic: {
+        formatter: (v: number) => `${(v * 100).toFixed(2)}%`,
+        style: {
+          opacity: 0.75,
+          fontSize: 30,
+          textAlign: 'center',
+        },
+      },
+    };
+  }
+
+  /**
+   * 获取适配器
+   */
+  protected getSchemaAdaptor(): Adaptor<LiquidOptions> {
+    return adaptor;
+  }
+}