Skip to content

Commit be94eb9

Browse files
lxfu1lxfu1
authored
fix: v1 label formatter 无效 (#1713)
* fix: v1 label formatter 无效 * fix: 补全label tooltip v1 formatter支持 * docs: 升级指南添加 label 描述
1 parent aa3dbcc commit be94eb9

File tree

24 files changed

+108
-34
lines changed

24 files changed

+108
-34
lines changed

‎__tests__/unit/utils/transform-label-spec.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { transformLabel } from '../../../src/utils';
2+
3+
describe('transform label', () => {
4+
it('label', () => {
5+
expect(transformLabel(undefined)).not.toBeDefined();
6+
expect(transformLabel(null)).toBeNull();
7+
expect(transformLabel('null')).toBe('null');
8+
expect(transformLabel('')).toBe('');
9+
expect(transformLabel({ offset: 20 })).toEqual({ offset: 20 });
10+
expect(transformLabel({ offset: 20, content: '123' })).toEqual({ offset: 20, content: '123' });
11+
expect(transformLabel({ offset: 20, content: '123', formatter: '456' })).toEqual({
12+
offset: 20,
13+
content: '123',
14+
formatter: '456',
15+
});
16+
expect(transformLabel({ offset: 20, formatter: () => '456' }).content).toBeTruthy();
17+
});
18+
});

‎__tests__/unit/utils/transform-tooltip-spec.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { transformTooltip } from '../../../src/utils';
2+
3+
describe('transform tooltip', () => {
4+
it('tooltip', () => {
5+
expect(transformTooltip(undefined)).not.toBeDefined();
6+
expect(transformTooltip(null)).toBeNull();
7+
expect(transformTooltip('null')).toBe('null');
8+
expect(transformTooltip('')).toBe('');
9+
expect(transformTooltip({ showMarkers: true })).toEqual({ showMarkers: true });
10+
expect(transformTooltip({ showMarkers: true, customContent: () => '123' }).customContent).toBeTruthy();
11+
expect(transformTooltip({ showMarkers: true, formatter: () => '456' }).customContent).toBeTruthy();
12+
});
13+
});

‎docs/manual/upgrade.en.md

+2
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,8 @@ G2Plot 2.0 兼容大部分的 1.x 版本图表功能和配置项，详情如下
113113

114114
**guideLine**：不再支持，改用 [anniotations](../../examples/general/annotation) 实现。
115115

116+
**label**：label.type 会有兼容性问题，如果报错修改 type 配置或者去掉 。
117+
116118
**slider**:
117119

118120
```ts

‎docs/manual/upgrade.zh.md

+2
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,8 @@ G2Plot 2.0 兼容大部分的 1.x 版本图表功能和配置项，详情如下
113113

114114
**guideLine**：不再支持，改用 [anniotations](../../examples/general/annotation) 实现。
115115

116+
**label**：label.type 会有兼容性问题，如果报错修改 type 配置或者去掉 。
117+
116118
**slider**:
117119

118120
```ts

‎src/adaptor/common.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Options } from '../types';
55
import { Interaction } from '../types/interaction';
66
import { Axis } from '../types/axis';
77
import { AXIS_META_CONFIG_KEYS } from '../constant';
8-
import { pick } from '../utils';
8+
import { pick, transformTooltip } from '../utils';
99

1010
/**
1111
* 通用 legend 配置, 适用于带 colorField 的图表
@@ -33,7 +33,7 @@ export function tooltip<O extends Pick<Options, 'tooltip'>>(params: Params<O>):
3333
const { tooltip } = options;
3434

3535
if (tooltip !== undefined) {
36-
chart.tooltip(tooltip);
36+
chart.tooltip(transformTooltip(tooltip));
3737
}
3838

3939
return params;

‎src/plots/area/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { tooltip, slider, interaction, animation, theme, annotation } from '../.
33
import { findGeometry } from '../../utils';
44
import { Params } from '../../core/adaptor';
55
import { area, point, line } from '../../adaptor/geometries';
6-
import { flow } from '../../utils';
6+
import { flow, transformLabel } from '../../utils';
77
import { meta, legend, axis, adjust } from '../line/adaptor';
88
import { AreaOptions } from './types';
99

@@ -50,7 +50,7 @@ function label(params: Params<AreaOptions>): Params<AreaOptions> {
5050
areaGeometry.label({
5151
fields: [yField],
5252
callback,
53-
cfg,
53+
cfg: transformLabel(cfg),
5454
});
5555
}
5656

‎src/plots/box/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { deepMix, isFunction, map, isObject } from '@antv/util';
22
import { Params } from '../../core/adaptor';
33
import { interaction, animation, theme } from '../../adaptor/common';
44
import { findGeometry } from '../../utils';
5-
import { flow, pick } from '../../utils';
5+
import { flow, pick, transformTooltip } from '../../utils';
66
import { AXIS_META_CONFIG_KEYS } from '../../constant';
77
import { BoxOptions } from './types';
88
import { BOX_RANGE, BOX_SYNC_NAME } from './constant';
@@ -185,7 +185,7 @@ export function tooltip(params: Params<BoxOptions>): Params<BoxOptions> {
185185
const { tooltip } = options;
186186

187187
if (tooltip !== undefined) {
188-
chart.tooltip(tooltip);
188+
chart.tooltip(transformTooltip(tooltip));
189189
}
190190

191191
return params;

‎src/plots/bullet/adaptor.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { deepMix, isNumber } from '@antv/util';
22
import { Params } from '../../core/adaptor';
33
import { interaction, animation, theme, tooltip } from '../../adaptor/common';
4-
import { flow, pick } from '../../utils';
4+
import { flow, pick, transformLabel } from '../../utils';
55
import { AXIS_META_CONFIG_KEYS } from '../../constant';
66
import { interval, point } from '../../adaptor/geometries';
77
import { BulletOptions } from './types';
@@ -169,13 +169,13 @@ function label(params: Params<BulletOptions>): Params<BulletOptions> {
169169
const [rangeGeometry, measureGeometry, targetGeometry] = chart.geometries;
170170

171171
if (label?.range) {
172-
rangeGeometry.label(`${rangeField}`, label.range);
172+
rangeGeometry.label(`${rangeField}`, transformLabel(label.range));
173173
}
174174
if (label?.measure) {
175-
measureGeometry.label(`${measureField}`, label.measure);
175+
measureGeometry.label(`${measureField}`, transformLabel(label.measure));
176176
}
177177
if (label?.target) {
178-
targetGeometry.label(`${targetField}`, label.target);
178+
targetGeometry.label(`${targetField}`, transformLabel(label.target));
179179
}
180180

181181
return params;

‎src/plots/column/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Params } from '../../core/adaptor';
33
import { findGeometry } from '../../utils';
44
import { tooltip, slider, interaction, animation, theme, scale, annotation, scrollbar } from '../../adaptor/common';
55
import { interval } from '../../adaptor/geometries';
6-
import { flow } from '../../utils';
6+
import { flow, transformLabel } from '../../utils';
77
import { ColumnOptions } from './types';
88
import { transformData } from './utils';
99

@@ -106,7 +106,7 @@ function label(params: Params<ColumnOptions>): Params<ColumnOptions> {
106106
geometry.label({
107107
fields: [yField],
108108
callback,
109-
cfg,
109+
cfg: transformLabel(cfg),
110110
});
111111
}
112112

‎src/plots/dual-axes/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
interaction as commonInteraction,
88
} from '../../adaptor/common';
99
import { Params } from '../../core/adaptor';
10-
import { flow } from '../../utils/flow';
10+
import { flow, transformTooltip } from '../../utils';
1111
import { findViewById } from '../../utils/view';
1212
import { getOption } from './util/option';
1313
import { getViewLegendItems } from './util/legend';
@@ -147,7 +147,7 @@ export function tooltip(params: Params<DualAxesOptions>): Params<DualAxesOptions
147147
const leftView = findViewById(chart, LEFT_AXES_VIEW);
148148
const rightView = findViewById(chart, RIGHT_AXES_VIEW);
149149
if (tooltip !== undefined) {
150-
chart.tooltip(tooltip);
150+
chart.tooltip(transformTooltip(tooltip));
151151
// 在 view 上添加 tooltip，使得 shared 和 interaction active-region 起作用
152152
// view 应该继承 chart 里的 shared，但是从表现看来，继承有点问题
153153
leftView.tooltip({

‎src/plots/heatmap/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { isFunction, isObject } from '@antv/util';
22
import { Params } from '../../core/adaptor';
33
import { findGeometry } from '../../utils';
4-
import { flow } from '../../utils';
4+
import { flow, transformLabel } from '../../utils';
55
import { DEFAULT_COLORS } from '../../constant';
66
import { tooltip, interaction, animation, theme, scale } from '../../adaptor/common';
77
import { HeatmapOptions, ShapeType, SHAPE_TYPES } from './types';
@@ -210,7 +210,7 @@ function label(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
210210
geometry.label({
211211
fields: [colorField],
212212
callback,
213-
cfg,
213+
cfg: transformLabel(cfg),
214214
});
215215
}
216216

‎src/plots/histogram/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { deepMix } from '@antv/util';
33
import { Params } from '../../core/adaptor';
44
import { tooltip, interaction, animation, theme, scale } from '../../adaptor/common';
55
import { findGeometry } from '../../utils';
6-
import { flow } from '../../utils';
6+
import { flow, transformLabel } from '../../utils';
77
import { interval } from '../../adaptor/geometries';
88
import { HistogramOptions } from './types';
99

@@ -110,7 +110,7 @@ function label(params: Params<HistogramOptions>): Params<HistogramOptions> {
110110
geometry.label({
111111
fields: ['count'],
112112
callback,
113-
cfg,
113+
cfg: transformLabel(cfg),
114114
});
115115
}
116116

‎src/plots/line/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Geometry } from '@antv/g2';
22
import { deepMix, each } from '@antv/util';
33
import { Params } from '../../core/adaptor';
44
import { tooltip, slider, interaction, animation, theme, scale, annotation } from '../../adaptor/common';
5-
import { findGeometry } from '../../utils';
5+
import { findGeometry, transformLabel } from '../../utils';
66
import { point, line } from '../../adaptor/geometries';
77
import { flow } from '../../utils';
88
import { LineOptions } from './types';
@@ -108,7 +108,7 @@ function label(params: Params<LineOptions>): Params<LineOptions> {
108108
lineGeometry.label({
109109
fields: [yField],
110110
callback,
111-
cfg,
111+
cfg: transformLabel(cfg),
112112
});
113113
}
114114

‎src/plots/pie/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { deepMix, every, filter, get, isFunction, isString, isNil } from '@antv/
33
import { Params } from '../../core/adaptor';
44
import { legend, tooltip, interaction, animation, theme, state, annotation } from '../../adaptor/common';
55
import { Data } from '../../types';
6-
import { flow, LEVEL, log, template } from '../../utils';
6+
import { flow, LEVEL, log, template, transformLabel } from '../../utils';
77
import { interval } from '../../adaptor/geometries';
88
import { PieOptions } from './types';
99
import { getTotalValue } from './utils';
@@ -118,7 +118,7 @@ function label(params: Params<PieOptions>): Params<PieOptions> {
118118
geometry.label(false);
119119
} else {
120120
const { callback, ...cfg } = label;
121-
const labelCfg = cfg;
121+
const labelCfg = transformLabel(cfg);
122122

123123
// ① 提供模板字符串的 label content 配置
124124
if (labelCfg.content) {

‎src/plots/rose/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { deepMix, filter, isObject, isArray } from '@antv/util';
22
import { Params } from '../../core/adaptor';
3-
import { flow, findGeometry, log, LEVEL } from '../../utils';
3+
import { flow, findGeometry, log, LEVEL, transformLabel } from '../../utils';
44
import { tooltip, interaction, animation, theme, scale, annotation, state } from '../../adaptor/common';
55
import { interval } from '../../adaptor/geometries';
66
import { RoseOptions } from './types';
@@ -59,7 +59,7 @@ function label(params: Params<RoseOptions>): Params<RoseOptions> {
5959
geometry.label({
6060
fields: fields || [xField],
6161
callback,
62-
cfg,
62+
cfg: transformLabel(cfg),
6363
});
6464
} else {
6565
log(LEVEL.WARN, label === null, 'the label option must be an Object.');

‎src/plots/scatter/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Params } from '../../core/adaptor';
33
import { flow } from '../../utils';
44
import { point as pointAdaptor } from '../../adaptor/geometries';
55
import { tooltip, interaction, animation, theme, scale, annotation } from '../../adaptor/common';
6-
import { findGeometry } from '../../utils';
6+
import { findGeometry, transformLabel } from '../../utils';
77
import { getQuadrantDefaultConfig } from './util';
88
import { ScatterOptions } from './types';
99

@@ -113,7 +113,7 @@ function label(params: Params<ScatterOptions>): Params<ScatterOptions> {
113113
scatterGeometry.label({
114114
fields: [yField],
115115
callback,
116-
cfg,
116+
cfg: transformLabel(cfg),
117117
});
118118
}
119119

‎src/plots/stock/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { deepMix, isArray, isObject, map } from '@antv/util';
22
import DataSet from '@antv/data-set';
33
import { Params } from '../../core/adaptor';
44
import { interaction, animation, theme } from '../../adaptor/common';
5-
import { findGeometry, flow, pick } from '../../utils';
5+
import { findGeometry, flow, pick, transformTooltip } from '../../utils';
66
import { AXIS_META_CONFIG_KEYS } from '../../constant';
77

88
import { StockOptions } from './types';
@@ -126,7 +126,7 @@ export function tooltip(params: Params<StockOptions>): Params<StockOptions> {
126126

127127
if (tooltip) {
128128
if (isObject(tooltip)) {
129-
chart.tooltip(tooltip);
129+
chart.tooltip(transformTooltip(tooltip));
130130
geometry.tooltip(baseGeomTooltipOptions);
131131
}
132132
} else {

‎src/plots/sunburst/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { deepMix } from '@antv/util';
22
import { Params } from '../../core/adaptor';
33
import { polygon as polygonAdaptor } from '../../adaptor/geometries';
44
import { tooltip, interaction, animation, theme, annotation } from '../../adaptor/common';
5-
import { flow, findGeometry } from '../../utils';
5+
import { flow, findGeometry, transformLabel } from '../../utils';
66
import { transformData } from './utils';
77
import { SunburstOptions } from './types';
88

@@ -72,7 +72,7 @@ function label(params: Params<SunburstOptions>): Params<SunburstOptions> {
7272
geometry.label({
7373
fields: [seriesField],
7474
callback,
75-
cfg,
75+
cfg: transformLabel(cfg),
7676
});
7777
}
7878

‎src/plots/waterfall/adaptor.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Datum } from '@antv/g2/lib/interface';
44
import { Params } from '../../core/adaptor';
55
import { tooltip, interaction, animation, theme, state, scale, annotation } from '../../adaptor/common';
66
import { interval } from '../../adaptor/geometries';
7-
import { findGeometry, flow } from '../../utils';
7+
import { findGeometry, flow, transformLabel } from '../../utils';
88
import { Y_FIELD, ABSOLUTE_FIELD, DIFF_FIELD, IS_TOTAL } from './constants';
99
import { WaterOptions } from './types';
1010
import { transformData } from './utils';
@@ -182,7 +182,7 @@ function label(params: Params<WaterOptions>): Params<WaterOptions> {
182182
geometry.label({
183183
fields: labelMode === 'absolute' ? [ABSOLUTE_FIELD] : [DIFF_FIELD],
184184
callback,
185-
cfg,
185+
cfg: transformLabel(cfg),
186186
});
187187
}
188188

‎src/types/label.ts

+2
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@ export type Label =
77
readonly fields?: string[];
88
/** 回调函数。 */
99
readonly callback?: LabelCallback;
10+
/** 功能同 content ，兼容 v1 */
11+
readonly formatter?: GeometryLabelCfg['content'];
1012
} & GeometryLabelCfg);

‎src/types/tooltip.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
import { TooltipOption } from '@antv/g2/lib/interface';
1+
import { TooltipCfg } from '@antv/g2/lib/interface';
22

3-
export type Tooltip = TooltipOption;
3+
export type Tooltip =
4+
| false
5+
| (TooltipCfg & {
6+
/** 兼容 v1 formatter **/
7+
readonly formatter?: TooltipCfg['customContent'];
8+
});

‎src/utils/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ export { log, invariant, LEVEL } from './invariant';
55
export { getContainerSize } from './dom';
66
export { findGeometry, getAllElements } from './geometry';
77
export { findViewById } from './view';
8+
export { transformLabel } from './label';
9+
export { transformTooltip } from './tooltip';

‎src/utils/label.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { isType } from '@antv/util';
2+
/**
3+
* 兼容 v1 label formatter
4+
* @param labelConfig
5+
*/
6+
export function transformLabel(labelConfig: any) {
7+
if (!isType(labelConfig, 'Object')) {
8+
return labelConfig;
9+
}
10+
const label = { ...labelConfig };
11+
if (label.formatter && !label.content) {
12+
label.content = label.formatter;
13+
}
14+
return label;
15+
}

‎src/utils/tooltip.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { isType } from '@antv/util';
2+
/**
3+
* 兼容 v1 tooltip formatter
4+
* @param tooltipConfig
5+
*/
6+
export function transformTooltip(tooltipConfig: any) {
7+
if (!isType(tooltipConfig, 'Object')) {
8+
return tooltipConfig;
9+
}
10+
const tooltip = { ...tooltipConfig };
11+
if (tooltip.formatter && !tooltip.customContent) {
12+
tooltip.customContent = tooltip.formatter;
13+
}
14+
return tooltip;
15+
}

0 commit comments

Comments
 (0)