fix(liquid): annotation width (#2418)

* fix(liquid): annotation width

* fix: ci

Author: hustcc

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

@@ -42,6 +42,8 @@ describe('liquid', () => {
     liquid.render();
     expect(getClipPath(liquid)).toEqual(shapes[3].clipPath);
 
+    // @ts-ignore
+    expect(liquid.chart.ele.querySelector('.g2-html-annotation').style.width).toBe('270px');
     liquid.destroy();
   });
 

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

@@ -53,7 +53,7 @@ describe('liquid statistic', () => {
   it('customHtml 容器的宽度', () => {
     let htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
     // @ts-ignore
-    const circleShape = liquid.chart.geometries[0].elements[0].shape.find((s) => s.get('type') === 'path');
+    const circleShape = liquid.chart.geometries[0].elements[0].shape.find((s) => s.get('name') === 'wrap');
     expect(htmlAnnotations[0].getBoundingClientRect().width).toEqual(circleShape.getCanvasBBox().width);
 
     // 开发者可以覆盖

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g2plot",
-  "version": "2.3.14",
+  "version": "2.3.15",
   "description": "An interactive and responsive charting library",
   "keywords": [
     "chart",

src/index.ts

@@ -1,4 +1,4 @@
-export const version = '2.3.14';
+export const version = '2.3.15';
 
 // G2 自定义能力透出
 import * as G2 from '@antv/g2';

src/utils/statistic.ts

@@ -106,7 +106,8 @@ export const renderStatistic = (chart: View, options: { statistic: Statistic; pl
         } else if (plotType === 'liquid') {
           const liquidShape = get(view.geometries, [0, 'elements', 0, 'shape']);
           if (liquidShape) {
-            const path = (liquidShape as IGroup).find((t) => t.get('type') === 'path');
+            // 获取到水波图边框大小
+            const path = (liquidShape as IGroup).find((t) => t.get('name') === 'wrap');
             const { width } = path.getCanvasBBox();
             containerW = width;
           }