fix: 修复迷你图 tooltip 不统一 (#1578)

* fix: 修复 tiny 图表 tooltip 不统一问题

* fix: 修改 test 路径

Co-authored-by: liufu.lf <[email protected]>

Author: lxfu1

__tests__/unit/plots/tiny-area/index-spec.ts

@@ -1,5 +1,4 @@
 import { TooltipCfg } from '@antv/g2/lib/interface';
-import { GeometryTooltipOption } from '@antv/g2/lib/interface';
 import { TinyArea } from '../../../../src';
 import { partySupport } from '../../../data/party-support';
 import { createDiv } from '../../../utils/dom';
@@ -149,8 +148,8 @@ describe('tiny-area', () => {
       autoFit: false,
       tooltip: {
         showCrosshairs: true,
-        formatter: ({ y }) => {
-          return `有${y / 1000}千`;
+        customContent: (...arg) => {
+          return `<div class="g2-tooltip">有${arg[1][0]?.value / 1000}千</div>`;
         },
         position: 'bottom',
         offset: 0,
@@ -177,9 +176,9 @@ describe('tiny-area', () => {
       },
     });
     const geometry = tinyArea.chart.geometries[0];
-    const geometryTooltipOption = geometry.tooltipOption as GeometryTooltipOption;
-    expect(geometryTooltipOption.fields).toEqual(['x', 'y']);
-    expect(geometryTooltipOption.callback(1, '3000')).toEqual({ value: '有3千' });
+    // @ts-ignore
+    const { position } = geometry.attributeOption;
+    expect(position.fields).toEqual(['x', 'y']);
   });
 
   it('annotation', () => {

__tests__/unit/plots/tiny-column/index-spec.ts

@@ -1,5 +1,4 @@
 import { TooltipCfg } from '@antv/g2/lib/interface';
-import { GeometryTooltipOption } from '@antv/g2/lib/interface';
 import { TinyColumn } from '../../../../src';
 import { partySupport } from '../../../data/party-support';
 import { createDiv } from '../../../utils/dom';
@@ -117,8 +116,8 @@ describe('tiny-column', () => {
       autoFit: false,
       tooltip: {
         showCrosshairs: true,
-        formatter: ({ y }) => {
-          return `有${y / 1000}千`;
+        customContent: (...arg) => {
+          return `<div class="g2-tooltip">有${arg[1][0]?.value / 1000}千</div>`;
         },
         position: 'bottom',
         offset: 0,
@@ -145,9 +144,9 @@ describe('tiny-column', () => {
       },
     });
     const geometry = tinyColumn.chart.geometries[0];
-    const geometryTooltipOption = geometry.tooltipOption as GeometryTooltipOption;
-    expect(geometryTooltipOption.fields).toEqual(['x', 'y']);
-    expect(geometryTooltipOption.callback(1, '3000')).toEqual({ value: '有3千' });
+    // @ts-ignore
+    const { position } = geometry.attributeOption;
+    expect(position.fields).toEqual(['x', 'y']);
   });
 
   it('columnWidthRatio', () => {

__tests__/unit/plots/tiny-line/index-spec.ts

@@ -1,5 +1,4 @@
 import { TooltipCfg } from '@antv/g2/lib/interface';
-import { GeometryTooltipOption } from '@antv/g2/lib/interface';
 import { TinyLine } from '../../../../src';
 import { partySupport } from '../../../data/party-support';
 import { createDiv } from '../../../utils/dom';
@@ -121,8 +120,8 @@ describe('tiny-line', () => {
       autoFit: false,
       tooltip: {
         showCrosshairs: true,
-        formatter: ({ y }) => {
-          return `有${y / 1000}千`;
+        customContent: (...arg) => {
+          return `<div class="g2-tooltip">有${arg[1][0]?.value / 1000}千</div>`;
         },
         position: 'bottom',
         offset: 0,
@@ -149,9 +148,9 @@ describe('tiny-line', () => {
       },
     });
     const geometry = tinyLine.chart.geometries[0];
-    const geometryTooltipOption = geometry.tooltipOption as GeometryTooltipOption;
-    expect(geometryTooltipOption.fields).toEqual(['x', 'y']);
-    expect(geometryTooltipOption.callback(1, '3000')).toEqual({ value: '有3千' });
+    // @ts-ignore
+    const { position } = geometry.attributeOption;
+    expect(position.fields).toEqual(['x', 'y']);
   });
 
   it('annotation', () => {

src/plots/tiny-area/adaptor.ts

@@ -1,8 +1,7 @@
 import { deepMix } from '@antv/util';
-import { theme, scale, animation, annotation } from '../../adaptor/common';
+import { theme, scale, animation, annotation, tooltip } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { TinyTooltipOption } from '../../types';
 import { area, line, point } from '../../adaptor/geometries';
 import { TinyAreaOptions } from './types';
 
@@ -40,33 +39,6 @@ function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
   return params;
 }
 
-/**
- * tooltip 配置
- * @param params
- */
-export function tooltip(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
-  const { chart, options } = params;
-  const { tooltip } = options;
-
-  // false 则关闭
-  if (tooltip === false) {
-    chart.tooltip(false);
-  } else {
-    // 是如果 object，那么传入
-    const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption;
-
-    chart.tooltip(otherTooltip);
-
-    chart.geometries.map((g) => {
-      g.tooltip('x*y', (x, y) => ({
-        value: formatter({ x, y }),
-      }));
-    });
-  }
-
-  return params;
-}
-
 /**
  * 迷你面积图适配器
  * @param chart

src/plots/tiny-area/types.ts

@@ -1,9 +1,8 @@
 import { Options, StyleAttr } from '../../types';
-import { TinyTooltipOption } from '../../types/tooltip';
 import { MappingOptions } from '../../adaptor/geometries/base';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
-export interface TinyAreaOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label'> {
+export interface TinyAreaOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
   /** 具体的数据 */
   readonly data: number[];
   /** 是否平滑 */
@@ -14,6 +13,4 @@ export interface TinyAreaOptions extends Omit<Options, 'data' | 'tooltip' | 'leg
   readonly line?: MappingOptions;
   /** 面积点图形样式 */
   readonly point?: MappingOptions;
-  /** tooltip配置 */
-  readonly tooltip?: boolean | TinyTooltipOption;
 }

src/plots/tiny-column/adaptor.ts

@@ -1,8 +1,7 @@
 import { deepMix } from '@antv/util';
-import { theme, scale, animation, annotation } from '../../adaptor/common';
+import { theme, scale, animation, annotation, tooltip } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { TinyTooltipOption } from '../../types';
 import { interval } from '../../adaptor/geometries';
 import { TinyColumnOptions } from './types';
 /**
@@ -38,31 +37,6 @@ function geometry(params: Params<TinyColumnOptions>): Params<TinyColumnOptions>
   return params;
 }
 
-/**
- * tooltip 配置
- * @param params
- */
-export function tooltip(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
-  const { chart, options } = params;
-  const { tooltip } = options;
-
-  // false 则关闭
-  if (tooltip === false) {
-    chart.tooltip(false);
-  } else {
-    // 是如果 object，那么传入
-    const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption;
-
-    chart.tooltip(otherTooltip);
-
-    chart.geometries[0].tooltip('x*y', (x, y) => ({
-      value: formatter({ x, y }),
-    }));
-  }
-
-  return params;
-}
-
 /**
  * 迷你柱形图适配器
  * @param chart

src/plots/tiny-column/types.ts

@@ -1,14 +1,11 @@
 import { Options, StyleAttr } from '../../types';
-import { TinyTooltipOption } from '../../types/tooltip';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
-export interface TinyColumnOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label'> {
+export interface TinyColumnOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
   /** 具体的数据 */
   readonly data: number[];
   /** 柱状图宽度占比 [0-1] */
   readonly columnWidthRatio?: number;
   /** 迷你柱形图形样式 */
   readonly columnStyle?: StyleAttr;
-  /** tooltip配置 */
-  readonly tooltip?: boolean | TinyTooltipOption;
 }

src/plots/tiny-line/adaptor.ts

@@ -1,8 +1,7 @@
 import { deepMix } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
-import { scale, theme, animation, annotation } from '../../adaptor/common';
-import { TinyTooltipOption } from '../../types';
+import { scale, theme, animation, annotation, tooltip } from '../../adaptor/common';
 import { line, point } from '../../adaptor/geometries';
 import { TinyLineOptions } from './types';
 
@@ -42,31 +41,6 @@ function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   return params;
 }
 
-/**
- * tooltip 配置
- * @param params
- */
-export function tooltip(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
-  const { chart, options } = params;
-  const { tooltip } = options;
-
-  // false 则关闭
-  if (tooltip === false) {
-    chart.tooltip(false);
-  } else {
-    // 是如果 object，那么传入
-    const { formatter, ...otherTooltip } = tooltip as TinyTooltipOption;
-
-    chart.tooltip(otherTooltip);
-
-    chart.geometries[0].tooltip('x*y', (x, y) => ({
-      value: formatter({ x, y }),
-    }));
-  }
-
-  return params;
-}
-
 /**
  * 迷你折线图适配器
  * @param chart

src/plots/tiny-line/constants.ts

@@ -10,5 +10,4 @@ export const DEFAULT_TOOLTIP_OPTIONS = {
       fontSize: '10px',
     },
   },
-  formatter: (x: number, y: number) => y.toFixed(1),
 };

src/plots/tiny-line/types.ts

@@ -1,9 +1,8 @@
 import { Options, StyleAttr } from '../../types';
-import { TinyTooltipOption } from '../../types/tooltip';
 import { MappingOptions } from '../../adaptor/geometries/base';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
-export interface TinyLineOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label'> {
+export interface TinyLineOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
   /** 具体的数据 */
   readonly data: number[];
   /** 是否平滑 */
@@ -14,6 +13,4 @@ export interface TinyLineOptions extends Omit<Options, 'data' | 'tooltip' | 'leg
   readonly lineStyle?: StyleAttr;
   /** 折线点图形样式 */
   readonly point?: MappingOptions;
-  /** tooltip配置 */
-  readonly tooltip?: boolean | TinyTooltipOption;
 }

src/types/tooltip.ts

@@ -1,19 +1,3 @@
 import { TooltipOption } from '@antv/g2/lib/interface';
-import { Datum } from './common';
 
 export type Tooltip = TooltipOption;
-
-export type TinyTooltipOption = {
-  /** tootip body模版语言 */
-  readonly formatter?: (datum: Datum) => string;
-  /** 获取tooltip内部dom节点覆写样式 */
-  readonly domStyles?: object;
-  /** tooltip定位位置 */
-  readonly position?: 'top' | 'bottom' | 'left' | 'right';
-  /** tooltip偏移位置 */
-  readonly offset?: number;
-  /** 是否显示交叉线 */
-  readonly showCrosshairs?: boolean;
-  /** 是否显示 tooltip 数据点 marker */
-  readonly showMarkers?: boolean;
-};