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

__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();