From 09b30d30fa3df9cc6851b183839164f93adba304 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=AF=E5=8D=97?= <31396322+lxfu1@users.noreply.github.com> Date: Tue, 15 Sep 2020 21:13:50 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=B7=E4=BD=A0?= =?UTF-8?q?=E5=9B=BE=20tooltip=20=E4=B8=8D=E7=BB=9F=E4=B8=80=20(#1578)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复 tiny 图表 tooltip 不统一问题 * fix: 修改 test 路径 Co-authored-by: liufu.lf --- __tests__/unit/plots/tiny-area/index-spec.ts | 11 ++++--- .../unit/plots/tiny-column/index-spec.ts | 11 ++++--- __tests__/unit/plots/tiny-line/index-spec.ts | 11 ++++--- src/plots/tiny-area/adaptor.ts | 30 +------------------ src/plots/tiny-area/types.ts | 5 +--- src/plots/tiny-column/adaptor.ts | 28 +---------------- src/plots/tiny-column/types.ts | 5 +--- src/plots/tiny-line/adaptor.ts | 28 +---------------- src/plots/tiny-line/constants.ts | 1 - src/plots/tiny-line/types.ts | 5 +--- src/types/tooltip.ts | 16 ---------- 11 files changed, 21 insertions(+), 130 deletions(-) diff --git a/__tests__/unit/plots/tiny-area/index-spec.ts b/__tests__/unit/plots/tiny-area/index-spec.ts index 0a0329ba72..6d94f1f7a8 100644 --- a/__tests__/unit/plots/tiny-area/index-spec.ts +++ b/__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 `
有${arg[1][0]?.value / 1000}千
`; }, 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', () => { diff --git a/__tests__/unit/plots/tiny-column/index-spec.ts b/__tests__/unit/plots/tiny-column/index-spec.ts index b6a2869a3b..90cb53c46b 100644 --- a/__tests__/unit/plots/tiny-column/index-spec.ts +++ b/__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 `
有${arg[1][0]?.value / 1000}千
`; }, 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', () => { diff --git a/__tests__/unit/plots/tiny-line/index-spec.ts b/__tests__/unit/plots/tiny-line/index-spec.ts index 94775ae51d..57116f47b9 100644 --- a/__tests__/unit/plots/tiny-line/index-spec.ts +++ b/__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 `
有${arg[1][0]?.value / 1000}千
`; }, 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', () => { diff --git a/src/plots/tiny-area/adaptor.ts b/src/plots/tiny-area/adaptor.ts index 2cd264d8a0..d1d6b5650c 100644 --- a/src/plots/tiny-area/adaptor.ts +++ b/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): Params { return params; } -/** - * tooltip 配置 - * @param params - */ -export function tooltip(params: Params): Params { - 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 diff --git a/src/plots/tiny-area/types.ts b/src/plots/tiny-area/types.ts index 1f5b1c7bcc..42a2c079ca 100644 --- a/src/plots/tiny-area/types.ts +++ b/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 { +export interface TinyAreaOptions extends Omit { /** 具体的数据 */ readonly data: number[]; /** 是否平滑 */ @@ -14,6 +13,4 @@ export interface TinyAreaOptions extends Omit): Params return params; } -/** - * tooltip 配置 - * @param params - */ -export function tooltip(params: Params): Params { - 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 diff --git a/src/plots/tiny-column/types.ts b/src/plots/tiny-column/types.ts index 8a155a49af..ce912fba24 100644 --- a/src/plots/tiny-column/types.ts +++ b/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 { +export interface TinyColumnOptions extends Omit { /** 具体的数据 */ readonly data: number[]; /** 柱状图宽度占比 [0-1] */ readonly columnWidthRatio?: number; /** 迷你柱形图形样式 */ readonly columnStyle?: StyleAttr; - /** tooltip配置 */ - readonly tooltip?: boolean | TinyTooltipOption; } diff --git a/src/plots/tiny-line/adaptor.ts b/src/plots/tiny-line/adaptor.ts index d88a735a6e..409849a1cc 100644 --- a/src/plots/tiny-line/adaptor.ts +++ b/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): Params { return params; } -/** - * tooltip 配置 - * @param params - */ -export function tooltip(params: Params): Params { - 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 diff --git a/src/plots/tiny-line/constants.ts b/src/plots/tiny-line/constants.ts index 36efe1a4e2..10516b43ba 100644 --- a/src/plots/tiny-line/constants.ts +++ b/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), }; diff --git a/src/plots/tiny-line/types.ts b/src/plots/tiny-line/types.ts index 556cb011c9..2126bd9a51 100644 --- a/src/plots/tiny-line/types.ts +++ b/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 { +export interface TinyLineOptions extends Omit { /** 具体的数据 */ readonly data: number[]; /** 是否平滑 */ @@ -14,6 +13,4 @@ export interface TinyLineOptions extends Omit 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; -};