V2 tiny tooltip (#1345)

* feat(minichart): add tooltip * fix: stash代码合并错误 * fix: 代码复用 * fix: 增加注释,代码复用 Co-authored-by: yinshi.wyl <[email protected]>
antvis · Jul 27, 2020 · ad2684b · ad2684b
1 parent 682befb
commit ad2684b
Show file tree

Hide file tree

Showing 11 changed files with 353 additions and 17 deletions.
diff --git a/__tests__/unit/plots/tiny-area/index-spec.ts b/__tests__/unit/plots/tiny-area/index-spec.ts
@@ -1,3 +1,5 @@
+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';
@@ -100,4 +102,79 @@ describe('tiny-area', () => {
     expect(tinyArea.chart.geometries[1].elements[0].shape.attr('stroke')).toEqual('#123456');
     expect(tinyArea.chart.geometries[1].elements[0].shape.attr('lineWidth')).toEqual(2);
   });
+
+  it('data with tooltip', () => {
+    const tinyArea = new TinyArea(createDiv(), {
+      width: 80,
+      height: 40,
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      tooltip: true,
+    });
+
+    tinyArea.render();
+
+    const chart = tinyArea.chart;
+    const tooltipOption = chart.getOptions().tooltip as TooltipCfg;
+    expect(tooltipOption.showTitle).toBe(false);
+    expect(tooltipOption.shared).toBe(true);
+    expect(tooltipOption.showMarkers).toBe(false);
+    expect(tooltipOption.itemTpl).toBe('<span>{value}</span>');
+    expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
+    expect(tooltipOption.domStyles).toEqual({
+      'g2-tooltip': {
+        padding: '2px',
+        fontSize: '10px',
+      },
+    });
+  });
+
+  it('data with custom tooltip', () => {
+    const tinyArea = new TinyArea(createDiv(), {
+      width: 80,
+      height: 40,
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      tooltip: {
+        showCrosshairs: true,
+        formatter: (x, y) => {
+          return `有${y / 1000}千`;
+        },
+        position: 'bottom',
+        offset: 0,
+        domStyles: {
+          'g2-tooltip': {
+            padding: '5px',
+            fontSize: '12px',
+          },
+        },
+      },
+    });
+
+    tinyArea.render();
+
+    const chart = tinyArea.chart;
+    const tooltipOption = chart.getOptions().tooltip as TooltipCfg;
+    expect(tooltipOption.showCrosshairs).toBe(true);
+    expect(tooltipOption.position).toBe('bottom');
+    expect(tooltipOption.offset).toBe(0);
+    expect(tooltipOption.domStyles).toEqual({
+      'g2-tooltip': {
+        padding: '5px',
+        fontSize: '12px',
+      },
+    });
+    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千' });
+  });
 });
diff --git a/__tests__/unit/plots/tiny-column/index-spec.ts b/__tests__/unit/plots/tiny-column/index-spec.ts
@@ -1,3 +1,5 @@
+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';
@@ -73,4 +75,79 @@ describe('tiny-column', () => {
     expect(tinyColumn.chart.geometries[0].elements[0].shape.attr('fill')).toEqual('#444444');
     expect(tinyColumn.chart.geometries[0].elements[1].shape.attr('fill')).toEqual('#222222');
   });
+
+  it('data with tooltip', () => {
+    const tinyColumn = new TinyColumn(createDiv(), {
+      width: 80,
+      height: 40,
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      tooltip: true,
+    });
+
+    tinyColumn.render();
+
+    const chart = tinyColumn.chart;
+    const tooltipOption = chart.getOptions().tooltip as TooltipCfg;
+    expect(tooltipOption.showTitle).toBe(false);
+    expect(tooltipOption.shared).toBe(true);
+    expect(tooltipOption.showMarkers).toBe(false);
+    expect(tooltipOption.itemTpl).toBe('<span>{value}</span>');
+    expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
+    expect(tooltipOption.domStyles).toEqual({
+      'g2-tooltip': {
+        padding: '2px',
+        fontSize: '10px',
+      },
+    });
+  });
+
+  it('data with custom tooltip', () => {
+    const tinyColumn = new TinyColumn(createDiv(), {
+      width: 80,
+      height: 40,
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      tooltip: {
+        showCrosshairs: true,
+        formatter: (x, y) => {
+          return `有${y / 1000}千`;
+        },
+        position: 'bottom',
+        offset: 0,
+        domStyles: {
+          'g2-tooltip': {
+            padding: '5px',
+            fontSize: '12px',
+          },
+        },
+      },
+    });
+
+    tinyColumn.render();
+
+    const chart = tinyColumn.chart;
+    const tooltipOption = chart.getOptions().tooltip as TooltipCfg;
+    expect(tooltipOption.showCrosshairs).toBe(true);
+    expect(tooltipOption.position).toBe('bottom');
+    expect(tooltipOption.offset).toBe(0);
+    expect(tooltipOption.domStyles).toEqual({
+      'g2-tooltip': {
+        padding: '5px',
+        fontSize: '12px',
+      },
+    });
+    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千' });
+  });
 });
diff --git a/__tests__/unit/plots/tiny-line/index-spec.ts b/__tests__/unit/plots/tiny-line/index-spec.ts
@@ -1,3 +1,5 @@
+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';
@@ -79,4 +81,79 @@ describe('tiny-line', () => {
     });
     expect(tinyLine.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
   });
+
+  it('data with tooltip', () => {
+    const tinyLine = new TinyLine(createDiv(), {
+      width: 80,
+      height: 40,
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      tooltip: true,
+    });
+
+    tinyLine.render();
+
+    const chart = tinyLine.chart;
+    const tooltipOption = chart.getOptions().tooltip as TooltipCfg;
+    expect(tooltipOption.showTitle).toBe(false);
+    expect(tooltipOption.shared).toBe(true);
+    expect(tooltipOption.showMarkers).toBe(false);
+    expect(tooltipOption.itemTpl).toBe('<span>{value}</span>');
+    expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
+    expect(tooltipOption.domStyles).toEqual({
+      'g2-tooltip': {
+        padding: '2px',
+        fontSize: '10px',
+      },
+    });
+  });
+
+  it('data with custom tooltip', () => {
+    const tinyLine = new TinyLine(createDiv(), {
+      width: 80,
+      height: 40,
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      tooltip: {
+        showCrosshairs: true,
+        formatter: (x, y) => {
+          return `有${y / 1000}千`;
+        },
+        position: 'bottom',
+        offset: 0,
+        domStyles: {
+          'g2-tooltip': {
+            padding: '5px',
+            fontSize: '12px',
+          },
+        },
+      },
+    });
+
+    tinyLine.render();
+
+    const chart = tinyLine.chart;
+    const tooltipOption = chart.getOptions().tooltip as TooltipCfg;
+    expect(tooltipOption.showCrosshairs).toBe(true);
+    expect(tooltipOption.position).toBe('bottom');
+    expect(tooltipOption.offset).toBe(0);
+    expect(tooltipOption.domStyles).toEqual({
+      'g2-tooltip': {
+        padding: '5px',
+        fontSize: '12px',
+      },
+    });
+    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千' });
+  });
 });
diff --git a/src/plots/tiny-area/adaptor.ts b/src/plots/tiny-area/adaptor.ts
@@ -2,6 +2,7 @@ import { isFunction } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { TinyAreaOptions } from './types';
+import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants';
 
 /**
  * 字段
@@ -64,10 +65,33 @@ function legend(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
  * tooltip 配置
  * @param params
  */
-function tooltip(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
-  const { chart } = params;
-
-  chart.tooltip(false);
+export function tooltip(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
+  const { chart, options } = params;
+  const { tooltip = false } = options;
+
+  if (tooltip) {
+    if (typeof tooltip === 'object') {
+      const { formatter, domStyles, position, offset, showCrosshairs } = tooltip;
+      chart.tooltip({
+        ...DEFAULT_TOOLTIP_OPTIONS,
+        showCrosshairs,
+        domStyles,
+        position,
+        offset,
+      });
+      chart.geometries.map((geometry) => {
+        geometry.tooltip('x*y', (x, y) => {
+          return {
+            value: formatter(x, y),
+          };
+        });
+      });
+    } else {
+      chart.tooltip(DEFAULT_TOOLTIP_OPTIONS);
+    }
+  } else {
+    chart.tooltip(false);
+  }
 
   return params;
 }

diff --git a/src/plots/tiny-area/types.ts b/src/plots/tiny-area/types.ts
@@ -1,5 +1,6 @@
 import { ChartOptions } from '../../types';
 import { ShapeStyle } from '../../types/style';
+import { TinyTooltipOption } from '../../types/tooltip';
 
 /** mini 图的配置继承自 ChartOptions，因为很多的 G2 图形配置都不需要 */
 export interface TinyAreaOptions extends ChartOptions {
@@ -14,4 +15,6 @@ export interface TinyAreaOptions extends ChartOptions {
   readonly lineStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
   /** 面积填充图形样式 */
   readonly areaStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
+  /** tooltip配置 */
+  readonly tooltip?: boolean | TinyTooltipOption;
 }
diff --git a/src/plots/tiny-column/adaptor.ts b/src/plots/tiny-column/adaptor.ts
@@ -2,6 +2,7 @@ import { isFunction } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { TinyColumnOptions } from './types';
+import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants';
 
 /**
  * 字段
@@ -63,10 +64,32 @@ function legend(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
  * tooltip 配置
  * @param params
  */
-function tooltip(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
-  const { chart } = params;
-
-  chart.tooltip(false);
+export function tooltip(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
+  const { chart, options } = params;
+  const { tooltip = false } = options;
+
+  if (tooltip) {
+    if (typeof tooltip === 'object') {
+      const { formatter, domStyles, position, offset, showCrosshairs } = tooltip;
+      chart.tooltip({
+        ...DEFAULT_TOOLTIP_OPTIONS,
+        showCrosshairs,
+        domStyles,
+        position,
+        offset,
+      });
+      const geometry = chart.geometries[0];
+      geometry.tooltip('x*y', (x, y) => {
+        return {
+          value: formatter(x, y),
+        };
+      });
+    } else {
+      chart.tooltip(DEFAULT_TOOLTIP_OPTIONS);
+    }
+  } else {
+    chart.tooltip(false);
+  }
 
   return params;
 }

diff --git a/src/plots/tiny-column/types.ts b/src/plots/tiny-column/types.ts
@@ -1,5 +1,6 @@
 import { ChartOptions } from '../../types';
 import { ShapeStyle } from '../../types/style';
+import { TinyTooltipOption } from '../../types/tooltip';
 
 /** mini 图的配置继承自 ChartOptions，因为很多的 G2 图形配置都不需要 */
 export interface TinyColumnOptions extends ChartOptions {
@@ -10,4 +11,6 @@ export interface TinyColumnOptions extends ChartOptions {
   readonly meta?: Record<string, any>;
   /** 迷你柱形图形样式 */
   readonly columnStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
+  /** tooltip配置 */
+  readonly tooltip?: boolean | TinyTooltipOption;
 }