Skip to content

Commit 73daf22

Browse files
moayuisuda林舸
moayuisuda
and
林舸
authored
fix: items callback's priority (#6630)
Co-authored-by: 林舸 <[email protected]>
1 parent 7000e20 commit 73daf22

File tree

6 files changed

+124
-12
lines changed

6 files changed

+124
-12
lines changed

‎__tests__/integration/snapshots/tooltip/indices-line-items/step0.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@
2828
/>
2929
<span
3030
class="g2-tooltip-list-item-name-label"
31-
title="AMZN"
31+
title="Close"
3232
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
3333
>
34-
AMZN
34+
Close
3535
</span>
3636
</span>
3737
<span
@@ -57,10 +57,10 @@
5757
/>
5858
<span
5959
class="g2-tooltip-list-item-name-label"
60-
title="MSFT"
60+
title="Close"
6161
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
6262
>
63-
MSFT
63+
Close
6464
</span>
6565
</span>
6666
<span
@@ -86,10 +86,10 @@
8686
/>
8787
<span
8888
class="g2-tooltip-list-item-name-label"
89-
title="AAPL"
89+
title="Close"
9090
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
9191
>
92-
AAPL
92+
Close
9393
</span>
9494
</span>
9595
<span
@@ -115,10 +115,10 @@
115115
/>
116116
<span
117117
class="g2-tooltip-list-item-name-label"
118-
title="GOOG"
118+
title="Close"
119119
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
120120
>
121-
GOOG
121+
Close
122122
</span>
123123
</span>
124124
<span
@@ -144,10 +144,10 @@
144144
/>
145145
<span
146146
class="g2-tooltip-list-item-name-label"
147-
title="IBM"
147+
title="Close"
148148
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
149149
>
150-
IBM
150+
Close
151151
</span>
152152
</span>
153153
<span

‎__tests__/integration/snapshots/tooltip/items-callback/step0.html

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<div
2+
xmlns="http://www.w3.org/1999/xhtml"
3+
class="g2-tooltip"
4+
style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: sans-serif; left: 355.9599981689453px; top: 292.3335px;"
5+
>
6+
<div
7+
class="g2-tooltip-title"
8+
style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
9+
>
10+
10:15
11+
</div>
12+
<ul
13+
class="g2-tooltip-list"
14+
style="margin: 0px; list-style-type: none; padding: 0px;"
15+
>
16+
<li
17+
class="g2-tooltip-list-item"
18+
data-index="0"
19+
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
20+
>
21+
<span
22+
class="g2-tooltip-list-item-name"
23+
style="display: flex; align-items: center; max-width: 216px;"
24+
>
25+
<span
26+
class="g2-tooltip-list-item-marker"
27+
style="background: rgb(0, 201, 201); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
28+
/>
29+
<span
30+
class="g2-tooltip-list-item-name-label"
31+
title="lineName"
32+
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
33+
>
34+
lineName
35+
</span>
36+
</span>
37+
<span
38+
class="g2-tooltip-list-item-value"
39+
title="lineValue"
40+
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
41+
>
42+
lineValue
43+
</span>
44+
</li>
45+
<li
46+
class="g2-tooltip-list-item"
47+
data-index="1"
48+
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
49+
>
50+
<span
51+
class="g2-tooltip-list-item-name"
52+
style="display: flex; align-items: center; max-width: 216px;"
53+
>
54+
<span
55+
class="g2-tooltip-list-item-marker"
56+
style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
57+
/>
58+
<span
59+
class="g2-tooltip-list-item-name-label"
60+
title="lineName"
61+
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
62+
>
63+
lineName
64+
</span>
65+
</span>
66+
<span
67+
class="g2-tooltip-list-item-value"
68+
title="lineValue"
69+
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
70+
>
71+
lineValue
72+
</span>
73+
</li>
74+
</ul>
75+
</div>

‎__tests__/plots/tooltip/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,4 @@ export { mockDualBarShareTooltip } from './mock-dual-bar-share-tooltip';
8080
export { alphabetLineEnterable } from './alphabet-line-enterable';
8181
export { mockGroupInterval } from './mock-group-interval';
8282
export { temperatureLineMarker } from './temperatures-line-marker';
83+
export { itemsCallback } from './items-callback';

‎__tests__/plots/tooltip/items-callback.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { G2Spec } from '../../../src';
2+
import { seriesTooltipSteps, tooltipSteps } from './utils';
3+
4+
export function itemsCallback(): G2Spec {
5+
return {
6+
data: [
7+
{ time: '10:10', waiting: 2, people: 2, s: '0' },
8+
{ time: '10:10', waiting: 4, people: 5, s: '1' },
9+
{ time: '10:15', waiting: 6, people: 2, s: '0' },
10+
{ time: '10:15', waiting: 8, people: 8, s: '1' },
11+
],
12+
type: 'line',
13+
encode: { x: 'time', y: 'waiting', series: 's', color: 's' },
14+
tooltip: {
15+
items: [
16+
(d, index, data, column) => {
17+
return {
18+
name: 'lineName',
19+
value: 'lineValue',
20+
};
21+
},
22+
],
23+
},
24+
};
25+
}
26+
27+
itemsCallback.steps = tooltipSteps(0);

‎src/interaction/tooltip.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { isTranspose, isPolar } from '../utils/coordinate';
88
import { angle, sub, dist } from '../utils/vector';
99
import { invert } from '../utils/scale';
1010
import { BBox } from '../runtime';
11+
import { CALLBACK_ITEM_SYMBOL } from '../runtime/transform';
1112
import {
1213
selectG2Elements,
1314
createXKey,
@@ -279,7 +280,12 @@ function groupItems(
279280
return definedItems.map(
280281
({ color = itemColorOf(element) || theme.color, name, ...item }) => {
281282
const groupName = groupNameOf(scale, datum);
282-
const name1 = useGroupName ? groupName || name : name || groupName;
283+
// callback's priority is higher than groupName.
284+
const name1 =
285+
useGroupName && !(CALLBACK_ITEM_SYMBOL in item)
286+
? groupName || name
287+
: name || groupName;
288+
283289
return {
284290
...item,
285291
color,

‎src/runtime/transform.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { Data, DataComponent } from './types/data';
1515
import { G2Mark, G2DataOptions, G2Context } from './types/options';
1616
import { isPosition } from './scale';
1717

18+
export const CALLBACK_ITEM_SYMBOL = Symbol('CALLBACK_ITEM');
19+
1820
// @todo Add more defaults.
1921
export function applyDefaults(
2022
I: number[],
@@ -192,7 +194,8 @@ export function extractTooltip(
192194
const values = [];
193195
for (const i of I) {
194196
const v = item(data[i], i, data, encode);
195-
if (isStrictObject(v)) values[i] = v;
197+
if (isStrictObject(v))
198+
values[i] = { ...v, [CALLBACK_ITEM_SYMBOL]: true };
196199
else values[i] = { value: v };
197200
}
198201
return values;

0 commit comments

Comments
 (0)