Skip to content

Commit

Permalink
feat(tooltip): click to show line tooltip (#6330)
Browse files Browse the repository at this point in the history
  • Loading branch information
pearmini authored Jun 28, 2024
1 parent c2e7023 commit 08c66db
Show file tree
Hide file tree
Showing 11 changed files with 91 additions and 23 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="g2-tooltip"
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: 475.8211855528594px; top: 215.5857864376269px;"
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: 475.8211855528594px; top: 30px;"
>
<div
class="g2-tooltip-title"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="g2-tooltip"
style="pointer-events: none; position: absolute; visibility: hidden; 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: 475.8211855528594px; top: 215.5857864376269px;"
style="pointer-events: none; position: absolute; visibility: hidden; 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: 475.8211855528594px; top: 30px;"
>
<div
class="g2-tooltip-title"
Expand Down
3 changes: 2 additions & 1 deletion __tests__/plots/api/chart-emit-item-tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ export function chartEmitItemTooltip(context) {

finished.then((chart) =>
chart.emit('tooltip:show', {
data: { data: { sold: 115 }, offsetY: 0 },
offsetY: 0,
data: { data: { sold: 115 } },
}),
);

Expand Down
1 change: 1 addition & 0 deletions __tests__/plots/api/chart-emit-series-tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export function chartEmitSeriesTooltip(context) {

finished.then((chart) =>
chart.emit('tooltip:show', {
offsetY: 20,
data: { data: { x: new Date('2010-11-16') } },
}),
);
Expand Down
13 changes: 11 additions & 2 deletions site/docs/spec/interaction/tooltip.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,10 +142,10 @@ chart

chart.render().then((chart) =>
chart.emit('tooltip:show', {
offsetX: 10, // 相对于 plot 区域的位置
offsetX: 20, // 相对于 plot 区域的位置
data: {
data: { genre: 'Sports' }, // 会找从原始数据里面找到匹配的数据
offsetX: 10, // 相对于 plot 区域的位置
offsetX: 20, // 相对于 plot 区域的位置
},
}),
);
Expand All @@ -160,13 +160,22 @@ chart
.encode('x', 'date')
.encode('y', 'close');

// 根据数据拾取
chart.render((chart) =>
chart.emit('tooltip:show', {
data: {
data: { x: new Date('2010-11-16') },
},
}),
);

// 根据像素拾取
chart.render((chart) =>
chart.emit('tooltip:show', {
offsetX: 200,
offsetY: 200,
}),
);
```

隐藏的方式如下:
Expand Down
8 changes: 8 additions & 0 deletions site/examples/component/tooltip/demo/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8lsAQ5dCO-IAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "tooltip-click-line.ts",
"title": {
"zh": "点击系列图提示",
"en": "Click Series Tooltip"
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*CoxhR4vstEQAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "tooltip-style.ts",
"title": {
Expand Down
43 changes: 43 additions & 0 deletions site/examples/component/tooltip/demo/tooltip-click-line.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { Chart } from '@antv/g2';

function css(...styles) {
return styles
.map((obj) =>
Object.entries(obj)
.map(([k, v]) => k + ':' + v)
.join(';'),
)
.join(';');
}

const chart = new Chart({
container: 'container',
autoFit: true,
});

chart
.line()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
})
.encode('x', 'letter')
.encode('y', 'frequency')
.axis('y', { labelFormatter: '.0%' })
.interaction('tooltip', {
disableNative: true, // Disable pointerover and pointerout events.
bounding: {
x: -Infinity,
y: -Infinity,
width: Infinity,
height: Infinity,
},
mount: 'body',
});

chart.on('plot:click', ({ offsetX, target }) => {
chart.emit('tooltip:show', { offsetX, offsetY: 20, target });
});

chart.render();
6 changes: 2 additions & 4 deletions site/examples/component/tooltip/demo/tooltip-click.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,8 @@ chart

chart.on('element:click', ({ data }) =>
chart.emit('tooltip:show', {
data: {
data: data.data,
offsetY: 0,
},
data,
offsetY: 0,
}),
);

Expand Down
10 changes: 6 additions & 4 deletions site/examples/component/tooltip/demo/tooltip-render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,19 @@ chart.interaction('tooltip', {
>
Letter: ${title}
</h2>
${items.map(
(item) =>
`<div style="font-size: 16px; color: #666">name: ${item.name}
${items
.map(
(item) =>
`<div style="font-size: 16px; color: #666">name: ${item.name}
<br/>
value:
<div style="width:${
item.value * 1000
}px;height:10px;display:inline-block;background:${item.color}"></div>
${item.value}
</div>`,
)}
)
.join('')}
</div>
`,
});
Expand Down
24 changes: 14 additions & 10 deletions src/interaction/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -886,17 +886,21 @@ export function seriesTooltip(
destroyTooltip({ root, single });
};

const onTooltipShow = ({ nativeEvent, data }) => {
const onTooltipShow = ({ nativeEvent, data, offsetX, offsetY, ...rest }) => {
if (nativeEvent) return;
const { x } = data.data;
const { x: scaleX } = scale;
const x = data?.data?.x;
const scaleX = scale.x;
const x1 = scaleX.map(x);
const [x2, y2] = coordinate.map([x1, 0.5]);
const {
min: [minX, minY],
} = root.getRenderBounds();
// _x is a hint, to lookup for the right element if multiple element in the same abstractX.
update({ offsetX: x2 + minX, offsetY: y2 + minY, _x: x });
const rootBounds = root.getRenderBounds();
const minX = rootBounds.min[0];
const minY = rootBounds.min[1];
update({
...rest,
offsetX: offsetX !== undefined ? offsetX : minX + x2,
offsetY: offsetY !== undefined ? offsetY : minY + y2,
_x: x, // a hint, to lookup for the right element if multiple element in the same abstractX.
});
};

const onTooltipHide = () => {
Expand Down Expand Up @@ -1110,9 +1114,9 @@ export function tooltip(
}
};

const onTooltipShow = ({ nativeEvent, data: raw }) => {
const onTooltipShow = ({ nativeEvent, offsetX, offsetY, data: raw }) => {
if (nativeEvent) return;
const { data, offsetX, offsetY } = raw;
const { data } = raw;
const element = selectElementByData(elements, data, datum);
if (!element) return;
const bbox = element.getBBox();
Expand Down
2 changes: 2 additions & 0 deletions src/spec/interaction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,8 @@ export type TooltipInteraction = {
crosshairs?: boolean;
marker?: boolean;
groupName?: boolean;
disableNative?: boolean;
offset?: [number, number];
position?: TooltipStyleProps['position'];
bounding?: BBox;
mount?: string | HTMLElement;
Expand Down

0 comments on commit 08c66db

Please sign in to comment.