feat: add mark.liquid (#5508)

* feat(liquid): add mask liquid

* feat(liquid): 新增水波图

* feat(liquid): gauge\liquid 数据可直接配置number 类型

* fix: 修改注释

* chore: fold name Liquid -> liquid

---------

Co-authored-by: hustcc <[email protected]>

__tests__/plots/static/index.ts

@@ -281,6 +281,13 @@ export { alphabetIntervalTitleAuto } from './alphabet-interval-title-auto';
 export { alphabetIntervalAutoPaddingLabelHide } from './alphabet-interval-auto-padding-label-hide';
 export { settleWeatherCellLineXY } from './seattle-weather-cell-lineXY';
 export { alphabetIntervalFunnelConnectorLabel } from './alphabet-interval-funnel-connector-label';
+export { liquidDefault } from './liquid-default';
+export { liquidPin } from './liquid-pin';
+export { liquidRect } from './liquid-rect';
+export { liquidCircle } from './liquid-circle';
+export { liquidDiamond } from './liquid-diamond';
+export { liquidTriangle } from './liquid-triangle';
+export { liquidCustomShape } from './liquid-custom-shape';
 export { alphabetIntervalAxisOptions } from './alphabet-interval-axis-options';
 export { profitIntervalAxisTransform } from './profit-interval-axis-transform';
 export { mockIntervalLine } from './mock-interval-line';

__tests__/plots/static/liquid-circle.ts

@@ -0,0 +1,11 @@
+import { G2Spec } from '../../../src';
+
+export function liquidCircle(): G2Spec {
+  return {
+    type: 'liquid',
+    data: 0.3,
+    style: {
+      shape: 'circle',
+    },
+  };
+}

__tests__/plots/static/liquid-custom-shape.ts

@@ -0,0 +1,32 @@
+import { G2Spec } from '../../../src';
+
+export function liquidCustomShape(): G2Spec {
+  return {
+    type: 'liquid',
+    autoFit: true,
+    data: 0.3,
+    style: {
+      shape: (x, y, r) => {
+        const path = [] as any;
+        const w = r * 2;
+        for (let i = 0; i < 5; i++) {
+          path.push([
+            i === 0 ? 'M' : 'L',
+            (Math.cos(((18 + i * 72) * Math.PI) / 180) * w) / 2 + x,
+            (-Math.sin(((18 + i * 72) * Math.PI) / 180) * w) / 2 + y,
+          ]);
+          path.push([
+            'L',
+            (Math.cos(((54 + i * 72) * Math.PI) / 180) * w) / 4 + x,
+            (-Math.sin(((54 + i * 72) * Math.PI) / 180) * w) / 4 + y,
+          ]);
+        }
+        path.push(['Z']);
+        return path;
+      },
+      outlineBorder: 4,
+      outlineDistance: 8,
+      waveLength: 128,
+    },
+  };
+}

__tests__/plots/static/liquid-default.ts

@@ -0,0 +1,14 @@
+import { G2Spec } from '../../../src';
+
+export function liquidDefault(): G2Spec {
+  return {
+    type: 'liquid',
+    autoFit: true,
+    data: 0.3,
+    style: {
+      outlineBorder: 4,
+      outlineDistance: 8,
+      waveLength: 128,
+    },
+  };
+}

__tests__/plots/static/liquid-diamond.ts

@@ -0,0 +1,11 @@
+import { G2Spec } from '../../../src';
+
+export function liquidDiamond(): G2Spec {
+  return {
+    type: 'liquid',
+    data: 0.3,
+    style: {
+      shape: 'diamond',
+    },
+  };
+}

__tests__/plots/static/liquid-pin.ts

@@ -0,0 +1,15 @@
+import { G2Spec } from '../../../src';
+
+export function liquidPin(): G2Spec {
+  return {
+    type: 'liquid',
+    data: 0.7,
+    style: {
+      shape: 'pin',
+      textFill: '#fff',
+      outlineBorder: 4,
+      outlineDistance: 8,
+      waveLength: 128,
+    },
+  };
+}

__tests__/plots/static/liquid-rect.ts

@@ -0,0 +1,11 @@
+import { G2Spec } from '../../../src';
+
+export function liquidRect(): G2Spec {
+  return {
+    type: 'liquid',
+    data: 0.3,
+    style: {
+      shape: 'rect',
+    },
+  };
+}

__tests__/plots/static/liquid-triangle.ts

@@ -0,0 +1,11 @@
+import { G2Spec } from '../../../src';
+
+export function liquidTriangle(): G2Spec {
+  return {
+    type: 'liquid',
+    data: 0.3,
+    style: {
+      shape: 'triangle',
+    },
+  };
+}

__tests__/unit/api/chart.spec.ts

@@ -129,6 +129,7 @@ describe('Chart', () => {
     expect(chart.tree().type).toBe('tree');
     expect(chart.wordCloud().type).toBe('wordCloud');
     expect(chart.gauge().type).toBe('gauge');
+    expect(chart.liquid().type).toBe('liquid');
     expect(chart.density().type).toBe('density');
     expect(chart.heatmap().type).toBe('heatmap');
     expect(chart.axisX().type).toBe('axisX');
@@ -162,6 +163,7 @@ describe('Chart', () => {
       { type: 'tree' },
       { type: 'wordCloud' },
       { type: 'gauge' },
+      { type: 'liquid' },
       { type: 'density' },
       { type: 'heatmap' },
       { type: 'axisX' },

__tests__/unit/api/mark.spec.ts

@@ -350,6 +350,12 @@ describe('mark.[node]()', () => {
     expect(setCompositeOptions(node).value).toEqual(getOptions());
   });
 
+  it('chart.liquid() should specify options by API', () => {
+    const node = chart.liquid();
+    expect(node.type).toBe('liquid');
+    expect(setCompositeOptions(node).value).toEqual(getOptions());
+  });
+
   it('chart.axisX() should specify options by API', () => {
     const node = chart.axisX();
     expect(node.type).toBe('axisX');

__tests__/unit/lib/plot.spec.ts

@@ -1,5 +1,5 @@
 import { plotlib } from '../../../src/lib';
-import { Boxplot, WordCloud, Gauge } from '../../../src/mark';
+import { Boxplot, WordCloud, Gauge, Liquid } from '../../../src/mark';
 import { Venn } from '../../../src/data';
 
 describe('plotlib', () => {
@@ -9,6 +9,7 @@ describe('plotlib', () => {
       'mark.boxplot': Boxplot,
       'mark.wordCloud': WordCloud,
       'mark.gauge': Gauge,
+      'mark.liquid': Liquid,
     });
   });
 });

__tests__/unit/lib/std.spec.ts

@@ -41,6 +41,7 @@ import {
   Gauge,
   Density as DensityGeometry,
   Heatmap,
+  Liquid,
 } from '../../../src/mark';
 import { Category10, Category20 } from '../../../src/palette';
 import {
@@ -257,6 +258,7 @@ describe('stdlib', () => {
       'mark.wordCloud': WordCloudGeometry,
       'mark.density': DensityGeometry,
       'mark.gauge': Gauge,
+      'mark.liquid': Liquid,
       'mark.heatmap': Heatmap,
       'palette.category10': Category10,
       'palette.category20': Category20,

site/docs/spec/mark/gauge.zh.md

@@ -7,7 +7,7 @@ order: 1
 
 ## 开始使用
 
-<img alt="wordCloud" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hpjTRr6LM7IAAAAAAAAAAAAADmJ7AQ/original
+<img alt="gauge" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hpjTRr6LM7IAAAAAAAAAAAAADmJ7AQ/original
 " width="600" />
 
 ```js

site/docs/spec/mark/liquid.en.md

@@ -0,0 +1,6 @@
+---
+title: liquid
+order: 1
+---
+
+<embed src="@/docs/spec/mark/liquid.zh.md"></embed>

site/docs/spec/mark/liquid.zh.md

@@ -0,0 +1,65 @@
+---
+title: liquid
+order: 1
+---
+
+水波图
+
+## 开始使用
+
+<img alt="liquid" src="https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*cHArRaizyBsAAAAAAAAAAAAADo2bAQ/original
+" width="600" />
+
+```js
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .liquid()
+  .data(.3)
+  .style({
+    outlineBorder: 4,
+    outlineDistance: 8,
+    waveLength: 128,
+  });
+
+chart.render();
+```
+
+## 选项
+
+| 属性  | 描述                   | 类型        | 默认值 |
+| ----- | ---------------------- | ----------- | ------ |
+| data  | 数据                   | `GaugeData` | -      |
+| style | 配置图形样式和标签样式 | -           | -      |
+
+## style
+
+对水波图中的三个部分
+
+| 属性            | 描述     | 类型     | 默认值 |
+| --------------- | -------- | -------- | ------ |
+| outlineBorder   | 边框宽度 | `number` | -      |
+| outlineDistance | 内间距   | `number` | -      |
+| outlineStroke   | 边框颜色 | `string` | -      |
+| waveLength      | 波长     | `number` | -      |
+| backgroundFill  | 背景颜色 | `string` | -      |
+| textFill        | 文本颜色 | `string` | -      |
+| textFontSize    | 文本大小 | `string` | -      |
+
+## shape
+
+目前 liquid 有以下几个内置 shape 图形，默认为 `circle`。
+
+| 图形     | 描述 | 示例 |
+| -------- | ---- | ---- |
+| rect     | 矩形 |      |
+| circle   | 圆形 |      |
+| pin      | 水滴 |      |
+| triangle | 三角 |      |
+
+为自定义 shape 形状提供回调, `(x, y, r, w, h) => string`, 传入参数分别为 x y 中心点坐标， r 图表可画圆最大半径， w h 图表可画宽高。

site/examples/general/Liquid/demo/liquid-background.ts

@@ -0,0 +1,15 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .liquid()
+  .data(0.3)
+  .style({
+    backgroundFill: 'pink',
+  });
+
+chart.render();

site/examples/general/Liquid/demo/liquid-custom-shape.ts

@@ -0,0 +1,36 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .liquid()
+  .data(0.3)
+  .style({
+    shape: (x, y, r) => {
+      const path = [];
+      const w = r * 2;
+
+      for (let i = 0; i < 5; i++) {
+        path.push([
+          i === 0 ? 'M' : 'L',
+          (Math.cos(((18 + i * 72) * Math.PI) / 180) * w) / 2 + x,
+          (-Math.sin(((18 + i * 72) * Math.PI) / 180) * w) / 2 + y,
+        ]);
+        path.push([
+          'L',
+          (Math.cos(((54 + i * 72) * Math.PI) / 180) * w) / 4 + x,
+          (-Math.sin(((54 + i * 72) * Math.PI) / 180) * w) / 4 + y,
+        ]);
+      }
+      path.push(['Z']);
+      return path;
+    },
+    outlineBorder: 4,
+    outlineDistance: 8,
+    waveLength: 128,
+  });
+
+chart.render();

site/examples/general/Liquid/demo/liquid-default.ts

@@ -0,0 +1,17 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .liquid()
+  .data(0.3)
+  .style({
+    outlineBorder: 4,
+    outlineDistance: 8,
+    waveLength: 128,
+  });
+
+chart.render();

site/examples/general/Liquid/demo/liquid-pin.ts

@@ -0,0 +1,19 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .liquid()
+  .data(0.7)
+  .style({
+    shape: 'pin',    // Build-in shapes: rect, circle, pin, diamond, triangle.
+    textFill: '#fff',
+    outlineBorder: 4,
+    outlineDistance: 8,
+    waveLength: 128,
+  });
+
+chart.render();

site/examples/general/Liquid/demo/meta.json

@@ -0,0 +1,40 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "liquid-default.ts",
+      "title": {
+        "zh": "水波图",
+        "en": "Liquid Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*cHArRaizyBsAAAAAAAAAAAAADo2bAQ/original"
+    },
+    {
+      "filename": "liquid-pin.ts",
+      "title": {
+        "zh": "水滴形状水波图",
+        "en": "Pin Liquid Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*G5TyT4PNLK0AAAAAAAAAAAAADo2bAQ/original"
+    },
+    {
+      "filename": "liquid-background.ts",
+      "title": {
+        "zh": "带背景的水波图",
+        "en": "Background Liquid Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*QgkTSq1OdvoAAAAAAAAAAAAADo2bAQ/original"
+    },
+    {
+      "filename": "liquid-custom-shape.ts",
+      "title": {
+        "zh": "自定义形状水波图",
+        "en": "Custom Shape Liquid Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*LYOpQLfrlqMAAAAAAAAAAAAADo2bAQ/original"
+    }
+  ]
+}