fix(tooltip): sample (#4832)

__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample/step0.html

@@ -0,0 +1,46 @@
+<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: 510px; top: 210px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Fri, 06 May 2011 00:00:00 GMT
+  </div>
+  <ul
+    class="tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="346.66"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        346.66
+      </span>
+    </li>
+  </ul>
+</div>;

__tests__/plots/tooltip/aapl-line-area-basic-sample.ts

@@ -0,0 +1,38 @@
+import { G2Spec } from '../../../src';
+import { seriesTooltipSteps } from './utils';
+
+export function aaplLineAreaBasicSample(): G2Spec {
+  return {
+    type: 'view',
+    data: {
+      type: 'fetch',
+      value: 'data/aapl.csv',
+    },
+    children: [
+      {
+        type: 'area',
+        encode: {
+          x: 'date',
+          y: 'close',
+        },
+        transform: [
+          {
+            type: 'sample',
+            thresholds: 100,
+            strategy: 'lttb',
+          },
+        ],
+        style: {
+          fillOpacity: 0.5,
+        },
+        tooltip: {
+          title: (d) => new Date(d.date).toUTCString(),
+        },
+      },
+    ],
+  };
+}
+
+aaplLineAreaBasicSample.maxError = 100;
+
+aaplLineAreaBasicSample.steps = seriesTooltipSteps([500, 200]);

__tests__/plots/tooltip/index.ts

@@ -55,3 +55,4 @@ export { forecastRangeAreaLineTranspose } from './forecast-range-area-line-trans
 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';

src/transform/maybeTitle.ts

@@ -25,11 +25,15 @@ export const MaybeTitle: TC<MaybeTitleOptions> = (options = {}) => {
       .filter(([T]) => T)
       .map((d) => d[0]);
     if (titles.length === 0) return [I, mark];
+    const T = [];
+    for (const i of I) {
+      T[i] = { value: titles.map((t) => t[i]).join(', ') };
+    }
     return [
       I,
       deepMix({}, mark, {
         tooltip: {
-          title: I.map((i) => ({ value: titles.map((t) => t[i]).join(', ') })),
+          title: T,
         },
       }),
     ];