solid-recharts 0.2.1 → 1.0.0

package/test/cartesian/ErrorBar.spec.tsx

@@ -1,2414 +0,0 @@
-// Ported from recharts 3.8.1 test/cartesian/ErrorBar.spec.tsx — the render-geometry
-// matrix from the top-level `<ErrorBar />` describe (Bar / stacked-Bar / Line /
-// Scatter horizontal+vertical golden line coordinates), the "ErrorBar and axis
-// domain interaction" describe (rerender→signal), and the 5 animation cases
-// (React animationManager → Solid createManagerRegistry + completeAll; the
-// "with animation delay" case also covers the bare `begin` SVG-attr passthrough
-// onto the whisker group via svgPropertiesNoEvents).
-import { describe, expect, it, test } from "vitest";
-import { createSignal, flush, Show } from "solid-js";
-import {
-  Bar,
-  BarChart,
-  ErrorBar,
-  Line,
-  LineChart,
-  Scatter,
-  ScatterChart,
-  XAxis,
-  YAxis,
-} from "../../src";
-import { render } from "@solidjs/testing-library";
-import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
-import type { AnimationController } from "../../src";
-import { MockControllerAnimationManager } from "../animation/mockControllerAnimationManager";
-import { expectScatterPoints } from "../helper/expectScatterPoints";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { expectXAxisTicks, expectYAxisTicks } from "../helper/expectAxisTicks";
-import { expectBars } from "../helper/expectBars";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-import {
-  getErrorDomainByDataKey,
-  selectAxisDomainIncludingNiceTicks,
-  selectNumericalDomain,
-} from "../../src/state/selectors/axisSelectors";
-import { useIsPanorama } from "../../src/context/PanoramaContext";
-import type { RechartsRootState } from "../../src/state/store";
-
-type ExpectedErrorBarLine = {
-  x1: string | null;
-  x2: string | null;
-  y1: string | null;
-  y2: string | null;
-};
-
-const expectErrorBars = (
-  container: HTMLElement,
-  linesExpected: ReadonlyArray<ExpectedErrorBarLine>,
-) => {
-  const errorBarLines = container.querySelectorAll(".recharts-errorBar line");
-
-  const linesActual = Array.from(errorBarLines).map((line) => {
-    return {
-      x1: line.getAttribute("x1"),
-      x2: line.getAttribute("x2"),
-      y1: line.getAttribute("y1"),
-      y2: line.getAttribute("y2"),
-    };
-  });
-
-  expect(linesActual).toEqual(linesExpected);
-};
-
-// Port of the reference's assertAnimationStyles: every whisker line carries the
-// expected CSS, and `transition` is present iff animation is active.
-function assertAnimationStyles(
-  container: HTMLElement,
-  animation: boolean,
-  expectedStyles: Record<string, string>,
-): void {
-  container.querySelectorAll(".recharts-errorBar").forEach((bar) => {
-    bar.querySelectorAll("line").forEach((line) => {
-      const style = line.getAttribute("style");
-      Object.entries(expectedStyles).forEach(([key, value]) => {
-        expect(style).toContain(`${key}: ${value}`);
-      });
-      if (animation) {
-        expect(style).toContain("transition");
-      } else {
-        expect(style).not.toContain("transition");
-      }
-    });
-  });
-}
-
-// ErrorBar renders one CSSTransitionAnimate per whisker line, each keyed by a unique
-// animationId. On the v3.9 engine the injected AnimationController routes per-id
-// (via handle.getAnimationId()) to its own MockControllerAnimationManager, and
-// completeAll() finishes them all.
-function createManagerRegistry(): {
-  controller: AnimationController;
-  completeAll: () => Promise<void>;
-} {
-  const managers = new Map<string, MockControllerAnimationManager>();
-  return {
-    controller: (timeoutController, animationHandle, listener) => {
-      const id = animationHandle.getAnimationId();
-      let m = managers.get(id);
-      if (m == null) {
-        m = new MockControllerAnimationManager(id);
-        managers.set(id, m);
-      }
-      m.start(animationHandle, listener);
-      return () => m.stop();
-    },
-    completeAll: async () => {
-      // Some consumers in the tree (e.g. a Bar with isAnimationActive=false) get a
-      // manager but never enqueue an animation; ignore their "Queue is empty".
-      await Promise.all(
-        Array.from(managers.values()).map((m) =>
-          m.completeAnimation().catch((e: unknown) => {
-            if (!(e instanceof Error) || !e.message.includes("Queue is empty")) {
-              throw e;
-            }
-          }),
-        ),
-      );
-    },
-  };
-}
-
-describe("<ErrorBar />", () => {
-  const dataWithError = [
-    { name: "food", uv: 2000, pv: 2013, time: 1, uvError: [100, 50], pvError: [110, 20] },
-    { name: "cosmetic", uv: 3300, pv: 2000, time: 2, uvError: [120, 140], pvError: 50 },
-    { name: "storage", uv: 3200, pv: 1398, time: 3, uvError: [120, 80], pvError: [200, 100] },
-    { name: "digital", uv: 2800, pv: 2800, time: 4, uvError: [100, 200], pvError: 30 },
-  ];
-
-  const expectedErrorBars = [
-    {
-      x1: "61.25",
-      x2: "71.25",
-      y1: "215.97222222222223",
-      y2: "215.97222222222223",
-    },
-    {
-      x1: "66.25",
-      x2: "66.25",
-      y1: "236.38888888888889",
-      y2: "215.97222222222223",
-    },
-    {
-      x1: "61.25",
-      x2: "71.25",
-      y1: "236.38888888888889",
-      y2: "236.38888888888889",
-    },
-    {
-      x1: "183.75",
-      x2: "193.75",
-      y1: "26.777777777777754",
-      y2: "26.777777777777754",
-    },
-    {
-      x1: "188.75",
-      x2: "188.75",
-      y1: "62.16666666666668",
-      y2: "26.777777777777754",
-    },
-    {
-      x1: "183.75",
-      x2: "193.75",
-      y1: "62.16666666666668",
-      y2: "62.16666666666668",
-    },
-    {
-      x1: "306.25",
-      x2: "316.25",
-      y1: "48.555555555555564",
-      y2: "48.555555555555564",
-    },
-    {
-      x1: "311.25",
-      x2: "311.25",
-      y1: "75.77777777777779",
-      y2: "48.555555555555564",
-    },
-    {
-      x1: "306.25",
-      x2: "316.25",
-      y1: "75.77777777777779",
-      y2: "75.77777777777779",
-    },
-    {
-      x1: "428.75",
-      x2: "438.75",
-      y1: "86.66666666666666",
-      y2: "86.66666666666666",
-    },
-    {
-      x1: "433.75",
-      x2: "433.75",
-      y1: "127.5",
-      y2: "86.66666666666666",
-    },
-    {
-      x1: "428.75",
-      x2: "438.75",
-      y1: "127.5",
-      y2: "127.5",
-    },
-  ];
-  it("Renders Error Bars in Bar", () => {
-    const renderTestCase = createSelectorTestCase(() => (
-      <BarChart data={dataWithError} width={500} height={500}>
-        <Bar isAnimationActive={false} dataKey="uv">
-          <ErrorBar dataKey="uvError" />
-        </Bar>
-      </BarChart>
-    ));
-
-    const { container } = renderTestCase();
-
-    expectErrorBars(container, expectedErrorBars);
-  });
-
-  it("Renders Multiple Error Bars in Bar", () => {
-    const renderTestCase = createSelectorTestCase(() => (
-      <BarChart data={dataWithError} width={500} height={500} layout="vertical">
-        <Bar isAnimationActive={false} dataKey="uv">
-          <ErrorBar dataKey="uvError" direction="x" />
-          <ErrorBar dataKey="pvError" direction="x" />
-        </Bar>
-        {/* Axes are needed in order to actually render anything useful in a vertical chart */}
-        <XAxis dataKey="uv" type="number" />
-        <YAxis dataKey="name" type="category" />
-      </BarChart>
-    ));
-
-    const { container } = renderTestCase();
-
-    expectErrorBars(container, [
-      {
-        x1: "309.8611111111111",
-        x2: "309.8611111111111",
-        y1: "67.5",
-        y2: "57.5",
-      },
-      {
-        x1: "291.94444444444446",
-        x2: "309.8611111111111",
-        y1: "62.5",
-        y2: "62.5",
-      },
-      {
-        x1: "291.94444444444446",
-        x2: "291.94444444444446",
-        y1: "67.5",
-        y2: "57.5",
-      },
-      {
-        x1: "475.8888888888889",
-        x2: "475.8888888888889",
-        y1: "182.5",
-        y2: "172.5",
-      },
-      {
-        x1: "444.8333333333333",
-        x2: "475.8888888888889",
-        y1: "177.5",
-        y2: "177.5",
-      },
-      {
-        x1: "444.8333333333333",
-        x2: "444.8333333333333",
-        y1: "182.5",
-        y2: "172.5",
-      },
-      {
-        x1: "456.77777777777777",
-        x2: "456.77777777777777",
-        y1: "297.5",
-        y2: "287.5",
-      },
-      {
-        x1: "432.8888888888889",
-        x2: "456.77777777777777",
-        y1: "292.5",
-        y2: "292.5",
-      },
-      {
-        x1: "432.8888888888889",
-        x2: "432.8888888888889",
-        y1: "297.5",
-        y2: "287.5",
-      },
-      {
-        x1: "423.3333333333333",
-        x2: "423.3333333333333",
-        y1: "412.5",
-        y2: "402.5",
-      },
-      {
-        x1: "387.5",
-        x2: "423.3333333333333",
-        y1: "407.5",
-        y2: "407.5",
-      },
-      {
-        x1: "387.5",
-        x2: "387.5",
-        y1: "412.5",
-        y2: "402.5",
-      },
-      {
-        x1: "306.27777777777777",
-        x2: "306.27777777777777",
-        y1: "67.5",
-        y2: "57.5",
-      },
-      {
-        x1: "290.75",
-        x2: "306.27777777777777",
-        y1: "62.5",
-        y2: "62.5",
-      },
-      {
-        x1: "290.75",
-        x2: "290.75",
-        y1: "67.5",
-        y2: "57.5",
-      },
-      {
-        x1: "465.1388888888889",
-        x2: "465.1388888888889",
-        y1: "182.5",
-        y2: "172.5",
-      },
-      {
-        x1: "453.19444444444446",
-        x2: "465.1388888888889",
-        y1: "177.5",
-        y2: "177.5",
-      },
-      {
-        x1: "453.19444444444446",
-        x2: "453.19444444444446",
-        y1: "182.5",
-        y2: "172.5",
-      },
-      {
-        x1: "459.1666666666667",
-        x2: "459.1666666666667",
-        y1: "297.5",
-        y2: "287.5",
-      },
-      {
-        x1: "423.3333333333333",
-        x2: "459.1666666666667",
-        y1: "292.5",
-        y2: "292.5",
-      },
-      {
-        x1: "423.3333333333333",
-        x2: "423.3333333333333",
-        y1: "297.5",
-        y2: "287.5",
-      },
-      {
-        x1: "403.02777777777777",
-        x2: "403.02777777777777",
-        y1: "412.5",
-        y2: "402.5",
-      },
-      {
-        x1: "395.8611111111111",
-        x2: "403.02777777777777",
-        y1: "407.5",
-        y2: "407.5",
-      },
-      {
-        x1: "395.8611111111111",
-        x2: "395.8611111111111",
-        y1: "412.5",
-        y2: "402.5",
-      },
-    ]);
-  });
-
-  it("Renders Error Bars in stacked Bar", () => {
-    const renderTestCase = createSelectorTestCase(() => (
-      <BarChart data={dataWithError} width={500} height={500}>
-        <Bar isAnimationActive={false} dataKey="uv" stackId="1">
-          <ErrorBar dataKey="uvError" />
-        </Bar>
-        <Bar isAnimationActive={false} dataKey="pv" stackId="1">
-          <ErrorBar dataKey="uvError" />
-        </Bar>
-      </BarChart>
-    ));
-
-    const { container } = renderTestCase();
-
-    expectErrorBars(container, [
-      {
-        x1: "61.25",
-        x2: "71.25",
-        y1: "327.5833333333333",
-        y2: "327.5833333333333",
-      },
-      {
-        x1: "66.25",
-        x2: "66.25",
-        y1: "339.8333333333333",
-        y2: "327.5833333333333",
-      },
-      {
-        x1: "61.25",
-        x2: "71.25",
-        y1: "339.8333333333333",
-        y2: "339.8333333333333",
-      },
-      {
-        x1: "183.75",
-        x2: "193.75",
-        y1: "214.06666666666666",
-        y2: "214.06666666666666",
-      },
-      {
-        x1: "188.75",
-        x2: "188.75",
-        y1: "235.29999999999998",
-        y2: "214.06666666666666",
-      },
-      {
-        x1: "183.75",
-        x2: "193.75",
-        y1: "235.29999999999998",
-        y2: "235.29999999999998",
-      },
-      {
-        x1: "306.25",
-        x2: "316.25",
-        y1: "227.13333333333333",
-        y2: "227.13333333333333",
-      },
-      {
-        x1: "311.25",
-        x2: "311.25",
-        y1: "243.46666666666667",
-        y2: "227.13333333333333",
-      },
-      {
-        x1: "306.25",
-        x2: "316.25",
-        y1: "243.46666666666667",
-        y2: "243.46666666666667",
-      },
-      {
-        x1: "428.75",
-        x2: "438.75",
-        y1: "250",
-        y2: "250",
-      },
-      {
-        x1: "433.75",
-        x2: "433.75",
-        y1: "274.5",
-        y2: "250",
-      },
-      {
-        x1: "428.75",
-        x2: "438.75",
-        y1: "274.5",
-        y2: "274.5",
-      },
-      {
-        x1: "61.25",
-        x2: "71.25",
-        y1: "163.1883333333333",
-        y2: "163.1883333333333",
-      },
-      {
-        x1: "66.25",
-        x2: "66.25",
-        y1: "175.43833333333333",
-        y2: "163.1883333333333",
-      },
-      {
-        x1: "61.25",
-        x2: "71.25",
-        y1: "175.43833333333333",
-        y2: "175.43833333333333",
-      },
-      {
-        x1: "183.75",
-        x2: "193.75",
-        y1: "50.733333333333356",
-        y2: "50.733333333333356",
-      },
-      {
-        x1: "188.75",
-        x2: "188.75",
-        y1: "71.96666666666668",
-        y2: "50.733333333333356",
-      },
-      {
-        x1: "183.75",
-        x2: "193.75",
-        y1: "71.96666666666668",
-        y2: "71.96666666666668",
-      },
-      {
-        x1: "306.25",
-        x2: "316.25",
-        y1: "112.96333333333335",
-        y2: "112.96333333333335",
-      },
-      {
-        x1: "311.25",
-        x2: "311.25",
-        y1: "129.29666666666668",
-        y2: "112.96333333333335",
-      },
-      {
-        x1: "306.25",
-        x2: "316.25",
-        y1: "129.29666666666668",
-        y2: "129.29666666666668",
-      },
-      {
-        x1: "428.75",
-        x2: "438.75",
-        y1: "21.33333333333333",
-        y2: "21.33333333333333",
-      },
-      {
-        x1: "433.75",
-        x2: "433.75",
-        y1: "45.83333333333336",
-        y2: "21.33333333333333",
-      },
-      {
-        x1: "428.75",
-        x2: "438.75",
-        y1: "45.83333333333336",
-        y2: "45.83333333333336",
-      },
-    ]);
-  });
-
-  const lineData = [
-    { name: "Page A", uv: 1000, pv: 2400, amt: 2400, uvError: [75, 20], pvError: [90, 40] },
-    { name: "Page B", uv: 300, pv: 4567, amt: 2400, uvError: [90, 40], pvError: [75, 20] },
-    { name: "Page C", uv: 280, pv: 1398, amt: 2400, uvError: 40, pvError: 20 },
-    { name: "Page D", uv: 200, pv: 9800, amt: 2400, uvError: 20, pvError: 28 },
-    { name: "Page I", uv: 189, pv: 4800, amt: 2400, uvError: 28, pvError: 40 },
-  ];
-
-  it("Renders Error Bars in Line", () => {
-    const renderTestCase = createSelectorTestCase(() => (
-      <LineChart data={lineData} width={500} height={500}>
-        <Line isAnimationActive={false} dataKey="uv">
-          <ErrorBar dataKey="uvError" />
-        </Line>
-      </LineChart>
-    ));
-
-    const { container } = renderTestCase();
-
-    expectErrorBars(container, [
-      {
-        x1: "0",
-        x2: "10",
-        y1: "78.50000000000001",
-        y2: "78.50000000000001",
-      },
-      {
-        x1: "5",
-        x2: "5",
-        y1: "117.29166666666666",
-        y2: "78.50000000000001",
-      },
-      {
-        x1: "0",
-        x2: "10",
-        y1: "117.29166666666666",
-        y2: "117.29166666666666",
-      },
-      {
-        x1: "122.5",
-        x2: "132.5",
-        y1: "356.1666666666667",
-        y2: "356.1666666666667",
-      },
-      {
-        x1: "127.5",
-        x2: "127.5",
-        y1: "409.25",
-        y2: "356.1666666666667",
-      },
-      {
-        x1: "122.5",
-        x2: "132.5",
-        y1: "409.25",
-        y2: "409.25",
-      },
-      {
-        x1: "245",
-        x2: "255",
-        y1: "364.33333333333337",
-        y2: "364.33333333333337",
-      },
-      {
-        x1: "250",
-        x2: "250",
-        y1: "397",
-        y2: "364.33333333333337",
-      },
-      {
-        x1: "245",
-        x2: "255",
-        y1: "397",
-        y2: "397",
-      },
-      {
-        x1: "367.5",
-        x2: "377.5",
-        y1: "405.1666666666667",
-        y2: "405.1666666666667",
-      },
-      {
-        x1: "372.5",
-        x2: "372.5",
-        y1: "421.5",
-        y2: "405.1666666666667",
-      },
-      {
-        x1: "367.5",
-        x2: "377.5",
-        y1: "421.5",
-        y2: "421.5",
-      },
-      {
-        x1: "490",
-        x2: "500",
-        y1: "406.3916666666666",
-        y2: "406.3916666666666",
-      },
-      {
-        x1: "495",
-        x2: "495",
-        y1: "429.2583333333333",
-        y2: "406.3916666666666",
-      },
-      {
-        x1: "490",
-        x2: "500",
-        y1: "429.2583333333333",
-        y2: "429.2583333333333",
-      },
-    ]);
-  });
-
-  it("Renders Multiple Error Bars in Line", () => {
-    const renderTestCase = createSelectorTestCase(() => (
-      <LineChart data={lineData} width={500} height={500}>
-        <Line isAnimationActive={false} dataKey="uv">
-          <ErrorBar dataKey="uvError" />
-          <ErrorBar dataKey="pvError" />
-        </Line>
-      </LineChart>
-    ));
-
-    const { container } = renderTestCase();
-
-    expectErrorBars(container, [
-      {
-        x1: "0",
-        x2: "10",
-        y1: "78.50000000000001",
-        y2: "78.50000000000001",
-      },
-      {
-        x1: "5",
-        x2: "5",
-        y1: "117.29166666666666",
-        y2: "78.50000000000001",
-      },
-      {
-        x1: "0",
-        x2: "10",
-        y1: "117.29166666666666",
-        y2: "117.29166666666666",
-      },
-      {
-        x1: "122.5",
-        x2: "132.5",
-        y1: "356.1666666666667",
-        y2: "356.1666666666667",
-      },
-      {
-        x1: "127.5",
-        x2: "127.5",
-        y1: "409.25",
-        y2: "356.1666666666667",
-      },
-      {
-        x1: "122.5",
-        x2: "132.5",
-        y1: "409.25",
-        y2: "409.25",
-      },
-      {
-        x1: "245",
-        x2: "255",
-        y1: "364.33333333333337",
-        y2: "364.33333333333337",
-      },
-      {
-        x1: "250",
-        x2: "250",
-        y1: "397",
-        y2: "364.33333333333337",
-      },
-      {
-        x1: "245",
-        x2: "255",
-        y1: "397",
-        y2: "397",
-      },
-      {
-        x1: "367.5",
-        x2: "377.5",
-        y1: "405.1666666666667",
-        y2: "405.1666666666667",
-      },
-      {
-        x1: "372.5",
-        x2: "372.5",
-        y1: "421.5",
-        y2: "405.1666666666667",
-      },
-      {
-        x1: "367.5",
-        x2: "377.5",
-        y1: "421.5",
-        y2: "421.5",
-      },
-      {
-        x1: "490",
-        x2: "500",
-        y1: "406.3916666666666",
-        y2: "406.3916666666666",
-      },
-      {
-        x1: "495",
-        x2: "495",
-        y1: "429.2583333333333",
-        y2: "406.3916666666666",
-      },
-      {
-        x1: "490",
-        x2: "500",
-        y1: "429.2583333333333",
-        y2: "429.2583333333333",
-      },
-      {
-        x1: "0",
-        x2: "10",
-        y1: "70.33333333333331",
-        y2: "70.33333333333331",
-      },
-      {
-        x1: "5",
-        x2: "5",
-        y1: "123.41666666666669",
-        y2: "70.33333333333331",
-      },
-      {
-        x1: "0",
-        x2: "10",
-        y1: "123.41666666666669",
-        y2: "123.41666666666669",
-      },
-      {
-        x1: "122.5",
-        x2: "132.5",
-        y1: "364.33333333333337",
-        y2: "364.33333333333337",
-      },
-      {
-        x1: "127.5",
-        x2: "127.5",
-        y1: "403.125",
-        y2: "364.33333333333337",
-      },
-      {
-        x1: "122.5",
-        x2: "132.5",
-        y1: "403.125",
-        y2: "403.125",
-      },
-      {
-        x1: "245",
-        x2: "255",
-        y1: "372.5",
-        y2: "372.5",
-      },
-      {
-        x1: "250",
-        x2: "250",
-        y1: "388.8333333333333",
-        y2: "372.5",
-      },
-      {
-        x1: "245",
-        x2: "255",
-        y1: "388.8333333333333",
-        y2: "388.8333333333333",
-      },
-      {
-        x1: "367.5",
-        x2: "377.5",
-        y1: "401.90000000000003",
-        y2: "401.90000000000003",
-      },
-      {
-        x1: "372.5",
-        x2: "372.5",
-        y1: "424.76666666666665",
-        y2: "401.90000000000003",
-      },
-      {
-        x1: "367.5",
-        x2: "377.5",
-        y1: "424.76666666666665",
-        y2: "424.76666666666665",
-      },
-      {
-        x1: "490",
-        x2: "500",
-        y1: "401.4916666666667",
-        y2: "401.4916666666667",
-      },
-      {
-        x1: "495",
-        x2: "495",
-        y1: "434.15833333333336",
-        y2: "401.4916666666667",
-      },
-      {
-        x1: "490",
-        x2: "500",
-        y1: "434.15833333333336",
-        y2: "434.15833333333336",
-      },
-    ]);
-  });
-
-  it("renders two ErrorBars in ScatterChart, one for XAxis another for YAxis", () => {
-    const renderTestCase = createSelectorTestCase(() => (
-      <ScatterChart width={500} height={500}>
-        <Scatter isAnimationActive={false} data={dataWithError} dataKey="uv">
-          <ErrorBar dataKey="uvError" direction="y" />
-          <ErrorBar dataKey="pvError" direction="x" />
-        </Scatter>
-        <XAxis type="number" />
-      </ScatterChart>
-    ));
-
-    const { container } = renderTestCase();
-    expect(container.querySelectorAll(".recharts-errorBars")).toHaveLength(2);
-
-    expectScatterPoints(container, [
-      {
-        cx: "326671.6666666667",
-        cy: "209.44444444444443",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "9.0270333367641",
-        transform: "translate(326671.6666666667, 209.44444444444443)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "539005",
-        cy: "43.33333333333335",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "9.0270333367641",
-        transform: "translate(539005, 43.33333333333335)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "522671.6666666667",
-        cy: "56.111111111111136",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "9.0270333367641",
-        transform: "translate(522671.6666666667, 56.111111111111136)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "457338.3333333333",
-        cy: "107.22222222222221",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "9.0270333367641",
-        transform: "translate(457338.3333333333, 107.22222222222221)",
-        width: "9.0270333367641",
-      },
-    ]);
-
-    expectErrorBars(container, [
-      {
-        x1: "326666.6666666667",
-        x2: "326676.6666666667",
-        y1: "203.05555555555557",
-        y2: "203.05555555555557",
-      },
-      {
-        x1: "326671.6666666667",
-        x2: "326671.6666666667",
-        y1: "222.2222222222222",
-        y2: "203.05555555555557",
-      },
-      {
-        x1: "326666.6666666667",
-        x2: "326676.6666666667",
-        y1: "222.2222222222222",
-        y2: "222.2222222222222",
-      },
-      {
-        x1: "539000",
-        x2: "539010",
-        y1: "25.444444444444425",
-        y2: "25.444444444444425",
-      },
-      {
-        x1: "539005",
-        x2: "539005",
-        y1: "58.66666666666668",
-        y2: "25.444444444444425",
-      },
-      {
-        x1: "539000",
-        x2: "539010",
-        y1: "58.66666666666668",
-        y2: "58.66666666666668",
-      },
-      {
-        x1: "522666.6666666667",
-        x2: "522676.6666666667",
-        y1: "45.8888888888889",
-        y2: "45.8888888888889",
-      },
-      {
-        x1: "522671.6666666667",
-        x2: "522671.6666666667",
-        y1: "71.44444444444446",
-        y2: "45.8888888888889",
-      },
-      {
-        x1: "522666.6666666667",
-        x2: "522676.6666666667",
-        y1: "71.44444444444446",
-        y2: "71.44444444444446",
-      },
-      {
-        x1: "457333.3333333333",
-        x2: "457343.3333333333",
-        y1: "81.66666666666666",
-        y2: "81.66666666666666",
-      },
-      {
-        x1: "457338.3333333333",
-        x2: "457338.3333333333",
-        y1: "120",
-        y2: "81.66666666666666",
-      },
-      {
-        x1: "457333.3333333333",
-        x2: "457343.3333333333",
-        y1: "120",
-        y2: "120",
-      },
-      {
-        x1: "329938.3333333333",
-        x2: "329938.3333333333",
-        y1: "214.44444444444443",
-        y2: "204.44444444444443",
-      },
-      {
-        x1: "308705",
-        x2: "329938.3333333333",
-        y1: "209.44444444444443",
-        y2: "209.44444444444443",
-      },
-      {
-        x1: "308705",
-        x2: "308705",
-        y1: "214.44444444444443",
-        y2: "204.44444444444443",
-      },
-      {
-        x1: "547171.6666666666",
-        x2: "547171.6666666666",
-        y1: "48.33333333333335",
-        y2: "38.33333333333335",
-      },
-      {
-        x1: "530838.3333333334",
-        x2: "547171.6666666666",
-        y1: "43.33333333333335",
-        y2: "43.33333333333335",
-      },
-      {
-        x1: "530838.3333333334",
-        x2: "530838.3333333334",
-        y1: "48.33333333333335",
-        y2: "38.33333333333335",
-      },
-      {
-        x1: "539005",
-        x2: "539005",
-        y1: "61.111111111111136",
-        y2: "51.111111111111136",
-      },
-      {
-        x1: "490005",
-        x2: "539005",
-        y1: "56.111111111111136",
-        y2: "56.111111111111136",
-      },
-      {
-        x1: "490005",
-        x2: "490005",
-        y1: "61.111111111111136",
-        y2: "51.111111111111136",
-      },
-      {
-        x1: "462238.3333333333",
-        x2: "462238.3333333333",
-        y1: "112.22222222222221",
-        y2: "102.22222222222221",
-      },
-      {
-        x1: "452438.3333333333",
-        x2: "462238.3333333333",
-        y1: "107.22222222222221",
-        y2: "107.22222222222221",
-      },
-      {
-        x1: "452438.3333333333",
-        x2: "452438.3333333333",
-        y1: "112.22222222222221",
-        y2: "102.22222222222221",
-      },
-    ]);
-  });
-
-  it("renders two ErrorBars in vertical ScatterChart, one for XAxis another for YAxis", () => {
-    const renderTestCase = createSelectorTestCase(() => (
-      <ScatterChart width={500} height={500} layout="vertical">
-        <Scatter isAnimationActive={false} data={dataWithError} dataKey="uv">
-          <ErrorBar dataKey="uvError" direction="y" />
-          <ErrorBar dataKey="pvError" direction="x" />
-        </Scatter>
-        <XAxis type="number" />
-      </ScatterChart>
-    ));
-
-    const { container } = renderTestCase();
-
-    expect(container.querySelectorAll(".recharts-errorBars")).toHaveLength(2);
-
-    const errorBars = container.querySelectorAll(".recharts-errorBar");
-    errorBars.forEach((bar) => {
-      expect(bar.tagName).toEqual("g");
-      expect(bar.getAttributeNames()).toEqual(["class", "stroke", "stroke-width", "offset"]);
-      expect(bar.childElementCount).toEqual(3);
-    });
-
-    expectScatterPoints(container, [
-      {
-        cx: "293.2352941176471",
-        cy: "306671.6666666667",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "9.0270333367641",
-        transform: "translate(293.2352941176471, 306671.6666666667)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "480.5882352941176",
-        cy: "506005",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "9.0270333367641",
-        transform: "translate(480.5882352941176, 506005)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "466.1764705882353",
-        cy: "490671.66666666674",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "9.0270333367641",
-        transform: "translate(466.1764705882353, 490671.66666666674)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "408.52941176470586",
-        cy: "429338.3333333333",
-        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-        height: "9.0270333367641",
-        transform: "translate(408.52941176470586, 429338.3333333333)",
-        width: "9.0270333367641",
-      },
-    ]);
-
-    expectErrorBars(container, [
-      {
-        x1: "288.2352941176471",
-        x2: "298.2352941176471",
-        y1: "314338.3333333333",
-        y2: "314338.3333333333",
-      },
-      {
-        x1: "293.2352941176471",
-        x2: "293.2352941176471",
-        y1: "291338.3333333333",
-        y2: "314338.3333333333",
-      },
-      {
-        x1: "288.2352941176471",
-        x2: "298.2352941176471",
-        y1: "291338.3333333333",
-        y2: "291338.3333333333",
-      },
-      {
-        x1: "475.5882352941176",
-        x2: "485.5882352941176",
-        y1: "527471.6666666666",
-        y2: "527471.6666666666",
-      },
-      {
-        x1: "480.5882352941176",
-        x2: "480.5882352941176",
-        y1: "487605",
-        y2: "527471.6666666666",
-      },
-      {
-        x1: "475.5882352941176",
-        x2: "485.5882352941176",
-        y1: "487605",
-        y2: "487605",
-      },
-      {
-        x1: "461.1764705882353",
-        x2: "471.1764705882353",
-        y1: "502938.33333333326",
-        y2: "502938.33333333326",
-      },
-      {
-        x1: "466.1764705882353",
-        x2: "466.1764705882353",
-        y1: "472271.66666666674",
-        y2: "502938.33333333326",
-      },
-      {
-        x1: "461.1764705882353",
-        x2: "471.1764705882353",
-        y1: "472271.66666666674",
-        y2: "472271.66666666674",
-      },
-      {
-        x1: "403.52941176470586",
-        x2: "413.52941176470586",
-        y1: "460005",
-        y2: "460005",
-      },
-      {
-        x1: "408.52941176470586",
-        x2: "408.52941176470586",
-        y1: "414005",
-        y2: "460005",
-      },
-      {
-        x1: "403.52941176470586",
-        x2: "413.52941176470586",
-        y1: "414005",
-        y2: "414005",
-      },
-      {
-        x1: "296.1176470588235",
-        x2: "296.1176470588235",
-        y1: "306676.6666666667",
-        y2: "306666.6666666667",
-      },
-      {
-        x1: "277.3823529411765",
-        x2: "296.1176470588235",
-        y1: "306671.6666666667",
-        y2: "306671.6666666667",
-      },
-      {
-        x1: "277.3823529411765",
-        x2: "277.3823529411765",
-        y1: "306676.6666666667",
-        y2: "306666.6666666667",
-      },
-      {
-        x1: "487.79411764705884",
-        x2: "487.79411764705884",
-        y1: "506010",
-        y2: "506000",
-      },
-      {
-        x1: "473.3823529411765",
-        x2: "487.79411764705884",
-        y1: "506005",
-        y2: "506005",
-      },
-      {
-        x1: "473.3823529411765",
-        x2: "473.3823529411765",
-        y1: "506010",
-        y2: "506000",
-      },
-      {
-        x1: "480.5882352941176",
-        x2: "480.5882352941176",
-        y1: "490676.66666666674",
-        y2: "490666.66666666674",
-      },
-      {
-        x1: "437.35294117647055",
-        x2: "480.5882352941176",
-        y1: "490671.66666666674",
-        y2: "490671.66666666674",
-      },
-      {
-        x1: "437.35294117647055",
-        x2: "437.35294117647055",
-        y1: "490676.66666666674",
-        y2: "490666.66666666674",
-      },
-      {
-        x1: "412.8529411764706",
-        x2: "412.8529411764706",
-        y1: "429343.3333333333",
-        y2: "429333.3333333333",
-      },
-      {
-        x1: "404.20588235294116",
-        x2: "412.8529411764706",
-        y1: "429338.3333333333",
-        y2: "429338.3333333333",
-      },
-      {
-        x1: "404.20588235294116",
-        x2: "404.20588235294116",
-        y1: "429343.3333333333",
-        y2: "429333.3333333333",
-      },
-    ]);
-  });
-
-  it.each(["category", undefined] as const)(
-    "does not render anything when direction=x and XAxis id type=%s",
-    (domainType) => {
-      const renderTestCase = createSelectorTestCase(() => (
-        <BarChart data={dataWithError} width={500} height={500}>
-          <XAxis dataKey="name" type={domainType} />
-          <Bar isAnimationActive={false} dataKey="uv">
-            <ErrorBar isAnimationActive animationEasing="linear" dataKey="uvError" direction="x" />
-          </Bar>
-        </BarChart>
-      ));
-
-      const { container } = renderTestCase();
-      expectErrorBars(container, []);
-    },
-  );
-
-  describe("ErrorBar and axis domain interaction", () => {
-    describe("extending domain when data is declared on chart container", () => {
-      // Two static renders (without/with ErrorBar) + unmount between — avoids the dynamic-mount NO_OWNER artifact.
-      const renderWithoutError = createSelectorTestCase((props) => (
-        <BarChart data={dataWithError} width={500} height={500}>
-          <YAxis dataKey="uv" />
-          <Bar isAnimationActive={false} dataKey="uv" />
-          {props.children}
-        </BarChart>
-      ));
-      const renderWithError = createSelectorTestCase((props) => (
-        <BarChart data={dataWithError} width={500} height={500}>
-          <YAxis dataKey="uv" />
-          <Bar isAnimationActive={false} dataKey="uv">
-            <ErrorBar dataKey="uvError" />
-          </Bar>
-          {props.children}
-        </BarChart>
-      ));
-
-      test("selectAxisDomainIncludingNiceTicks", () => {
-        const { spy, unmount } = renderWithoutError((state: RechartsRootState) =>
-          selectAxisDomainIncludingNiceTicks(state, "yAxis", 0, useIsPanorama()),
-        );
-        expect(spy).toHaveBeenCalledWith([0, 3400]);
-
-        unmount();
-        const { spy: spyWith } = renderWithError((state: RechartsRootState) =>
-          selectAxisDomainIncludingNiceTicks(state, "yAxis", 0, useIsPanorama()),
-        );
-        expect(spyWith).toHaveBeenLastCalledWith([0, 3600]);
-      });
-
-      test("YAxis ticks", () => {
-        const { container, unmount } = renderWithoutError();
-        expectYAxisTicks(container, [
-          {
-            textContent: "0",
-            x: "57",
-            y: "495",
-          },
-          {
-            textContent: "850",
-            x: "57",
-            y: "372.5",
-          },
-          {
-            textContent: "1700",
-            x: "57",
-            y: "250",
-          },
-          {
-            textContent: "2550",
-            x: "57",
-            y: "127.5",
-          },
-          {
-            textContent: "3400",
-            x: "57",
-            y: "5",
-          },
-        ]);
-
-        unmount();
-        const { container: containerWith } = renderWithError();
-
-        // these ticks are in the same position but going higher because the ErrorBar pushed YAxis domain
-        expectYAxisTicks(containerWith, [
-          {
-            textContent: "0",
-            x: "57",
-            y: "495",
-          },
-          {
-            textContent: "900",
-            x: "57",
-            y: "372.5",
-          },
-          {
-            textContent: "1800",
-            x: "57",
-            y: "250",
-          },
-          {
-            textContent: "2700",
-            x: "57",
-            y: "127.5",
-          },
-          {
-            textContent: "3600",
-            x: "57",
-            y: "5",
-          },
-        ]);
-      });
-
-      it("should render ErrorBars", () => {
-        const { container, unmount } = renderWithoutError();
-        expectErrorBars(container, []);
-        unmount();
-        const { container: containerWith } = renderWithError();
-        expectErrorBars(containerWith, [
-          {
-            x1: "113.75",
-            x2: "123.75",
-            y1: "215.97222222222223",
-            y2: "215.97222222222223",
-          },
-          {
-            x1: "118.75",
-            x2: "118.75",
-            y1: "236.38888888888889",
-            y2: "215.97222222222223",
-          },
-          {
-            x1: "113.75",
-            x2: "123.75",
-            y1: "236.38888888888889",
-            y2: "236.38888888888889",
-          },
-          {
-            x1: "221.25",
-            x2: "231.25",
-            y1: "26.777777777777754",
-            y2: "26.777777777777754",
-          },
-          {
-            x1: "226.25",
-            x2: "226.25",
-            y1: "62.16666666666668",
-            y2: "26.777777777777754",
-          },
-          {
-            x1: "221.25",
-            x2: "231.25",
-            y1: "62.16666666666668",
-            y2: "62.16666666666668",
-          },
-          {
-            x1: "328.75",
-            x2: "338.75",
-            y1: "48.555555555555564",
-            y2: "48.555555555555564",
-          },
-          {
-            x1: "333.75",
-            x2: "333.75",
-            y1: "75.77777777777779",
-            y2: "48.555555555555564",
-          },
-          {
-            x1: "328.75",
-            x2: "338.75",
-            y1: "75.77777777777779",
-            y2: "75.77777777777779",
-          },
-          {
-            x1: "436.25",
-            x2: "446.25",
-            y1: "86.66666666666666",
-            y2: "86.66666666666666",
-          },
-          {
-            x1: "441.25",
-            x2: "441.25",
-            y1: "127.5",
-            y2: "86.66666666666666",
-          },
-          {
-            x1: "436.25",
-            x2: "446.25",
-            y1: "127.5",
-            y2: "127.5",
-          },
-        ]);
-      });
-    });
-
-    describe("extending YAxis domain when data is defined on the graphical item", () => {
-      const [withError, setWithError] = createSignal(false);
-      const renderTestCase = createSelectorTestCase((props) => (
-        <LineChart width={500} height={500}>
-          <YAxis dataKey="uv" />
-          <Line isAnimationActive={false} dataKey="uv" data={dataWithError}>
-            <Show when={withError()}>
-              <ErrorBar dataKey="uvError" />
-            </Show>
-          </Line>
-          {props.children}
-        </LineChart>
-      ));
-
-      test("selectAxisDomainIncludingNiceTicks", () => {
-        setWithError(false);
-        const { spy } = renderTestCase((state: RechartsRootState) =>
-          selectAxisDomainIncludingNiceTicks(state, "yAxis", 0, useIsPanorama()),
-        );
-        expect(spy).toHaveBeenCalledWith([0, 3400]);
-
-        setWithError(true);
-        flush();
-
-        expect(spy).toHaveBeenLastCalledWith([0, 3600]);
-      });
-
-      test("YAxis ticks", () => {
-        setWithError(false);
-        const { container } = renderTestCase();
-
-        expectYAxisTicks(container, [
-          {
-            textContent: "0",
-            x: "57",
-            y: "495",
-          },
-          {
-            textContent: "850",
-            x: "57",
-            y: "372.5",
-          },
-          {
-            textContent: "1700",
-            x: "57",
-            y: "250",
-          },
-          {
-            textContent: "2550",
-            x: "57",
-            y: "127.5",
-          },
-          {
-            textContent: "3400",
-            x: "57",
-            y: "5",
-          },
-        ]);
-
-        setWithError(true);
-        flush();
-
-        expectYAxisTicks(container, [
-          {
-            textContent: "0",
-            x: "57",
-            y: "495",
-          },
-          {
-            textContent: "900",
-            x: "57",
-            y: "372.5",
-          },
-          {
-            textContent: "1800",
-            x: "57",
-            y: "250",
-          },
-          {
-            textContent: "2700",
-            x: "57",
-            y: "127.5",
-          },
-          {
-            textContent: "3600",
-            x: "57",
-            y: "5",
-          },
-        ]);
-      });
-
-      test("should render ErrorBars", () => {
-        setWithError(false);
-        const { container } = renderTestCase();
-
-        expectErrorBars(container, []);
-
-        setWithError(true);
-        flush();
-
-        expectErrorBars(container, [
-          {
-            x1: "60",
-            x2: "70",
-            y1: "215.97222222222223",
-            y2: "215.97222222222223",
-          },
-          {
-            x1: "65",
-            x2: "65",
-            y1: "236.38888888888889",
-            y2: "215.97222222222223",
-          },
-          {
-            x1: "60",
-            x2: "70",
-            y1: "236.38888888888889",
-            y2: "236.38888888888889",
-          },
-          {
-            x1: "203.33333333333334",
-            x2: "213.33333333333334",
-            y1: "26.777777777777754",
-            y2: "26.777777777777754",
-          },
-          {
-            x1: "208.33333333333334",
-            x2: "208.33333333333334",
-            y1: "62.16666666666668",
-            y2: "26.777777777777754",
-          },
-          {
-            x1: "203.33333333333334",
-            x2: "213.33333333333334",
-            y1: "62.16666666666668",
-            y2: "62.16666666666668",
-          },
-          {
-            x1: "346.6666666666667",
-            x2: "356.6666666666667",
-            y1: "48.555555555555564",
-            y2: "48.555555555555564",
-          },
-          {
-            x1: "351.6666666666667",
-            x2: "351.6666666666667",
-            y1: "75.77777777777779",
-            y2: "48.555555555555564",
-          },
-          {
-            x1: "346.6666666666667",
-            x2: "356.6666666666667",
-            y1: "75.77777777777779",
-            y2: "75.77777777777779",
-          },
-          {
-            x1: "490",
-            x2: "500",
-            y1: "86.66666666666666",
-            y2: "86.66666666666666",
-          },
-          {
-            x1: "495",
-            x2: "495",
-            y1: "127.5",
-            y2: "86.66666666666666",
-          },
-          {
-            x1: "490",
-            x2: "500",
-            y1: "127.5",
-            y2: "127.5",
-          },
-        ]);
-      });
-    });
-
-    describe("extending YAxis domain for ranged Bar values", () => {
-      type BoxPlotDatum = {
-        category: string;
-        min: number;
-        q1: number;
-        q3: number;
-        max: number;
-      };
-
-      const boxPlotData: ReadonlyArray<BoxPlotDatum> = [
-        { category: "A", min: 16, q1: 20, q3: 29, max: 35 },
-        { category: "B", min: 12, q1: 15, q3: 21, max: 27 },
-        { category: "C", min: 22, q1: 26, q3: 34, max: 39 },
-        { category: "D", min: 9, q1: 13, q3: 20, max: 26 },
-      ];
-
-      const boxDataKey = (entry: BoxPlotDatum): [number, number] => [entry.q1, entry.q3];
-      const whiskerDataKey = (entry: BoxPlotDatum): [number, number] => [
-        entry.q3 - entry.min,
-        entry.max - entry.q3,
-      ];
-
-      // Two static renders (without/with ErrorBar) + unmount between — avoids the dynamic-mount NO_OWNER artifact.
-      const renderWithoutError = createSelectorTestCase((props) => (
-        <BarChart data={boxPlotData} width={500} height={500}>
-          <YAxis />
-          <Bar isAnimationActive={false} dataKey={boxDataKey} />
-          {props.children}
-        </BarChart>
-      ));
-      const renderWithError = createSelectorTestCase((props) => (
-        <BarChart data={boxPlotData} width={500} height={500}>
-          <YAxis />
-          <Bar isAnimationActive={false} dataKey={boxDataKey}>
-            <ErrorBar dataKey={whiskerDataKey} />
-          </Bar>
-          {props.children}
-        </BarChart>
-      ));
-
-      test("getErrorDomainByDataKey should support ranged bar values", () => {
-        const errorDomain = getErrorDomainByDataKey(boxPlotData[0]!, boxDataKey(boxPlotData[0]!), [
-          { direction: "y", dataKey: whiskerDataKey },
-        ]);
-        expect(errorDomain).toEqual([16, 35]);
-      });
-
-      test("selectNumericalDomain should include error bars for ranged bars", () => {
-        const { spy, unmount } = renderWithoutError((state: RechartsRootState) =>
-          selectNumericalDomain(state, "yAxis", 0, false),
-        );
-
-        expectLastCalledWith(spy, [0, 34]);
-
-        unmount();
-        const { spy: spyWith } = renderWithError((state: RechartsRootState) =>
-          selectNumericalDomain(state, "yAxis", 0, false),
-        );
-
-        expectLastCalledWith(spyWith, [0, 39]);
-      });
-    });
-
-    describe("extending YAxis domain when Scatter has its own data (boxplot example)", () => {
-      type BoxPlotDatum = {
-        category: string;
-        min: number;
-        q1: number;
-        q3: number;
-        max: number;
-      };
-
-      const boxPlotData: ReadonlyArray<BoxPlotDatum> = [
-        { category: "A", min: 16, q1: 20, q3: 29, max: 35 },
-        { category: "B", min: 12, q1: 15, q3: 21, max: 27 },
-        { category: "C", min: 22, q1: 26, q3: 34, max: 39 },
-        { category: "D", min: 9, q1: 13, q3: 20, max: 26 },
-      ];
-
-      type OutlierDatum = {
-        category: string;
-        value: number;
-      };
-
-      // All outlier values are within the box plot + ErrorBar range (max=39),
-      // so the YAxis domain should remain [0, 39] driven by the Bar+ErrorBar.
-      // The bug: when Scatter has its own data, selectDisplayedData returns ONLY the
-      // Scatter outliers, ignoring Bar chart data entirely. The domain then becomes
-      // [0, 25] (max of outliers) instead of the correct [0, 39].
-      const outliers: ReadonlyArray<OutlierDatum> = [
-        { category: "A", value: 10 },
-        { category: "B", value: 5 },
-        { category: "D", value: 25 },
-      ];
-
-      const boxDataKey = (entry: BoxPlotDatum): [number, number] => [entry.q1, entry.q3];
-      const whiskerDataKey = (entry: BoxPlotDatum): [number, number] => [
-        entry.q3 - entry.min,
-        entry.max - entry.q3,
-      ];
-
-      const renderWithScatter = createSelectorTestCase((props) => (
-        <BarChart data={boxPlotData} width={500} height={500}>
-          <YAxis />
-          <Bar isAnimationActive={false} dataKey={boxDataKey}>
-            <ErrorBar dataKey={whiskerDataKey} />
-          </Bar>
-          <Scatter data={outliers} dataKey="value" />
-          {props.children}
-        </BarChart>
-      ));
-
-      test("selectNumericalDomain should cover Bar+ErrorBar range even when Scatter has its own data", () => {
-        const { spy } = renderWithScatter((state: RechartsRootState) =>
-          selectNumericalDomain(state, "yAxis", 0, false),
-        );
-
-        // Bar q1/q3 range + ErrorBar extending to min/max: C.max=39 is the highest value.
-        // Scatter outliers are all within that range (max=25 < 39).
-        // Therefore the domain should be [0, 39], not [0, 25].
-        expectLastCalledWith(spy, [0, 39]);
-      });
-    });
-
-    describe("extending XAxis domain", () => {
-      // Two static renders (without/with ErrorBar) + unmount between — avoids the dynamic-mount NO_OWNER artifact.
-      const renderWithoutError = createSelectorTestCase((props) => (
-        <BarChart data={dataWithError} width={500} height={500} layout="vertical">
-          <XAxis dataKey="uv" type="number" />
-          <Bar isAnimationActive={false} dataKey="uv" />
-          <YAxis type="category" />
-          {props.children}
-        </BarChart>
-      ));
-      const renderWithError = createSelectorTestCase((props) => (
-        <BarChart data={dataWithError} width={500} height={500} layout="vertical">
-          <XAxis dataKey="uv" type="number" />
-          <Bar isAnimationActive={false} dataKey="uv">
-            <ErrorBar isAnimationActive animationEasing="linear" dataKey="uvError" />
-          </Bar>
-          <YAxis type="category" />
-          {props.children}
-        </BarChart>
-      ));
-
-      test("selectAxisDomainIncludingNiceTicks", () => {
-        const { spy, unmount } = renderWithoutError((state: RechartsRootState) =>
-          selectAxisDomainIncludingNiceTicks(state, "xAxis", 0, useIsPanorama()),
-        );
-        expect(spy).toHaveBeenCalledWith([0, 3400]);
-
-        unmount();
-        const { spy: spyWith } = renderWithError((state: RechartsRootState) =>
-          selectAxisDomainIncludingNiceTicks(state, "xAxis", 0, useIsPanorama()),
-        );
-
-        expect(spyWith).toHaveBeenLastCalledWith([0, 3600]);
-      });
-
-      test("XAxis ticks", () => {
-        const { container, unmount } = renderWithoutError();
-
-        expectXAxisTicks(container, [
-          {
-            textContent: "0",
-            x: "65",
-            y: "473",
-          },
-          {
-            textContent: "850",
-            x: "172.5",
-            y: "473",
-          },
-          {
-            textContent: "1700",
-            x: "280",
-            y: "473",
-          },
-          {
-            textContent: "2550",
-            x: "387.5",
-            y: "473",
-          },
-          {
-            textContent: "3400",
-            x: "495",
-            y: "473",
-          },
-        ]);
-
-        unmount();
-        const { container: containerWith } = renderWithError();
-
-        expectXAxisTicks(containerWith, [
-          {
-            textContent: "0",
-            x: "65",
-            y: "473",
-          },
-          {
-            textContent: "900",
-            x: "172.5",
-            y: "473",
-          },
-          {
-            textContent: "1800",
-            x: "280",
-            y: "473",
-          },
-          {
-            textContent: "2700",
-            x: "387.5",
-            y: "473",
-          },
-          {
-            textContent: "3600",
-            x: "495",
-            y: "473",
-          },
-        ]);
-      });
-
-      test("should render bars", () => {
-        const { container, unmount } = renderWithoutError();
-
-        expectBars(container, [
-          {
-            d: "M 65,16.5 h 252.9412 v 92 h -252.9412 Z",
-            height: "92",
-            radius: "0",
-            width: "252.9412",
-            x: "65",
-            y: "16.5",
-          },
-          {
-            d: "M 65,131.5 h 417.3529 v 92 h -417.3529 Z",
-            height: "92",
-            radius: "0",
-            width: "417.3529",
-            x: "65",
-            y: "131.5",
-          },
-          {
-            d: "M 65,246.5 h 404.7059 v 92 h -404.7059 Z",
-            height: "92",
-            radius: "0",
-            width: "404.7059",
-            x: "65",
-            y: "246.5",
-          },
-          {
-            d: "M 65,361.5 h 354.1176 v 92 h -354.1176 Z",
-            height: "92",
-            radius: "0",
-            width: "354.1176",
-            x: "65",
-            y: "361.5",
-          },
-        ]);
-
-        unmount();
-        const { container: containerWith } = renderWithError();
-
-        expectBars(containerWith, [
-          {
-            d: "M 65,16.5 h 238.8889 v 92 h -238.8889 Z",
-            height: "92",
-            radius: "0",
-            width: "238.8889",
-            x: "65",
-            y: "16.5",
-          },
-          {
-            d: "M 65,131.5 h 394.1667 v 92 h -394.1667 Z",
-            height: "92",
-            radius: "0",
-            width: "394.1667",
-            x: "65",
-            y: "131.5",
-          },
-          {
-            d: "M 65,246.5 h 382.2222 v 92 h -382.2222 Z",
-            height: "92",
-            radius: "0",
-            width: "382.2222",
-            x: "65",
-            y: "246.5",
-          },
-          {
-            d: "M 65,361.5 h 334.4444 v 92 h -334.4444 Z",
-            height: "92",
-            radius: "0",
-            width: "334.4444",
-            x: "65",
-            y: "361.5",
-          },
-        ]);
-      });
-
-      test("should render ErrorBars", () => {
-        const { container, unmount } = renderWithoutError();
-
-        expectErrorBars(container, []);
-
-        unmount();
-        const { container: containerWith } = renderWithError();
-
-        expectErrorBars(containerWith, [
-          {
-            x1: "309.8611111111111",
-            x2: "309.8611111111111",
-            y1: "67.5",
-            y2: "57.5",
-          },
-          {
-            x1: "291.94444444444446",
-            x2: "309.8611111111111",
-            y1: "62.5",
-            y2: "62.5",
-          },
-          {
-            x1: "291.94444444444446",
-            x2: "291.94444444444446",
-            y1: "67.5",
-            y2: "57.5",
-          },
-          {
-            x1: "475.8888888888889",
-            x2: "475.8888888888889",
-            y1: "182.5",
-            y2: "172.5",
-          },
-          {
-            x1: "444.8333333333333",
-            x2: "475.8888888888889",
-            y1: "177.5",
-            y2: "177.5",
-          },
-          {
-            x1: "444.8333333333333",
-            x2: "444.8333333333333",
-            y1: "182.5",
-            y2: "172.5",
-          },
-          {
-            x1: "456.77777777777777",
-            x2: "456.77777777777777",
-            y1: "297.5",
-            y2: "287.5",
-          },
-          {
-            x1: "432.8888888888889",
-            x2: "456.77777777777777",
-            y1: "292.5",
-            y2: "292.5",
-          },
-          {
-            x1: "432.8888888888889",
-            x2: "432.8888888888889",
-            y1: "297.5",
-            y2: "287.5",
-          },
-          {
-            x1: "423.3333333333333",
-            x2: "423.3333333333333",
-            y1: "412.5",
-            y2: "402.5",
-          },
-          {
-            x1: "387.5",
-            x2: "423.3333333333333",
-            y1: "407.5",
-            y2: "407.5",
-          },
-          {
-            x1: "387.5",
-            x2: "387.5",
-            y1: "412.5",
-            y2: "402.5",
-          },
-        ]);
-      });
-    });
-
-    describe("extending XAxis domain when data is defined on the graphical item", () => {
-      const [withError, setWithError] = createSignal(false);
-      const renderTestCase = createSelectorTestCase((props) => (
-        <LineChart width={500} height={500}>
-          <XAxis dataKey="uv" type="number" />
-          <Line isAnimationActive={false} dataKey="uv" data={dataWithError}>
-            <Show when={withError()}>
-              <ErrorBar dataKey="uvError" direction="x" />
-            </Show>
-          </Line>
-          {props.children}
-        </LineChart>
-      ));
-
-      test("selectAxisDomainIncludingNiceTicks", () => {
-        setWithError(false);
-        const { spy } = renderTestCase((state: RechartsRootState) =>
-          selectAxisDomainIncludingNiceTicks(state, "xAxis", 0, useIsPanorama()),
-        );
-        expect(spy).toHaveBeenCalledWith([0, 3400]);
-
-        setWithError(true);
-        flush();
-
-        expect(spy).toHaveBeenLastCalledWith([0, 3600]);
-      });
-
-      test("XAxis ticks", () => {
-        setWithError(false);
-        const { container } = renderTestCase();
-
-        expectXAxisTicks(container, [
-          {
-            textContent: "0",
-            x: "5",
-            y: "473",
-          },
-          {
-            textContent: "850",
-            x: "127.5",
-            y: "473",
-          },
-          {
-            textContent: "1700",
-            x: "250",
-            y: "473",
-          },
-          {
-            textContent: "2550",
-            x: "372.5",
-            y: "473",
-          },
-          {
-            textContent: "3400",
-            x: "495",
-            y: "473",
-          },
-        ]);
-
-        setWithError(true);
-        flush();
-
-        expectXAxisTicks(container, [
-          {
-            textContent: "0",
-            x: "5",
-            y: "473",
-          },
-          {
-            textContent: "900",
-            x: "127.5",
-            y: "473",
-          },
-          {
-            textContent: "1800",
-            x: "250",
-            y: "473",
-          },
-          {
-            textContent: "2700",
-            x: "372.5",
-            y: "473",
-          },
-          {
-            textContent: "3600",
-            x: "495",
-            y: "473",
-          },
-        ]);
-      });
-
-      test("should render ErrorBars", () => {
-        setWithError(false);
-        const { container } = renderTestCase();
-
-        expectErrorBars(container, []);
-
-        setWithError(true);
-        flush();
-
-        expectErrorBars(container, [
-          {
-            x1: "284.02777777777777",
-            x2: "284.02777777777777",
-            y1: "199.41176470588235",
-            y2: "189.41176470588235",
-          },
-          {
-            x1: "263.6111111111111",
-            x2: "284.02777777777777",
-            y1: "194.41176470588235",
-            y2: "194.41176470588235",
-          },
-          {
-            x1: "263.6111111111111",
-            x2: "263.6111111111111",
-            y1: "199.41176470588235",
-            y2: "189.41176470588235",
-          },
-          {
-            x1: "473.22222222222223",
-            x2: "473.22222222222223",
-            y1: "23.529411764705884",
-            y2: "13.529411764705884",
-          },
-          {
-            x1: "437.8333333333333",
-            x2: "473.22222222222223",
-            y1: "18.529411764705884",
-            y2: "18.529411764705884",
-          },
-          {
-            x1: "437.8333333333333",
-            x2: "437.8333333333333",
-            y1: "23.529411764705884",
-            y2: "13.529411764705884",
-          },
-          {
-            x1: "451.44444444444446",
-            x2: "451.44444444444446",
-            y1: "37.05882352941177",
-            y2: "27.058823529411768",
-          },
-          {
-            x1: "424.22222222222223",
-            x2: "451.44444444444446",
-            y1: "32.05882352941177",
-            y2: "32.05882352941177",
-          },
-          {
-            x1: "424.22222222222223",
-            x2: "424.22222222222223",
-            y1: "37.05882352941177",
-            y2: "27.058823529411768",
-          },
-          {
-            x1: "413.3333333333333",
-            x2: "413.3333333333333",
-            y1: "91.1764705882353",
-            y2: "81.1764705882353",
-          },
-          {
-            x1: "372.5",
-            x2: "413.3333333333333",
-            y1: "86.1764705882353",
-            y2: "86.1764705882353",
-          },
-          {
-            x1: "372.5",
-            x2: "372.5",
-            y1: "91.1764705882353",
-            y2: "81.1764705882353",
-          },
-        ]);
-      });
-    });
-
-    describe("should extend domains to negative values", () => {
-      const data = [
-        { x: 100, y: 200, errorY: 30, errorX: 30 },
-        { x: 120, y: 100, errorY: [500, 30], errorX: [200, 30] },
-        { x: 170, y: 300, errorY: [10, 20], errorX: 20 },
-        { x: 140, y: 250, errorY: 30, errorX: 20 },
-        { x: 150, y: 400, errorY: [20, 300], errorX: 30 },
-        { x: 110, y: 280, errorY: 40, errorX: 40 },
-      ];
-      const renderTestCase = createSelectorTestCase((props) => (
-        <ScatterChart
-          width={400}
-          height={400}
-          margin={{
-            top: 20,
-            right: 20,
-            bottom: 20,
-            left: 20,
-          }}
-        >
-          <XAxis type="number" dataKey="x" />
-          <YAxis type="number" dataKey="y" />
-          <Scatter data={data}>
-            <ErrorBar dataKey="errorX" direction="x" />
-            <ErrorBar dataKey="errorY" direction="y" />
-          </Scatter>
-          {props.children}
-        </ScatterChart>
-      ));
-
-      it("should select XAxis domain", () => {
-        const { spy } = renderTestCase((state: RechartsRootState) =>
-          selectNumericalDomain(state, "xAxis", 0, false),
-        );
-        // lowest X is 120, with 200 error on the left, so -80
-        // highest X is 170, with 20 error on the right, so 190
-        expectLastCalledWith(spy, [-80, 190]);
-      });
-
-      it("should select YAxis domain", () => {
-        const { spy } = renderTestCase((state: RechartsRootState) =>
-          selectNumericalDomain(state, "yAxis", 0, false),
-        );
-        // lowest Y is 100, with 500 error on the bottom, so -400
-        // highest Y is 400, with 300 error on the top, so 700
-        expectLastCalledWith(spy, [-400, 700]);
-      });
-
-      it("should render XAxis ticks", () => {
-        const { container } = renderTestCase();
-        expectXAxisTicks(container, [
-          {
-            textContent: "-80",
-            x: "80",
-            y: "358",
-          },
-          {
-            textContent: "0",
-            x: "155",
-            y: "358",
-          },
-          {
-            textContent: "80",
-            x: "230",
-            y: "358",
-          },
-          {
-            textContent: "160",
-            x: "305",
-            y: "358",
-          },
-          {
-            textContent: "240",
-            x: "380",
-            y: "358",
-          },
-        ]);
-      });
-
-      it("should render YAxis ticks", () => {
-        const { container } = renderTestCase();
-        expectYAxisTicks(container, [
-          {
-            textContent: "-700",
-            x: "72",
-            y: "350",
-          },
-          {
-            textContent: "-350",
-            x: "72",
-            y: "267.5",
-          },
-          {
-            textContent: "0",
-            x: "72",
-            y: "185",
-          },
-          {
-            textContent: "350",
-            x: "72",
-            y: "102.5",
-          },
-          {
-            textContent: "700",
-            x: "72",
-            y: "20",
-          },
-        ]);
-      });
-    });
-  });
-
-  // Ported from recharts: ErrorBar whisker animation (CSS transform scale 0→1).
-  it("Renders Error Bars with animation delay", async () => {
-    const registry = createManagerRegistry();
-    const { container } = render(() => (
-      <AnimationControllerProvider value={registry.controller}>
-        <BarChart data={dataWithError} width={500} height={500}>
-          <Bar isAnimationActive={false} dataKey="uv">
-            <ErrorBar isAnimationActive begin={200} dataKey="uvError" />
-          </Bar>
-        </BarChart>
-      </AnimationControllerProvider>
-    ));
-    flush();
-
-    await registry.completeAll();
-    flush();
-
-    expectErrorBars(container, expectedErrorBars);
-    assertAnimationStyles(container, true, {
-      transition: "transform 400ms ease-in-out",
-      transform: "scaleY(1)",
-    });
-
-    // The bare `begin` SVG attribute rides through to the whisker group
-    // (recharts `Props = SVGProps & ErrorBarProps` passthrough).
-    const errorBars = container.querySelectorAll(".recharts-errorBar");
-    expect(errorBars.length).toBeGreaterThan(0);
-    errorBars.forEach((bar) => {
-      expect(bar.getAttribute("begin")).toBe("200");
-    });
-  });
-
-  it("Renders Error Bars with animation", async () => {
-    const registry = createManagerRegistry();
-    const { container } = render(() => (
-      <AnimationControllerProvider value={registry.controller}>
-        <BarChart data={dataWithError} width={500} height={500}>
-          <Bar isAnimationActive={false} dataKey="uv">
-            <ErrorBar isAnimationActive dataKey="uvError" />
-          </Bar>
-        </BarChart>
-      </AnimationControllerProvider>
-    ));
-    flush();
-
-    await registry.completeAll();
-    flush();
-
-    expectErrorBars(container, expectedErrorBars);
-    assertAnimationStyles(container, true, {
-      transition: "transform 400ms ease-in-out",
-      transform: "scaleY(1)",
-    });
-  });
-
-  it("Renders Error Bars without animation", () => {
-    const { container } = render(() => (
-      <BarChart data={dataWithError} width={500} height={500}>
-        <Bar isAnimationActive={false} dataKey="uv">
-          <ErrorBar isAnimationActive={false} dataKey="uvError" />
-        </Bar>
-      </BarChart>
-    ));
-    flush();
-
-    expectErrorBars(container, expectedErrorBars);
-    assertAnimationStyles(container, false, {
-      transform: "scaleY(1)",
-    });
-  });
-
-  it("Renders Error Bars with animation duration", async () => {
-    const registry = createManagerRegistry();
-    const { container } = render(() => (
-      <AnimationControllerProvider value={registry.controller}>
-        <BarChart data={dataWithError} width={500} height={500}>
-          <Bar isAnimationActive={false} dataKey="uv">
-            <ErrorBar isAnimationActive animationDuration={400} dataKey="uvError" />
-          </Bar>
-        </BarChart>
-      </AnimationControllerProvider>
-    ));
-    flush();
-
-    await registry.completeAll();
-    flush();
-
-    expectErrorBars(container, expectedErrorBars);
-    assertAnimationStyles(container, true, {
-      transition: "transform 400ms ease-in-out",
-      transform: "scaleY(1)",
-    });
-  });
-
-  it("Renders Error Bars with animation easing", async () => {
-    const registry = createManagerRegistry();
-    const { container } = render(() => (
-      <AnimationControllerProvider value={registry.controller}>
-        <BarChart data={dataWithError} width={500} height={500}>
-          <Bar isAnimationActive={false} dataKey="uv">
-            <ErrorBar isAnimationActive animationEasing="linear" dataKey="uvError" />
-          </Bar>
-        </BarChart>
-      </AnimationControllerProvider>
-    ));
-    flush();
-
-    await registry.completeAll();
-    flush();
-
-    expectErrorBars(container, expectedErrorBars);
-    assertAnimationStyles(container, true, {
-      transition: "transform 400ms linear",
-      transform: "scaleY(1)",
-    });
-  });
-});