Skip to content

Commit

Permalink
fix: 修复迷你图 tooltip 不统一 (#1578)
Browse files Browse the repository at this point in the history
* fix: 修复 tiny 图表 tooltip 不统一问题

* fix: 修改 test 路径

Co-authored-by: liufu.lf <liufu.lf@antfin.com>
  • Loading branch information
lxfu1 and liufu.lf authored Sep 15, 2020
1 parent 0598e47 commit 09b30d3
Show file tree
Hide file tree
Showing 11 changed files with 21 additions and 130 deletions.
11 changes: 5 additions & 6 deletions __tests__/unit/plots/tiny-area/index-spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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', () => {
Expand Down
11 changes: 5 additions & 6 deletions __tests__/unit/plots/tiny-column/index-spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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', () => {
Expand Down
11 changes: 5 additions & 6 deletions __tests__/unit/plots/tiny-line/index-spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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', () => {
Expand Down
30 changes: 1 addition & 29 deletions src/plots/tiny-area/adaptor.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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
Expand Down
5 changes: 1 addition & 4 deletions src/plots/tiny-area/types.ts
Original file line number Diff line number Diff line change
@@ -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[];
/** 是否平滑 */
Expand All @@ -14,6 +13,4 @@ export interface TinyAreaOptions extends Omit<Options, 'data' | 'tooltip' | 'leg
readonly line?: MappingOptions;
/** 面积点图形样式 */
readonly point?: MappingOptions;
/** tooltip配置 */
readonly tooltip?: boolean | TinyTooltipOption;
}
28 changes: 1 addition & 27 deletions src/plots/tiny-column/adaptor.ts
Original file line number Diff line number Diff line change
@@ -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';
/**
Expand Down Expand Up @@ -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
Expand Down
5 changes: 1 addition & 4 deletions src/plots/tiny-column/types.ts
Original file line number Diff line number Diff line change
@@ -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;
}
28 changes: 1 addition & 27 deletions src/plots/tiny-line/adaptor.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion src/plots/tiny-line/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,4 @@ export const DEFAULT_TOOLTIP_OPTIONS = {
fontSize: '10px',
},
},
formatter: (x: number, y: number) => y.toFixed(1),
};
5 changes: 1 addition & 4 deletions src/plots/tiny-line/types.ts
Original file line number Diff line number Diff line change
@@ -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[];
/** 是否平滑 */
Expand All @@ -14,6 +13,4 @@ export interface TinyLineOptions extends Omit<Options, 'data' | 'tooltip' | 'leg
readonly lineStyle?: StyleAttr;
/** 折线点图形样式 */
readonly point?: MappingOptions;
/** tooltip配置 */
readonly tooltip?: boolean | TinyTooltipOption;
}
16 changes: 0 additions & 16 deletions src/types/tooltip.ts
Original file line number Diff line number Diff line change
@@ -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;
};

0 comments on commit 09b30d3

Please sign in to comment.