feat(liquid): add outline, wave options for customize (#2099)

antvis · Dec 11, 2020 · e6647ef · e6647ef
1 parent 7c76edb
commit e6647ef
Show file tree

Hide file tree

Showing 13 changed files with 245 additions and 67 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,7 @@
+* **G2Plot Version**:
+* **Platform**:
+* **Mini Showcase(like screenshots)**:
+* **CodePen Link**:
+
+<!-- Describe your bugs below ^_^ -->
+
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,12 @@
+### PR includes
+<!-- Add completed items in this PR, and change [ ] to [x]. -->
+
+- [ ] fixed #0
+- [ ] add / modify test cases
+- [ ] documents, demos
+
+### Screenshot
+
+|  Before  |  After  |
+|----|----|
+|  ❌  |  ✅  |
diff --git a/__tests__/bugs/issue-1909-spec.ts b/__tests__/bugs/issue-1909-spec.ts
@@ -12,7 +12,7 @@ describe('#1909', () => {
     liquidPlot.render();
 
     // @ts-ignore
-    expect(liquidPlot.chart.geometries[0].container.getChildren()[0].getChildren()[0].attr('opacity')).toBe(0.6);
+    expect(liquidPlot.chart.geometries[0].container.getChildren()[1].getChildren()[0].attr('opacity')).toBe(0.2);
 
     liquidPlot.update({
       liquidStyle: {
@@ -21,7 +21,10 @@ describe('#1909', () => {
     });
 
     // @ts-ignore
-    expect(liquidPlot.chart.geometries[0].container.getChildren()[0].getChildren()[0].attr('opacity')).toBe(0.06);
+    expect(liquidPlot.chart.geometries[0].container.getChildren()[1].getChildren()[0].attr('opacity')).toBeCloseTo(
+      0.02,
+      5
+    );
 
     liquidPlot.destroy();
   });

diff --git a/__tests__/bugs/issue-charts-367-spec.ts b/__tests__/bugs/issue-charts-367-spec.ts
@@ -59,5 +59,7 @@ describe('charts #367', () => {
         .getChildren()
         .map((v) => v.attr('text'))
     ).toEqual(LABELS);
+
+    gauge.destroy();
   });
 });
diff --git a/__tests__/unit/plots/liquid/index-spec.ts b/__tests__/unit/plots/liquid/index-spec.ts
@@ -7,7 +7,7 @@ describe('liquid', () => {
       width: 600,
       height: 300,
       autoFit: false,
-      percent: 0.75,
+      percent: 0.45,
     });
 
     liquid.render();
@@ -16,16 +16,65 @@ describe('liquid', () => {
     expect(liquid.options.radius).toBe(0.9);
 
     // @ts-ignore
-    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('r')).toBe(135);
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('r')).toBe(135);
 
     // 宽 < 高，按照高度来设置 radius
     liquid.changeSize(300, 500);
-
     // @ts-ignore
-    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('r')).toBe(135); // circle
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('r')).toBe(135);
+    // 宽 < 高，按照高度来设置 radius
+    liquid.changeSize(500, 500);
+    // @ts-ignore
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('r')).toBe(225);
 
     liquid.destroy();
   });
+
+  it('outline & wave', () => {
+    const liquid = new Liquid(createDiv(), {
+      width: 600,
+      height: 300,
+      autoFit: false,
+      percent: 0.3,
+    });
+
+    liquid.render();
+    expect(liquid.options.outline).toEqual({ border: 2, distance: 0 });
+    expect(liquid.options.wave).toEqual({ count: 3, length: 192 });
+
+    expect(liquid.chart.middleGroup.findAllByName('wrap')[0].attr('r')).toBe(135);
+    expect(liquid.chart.middleGroup.findAllByName('wrap')[0].attr('lineWidth')).toBe(2);
+    expect(liquid.chart.middleGroup.findAllByName('waterwave-path').length).toBe(3);
+    expect(liquid.chart.middleGroup.findAllByName('waterwave-path')[0].get('animations')[0].toAttrs.matrix[6]).toBe(
+      192
+    );
+    expect(liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('r')).toBe(135);
+
+    liquid.update({
+      outline: {
+        border: 4,
+        distance: 8,
+      },
+      wave: {
+        count: 5,
+        length: 128,
+      },
+    });
+
+    expect(liquid.options.outline).toEqual({ border: 4, distance: 8 });
+    expect(liquid.options.wave).toEqual({ count: 5, length: 128 });
+
+    expect(liquid.chart.middleGroup.findAllByName('wrap')[0].attr('r')).toBe(135);
+    expect(liquid.chart.middleGroup.findAllByName('wrap')[0].attr('lineWidth')).toBe(4);
+    expect(liquid.chart.middleGroup.findAllByName('waterwave-path').length).toBe(5);
+    expect(liquid.chart.middleGroup.findAllByName('waterwave-path')[0].get('animations')[0].toAttrs.matrix[6]).toBe(
+      128
+    );
+    expect(liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('r')).toBe(127);
+
+    liquid.destroy();
+  });
+
   it('change data', () => {
     const liquid = new Liquid(createDiv(), {
       width: 600,

diff --git a/__tests__/unit/plots/liquid/liquid-style-spec.ts b/__tests__/unit/plots/liquid/liquid-style-spec.ts
@@ -18,9 +18,9 @@ describe('liquid', () => {
     liquid.render();
 
     // @ts-ignore
-    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('stroke')).toBe('blue'); // circle
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('stroke')).toBe('blue'); // circle
     // @ts-ignore
-    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill')).toBe('green'); // wave path
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].getChildren()[0].attr('fill')).toBe('green'); // wave path
 
     // @ts-ignore
     liquid.chart.getController('annotation').clear(true);
@@ -34,7 +34,7 @@ describe('liquid', () => {
 
     // G2 chart.clear 的时候，geometry 销毁了，但是 container 还保留的，内存泄露。
     // @ts-ignore
-    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill')).toBe('red'); // wave path
+    expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].getChildren()[0].attr('fill')).toBe('red'); // wave path
 
     liquid.destroy();
   });

diff --git a/docs/manual/plots/liquid.en.md b/docs/manual/plots/liquid.en.md
@@ -33,6 +33,28 @@ Liguid graphic style.
 
 `markdown:docs/common/color.en.md`
 
+#### outline
+
+<description>**optional** _Outline_</description>
+
+The ouline configure for liquid plot, includes:
+
+| Attr         | Type           | Desc                                                  |
+| ------------ | -------------- | ----------------------------------------------------- |
+| border       | number         | border width of ouline, default 2px                   |
+| disatance    | number         | disatance between ouline and wave, default 0px        |
+
+#### wave
+
+<description>**optional** _Wave_</description>
+
+The wave configure for liquid plot, includes:
+
+| Attr         | Type           | Desc                                                  |
+| ------------ | -------------- | ----------------------------------------------------- |
+| count        | number         | wave count, default 3                                 |
+| length       | number         | wave length, default is 192px                         |
+
 ### Plot Components
 
 #### statistic

diff --git a/docs/manual/plots/liquid.zh.md b/docs/manual/plots/liquid.zh.md
@@ -27,12 +27,34 @@ order: 12
 
 <description>**optional** _StyleAttr | Function_</description>
 
-水波图的样式。
+水波图的配色样式。
 
 `markdown:docs/common/shape-style.zh.md`
 
 `markdown:docs/common/color.zh.md`
 
+#### outline
+
+<description>**optional** _Outline_</description>
+
+水波图的外框容器配置。主要包含以下内容：
+
+| 属性名        | 类型            | 介绍                                         |
+| ------------ | -------------- | -------------------------------------------- |
+| border       | number         | 外框容器的 border 宽度，默认为 2 像素             |
+| disatance    | number         | 外框容器和内部波形的间距，默认为 0 像素             |
+
+#### wave
+
+<description>**optional** _Wave_</description>
+
+水波图的波形配置。主要包含以下内容：
+
+| 属性名        | 类型            | 介绍                                         |
+| ------------ | -------------- | -------------------------------------------- |
+| count        | number         | 水波的个数，默认为 3 个                          |
+| length       | number         | 水波的波长度，默认为 192 像素                     |
+
 ### 图表组件
 
 #### statistic ✨

diff --git a/examples/liquid/basic/demo/basic.ts b/examples/liquid/basic/demo/basic.ts
@@ -1,24 +1,13 @@
-import { Liquid, measureTextWidth } from '@antv/g2plot';
+import { Liquid } from '@antv/g2plot';
 
 const liquidPlot = new Liquid('container', {
   percent: 0.25,
-  statistic: {
-    content: {
-      style: {
-        fontSize: 60,
-        fill: 'black',
-      },
-      customHtml: (container, view, { percent }) => {
-        const { width, height } = container.getBoundingClientRect();
-        const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
-        const text = `${(percent * 100).toFixed(0)}%`;
-        const textWidth = measureTextWidth(text, { fontSize: 60 });
-        const scale = Math.min(d / textWidth, 1);
-        return `<div style="width:${d}px;height:${d}px;display:flex;align-items:center;justify-content:center;font-size:${scale}em;line-height:${
-          scale <= 1 ? 1 : 'inherit'
-        }">${text}</div>`;
-      },
-    },
+  outline: {
+    border: 4,
+    distance: 8,
+  },
+  wave: {
+    length: 128,
   },
 });
 liquidPlot.render();
diff --git a/src/plots/liquid/adaptor.ts b/src/plots/liquid/adaptor.ts
@@ -14,7 +14,7 @@ const CAT_VALUE = 'liquid';
  */
 function geometry(params: Params<LiquidOptions>): Params<LiquidOptions> {
   const { chart, options } = params;
-  const { percent, color, liquidStyle, radius } = options;
+  const { percent, color, liquidStyle, radius, outline, wave } = options;
 
   const data = [{ percent, type: CAT_VALUE }];
 
@@ -47,6 +47,8 @@ function geometry(params: Params<LiquidOptions>): Params<LiquidOptions> {
   // 将 radius 传入到自定义 shape 中
   geometry.customInfo({
     radius,
+    outline,
+    wave,
   });
 
   // 关闭组件

diff --git a/src/plots/liquid/index.ts b/src/plots/liquid/index.ts
@@ -29,6 +29,14 @@ export class Liquid extends Plot<LiquidOptions> {
           },
         },
       },
+      outline: {
+        border: 2,
+        distance: 0,
+      },
+      wave: {
+        count: 3,
+        length: 192,
+      },
     };
   }