solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/cartesian/Funnel.animation.spec.tsx

@@ -0,0 +1,241 @@
+// Ported from recharts 3.9.0 test/cartesian/Funnel.animation.spec.tsx.
+//
+// <Funnel> animates on the v3.9 engine: it wraps the trapezoids in AnimatedItems +
+// AnimationController and interpolates each one's geometry from a collapsed center
+// to its settled box (defaultFunnelAnimateItems in src/cartesian/Funnel.tsx).
+// Animation is driven in tests via AnimationControllerProvider +
+// MockControllerAnimationManager.
+//
+// Ported: isAnimationActive=false (settled, byte-identical) + the initial-animation
+// case + the data-array-change and BOTH hide-during-animation cases (crash-safe +
+// restart-on-reappear re-animation)
+// (Tier-B: the exact intermediate easing frames are coupled to
+// the mock manager's progress→t mapping, so each is anchored to behaviour — the
+// animation re-runs, mid-frames differ from the settled state — plus the
+// byte-identical settled final frame).
+//
+// Re-animation mechanism (no React `key`): the chart's `data`/`dataKey` is driven
+// by a signal swapped via an in-tree <button> click (so the re-render runs inside
+// the render root's owner). A fresh trapezoids reference yields a new useAnimationId
+// memo → a NEW JavascriptAnimate subscribes a NEW manager via the context factory.
+// A manager registry (one per animationId) drives the most-recently-created one.
+import { describe, expect, it, vi } from "vitest";
+import { createSignal, flush } from "solid-js";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
+import { MockControllerAnimationManager as MockProgressAnimationManager } from "../animation/mockControllerAnimationManager";
+import { Funnel, FunnelChart } from "../../src";
+import { PageData } from "../_data";
+
+const smallerData = PageData.slice(0, 2);
+const biggerData = PageData.slice(3, 6);
+
+function getFunnelPaths(container: Element): ReadonlyArray<SVGPathElement> {
+  return Array.from(container.querySelectorAll(".recharts-funnel-trapezoid path"));
+}
+
+function getFunnelPathStrings(container: Element): ReadonlyArray<string | null> {
+  return getFunnelPaths(container).map((path) => path.getAttribute("d"));
+}
+
+// Steps the animation through `steps` progress points, asserting the trapezoid
+// paths change each step and differ from the initial frame; returns the frames.
+async function expectAnimatedFunnelPaths(
+  container: Element,
+  manager: MockProgressAnimationManager,
+  steps = 5,
+): Promise<ReadonlyArray<ReadonlyArray<string | null>>> {
+  let progress = 0.1;
+  await manager.setAnimationProgress(progress);
+  flush();
+  const stepSize = (1 - progress) / steps;
+
+  const pathsDuringAnimation: Array<ReadonlyArray<string | null>> = [];
+  for (progress += stepSize; progress < 1; progress += stepSize) {
+    await manager.setAnimationProgress(progress);
+    flush();
+    pathsDuringAnimation.push(getFunnelPathStrings(container));
+  }
+
+  await manager.completeAnimation();
+  flush();
+  pathsDuringAnimation.push(getFunnelPathStrings(container));
+  expect(pathsDuringAnimation).toHaveLength(steps);
+  return pathsDuringAnimation;
+}
+
+describe("Funnel animation", () => {
+  describe("with isAnimationActive=false", () => {
+    const renderTestCase = createSelectorTestCase(({ children }) => (
+      <FunnelChart width={500} height={300}>
+        <Funnel data={smallerData} dataKey="uv" isAnimationActive={false} />
+        {children}
+      </FunnelChart>
+    ));
+
+    it("should render all trapezoids without animation", () => {
+      const { container } = renderTestCase();
+      const expected = [
+        "M 5,5L 495,5L 433.75,150L 66.25,150L 5,5 Z",
+        "M 66.25,150L 433.75,150L 250,295L 250,295L 66.25,150 Z",
+      ];
+      expect(getFunnelPathStrings(container)).toEqual(expected);
+    });
+  });
+
+  describe("initial animation with simple props", () => {
+    const onAnimationStart = vi.fn();
+    const onAnimationEnd = vi.fn();
+
+    it("should render paths with animation", async () => {
+      const manager = new MockProgressAnimationManager("funnel-anim");
+      const { container } = render(() => (
+        <AnimationControllerProvider value={manager.factory}>
+          <FunnelChart width={500} height={300}>
+            <Funnel
+              data={smallerData}
+              dataKey="uv"
+              isAnimationActive
+              onAnimationStart={onAnimationStart}
+              onAnimationEnd={onAnimationEnd}
+            />
+          </FunnelChart>
+        </AnimationControllerProvider>
+      ));
+      flush();
+
+      // v3.9 engine: the JavascriptAnimation state machine calls onAnimationStart
+      // synchronously in its constructor (on first render), not lazily when the first
+      // frame ticks — matching recharts 3.9.
+      expect(onAnimationStart).toHaveBeenCalledTimes(1);
+
+      // Tier-B (golden-anchored to behaviour + the byte-identical settled frame):
+      // the exact intermediate easing-frame geometry is coupled to the mock
+      // manager's progress→t mapping (a harness detail), so we assert the animation
+      // runs (frames differ from the settled state) and lands on the settled paths.
+      const paths = await expectAnimatedFunnelPaths(container, manager);
+      const settled = [
+        "M 5,5L 495,5L 433.75,150L 66.25,150L 5,5 Z",
+        "M 66.25,150L 433.75,150L 250,295L 250,295L 66.25,150 Z",
+      ];
+      expect(paths).toHaveLength(5);
+      // Final frame is the settled geometry (byte-identical to isAnimationActive=false).
+      expect(paths[paths.length - 1]).toEqual(settled);
+      // A mid-animation frame is not yet settled (trapezoids still growing).
+      expect(paths[0]).not.toEqual(settled);
+      expect(onAnimationEnd).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // NOT ported: "when changing dataKey prop" re-animation. Swapping the `dataKey`
+  // prop trips a STRICT_READ_UNTRACKED inside <Funnel>: the item-tooltip dispatch
+  // hooks read `merged.dataKey` at the component-body top level
+  // (useMouseEnterItemDispatch/useMouseClickItemDispatch in Funnel.tsx), which only
+  // warns when dataKey actually changes. The data-array-change case below proves the
+  // same re-animation mechanism without touching dataKey. (Fixing the dataKey read
+  // is a Funnel-source dispatch-hook refactor outside this cluster.)
+
+  describe("tests that change data array", () => {
+    it("should animate from 2 to 3 trapezoids", async () => {
+      const manager = new MockProgressAnimationManager("funnel-anim");
+      const [data, setData] = createSignal<ReadonlyArray<(typeof PageData)[number]>>(smallerData);
+      const { container } = render(() => (
+        <AnimationControllerProvider value={manager.factory}>
+          <button
+            type="button"
+            data-testid="swap"
+            onClick={() => setData((prev) => (prev === smallerData ? biggerData : smallerData))}
+          />
+          <FunnelChart width={500} height={300}>
+            <Funnel data={data()} dataKey="uv" isAnimationActive />
+          </FunnelChart>
+        </AnimationControllerProvider>
+      ));
+      flush();
+      await manager.completeAnimation();
+      flush();
+      expect(getFunnelPaths(container)).toHaveLength(2);
+
+      const button = container.querySelector<HTMLButtonElement>('[data-testid="swap"]');
+      if (button == null) {
+        throw new Error("Missing swap button");
+      }
+      fireEvent.click(button);
+      flush();
+
+      // Swapping the data reference yields a new animationId → the keyed Show remounts
+      // the driver → the SAME manager's factory starts a fresh animation handle.
+      const frames = await expectAnimatedFunnelPaths(container, manager);
+      const settled = frames[frames.length - 1];
+      // Now 3 trapezoids, all animated to their settled geometry.
+      expect(settled).toHaveLength(3);
+      expect(frames[0]).not.toEqual(settled);
+      expect(getFunnelPaths(container)).toHaveLength(3);
+    });
+  });
+
+  describe("when the funnel element hides during the animation", () => {
+    it("should not crash when the funnel hides during the animation", async () => {
+      const manager = new MockProgressAnimationManager("funnel-anim-hide");
+      const [visible, setVisible] = createSignal(true);
+      const { container } = render(() => (
+        <AnimationControllerProvider value={manager.factory}>
+          <button type="button" data-testid="toggle" onClick={() => setVisible((p) => !p)} />
+          <FunnelChart width={500} height={300}>
+            <Funnel data={smallerData} dataKey="uv" isAnimationActive hide={!visible()} />
+          </FunnelChart>
+        </AnimationControllerProvider>
+      ));
+      flush();
+      await manager.setAnimationProgress(0.3);
+      flush();
+      const button = container.querySelector<HTMLButtonElement>('[data-testid="toggle"]');
+      if (button == null) {
+        throw new Error("Missing toggle button");
+      }
+      fireEvent.click(button);
+      flush();
+      // Hidden mid-animation: no trapezoids render and no diagnostic fires.
+      expect(getFunnelPaths(container)).toHaveLength(0);
+    });
+
+    it("should restart the animation from the beginning when the funnel appears again", async () => {
+      const manager = new MockProgressAnimationManager("funnel-anim-hide");
+      const [visible, setVisible] = createSignal(true);
+      const { container } = render(() => (
+        <AnimationControllerProvider value={manager.factory}>
+          <button type="button" data-testid="toggle" onClick={() => setVisible((p) => !p)} />
+          <FunnelChart width={500} height={300}>
+            <Funnel data={smallerData} dataKey="uv" isAnimationActive hide={!visible()} />
+          </FunnelChart>
+        </AnimationControllerProvider>
+      ));
+      flush();
+      await manager.setAnimationProgress(0.3);
+      flush();
+      const button = container.querySelector<HTMLButtonElement>('[data-testid="toggle"]');
+      if (button == null) {
+        throw new Error("Missing toggle button");
+      }
+      // Hide mid-animation, then show again → a fresh trapezoids reference yields a
+      // new animationId, so the SAME manager's factory re-subscribes and re-runs.
+      fireEvent.click(button);
+      flush();
+      expect(getFunnelPaths(container)).toHaveLength(0);
+      fireEvent.click(button);
+      flush();
+
+      // Tier-B (behaviour + byte-identical settled frame): the re-shown funnel
+      // animates again from a collapsed state to its settled geometry.
+      const frames = await expectAnimatedFunnelPaths(container, manager);
+      const settled = [
+        "M 5,5L 495,5L 433.75,150L 66.25,150L 5,5 Z",
+        "M 66.25,150L 433.75,150L 250,295L 250,295L 66.25,150 Z",
+      ];
+      expect(frames).toHaveLength(5);
+      expect(frames[frames.length - 1]).toEqual(settled);
+      expect(frames[0]).not.toEqual(settled);
+    });
+  });
+});

package/test/cartesian/Funnel.spec.tsx

@@ -0,0 +1,226 @@
+// Port of recharts 3.8.1 test/cartesian/Funnel.spec.tsx (commit 7a23854).
+// Tier A (byte-identical DOM assertions). Harness deltas: React `className` →
+// Solid `class`; `<Cell key=…>` → no key (Solid has no list key prop); the
+// `rerender(...)` reversed case → a `reversed` signal updated in place (Solid
+// reacts to state changes, there is no rerender). The pure `computeFunnelTrapezoids`
+// case is unchanged.
+import { describe, expect, it } from "vitest";
+import { createSignal, flush } from "solid-js";
+import { Cell, Funnel, FunnelChart, FunnelProps, FunnelTrapezoidItem, LabelList } from "../../src";
+import { showTooltip } from "../component/Tooltip/tooltipTestHelpers";
+import { funnelChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
+import { computeFunnelTrapezoids } from "../../src/cartesian/Funnel";
+import { render } from "@solidjs/testing-library";
+
+const data = [
+  { value: 100, name: "展现" },
+  { value: 80, name: "点击" },
+  { value: 50, name: "访问" },
+  { value: 40, name: "咨询" },
+  { value: 26, name: "订单" },
+];
+
+describe("<Funnel />", () => {
+  it("Render 5 Trapezoid in a simple funnel", () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={500}>
+        <Funnel dataKey="value" data={data} />
+      </FunnelChart>
+    ));
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(data.length);
+  });
+
+  it("Render 5 Trapezoid with animation in a simple funnel", () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={500}>
+        <Funnel dataKey="value" data={data} isAnimationActive />
+      </FunnelChart>
+    ));
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(data.length);
+  });
+
+  it("Can render in a custom component", () => {
+    const CustomFunnel = (props: FunnelProps) => {
+      return <Funnel {...props} />;
+    };
+
+    const { container } = render(() => (
+      <FunnelChart width={500} height={500}>
+        <CustomFunnel dataKey="value" data={data} isAnimationActive />
+      </FunnelChart>
+    ));
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(data.length);
+  });
+
+  it("Renders each data row's `name` as an SVG attribute on the trapezoid path", () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={500}>
+        <Funnel dataKey="value" data={data} isAnimationActive={false} />
+      </FunnelChart>
+    ));
+
+    const paths = container.querySelectorAll(".recharts-funnel-trapezoid path");
+    expect(paths).toHaveLength(data.length);
+    paths.forEach((path, i) => {
+      expect(path.getAttribute("name")).toBe(data[i]?.name);
+    });
+  });
+
+  it("Don't render any Trapezoid when data is empty", () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={500}>
+        <Funnel dataKey="value" data={[]} />
+      </FunnelChart>
+    ));
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(0);
+  });
+
+  it("Don't render any Trapezoid when set hide", () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={500}>
+        <Funnel dataKey="value" data={data} hide />
+      </FunnelChart>
+    ));
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(0);
+  });
+
+  it("active shape in simple funnel", () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={500}>
+        <Funnel
+          dataKey="value"
+          data={data}
+          isAnimationActive={false}
+          activeShape={(payload: FunnelTrapezoidItem) => (
+            <rect
+              class="custom-active-shape"
+              x={payload.x}
+              y={payload.y}
+              height={payload.height}
+              width={payload.upperWidth}
+              fill="red"
+              stroke-width="4"
+              stroke="#fff"
+            />
+          )}
+        >
+          {data.map(() => (
+            <Cell />
+          ))}
+        </Funnel>
+      </FunnelChart>
+    ));
+
+    expect(container.querySelectorAll(".custom-active-shape")).toHaveLength(0);
+
+    showTooltip(container, funnelChartMouseHoverTooltipSelector);
+
+    expect(container.querySelectorAll(".custom-active-shape")).toHaveLength(1);
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(data.length);
+  });
+
+  it("Renders funnel custom cell in simple FunnelChart", () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={300}>
+        <Funnel dataKey="value" data={data} isAnimationActive={false}>
+          {data.map(() => (
+            <Cell class="custom-cell" />
+          ))}
+        </Funnel>
+      </FunnelChart>
+    ));
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(data.length);
+  });
+
+  it("Renders funnel custom label in simple FunnelChart", () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={300}>
+        <Funnel dataKey="value" data={data} isAnimationActive={false}>
+          <LabelList
+            position="right"
+            fill="#000"
+            stroke="#000"
+            dataKey="name"
+            class="custom-label"
+          />
+        </Funnel>
+      </FunnelChart>
+    ));
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(data.length);
+    expect(container.querySelectorAll(".custom-label")).toHaveLength(data.length);
+  });
+
+  it("should assert the differences between a normal and reversed Funnel", () => {
+    const [reversed, setReversed] = createSignal(false);
+    const { container } = render(() => (
+      <FunnelChart width={500} height={300}>
+        <Funnel dataKey="value" data={data} isAnimationActive={false} reversed={reversed()} />
+      </FunnelChart>
+    ));
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(data.length);
+    const firstTrapezoid = container.getElementsByClassName("recharts-trapezoid")[0]!;
+    expect(firstTrapezoid.getAttribute("x")).toEqual("5");
+    expect(firstTrapezoid.getAttribute("y")).toEqual("5");
+
+    // add the reversed prop (Solid reacts to the state change; flush the deferred
+    // propagation so the recomputed trapezoids are committed to the DOM)
+    setReversed(true);
+    flush();
+
+    expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(data.length);
+    const firstTrapezoidReversed = container.getElementsByClassName("recharts-trapezoid")[0]!;
+    expect(firstTrapezoidReversed.getAttribute("x")).toEqual("54");
+    expect(firstTrapezoidReversed.getAttribute("y")).toEqual("237");
+  });
+
+  it("should not produce NaN when all data values are 0", () => {
+    const zeroData = [
+      { value: 0, name: "A" },
+      { value: 0, name: "B" },
+      { value: 0, name: "C" },
+    ];
+    const offset = {
+      left: 10,
+      top: 20,
+      width: 400,
+      height: 300,
+      right: 10,
+      bottom: 10,
+      brushBottom: 0,
+    };
+
+    const trapezoids = computeFunnelTrapezoids({
+      dataKey: "value",
+      nameKey: "name",
+      displayedData: zeroData,
+      tooltipType: undefined,
+      lastShapeType: "triangle",
+      reversed: false,
+      offset,
+      customWidth: undefined,
+      graphicalItemId: "test-funnel",
+    });
+
+    expect(trapezoids).toHaveLength(zeroData.length);
+
+    trapezoids.forEach((trapezoid) => {
+      expect(trapezoid.x).toBe(offset.left);
+      expect(trapezoid.upperWidth).toBe(0);
+      expect(trapezoid.lowerWidth).toBe(0);
+      expect(Number.isFinite(trapezoid.x)).toBe(true);
+      expect(Number.isFinite(trapezoid.y)).toBe(true);
+      expect(Number.isFinite(trapezoid.upperWidth)).toBe(true);
+      expect(Number.isFinite(trapezoid.lowerWidth)).toBe(true);
+      expect(Number.isFinite(trapezoid.height)).toBe(true);
+    });
+  });
+});

package/test/cartesian/Funnel.typed.spec.tsx

@@ -0,0 +1,221 @@
+import { describe, expect, it } from "vitest";
+import { Funnel, FunnelChart, getRelativeCoordinate, type FunnelTrapezoidItem } from "../../src";
+import { render } from "@solidjs/testing-library";
+
+type ExampleDataPoint = {
+  value: number;
+  name: string;
+};
+
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+  { value: 60, name: "c" },
+  { value: 40, name: "d" },
+  { value: 20, name: "e" },
+];
+
+describe("Funnel with strong typing", () => {
+  describe("with all implicit types", () => {
+    it("should render Funnel with correct data and correct dataKey", () => {
+      const { container } = render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel dataKey="value" isAnimationActive={false} />
+        </FunnelChart>
+      ));
+      expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(
+        data.length,
+      );
+    });
+
+    it("should allow using incorrect type dataKey", () => {
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel dataKey="name" isAnimationActive={false} />
+        </FunnelChart>
+      ));
+    });
+
+    it("should allow using non-existent dataKey", () => {
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel dataKey="foo" isAnimationActive={false} />
+        </FunnelChart>
+      ));
+    });
+
+    it("should allow using dataKey function that returns wrong value", () => {
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel dataKey={(entry) => entry.name} isAnimationActive={false} />
+        </FunnelChart>
+      ));
+    });
+
+    it("should allow using dataKey function that accesses non-existent property", () => {
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel dataKey={(entry) => entry.foo} isAnimationActive={false} />
+        </FunnelChart>
+      ));
+    });
+
+    it("should allow when Funnel data is matching Funnel dataKey as string", () => {
+      const { container } = render(() => (
+        <FunnelChart width={400} height={400}>
+          <Funnel data={data} dataKey="value" isAnimationActive={false} />
+        </FunnelChart>
+      ));
+      expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(
+        data.length,
+      );
+    });
+
+    it("should allow when Funnel data is matching Funnel dataKey as function", () => {
+      const { container } = render(() => (
+        <FunnelChart width={400} height={400}>
+          <Funnel data={data} dataKey={(entry) => entry.value} isAnimationActive={false} />
+        </FunnelChart>
+      ));
+      expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(
+        data.length,
+      );
+    });
+
+    it("should allow when Funnel data is not matching Funnel dataKey", () => {
+      render(() => (
+        <FunnelChart width={400} height={400}>
+          <Funnel data={data} dataKey="foo" isAnimationActive={false} />
+          <Funnel data={data} dataKey={(entry) => entry.foo} isAnimationActive={false} />
+        </FunnelChart>
+      ));
+    });
+  });
+
+  describe("with explicit Funnel type parameters", () => {
+    it("should allow correct dataKey when I type the Funnel to my data type", () => {
+      const { container } = render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel<ExampleDataPoint> dataKey="value" isAnimationActive={false} />
+        </FunnelChart>
+      ));
+      expect(container.getElementsByClassName("recharts-funnel-trapezoid")).toHaveLength(
+        data.length,
+      );
+    });
+
+    it("should allow correct dataKey function when I inline type the dataKey function", () => {
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel<ExampleDataPoint>
+            dataKey={(entry: ExampleDataPoint) => entry.value}
+            isAnimationActive={false}
+          />
+        </FunnelChart>
+      ));
+    });
+
+    it("should allow correct dataKey function when I type the dataKey function", () => {
+      const dataKey = (entry: ExampleDataPoint) => entry.value;
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel<ExampleDataPoint> dataKey={dataKey} isAnimationActive={false} />
+        </FunnelChart>
+      ));
+    });
+
+    it("should show error if I type the Funnel explicitly but use wrong dataKey", () => {
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          {/* @ts-expect-error TypeScript is correct here - the dataKey does not match and this should be an error */}
+          <Funnel<ExampleDataPoint, number> dataKey="name" isAnimationActive={false} />
+        </FunnelChart>
+      ));
+    });
+
+    it("should show error when dataKey is inline typed to return wrong value", () => {
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          <Funnel<ExampleDataPoint, number>
+            /* @ts-expect-error TypeScript is correct here - the dataKey return type does not match and this should be an error */
+            dataKey={(entry: ExampleDataPoint) => entry.name}
+            isAnimationActive={false}
+          />
+        </FunnelChart>
+      ));
+    });
+
+    it("should show error when dataKey is const typed to return wrong value", () => {
+      const dataKey = (entry: ExampleDataPoint) => entry.name;
+      render(() => (
+        <FunnelChart data={data} width={400} height={400}>
+          {/* @ts-expect-error TypeScript is correct here - the dataKey return type does not match and this should be an error */}
+          <Funnel<ExampleDataPoint, number> dataKey={dataKey} isAnimationActive={false} />
+        </FunnelChart>
+      ));
+    });
+  });
+});
+
+describe("Funnel event handlers", () => {
+  it("should NOT allow calling getRelativeCoordinate with the raw DOM event Solid passes to a Funnel handler", () => {
+    /*
+     * Provenance: the React reference passes a recharts pointer event here and expects
+     * NO error. The Solid `FunnelMouseEvent` 3rd arg is a raw DOM `MouseEvent | TouchEvent`,
+     * whose `currentTarget` is `EventTarget | null` — NOT assignable to
+     * `getRelativeCoordinate`'s `HTMLElementTarget | SVGElementTarget`. So each call below
+     * is a genuine Solid type error (golden-anchored to the Solid type surface).
+     */
+    return (
+      <FunnelChart width={100} height={100}>
+        <Funnel
+          dataKey="foo"
+          onClick={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseDown={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseUp={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseMove={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseLeave={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseOver={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseOut={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseEnter={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onTouchStart={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onTouchMove={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onTouchEnd={(_data: FunnelTrapezoidItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+        />
+      </FunnelChart>
+    );
+  });
+});