From f837057dc5d8f6dd0b60158ded7b238034459320 Mon Sep 17 00:00:00 2001
From: MiniPear <subairui@icloud.com>
Date: Mon, 27 Mar 2023 13:52:02 +0800
Subject: [PATCH] fix(tooltip): support NaN data in transpose (#4833)

---
 .../step0.html                                | 16 +++++++
 .../aapl-area-missing-data-transpose.ts       | 44 +++++++++++++++++++
 __tests__/plots/tooltip/index.ts              |  1 +
 src/interaction/tooltip.ts                    |  2 +-
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html
 create mode 100644 __tests__/plots/tooltip/aapl-area-missing-data-transpose.ts

diff --git a/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html b/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html
new file mode 100644
index 0000000000..5decce0b1d
--- /dev/null
+++ b/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html
@@ -0,0 +1,16 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="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: Roboto-Regular; left: 110px; top: 98px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Thu, 10 Jan 2008 00:00:00 GMT
+  </div>
+  <ul
+    class="tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  />
+</div>;
diff --git a/__tests__/plots/tooltip/aapl-area-missing-data-transpose.ts b/__tests__/plots/tooltip/aapl-area-missing-data-transpose.ts
new file mode 100644
index 0000000000..cb4d8d0214
--- /dev/null
+++ b/__tests__/plots/tooltip/aapl-area-missing-data-transpose.ts
@@ -0,0 +1,44 @@
+import { G2Spec } from '../../../src';
+import { seriesTooltipSteps } from './utils';
+
+export function aaplAreaMissingDataTranspose(): G2Spec {
+  return {
+    width: 800,
+    type: 'area',
+    coordinate: { transform: [{ type: 'transpose' }] },
+    data: {
+      type: 'fetch',
+      value: 'data/aapl.csv',
+      transform: [
+        {
+          type: 'map',
+          callback: (d) => ({
+            ...d,
+            close: d.date.getUTCMonth() <= 3 ? NaN : d.close,
+          }),
+        },
+      ],
+    },
+    encode: {
+      x: 'date',
+      y: 'close',
+    },
+    scale: {
+      x: { type: 'time' },
+    },
+    style: {
+      connect: true,
+      connectFill: 'grey',
+      connectFillOpacity: 0.15,
+    },
+    tooltip: {
+      title: (d) => new Date(d.date).toUTCString(),
+    },
+  };
+}
+
+aaplAreaMissingDataTranspose.maxError = 125;
+
+aaplAreaMissingDataTranspose.steps = seriesTooltipSteps([100, 88]);
+
+aaplAreaMissingDataTranspose.only = true;
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
index d4d382fc25..0baf98854f 100644
--- a/__tests__/plots/tooltip/index.ts
+++ b/__tests__/plots/tooltip/index.ts
@@ -56,3 +56,4 @@ export { scoreByItemAreaRadar } from './score-by-item-area-radar';
 export { profitIntervalLegendFilterOrdinal } from './profit-interval-legend-filter-ordinal';
 export { aaplLineSliderFilter } from './appl-line-slider-filter';
 export { aaplLineAreaBasicSample } from './aapl-line-area-basic-sample';
+export { aaplAreaMissingDataTranspose } from './aapl-area-missing-data-transpose';
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
index 260fee7052..e62299f348 100644
--- a/src/interaction/tooltip.ts
+++ b/src/interaction/tooltip.ts
@@ -388,7 +388,7 @@ export function seriesTooltip(
           selectedSeriesElements.push(element);
           const d = seriesData(element, index);
           const { x, y } = d;
-          const p = coordinate.map([x + offsetX, y]);
+          const p = coordinate.map([(x || 0) + offsetX, y || 0]);
           selectedSeriesData.push([d, p] as const);
         }
       }