solid-recharts 0.2.0 → 1.0.0

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

@@ -1,241 +0,0 @@
-// 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

@@ -1,226 +0,0 @@
-// 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

@@ -1,221 +0,0 @@
-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>
-    );
-  });
-});