From 62f5e2795794427bbb905758f368adef56ecde8e Mon Sep 17 00:00:00 2001 From: zqlu Date: Mon, 13 Apr 2020 14:12:57 +0800 Subject: [PATCH] fix: do not set tooltip position when follow is false --- src/chart/controller/tooltip.ts | 8 +++++-- tests/unit/chart/controller/tooltip-spec.ts | 26 +++++++++++++-------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/chart/controller/tooltip.ts b/src/chart/controller/tooltip.ts index e80fe4a9c3..9b923f11ac 100644 --- a/src/chart/controller/tooltip.ts +++ b/src/chart/controller/tooltip.ts @@ -102,7 +102,7 @@ export default class Tooltip extends Controller { this.tooltip.update(mix({}, cfg, { items, title, - }, follow ? point : dataPoint)); + }, follow ? point : {})); this.tooltip.show(); } @@ -112,7 +112,7 @@ export default class Tooltip extends Controller { } } else { // 内容未发生变化,则更新位置 - if (this.tooltip) { + if (this.tooltip && follow) { const newPoint = follow ? point : dataPoint; this.tooltip.update(newPoint); this.tooltip.show(); // tooltip 有可能被隐藏,需要保证显示状态 @@ -134,6 +134,10 @@ export default class Tooltip extends Controller { } public hideTooltip() { + const { follow } = this.getTooltipCfg(); + if (!follow) { + return; + } // hide the tooltipMarkers const tooltipMarkersGroup = this.tooltipMarkersGroup; if (tooltipMarkersGroup) { diff --git a/tests/unit/chart/controller/tooltip-spec.ts b/tests/unit/chart/controller/tooltip-spec.ts index 608c5fc249..c50175a83a 100644 --- a/tests/unit/chart/controller/tooltip-spec.ts +++ b/tests/unit/chart/controller/tooltip-spec.ts @@ -20,7 +20,7 @@ describe('Tooltip', () => { chart.axis(false); chart.legend(false); chart.tooltip({ - follow: false, + follow: true, shared: true, showCrosshairs: true, showMarkers: true, @@ -54,9 +54,9 @@ describe('Tooltip', () => { // @ts-ignore expect(tooltip.tooltip.get('visible')).toBe(true); // @ts-ignore - expect(tooltip.tooltip.get('x')).toBe(items[0].x); + expect(tooltip.tooltip.get('x')).toBe(point.x); // @ts-ignore - expect(tooltip.tooltip.get('y')).toBe(items[0].y); + expect(tooltip.tooltip.get('y')).toBe(point.y); // @ts-ignore const markerGroup = tooltip.tooltipMarkersGroup; @@ -72,7 +72,9 @@ describe('Tooltip', () => { // @ts-ignore expect(tooltipDom.style.boxShadow).toBe(''); // @ts-ignore - expect(tooltipDom.style.backgroundColor).toBe(chart.getTheme().components.tooltip.domStyles['g2-tooltip'].backgroundColor); + expect(tooltipDom.style.backgroundColor).toBe( + chart.getTheme().components.tooltip.domStyles['g2-tooltip'].backgroundColor + ); }); it('tooltip change', () => { @@ -88,9 +90,9 @@ describe('Tooltip', () => { const tooltip = chart.getController('tooltip'); // @ts-ignore - expect(tooltip.tooltip.get('x')).toBe(tooltip.items[0].x); + expect(tooltip.tooltip.get('x')).toBe(point.x + 10); // @ts-ignore - expect(tooltip.tooltip.get('y')).toBe(tooltip.items[0].y); + expect(tooltip.tooltip.get('y')).toBe(point.y + 20); }); it('hideTooltip', () => { @@ -448,7 +450,7 @@ describe('showContent', () => { line: { style: { lineDash: [2], - } + }, }, text: { position: 'end', @@ -456,12 +458,16 @@ describe('showContent', () => { autoRotate: true, style: { fontSize: 14, - } + }, }, - textBackground: null + textBackground: null, }, }); - chart.interval().position('year*population').color('year').size(100); + chart + .interval() + .position('year*population') + .color('year') + .size(100); chart.render(); it('showContent: false', () => {