Skip to content

Commit

Permalink
feat: tooltip 支持自定义文本内容 (#1557)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zengyue
zengyue committed Aug 10, 2022
1 parent 7a8d478 commit 7406ce7
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 76 deletions.
158 changes: 83 additions & 75 deletions packages/f2/src/components/tooltip/tooltipView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { isFunction, find } from '@antv/util';
import createRef from '../../createRef';
import { find, isFunction } from '@antv/util';
import Component from '../../base/component';
import createRef from '../../createRef';
import { jsx } from '../../jsx';
import { Ref } from '../../types';

Expand Down Expand Up @@ -131,20 +131,14 @@ const RenderItemMarker = (props) => {

const RenderCrosshairs = (props) => {
const { records, coord, chart, crosshairsType, crosshairsStyle } = props;
const {
left: coordLeft,
top: coordTop,
right: coordRight,
bottom: coordBottom,
center
} = coord;
const { left: coordLeft, top: coordTop, right: coordRight, bottom: coordBottom, center } = coord;
const firstRecord = records[0];
const { x, y, origin, xField } = firstRecord;
if(coord.isPolar) {
if (coord.isPolar) {
// 极坐标下的辅助线
const xScale = chart.getScale(xField);
const ticks = xScale.getTicks();
const tick = find<any>(ticks, (tick) => origin[xField] === tick.tickValue);
const tick = find<any>(ticks, (tick) => origin[xField] === tick.tickValue);
const end = coord.convertPoint({
x: tick.value,
y: 1,
Expand Down Expand Up @@ -188,7 +182,7 @@ const RenderCrosshairs = (props) => {
) : null}
</group>
);
}
};

export default class TooltipView extends Component {
rootRef: Ref;
Expand Down Expand Up @@ -268,6 +262,7 @@ export default class TooltipView extends Component {
xTipBackground = defaultStyle.xTipBackground,
yTipBackground = defaultStyle.yTipBackground,
custom = false,
customText,
} = props;
const itemMarkerStyle = {
...customItemMarkerStyle,
Expand All @@ -290,9 +285,10 @@ export default class TooltipView extends Component {
}}
>
{/* 非自定义模式时显示的文本信息 */}
{!custom && (<group>
<group ref={this.rootRef} style={background} attrs={background}>
{/* {showTitle ? (
{!custom && (
<group>
<group ref={this.rootRef} style={background} attrs={background}>
{/* {showTitle ? (
<text
style={{
marginBottom: '6px',
Expand All @@ -306,68 +302,80 @@ export default class TooltipView extends Component {
}}
/>
) : null} */}
<group
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
padding: [0, 0, 0, '6px'],
}}
>
{records.map((record) => {
const { name, value } = record;
return (
<group
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: [0, '6px', 0, 0],
}}
>
{showItemMarker ? (
<marker
style={{
width: itemMarkerStyle.width,
marginRight: '6px',
}}
attrs={{
...itemMarkerStyle,
fill: record.color,
}}
/>
) : null}
<text
attrs={{
...defaultStyle.nameStyle,
...nameStyle,
text: value ? `${name}${joinString}` : name,
}}
/>
<text
attrs={{
...defaultStyle.valueStyle,
...valueStyle,
text: value,
<group
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
padding: [0, 0, 0, '6px'],
}}
>
{records.map((record) => {
const { name, value } = record;
return (
<group
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: [0, '6px', 0, 0],
}}
/>
</group>
);
})}
>
{showItemMarker ? (
<marker
style={{
width: itemMarkerStyle.width,
marginRight: '6px',
}}
attrs={{
...itemMarkerStyle,
fill: record.color,
}}
/>
) : null}
{customText && isFunction(customText) ? (
customText(record)
) : (
<group
style={{
display: 'flex',
flexDirection: 'row',
}}
>
<text
attrs={{
...defaultStyle.nameStyle,
...nameStyle,
text: value ? `${name}${joinString}` : name,
}}
/>
<text
attrs={{
...defaultStyle.valueStyle,
...valueStyle,
text: value,
}}
/>
</group>
)}
</group>
);
})}
</group>
</group>
<polygon
ref={this.arrowRef}
attrs={{
points: [
{ x: x - arrowWidth, y: coordTop },
{ x: x + arrowWidth, y: coordTop },
{ x: x, y: coordTop + arrowWidth },
],
fill: background.fill,
}}
/>
</group>
<polygon
ref={this.arrowRef}
attrs={{
points: [
{ x: x - arrowWidth, y: coordTop },
{ x: x + arrowWidth, y: coordTop },
{ x: x, y: coordTop + arrowWidth },
],
fill: background.fill,
}}
/>
</group>)}
)}
{showTooltipMarker ? (
<RenderItemMarker coord={coord} context={context} records={records} />
) : null}
Expand All @@ -378,7 +386,7 @@ export default class TooltipView extends Component {
coord={coord}
records={records}
crosshairsType={crosshairsType}
crosshairsStyle={{...defaultStyle.crosshairsStyle, ...crosshairsStyle}}
crosshairsStyle={{ ...defaultStyle.crosshairsStyle, ...crosshairsStyle }}
/>
) : null}
{/* 辅助点 */}
Expand Down
Binary file added ...tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-自定义文本内容-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 36 additions & 1 deletion packages/f2/test/components/tooltip/tooltip.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { jsx, Canvas, Chart, Axis, Line, Interval, Tooltip, Legend } from '../../../src';
import { Axis, Canvas, Chart, Interval, jsx, Legend, Tooltip } from '../../../src';
import { createContext, delay, gestureSimulator } from '../../util';

const data = [
Expand Down Expand Up @@ -336,4 +336,39 @@ describe('tooltip', () => {
await delay(500);
expect(context).toMatchImageSnapshot();
});

it('Tooltip 自定义文本内容', async () => {
const context = createContext('Tooltip 自定义文本内容');
const { props } = (
<Canvas context={context} pixelRatio={1}>
<Chart data={data}>
<Axis field="genre" />
<Axis field="sold" />
<Interval x="genre" y="sold" color="genre" />
<Tooltip
alwaysShow={true}
showTooltipMarker={true}
defaultItem={data[0]}
customText={(record) => {
const { origin } = record;
return (
<text
attrs={{
fill: '#fff',
text: `名称：${origin.genre}`,
}}
/>
);
}}
/>
</Chart>
</Canvas>
);

const canvas = new Canvas(props);
canvas.render();

await delay(1000);
expect(context).toMatchImageSnapshot();
});
});

0 comments on commit 7406ce7

Please sign in to comment.