From 327a2091619bdb34e974bfca03b22c155be78624 Mon Sep 17 00:00:00 2001 From: MiniPear Date: Thu, 16 Nov 2023 11:46:48 +0800 Subject: [PATCH] fix(tooltip): overflow --- .../api-chart-emit-series-tooltip.spec.ts | 2 +- .../api/chart-emit-series-tooltip/step0.html | 8 +- .../api/chart-emit-series-tooltip/step1.html | 8 +- .../interaction/gdp2-point-fisheye/step0.svg | 240 +++++++++--------- .../indices-line-chart-index-series/step0.svg | 46 ++-- .../step0.svg | 2 +- .../points-point-regression-quad/step0.svg | 2 +- .../aapl-line-date-default-format/step0.html | 6 +- .../tooltip/aapl-line-overflow/step0.html | 46 ++++ .../snapshots/tooltip/aapl-line/step0.html | 6 +- .../forecast-range-area-line/step0.html | 16 +- .../tooltip/indices-line-custom/step0.html | 12 +- .../tooltip/indices-line-custom/step1.html | 12 +- .../tooltip/indices-line-items/step0.html | 10 +- .../tooltip/indices-line-reverse/step0.html | 22 +- .../tooltip/indices-line-reverse/step1.html | 22 +- .../tooltip/indices-line-series/step0.html | 22 +- .../snapshots/tooltip/indices-line/step0.html | 22 +- .../temperature2-line-threshold/step0.html | 6 +- .../indices-line-chart-index-series.ts | 1 + __tests__/plots/tooltip/aapl-line-overflow.ts | 35 +++ __tests__/plots/tooltip/index.ts | 1 + src/interaction/tooltip.ts | 3 +- src/interaction/utils.ts | 8 +- 24 files changed, 324 insertions(+), 234 deletions(-) create mode 100644 __tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html create mode 100644 __tests__/plots/tooltip/aapl-line-overflow.ts diff --git a/__tests__/integration/api-chart-emit-series-tooltip.spec.ts b/__tests__/integration/api-chart-emit-series-tooltip.spec.ts index 4231aa214e..2637954ab3 100644 --- a/__tests__/integration/api-chart-emit-series-tooltip.spec.ts +++ b/__tests__/integration/api-chart-emit-series-tooltip.spec.ts @@ -39,7 +39,7 @@ describe('chart.emit', () => { const [tooltipShowed, resolveShow] = createPromise(); chart.on('tooltip:show', (event) => { const { x } = event.data.data; - expect(x.toUTCString()).toBe('Sat, 23 Jun 2007 12:58:35 GMT'); + expect(x.toUTCString()).toBe('Mon, 18 Jun 2007 17:47:35 GMT'); resolveShow(); }); dispatchPlotEvent(canvas, 'pointermove', { diff --git a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html index 68fd3548d8..83a5092c55 100644 --- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html +++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html @@ -1,13 +1,13 @@
- Tue, 16 Nov 2010 00:00:00 GMT + Thu, 11 Nov 2010 00:00:00 GMT
diff --git a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html index 4cff9d7d07..93ba512e4f 100644 --- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html +++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html @@ -1,13 +1,13 @@ diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html new file mode 100644 index 0000000000..af8688fed0 --- /dev/null +++ b/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html @@ -0,0 +1,46 @@ +
+
+ Thu, 22 May 2008 00:00:00 GMT +
+
    +
  • + + + + close + + + + 181.17 + +
    • +
+
\ No newline at end of file diff --git a/__tests__/integration/snapshots/tooltip/aapl-line/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line/step0.html index 721b676765..af8688fed0 100644 --- a/__tests__/integration/snapshots/tooltip/aapl-line/step0.html +++ b/__tests__/integration/snapshots/tooltip/aapl-line/step0.html @@ -7,7 +7,7 @@ class="g2-tooltip-title" style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" > - Wed, 28 May 2008 00:00:00 GMT + Thu, 22 May 2008 00:00:00 GMT
diff --git a/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html b/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html index a22b545c6b..3f0541361d 100644 --- a/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html +++ b/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html @@ -30,10 +30,10 @@ - 0.89441218858635 + 0.503192650078109
  • - 1.30182293816554 + 0.372433776442163
  • - -0.0632578758817437 + -0.274001486727037
  • - 0.790173258069052 + 0.790086619458202
    • diff --git a/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html index 9facf5b7eb..b1d61574bd 100644 --- a/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html +++ b/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html @@ -5,14 +5,14 @@ >
    -

    2014-04-22 08:00:00

    +

    2014-04-17 08:00:00

    (200, 300)
      -
    • AMZN: 1.2450190713009308
      • -
    • MSFT: 1.2107176267247237
      • -
    • AAPL: 1.169239562420743
      • -
    • GOOG: 1.2201174905986216
      • -
    • IBM: 0.9490294515284761
      • +
    • AMZN: 1.2283467230597436
      • +
    • MSFT: 1.2113230157833188
      • +
    • AAPL: 1.1543739299655218
      • +
    • GOOG: 1.2230603917941922
      • +
    • IBM: 0.938459989438139
    diff --git a/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html index 61ac739219..aff2ee34cc 100644 --- a/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html +++ b/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html @@ -5,14 +5,14 @@ >
    -

    2015-01-02 08:00:00

    +

    2014-12-29 08:00:00

    (300, 300)
      -
    • AMZN: 1.1663830378290787
      • -
    • MSFT: 1.415682694994935
      • -
    • AAPL: 1.682961649163845
      • -
    • GOOG: 1.197298000956521
      • -
    • IBM: 0.8004148624467089
      • +
    • AMZN: 1.1796907383580681
      • +
    • MSFT: 1.4365728863630909
      • +
    • AAPL: 1.7534635020687204
      • +
    • GOOG: 1.209896794182093
      • +
    • IBM: 0.7927593925383544
    diff --git a/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html index 3ee9e35d39..92c2724d77 100644 --- a/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html +++ b/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html @@ -7,7 +7,7 @@ class="g2-tooltip-title" style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" > - Thu, 17 Apr 2014 00:00:00 GMT + Mon, 14 Apr 2014 00:00:00 GMT diff --git a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html index 93baa346c6..31544220c9 100644 --- a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html +++ b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html @@ -7,7 +7,7 @@ class="g2-tooltip-title" style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" > - Fri, 14 Jun 2013 00:00:00 GMT + Tue, 11 Jun 2013 00:00:00 GMT diff --git a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html index 8005a4dc2c..4f7bfa42b6 100644 --- a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html +++ b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html @@ -7,7 +7,7 @@ class="g2-tooltip-title" style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" > - Fri, 29 Apr 2016 00:00:00 GMT + Tue, 26 Apr 2016 00:00:00 GMT diff --git a/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html index 4fb8c10417..df762689a9 100644 --- a/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html +++ b/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html @@ -7,7 +7,7 @@ class="g2-tooltip-title" style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" > - Fri, 06 Sep 2013 00:00:00 GMT + Tue, 03 Sep 2013 00:00:00 GMT diff --git a/__tests__/integration/snapshots/tooltip/indices-line/step0.html b/__tests__/integration/snapshots/tooltip/indices-line/step0.html index 116b730483..5f3ee34ebe 100644 --- a/__tests__/integration/snapshots/tooltip/indices-line/step0.html +++ b/__tests__/integration/snapshots/tooltip/indices-line/step0.html @@ -7,7 +7,7 @@ class="g2-tooltip-title" style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" > - 2014-04-22 08:00:00 + 2014-04-17 08:00:00 diff --git a/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html b/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html index c725b8ccea..e41d132495 100644 --- a/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html +++ b/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html @@ -7,7 +7,7 @@ class="g2-tooltip-title" style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" > - Mon, 21 Nov 2011 00:00:00 GMT + Sun, 20 Nov 2011 00:00:00 GMT diff --git a/__tests__/plots/interaction/indices-line-chart-index-series.ts b/__tests__/plots/interaction/indices-line-chart-index-series.ts index dc08f5671a..2ef5936133 100644 --- a/__tests__/plots/interaction/indices-line-chart-index-series.ts +++ b/__tests__/plots/interaction/indices-line-chart-index-series.ts @@ -26,6 +26,7 @@ export async function indicesLineChartIndexSeries(): Promise { }, ], interaction: { + tooltip: false, chartIndex: { ruleStroke: '#aaa', labelDx: 5, diff --git a/__tests__/plots/tooltip/aapl-line-overflow.ts b/__tests__/plots/tooltip/aapl-line-overflow.ts new file mode 100644 index 0000000000..3ef65a85ed --- /dev/null +++ b/__tests__/plots/tooltip/aapl-line-overflow.ts @@ -0,0 +1,35 @@ +import { G2Spec } from '../../../src'; +import { seriesTooltipSteps } from './utils'; + +export function aaplLineOverflow(): G2Spec { + return { + type: 'view', + children: [ + { + type: 'line', + data: { + type: 'fetch', + value: 'data/aapl.csv', + }, + encode: { + x: 'date', + y: 'close', + }, + tooltip: { + title: (d) => new Date(d.date).toUTCString(), + }, + }, + { + type: 'text', + style: { + x: 0, + y: 0, + text: 'hello world', + textAlign: 'end', + }, + }, + ], + }; +} + +aaplLineOverflow.steps = seriesTooltipSteps([200, 300]); diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts index 50ed27a899..95c5244784 100644 --- a/__tests__/plots/tooltip/index.ts +++ b/__tests__/plots/tooltip/index.ts @@ -68,3 +68,4 @@ export { mockIntervalShared } from './mock-interval-shared'; export { stateAgesIntervalCustomStyle } from './stateages-interval-custom-style'; export { mockTooltipClosest } from './mock-tooltip-closest'; export { stateAgesIntervalScrollbar } from './stateages-interval-scrollbar'; +export { aaplLineOverflow } from './aapl-line-overflow'; diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index a00154f8d9..ff2861dbd3 100644 --- a/src/interaction/tooltip.ts +++ b/src/interaction/tooltip.ts @@ -16,6 +16,7 @@ import { selectFacetG2Elements, createDatumof, selectElementByData, + bboxOf, } from './utils'; import { dataOf } from './event'; @@ -563,7 +564,7 @@ export function seriesTooltip( (event) => { const mouse = mousePosition(root, event); if (!mouse) return; - const bbox = root.getRenderBounds(); + const bbox = bboxOf(root); const x = bbox.min[0]; const y = bbox.min[1]; const focus = [mouse[0] - startX, mouse[1] - startY]; diff --git a/src/interaction/utils.ts b/src/interaction/utils.ts index b473664762..3075990750 100644 --- a/src/interaction/utils.ts +++ b/src/interaction/utils.ts @@ -42,9 +42,15 @@ export function selectPlotArea(root: DisplayObject): DisplayObject { return select(root).select(`.${PLOT_CLASS_NAME}`).node(); } +export function bboxOf(node) { + if (node.nodeName !== 'rect') return node.getRenderBounds(); + const { x, y, width, height } = node.style; + return { min: [x, y], max: [x + width, y + height] }; +} + export function mousePosition(target, event) { const { offsetX, offsetY } = event; - const bbox = target.getRenderBounds(); + const bbox = bboxOf(target); const { min: [x, y], max: [x1, y1],