feat(gauge): 仪表盘增加 tooltip 配置 (#3149)

* feat(gauge): 仪表盘增加 tooltip 配置

* feat(gauge): 仪表盘添加tooltip 文档 单测 和demo

Co-authored-by: ai-qing-hai <[email protected]>

Author: visiky

__tests__/unit/plots/gauge/tooltip-spec.ts

@@ -0,0 +1,75 @@
+import { Gauge } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+describe('gauge', () => {
+  it('default tooltip', () => {
+    const gauge = new Gauge(createDiv(), {
+      width: 400,
+      height: 300,
+      percent: 0.75,
+    });
+
+    gauge.render();
+    // @ts-ignore
+    expect(gauge.chart.options.tooltip).toBe(false);
+    expect(gauge.chart.getComponents().find((co) => co.type === 'tooltip')).toBe(undefined);
+
+    gauge.update({
+      tooltip: {},
+    });
+    // @ts-ignore
+    expect(gauge.chart.options.tooltip).toMatchObject({
+      showMarkers: false,
+      showTitle: false,
+      containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+      domStyles: {
+        'g2-tooltip': {
+          padding: '4px 8px',
+          fontSize: '10px',
+        },
+      },
+    });
+
+    gauge.destroy();
+  });
+
+  it('custom tooltip', () => {
+    const customContent = (x, data) => {
+      return `${(Number(data?.[0]?.value || 0) * 100).toFixed(2)}%`;
+    };
+
+    const gauge = new Gauge(createDiv(), {
+      width: 400,
+      height: 300,
+      percent: 0.75,
+      tooltip: {
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list">2131231</div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            padding: '40px',
+            fontSize: '40px',
+          },
+        },
+        customContent,
+      },
+    });
+
+    gauge.render();
+
+    // @ts-ignore
+    expect(gauge.chart.options.tooltip).toMatchObject({
+      showMarkers: false,
+      showTitle: false,
+      containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list">2131231</div></div>',
+      domStyles: {
+        'g2-tooltip': {
+          padding: '40px',
+          fontSize: '40px',
+        },
+      },
+      customContent,
+    });
+
+    gauge.destroy();
+  });
+});

docs/api/plots/gauge.en.md

@@ -117,3 +117,7 @@ They all have the following configuration items:
 Metric central text component.
 
 `markdown:docs/common/statistic.en.md`
+
+#### tooltip
+
+`markdown:docs/common/tooltip.eh.md`

docs/api/plots/gauge.zh.md

@@ -119,3 +119,6 @@ order: 5
 
 `markdown:docs/common/statistic.zh.md`
 
+#### tooltip
+
+`markdown:docs/common/tooltip.zh.md`

examples/progress-plots/gauge/demo/meta.json

@@ -92,6 +92,14 @@
         "en": "Custom simple gauge indicator"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2RRg9bSnn2/380b6b20-aed3-44e2-9afe-5532b1f9daea.png"
+    },
+    {
+      "filename": "tooltip-gauge.ts",
+      "title": {
+        "zh": "仪表盘 自定义 tooltip",
+        "en": "Gauge Customize React Tooltip"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/xDdGhZK84X/9746c5d8-4341-4c04-9528-87bcab55eedb.png"
     }
   ]
 }

examples/progress-plots/gauge/demo/tooltip-gauge.ts

@@ -0,0 +1,53 @@
+import { Gauge } from '@antv/g2plot';
+
+const gauge = new Gauge('container', {
+  tooltip: {
+    containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+    domStyles: {
+      'g2-tooltip': {
+        padding: '4px 8px',
+        fontSize: '10px',
+      },
+    },
+    customContent: (x, data) => {
+      return `${(Number(data?.[0]?.value || 0) * 100).toFixed(2)}%`;
+    },
+  },
+  percent: 0.75,
+  range: {
+    color: '#30BF78',
+  },
+  indicator: {
+    pointer: {
+      style: {
+        stroke: '#D0D0D0',
+      },
+    },
+    pin: {
+      style: {
+        stroke: '#D0D0D0',
+      },
+    },
+  },
+  axis: {
+    label: {
+      formatter(v) {
+        return Number(v) * 100;
+      },
+    },
+    subTickLine: {
+      count: 3,
+    },
+  },
+  statistic: {
+    content: {
+      formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`,
+      style: {
+        color: 'rgba(0,0,0,0.65)',
+        fontSize: 48,
+      },
+    },
+  },
+});
+
+gauge.render();

src/plots/gauge/adaptor.ts

@@ -1,5 +1,5 @@
 import { Geometry } from '@antv/g2';
-import { isString } from '@antv/util';
+import { get, isString } from '@antv/util';
 import { interaction, animation, theme, scale, annotation } from '../../adaptor/common';
 import { interval } from '../../adaptor/geometries';
 import { AXIS_META_CONFIG_KEYS } from '../../constant';
@@ -149,6 +149,42 @@ function statistic(params: Params<GaugeOptions>, updated?: boolean): Params<Gaug
   return params;
 }
 
+/**
+ * tooltip 配置
+ */
+function tooltip(params: Params<GaugeOptions>): Params<GaugeOptions> {
+  const { chart, options } = params;
+  const { tooltip } = options;
+
+  if (tooltip) {
+    chart.tooltip(
+      deepAssign(
+        {
+          showTitle: false,
+          showMarkers: false,
+          containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+          domStyles: {
+            'g2-tooltip': {
+              padding: '4px 8px',
+              fontSize: '10px',
+            },
+          },
+          customContent: (x: string, data: any[]) => {
+            const percent = get(data, [0, 'data', PERCENT], 0);
+            return `${(percent * 100).toFixed(2)}%`;
+          },
+        },
+        tooltip
+      )
+    );
+  } else {
+    // 默认，不展示 tooltip
+    chart.tooltip(false);
+  }
+
+  return params;
+}
+
 /**
  * other 配置
  * @param params
@@ -157,7 +193,6 @@ function other(params: Params<GaugeOptions>): Params<GaugeOptions> {
   const { chart } = params;
 
   chart.legend(false);
-  chart.tooltip(false);
 
   return params;
 }
@@ -180,6 +215,7 @@ export function adaptor(params: Params<GaugeOptions>) {
     animation,
     geometry,
     meta,
+    tooltip,
     statistic,
     interaction,
     annotation(),

src/plots/gauge/types.ts

@@ -54,7 +54,7 @@ export type GaugeRangeData = {
  * @title 仪表盘配置类型定义
  */
 export interface GaugeOptions
-  extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'xAxis' | 'yAxis' | 'xField' | 'yField' | 'color'> {
+  extends Omit<Options, 'data' | 'legend' | 'xAxis' | 'yAxis' | 'xField' | 'yField' | 'color'> {
   /**
    * @title 指标的比例
    * @description 范围0 ~ 1