insomni-plot 0.1.0-alpha.0

package/src/grammar/interactions/series-snap.test.ts

@@ -0,0 +1,214 @@
+import { describe, expect, test } from "vite-plus/test";
+
+import type { CompiledHitTest } from "../geoms/types.ts";
+import { collectLayerGroups, computeSnap, type SnapGroup } from "./series-snap.ts";
+
+interface Row {
+  t: number;
+  v: number;
+  series?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Fixture builders (mirror series-readout.test.ts style)
+// ---------------------------------------------------------------------------
+
+function singleSeriesHit(data: readonly Row[], xs: number[], label?: string): CompiledHitTest<Row> {
+  const positions = new Float32Array(xs.length * 2);
+  for (let i = 0; i < xs.length; i++) {
+    positions[i * 2] = xs[i]!;
+    positions[i * 2 + 1] = 50;
+  }
+  return {
+    geomKind: "line",
+    label,
+    positions,
+    dataIndex: Int32Array.from(xs.map((_, i) => i)),
+    pickRadius: 5,
+    channels: {
+      x: { kind: "column", column: "t", fn: (d) => d.t },
+      y: { kind: "column", column: "v", fn: (d) => d.v },
+    },
+    data,
+  };
+}
+
+function ySpreadHit(data: readonly Row[], ys: number[]): CompiledHitTest<Row> {
+  const positions = new Float32Array(ys.length * 2);
+  for (let i = 0; i < ys.length; i++) {
+    positions[i * 2] = 100; // all share same x
+    positions[i * 2 + 1] = ys[i]!;
+  }
+  return {
+    geomKind: "point",
+    positions,
+    dataIndex: Int32Array.from(ys.map((_, i) => i)),
+    pickRadius: 5,
+    channels: {
+      x: { kind: "column", column: "t", fn: (d) => d.t },
+      y: { kind: "column", column: "v", fn: (d) => d.v },
+    },
+    data,
+  };
+}
+
+function stackedSeriesHit(
+  data: readonly Row[],
+  xs: number[],
+  seriesKeys: string[],
+): CompiledHitTest<Row> {
+  const positions = new Float32Array(xs.length * 2);
+  for (let i = 0; i < xs.length; i++) {
+    positions[i * 2] = xs[i]!;
+    positions[i * 2 + 1] = 50;
+  }
+  return {
+    geomKind: "bar",
+    positions,
+    dataIndex: Int32Array.from(xs.map((_, i) => i)),
+    seriesKey: seriesKeys,
+    pickRadius: 5,
+    channels: {
+      x: { kind: "column", column: "t", fn: (d) => d.t },
+      y: { kind: "column", column: "v", fn: (d) => d.v },
+    },
+    data,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Case 1: axis:"y" snaps on positions[i*2+1]
+// ---------------------------------------------------------------------------
+
+describe("collectLayerGroups axis:y", () => {
+  test("snaps on y position when axis is 'y'", () => {
+    // All share x=100, y differs: [10, 20, 30], v = [1, 2, 3]
+    const data: Row[] = [
+      { t: 100, v: 1 },
+      { t: 100, v: 2 },
+      { t: 100, v: 3 },
+    ];
+    const hit = ySpreadHit(data, [10, 20, 30]);
+    const out: SnapGroup[] = [];
+    collectLayerGroups(hit, 0, 22, "nearest-x", out, "y");
+    expect(out).toHaveLength(1);
+    // y=20 is closest to cursor=22 (dist 2 vs dist 8 for y=30, dist 12 for y=10)
+    expect(out[0]!.index).toBe(1);
+    expect(out[0]!.yValue).toBe(2);
+  });
+
+  test("default axis (no 6th arg) snaps on x position", () => {
+    // Normal x-spread: positions at x=[10,20,30], y all=50
+    const data: Row[] = [
+      { t: 10, v: 1 },
+      { t: 20, v: 2 },
+      { t: 30, v: 3 },
+    ];
+    const hit = singleSeriesHit(data, [10, 20, 30], "weight");
+    const out: SnapGroup[] = [];
+    collectLayerGroups(hit, 0, 22, "nearest-x", out);
+    expect(out).toHaveLength(1);
+    // x=20 is closest to cursor=22
+    expect(out[0]!.index).toBe(1);
+    expect(out[0]!.yValue).toBe(2);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Case 2: stacked seriesKey splits into N groups
+// ---------------------------------------------------------------------------
+
+describe("collectLayerGroups stacked seriesKey", () => {
+  test("splits hits with seriesKey into separate groups", () => {
+    // 4 points: x=[10,10,20,20], all y=50
+    // seriesKeys: ["directRad","diffuseRad","directRad","diffuseRad"]
+    // v values:   [100, 40, 110, 45]
+    const data: Row[] = [
+      { t: 10, v: 100 },
+      { t: 10, v: 40 },
+      { t: 20, v: 110 },
+      { t: 20, v: 45 },
+    ];
+    const hit = stackedSeriesHit(
+      data,
+      [10, 10, 20, 20],
+      ["directRad", "diffuseRad", "directRad", "diffuseRad"],
+    );
+    const out: SnapGroup[] = [];
+    collectLayerGroups(hit, 0, 12, "nearest-x", out);
+
+    expect(out).toHaveLength(2);
+
+    const byId = new Map(out.map((g) => [g.id, g]));
+    expect(byId.has("0::directRad")).toBe(true);
+    expect(byId.has("0::diffuseRad")).toBe(true);
+
+    // Nearest x to 12 is x=10 (dist 2) vs x=20 (dist 8) — so picks index 0/1
+    const direct = byId.get("0::directRad")!;
+    expect(direct.seriesKey).toBe("directRad");
+    expect(direct.yValue).toBe(100); // index 0, v=100 at x=10
+
+    const diffuse = byId.get("0::diffuseRad")!;
+    expect(diffuse.seriesKey).toBe("diffuseRad");
+    expect(diffuse.yValue).toBe(40); // index 1, v=40 at x=10
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Case 3: computeSnap nearest ranking + columnValue
+// ---------------------------------------------------------------------------
+
+describe("computeSnap", () => {
+  test("nearest-x ranking: activeId is the group closest to cursor, columnValue is its xValue", () => {
+    // Two single-series hits at x=[10,20,30]
+    const data1: Row[] = [
+      { t: 10, v: 1 },
+      { t: 20, v: 2 },
+      { t: 30, v: 3 },
+    ];
+    const data2: Row[] = [
+      { t: 10, v: 10 },
+      { t: 20, v: 20 },
+      { t: 30, v: 30 },
+    ];
+    const hit1 = singleSeriesHit(data1, [10, 20, 30], "series1");
+    const hit2 = singleSeriesHit(data2, [10, 20, 30], "series2");
+
+    const result = computeSnap({
+      hits: [hit1 as CompiledHitTest<unknown>, hit2 as CompiledHitTest<unknown>],
+      cursor: 19,
+      axis: "x",
+      snap: "nearest-x",
+      active: null,
+    });
+
+    expect(result).not.toBeNull();
+    // cursor=19: x=20 is dist=1, x=10 is dist=9, x=30 is dist=11
+    // Both hits have nearest hit at x=20 (dist=1)
+    // First hit (layer 0) wins via iteration order for ties
+    expect(result!.activeId).toBe("0::__default__");
+    expect(result!.columnValue).toBe(20); // xValue of active group
+  });
+
+  test("axis:'y' columnValue comes from yValue of active group", () => {
+    // y-spread hit: x all=100, y=[10,20,30]
+    const data: Row[] = [
+      { t: 100, v: 10 },
+      { t: 100, v: 20 },
+      { t: 100, v: 30 },
+    ];
+    const hit = ySpreadHit(data, [10, 20, 30]);
+
+    const result = computeSnap({
+      hits: [hit as CompiledHitTest<unknown>],
+      cursor: 22,
+      axis: "y",
+      snap: "nearest-x",
+      active: null,
+    });
+
+    expect(result).not.toBeNull();
+    // y=20 is closest to 22 → active group picks index 1
+    expect(result!.columnValue).toBe(20); // yValue (v=20 at t=100)
+  });
+});

package/src/grammar/interactions/series-snap.ts

@@ -0,0 +1,218 @@
+// ---------------------------------------------------------------------------
+// Shared nearest-column snap + per-series grouping engine
+// ---------------------------------------------------------------------------
+// Extracted verbatim from `series-readout.ts` so BOTH the corner readout panel
+// and the floating axis tooltip consume one source of truth. Generalized to
+// snap on either screen axis: `axis:"x"` (nearest-X time-series) or `axis:"y"`
+// (nearest-Y horizontal charts). X is the default so every existing readout
+// consumer is byte-for-byte unaffected.
+
+import type { Color } from "insomni";
+import type { CompiledHitTest, ScaleBundle } from "../geoms/types.ts";
+import type { HitLayerActive } from "./hit-layer.ts";
+
+/** One per-series group snapped to the cursor's column. */
+export interface SnapGroup {
+  /** Stable id `${layerIdx}::${seriesKey ?? "default"}`. */
+  id: string;
+  label: string;
+  /** Picked hit index inside the compiled hit. */
+  index: number;
+  /** |cursor − positions[index*2 (+1 for y)]|. */
+  dist: number;
+  xValue: unknown;
+  yValue: unknown;
+  /** Raw color-channel value, for scale lookup when no constant. */
+  colorRaw?: unknown;
+  /** Constant color when the layer's color channel is a constant aes. */
+  color?: Color;
+  /** seriesKey of the picked hit (stacked / dodged segments). */
+  seriesKey?: string;
+  /** Reference back to the compiled hit (used for swatch resolution). */
+  hit: CompiledHitTest<unknown>;
+}
+
+export interface SnapResult {
+  /** Snapped column value: the X for `axis:"x"`, the Y for `axis:"y"`. */
+  columnValue: unknown;
+  /** Ordered groups, one per series across all layers. */
+  groups: SnapGroup[];
+  /** Resolved active group id (closest to cursor / dispatched hit). */
+  activeId: string | null;
+}
+
+/**
+ * Resolve the group identity for a given hit index. Group key priority:
+ *   1. `seriesKey[i]` from the compiled hit (stacked / dodged geoms).
+ *   2. `colorAes(datum, i)` when color is an accessor / column.
+ *   3. Otherwise the whole layer is one group keyed by the layer label.
+ * Returns null when no x/y channels are bound. (axis-independent.)
+ */
+export function resolveGroupKey<T>(
+  hit: CompiledHitTest<T>,
+  hitIndex: number,
+): { key: string; label: string; raw: unknown } | null {
+  const xAes = hit.channels.x;
+  const yAes = hit.channels.y;
+  if (!xAes || !yAes) return null;
+  const colorAes = hit.channels.color;
+  const labelFallback = hit.label ?? hit.geomKind;
+  const sk = hit.seriesKey?.[hitIndex];
+  if (sk !== undefined) return { key: sk, label: sk, raw: sk };
+  if (colorAes && colorAes.kind !== "constant") {
+    const dataIdx = hit.dataIndex[hitIndex]!;
+    const raw = colorAes.fn(hit.data[dataIdx]!, dataIdx);
+    const k = String(raw);
+    return { key: k, label: k, raw };
+  }
+  return { key: "__default__", label: labelFallback, raw: undefined };
+}
+
+/**
+ * Collect per-series groups for one layer, picking the nearest hit on `axis`
+ * within each group. `axis` is the LAST param and defaults to `"x"` so the
+ * existing 5-arg callers / `__test__` signature are unaffected.
+ */
+export function collectLayerGroups<T>(
+  hit: CompiledHitTest<T>,
+  layerIdx: number,
+  cursor: number,
+  snap: "nearest-x" | "hover",
+  out: SnapGroup[],
+  axis: "x" | "y" = "x",
+): void {
+  const positions = hit.positions;
+  const n = (positions.length / 2) | 0;
+  if (n === 0) return;
+  const xAes = hit.channels.x;
+  const yAes = hit.channels.y;
+  if (!xAes || !yAes) return;
+  const colorAes = hit.channels.color;
+  const off = axis === "y" ? 1 : 0;
+
+  // Walk hits, group by key, picking nearest on the chosen axis within each.
+  const picked = new Map<string, { index: number; dist: number; label: string; raw: unknown }>();
+  for (let i = 0; i < n; i++) {
+    const pos = positions[i * 2 + off]!;
+    const dist = Math.abs(pos - cursor);
+    if (snap === "hover" && dist > hit.pickRadius) continue;
+    const g = resolveGroupKey(hit, i);
+    if (g === null) continue;
+    const cur = picked.get(g.key);
+    if (!cur || dist < cur.dist) {
+      picked.set(g.key, { index: i, dist, label: g.label, raw: g.raw });
+    }
+  }
+
+  for (const [key, p] of picked) {
+    const dataIdx = hit.dataIndex[p.index]!;
+    const datum = hit.data[dataIdx];
+    if (datum === undefined) continue;
+    const xValue = xAes.fn(datum, dataIdx);
+    const yValue = yAes.fn(datum, dataIdx);
+    const colorConst =
+      colorAes && colorAes.kind === "constant"
+        ? (colorAes.fn(datum, dataIdx) as Color | undefined)
+        : undefined;
+    out.push({
+      id: `${layerIdx}::${key}`,
+      label: p.label,
+      index: p.index,
+      dist: p.dist,
+      xValue,
+      yValue,
+      colorRaw: p.raw,
+      color: colorConst,
+      seriesKey: hit.seriesKey?.[p.index],
+      // Stored opaquely for potential swatch resolution; row grouping never
+      // re-reads it through `T`, so erase the row type at the boundary.
+      hit: hit as CompiledHitTest<unknown>,
+    });
+  }
+}
+
+/**
+ * Replace a group's pick with the exact dispatched hit. No-op if the group
+ * isn't in the collected set. (moved verbatim, axis-independent.)
+ */
+export function overrideGroupPick<T>(
+  groups: SnapGroup[],
+  groupId: string,
+  hit: CompiledHitTest<T>,
+  hitIndex: number,
+): void {
+  const entry = groups.find((g) => g.id === groupId);
+  if (!entry) return;
+  const xAes = hit.channels.x;
+  const yAes = hit.channels.y;
+  if (!xAes || !yAes) return;
+  const dataIdx = hit.dataIndex[hitIndex]!;
+  const datum = hit.data[dataIdx];
+  if (datum === undefined) return;
+  entry.index = hitIndex;
+  entry.dist = 0;
+  entry.xValue = xAes.fn(datum, dataIdx);
+  entry.yValue = yAes.fn(datum, dataIdx);
+}
+
+/** Resolve a group's swatch color, falling back to the color scale. (moved.) */
+export function resolveGroupColor(group: SnapGroup, scales: ScaleBundle | null): Color | undefined {
+  if (group.color) return group.color;
+  const colorScale = scales?.color;
+  if (!colorScale) return undefined;
+  if (group.colorRaw !== undefined && group.colorRaw !== null) {
+    return colorScale.fn(group.colorRaw);
+  }
+  return undefined;
+}
+
+/**
+ * Encapsulates the body of series-readout's `recompute()` MINUS emit/DOM: snaps
+ * the cursor to the active hit's column (when one is dispatched), collects all
+ * groups across layers, resolves the active group, and returns the title column
+ * value. Pure — the caller maps `groups` → rows and resolves swatch colors via
+ * `resolveGroupColor`. Returns null when no layer produced a group.
+ */
+export function computeSnap(args: {
+  hits: readonly CompiledHitTest<unknown>[];
+  cursor: number;
+  axis: "x" | "y";
+  snap: "nearest-x" | "hover";
+  active: HitLayerActive | null;
+}): SnapResult | null {
+  const { hits, cursor, axis, snap, active } = args;
+  const off = axis === "y" ? 1 : 0;
+  // When a hit is active, snap per-row picks to its column so every row reports
+  // values at the same column as the dispatched hit (not the raw cursor).
+  const snapCursor =
+    active !== null ? (active.compiled.positions[active.hitIndex * 2 + off] ?? cursor) : cursor;
+  const groups: SnapGroup[] = [];
+  for (let layerIdx = 0; layerIdx < hits.length; layerIdx++) {
+    collectLayerGroups(hits[layerIdx]!, layerIdx, snapCursor, snap, groups, axis);
+  }
+  if (groups.length === 0) return null;
+  // Resolve the active group: dispatched hit's group wins; else nearest-x rank.
+  let activeId: string | null = null;
+  if (active !== null) {
+    const g = resolveGroupKey(active.compiled, active.hitIndex);
+    if (g !== null) {
+      const candidateKey = `${active.layerIdx}::${g.key}`;
+      if (groups.some((entry) => entry.id === candidateKey)) {
+        activeId = candidateKey;
+        overrideGroupPick(groups, candidateKey, active.compiled, active.hitIndex);
+      }
+    }
+  }
+  if (activeId === null && snap === "nearest-x") {
+    let bestDist = Infinity;
+    for (const g of groups) {
+      if (g.dist < bestDist) {
+        bestDist = g.dist;
+        activeId = g.id;
+      }
+    }
+  }
+  const titleSource = groups.find((g) => g.id === activeId) ?? groups[0]!;
+  const columnValue = axis === "y" ? titleSource.yValue : titleSource.xValue;
+  return { columnValue, groups, activeId };
+}

package/src/grammar/interactions/tooltip-axis.test.ts

@@ -0,0 +1,176 @@
+// Unit tests for Phase 2 axis-mode tooltip helpers.
+// Pure / headless — no GPU, no canvas, no timers.
+
+import { describe, expect, test } from "vite-plus/test";
+
+import type { CompiledHitTest } from "../geoms/types.ts";
+import { themeDefault } from "../theme.ts";
+import type { SnapGroup, SnapResult } from "./series-snap.ts";
+import { __test__ } from "./tooltip.ts";
+
+const { buildAxisTooltipContent, hoveredHitFromGroup } = __test__;
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+interface Row {
+  name: string;
+  x: number;
+  y: number;
+}
+
+function makeHit(data: readonly Row[]): CompiledHitTest<Row> {
+  const positions = new Float32Array(data.length * 2);
+  for (let i = 0; i < data.length; i++) {
+    positions[i * 2] = data[i]!.x;
+    positions[i * 2 + 1] = data[i]!.y;
+  }
+  return {
+    geomKind: "point",
+    positions,
+    dataIndex: Int32Array.from(data.map((_, i) => i)),
+    pickRadius: 5,
+    channels: {
+      x: { kind: "accessor", fn: (d: unknown) => (d as Row).x, column: "x" },
+      y: { kind: "accessor", fn: (d: unknown) => (d as Row).y, column: "y" },
+    },
+    data,
+  } as unknown as CompiledHitTest<Row>;
+}
+
+function makeGroup(
+  id: string,
+  label: string,
+  index: number,
+  xValue: unknown,
+  yValue: unknown,
+  hit: CompiledHitTest<unknown>,
+  activeId: string | null,
+): SnapGroup {
+  return {
+    id,
+    label,
+    index,
+    dist: 0,
+    xValue,
+    yValue,
+    hit,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("buildAxisTooltipContent", () => {
+  const data: Row[] = [
+    { name: "a", x: 10, y: 2 },
+    { name: "b", x: 20, y: 6 },
+  ];
+  const hit = makeHit(data) as CompiledHitTest<unknown>;
+
+  const groups: SnapGroup[] = [
+    makeGroup("0::a", "a", 0, 10, 2, hit, "0::a"),
+    makeGroup("0::b", "b", 1, 20, 6, hit, "0::a"),
+  ];
+
+  const result: SnapResult = {
+    columnValue: 10,
+    groups,
+    activeId: "0::a",
+  };
+
+  test("auto rows axis:'x' — row values come from yValue", () => {
+    const content = buildAxisTooltipContent({
+      result,
+      axis: "x",
+      scales: null,
+      theme: themeDefault,
+      titleFormat: (v) => String(v),
+      valueFormat: (v) => String(v),
+    });
+    expect(content.title).toBe(String(result.columnValue));
+    expect(content.rows).toHaveLength(2);
+    // axis:"x" → value is yValue
+    expect(content.rows[0]!.value).toBe("2");
+    expect(content.rows[1]!.value).toBe("6");
+  });
+
+  test("axis:'y' — row values come from xValue", () => {
+    const content = buildAxisTooltipContent({
+      result,
+      axis: "y",
+      scales: null,
+      theme: themeDefault,
+      titleFormat: (v) => String(v),
+      valueFormat: (v) => String(v),
+    });
+    expect(content.rows).toHaveLength(2);
+    // axis:"y" → value is xValue
+    expect(content.rows[0]!.value).toBe("10");
+    expect(content.rows[1]!.value).toBe("20");
+  });
+
+  test("axisContent override replaces auto rows", () => {
+    let capturedInfo: import("../chart.ts").AxisTooltipInfo | null = null;
+    const content = buildAxisTooltipContent({
+      result,
+      axis: "x",
+      scales: null,
+      theme: themeDefault,
+      titleFormat: (v) => String(v),
+      valueFormat: (v) => String(v),
+      axisContent: (info) => {
+        capturedInfo = info;
+        return { title: "custom", rows: [{ label: "z", value: "99" }] };
+      },
+    });
+    expect(content.title).toBe("custom");
+    expect(content.rows).toHaveLength(1);
+    expect(content.rows[0]!.value).toBe("99");
+    // The info passed to axisContent should have auto rows
+    expect(capturedInfo).not.toBeNull();
+    expect(capturedInfo!.rows).toHaveLength(2);
+    expect(capturedInfo!.data).toHaveLength(2);
+  });
+});
+
+describe("hoveredHitFromGroup", () => {
+  test("returns correct HoveredHit fields from group", () => {
+    const data: Row[] = [{ name: "p", x: 5, y: 15 }];
+    const hit = makeHit(data) as CompiledHitTest<unknown>;
+    const g: SnapGroup = {
+      id: "0::default",
+      label: "p",
+      index: 0,
+      dist: 0,
+      xValue: 5,
+      yValue: 15,
+      hit,
+    };
+    const hovered = hoveredHitFromGroup(g);
+    expect(hovered.geomKind).toBe("point");
+    expect(hovered.dataIndex).toBe(0);
+    expect(hovered.data).toBe(data);
+    expect(hovered.x).toBe(5);   // positions[0*2] = data[0].x = 5
+    expect(hovered.y).toBe(15);  // positions[0*2+1] = data[0].y = 15
+  });
+
+  test("seriesKey is forwarded when present", () => {
+    const data: Row[] = [{ name: "q", x: 7, y: 3 }];
+    const hit = makeHit(data) as CompiledHitTest<unknown>;
+    const g: SnapGroup = {
+      id: "0::s1",
+      label: "s1",
+      index: 0,
+      dist: 0,
+      xValue: 7,
+      yValue: 3,
+      seriesKey: "s1",
+      hit,
+    };
+    const hovered = hoveredHitFromGroup(g);
+    expect(hovered.seriesKey).toBe("s1");
+  });
+});

package/src/grammar/interactions/tooltip-touch.browser.test.ts

@@ -0,0 +1,49 @@
+// GPU-manual
+//
+// Conceptual browser test: mount a minimal chart, fire a touch tap (pointerdown
+// + pointerup at a hit position), and assert the tooltip becomes visible.
+//
+// Run with: vp test -c vite.browser-test.config.ts packages/plot/src/grammar/interactions/tooltip-touch.browser.test.ts
+//
+// This test is intentionally kept minimal — it documents the intended
+// acceptance check for P1-A and is expected to pass once the browser harness
+// is available. It does not run in the standard unit-test config.
+//
+// The sketch below is structurally correct but is NOT currently executed in CI
+// (the browser GPU config is manual-only per project convention).
+
+import { describe, test } from "vite-plus/test";
+
+describe("tooltip touch-tap (browser / GPU)", () => {
+  test.todo(
+    "mounting a chart and firing pointerdown+pointerup on a mark makes the tooltip visible",
+  );
+  // Outline of the full test when the browser harness is active:
+  //
+  //   const canvas = document.createElement("canvas");
+  //   canvas.width = 400; canvas.height = 300;
+  //   document.body.appendChild(canvas);
+  //
+  //   const chart = mount(canvas, {
+  //     data: [{ x: 1, y: 2 }, { x: 2, y: 3 }],
+  //     geoms: [point({ x: "x", y: "y" })],
+  //     interactions: { tooltip: true },
+  //   });
+  //
+  //   // Wait for first frame.
+  //   await chart.ready();
+  //
+  //   // Simulate a touch tap at the first mark's canvas position.
+  //   const { x, y } = chart.positionOf(0);
+  //   canvas.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1, pointerType: "touch", clientX: x, clientY: y, bubbles: true }));
+  //   canvas.dispatchEvent(new PointerEvent("pointerup",   { pointerId: 1, pointerType: "touch", clientX: x, clientY: y, bubbles: true }));
+  //
+  //   await chart.nextFrame();
+  //
+  //   // Tooltip must now be visible with the correct data point.
+  //   expect(chart.tooltipVisible()).toBe(true);
+  //   expect(chart.hovered()?.dataIndex).toBe(0);
+  //
+  //   chart.dispose();
+  //   canvas.remove();
+});