solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/YAxis/YAxis.spec.tsx

@@ -1,1595 +0,0 @@
-import { describe, expect, it, test, vi } from "vitest";
-import type { Mock } from "vitest";
-import { createEffect, createSignal, flush } from "solid-js";
-import type { JSX } from "@solidjs/web";
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  ComposedChart,
-  Line,
-  LineChart,
-  ReferenceArea,
-  ReferenceDot,
-  ReferenceLine,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "../../../src";
-import type { YAxisProps, IfOverflow } from "../../../src";
-import type {
-  AxisDomain,
-  CategoricalDomain,
-  NumberDomain,
-  StackOffsetType,
-} from "../../../src/util/types";
-import { pageData, rangeData } from "../../_data";
-import { useAppSelector } from "../../../src/state/hooks";
-import {
-  implicitYAxis,
-  selectAxisDomain,
-  selectNumericalDomain,
-  selectRenderableAxisSettings,
-} from "../../../src/state/selectors/axisSelectors";
-import type { YAxisSettings } from "../../../src/state/cartesianAxisSlice";
-import { expectYAxisTicks } from "../../helper/expectAxisTicks";
-import { useIsPanorama } from "../../../src/context/PanoramaContext";
-import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
-import { getCalculatedYAxisWidth } from "../../../src/util/YAxisUtils";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { assertNotNull } from "../../helper/assertNotNull";
-import { render, fireEvent } from "@solidjs/testing-library";
-
-describe("<YAxis />", () => {
-  const data = [
-    { name: "Page A", uv: 400, pv: 2400, amt: 2400 },
-    { name: "Page B", uv: 300, pv: 1398, amt: 2400 },
-    { name: "Page C", uv: 200, pv: 9800, amt: 2400 },
-    { name: "Page D", uv: 278, pv: 3908, amt: 2400 },
-    { name: "Page E", uv: 189, pv: 4800, amt: 2400 },
-  ];
-
-  it("Should render 3 y-CartesianAxis in AreaChart", () => {
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis type="number" yAxisId={0} />
-        <YAxis type="number" orientation="right" yAxisId={1} />
-        <YAxis type="number" orientation="right" yAxisId={2} />
-        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" strokeWidth={2} yAxisId={0} />
-        <Area dataKey="pv" stroke="#387908" fill="#387908" strokeWidth={2} yAxisId={1} />
-        <Area dataKey="amt" stroke="#38abc8" fill="#38abc8" strokeWidth={2} yAxisId={2} />
-      </AreaChart>
-    ));
-
-    expect(container.querySelectorAll(".recharts-cartesian-axis-line")).toHaveLength(3);
-  });
-
-  describe("Area with range", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <AreaChart
-        width={500}
-        height={400}
-        data={rangeData}
-        margin={{
-          top: 10,
-          right: 30,
-          left: 0,
-          bottom: 0,
-        }}
-      >
-        <XAxis dataKey="day" />
-        <YAxis />
-        <Area dataKey="temperature" stroke="#d82428" fill="#8884d8" />
-        <Tooltip defaultIndex={4} active />
-        {props.children}
-      </AreaChart>
-    ));
-
-    it("should render YAxis ticks", () => {
-      const { container } = renderTestCase();
-      expectYAxisTicks(container, [
-        {
-          textContent: "-6",
-          x: "52",
-          y: "370",
-        },
-        {
-          textContent: "0",
-          x: "52",
-          y: "280",
-        },
-        {
-          textContent: "6",
-          x: "52",
-          y: "190",
-        },
-        {
-          textContent: "12",
-          x: "52",
-          y: "100",
-        },
-        {
-          textContent: "18",
-          x: "52",
-          y: "10",
-        },
-      ]);
-    });
-
-    it("should select numerical domain", () => {
-      const { spy } = renderTestCase((state) => selectNumericalDomain(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [-3, 16]);
-    });
-
-    it("should select final domain", () => {
-      const { spy } = renderTestCase((state) => selectAxisDomain(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [-3, 16]);
-    });
-  });
-
-  it("Should render 5 ticks", () => {
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis type="number" />
-        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
-      </AreaChart>
-    ));
-    const ticks = container.querySelectorAll("text");
-
-    expect(ticks).toHaveLength(5);
-    expect(ticks[1]!.getAttribute("y")).toBe("297.5");
-  });
-
-  const casesThatShowTicks: [number, AxisDomain, string][] = [
-    // [ticksLength, domain, textContentOfTickElement]
-    [5, [0, 10000], "10000"],
-    [5, [0, "dataMax"], "9800"],
-    [5, [0, "dataMax - 100"], "9800"],
-  ];
-
-  test.each(casesThatShowTicks)(
-    "Should render %s ticks when domain={%s}",
-    (length, domain, textContent) => {
-      const { container } = render(() => (
-        <AreaChart width={600} height={400} data={data}>
-          <YAxis type="number" domain={domain} />
-          <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
-          <Area dataKey="pv" stroke="#ff7300" fill="#ff7300" />
-        </AreaChart>
-      ));
-      const ticks = container.querySelectorAll("text");
-
-      expect(ticks).toHaveLength(length);
-      expect(ticks[ticks.length - 1]).toHaveTextContent(textContent);
-    },
-  );
-
-  it("should render multiple axes", () => {
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis yAxisId="a" />
-        <Area dataKey="uv" yAxisId="a" />
-        <YAxis yAxisId="b" />
-        <Area dataKey="pv" yAxisId="b" />
-        <YAxis yAxisId="c" orientation="right" />
-        <Area dataKey="amt" yAxisId="c" />
-        <YAxis yAxisId="d" type="category" orientation="right" />
-        <Area dataKey="name" yAxisId="d" />
-      </AreaChart>
-    ));
-
-    expectYAxisTicks(container, [
-      { textContent: "0", x: "117", y: "395" },
-      { textContent: "100", x: "117", y: "297.5" },
-      { textContent: "200", x: "117", y: "200" },
-      { textContent: "300", x: "117", y: "102.5" },
-      { textContent: "400", x: "117", y: "5" },
-      { textContent: "0", x: "57", y: "395" },
-      { textContent: "2500", x: "57", y: "297.5" },
-      { textContent: "5000", x: "57", y: "200" },
-      { textContent: "7500", x: "57", y: "102.5" },
-      { textContent: "10000", x: "57", y: "5" },
-      { textContent: "0", x: "483", y: "395" },
-      { textContent: "600", x: "483", y: "297.5" },
-      { textContent: "1200", x: "483", y: "200" },
-      { textContent: "1800", x: "483", y: "102.5" },
-      { textContent: "2400", x: "483", y: "5" },
-      { textContent: "Page A", x: "543", y: "395" },
-      { textContent: "Page B", x: "543", y: "297.5" },
-      { textContent: "Page C", x: "543", y: "200" },
-      { textContent: "Page D", x: "543", y: "102.5" },
-      { textContent: "Page E", x: "543", y: "5" },
-    ]);
-  });
-
-  it("should render multiple axes with some ticks mirrored", () => {
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis yAxisId="a" />
-        <Area dataKey="uv" yAxisId="a" />
-        <YAxis mirror yAxisId="b" />
-        <Area dataKey="pv" yAxisId="b" />
-        <YAxis yAxisId="c" orientation="right" />
-        <Area dataKey="amt" yAxisId="c" />
-        <YAxis mirror yAxisId="d" type="category" orientation="right" />
-        <Area dataKey="name" yAxisId="d" />
-      </AreaChart>
-    ));
-
-    expectYAxisTicks(container, [
-      { textContent: "0", x: "57", y: "395" },
-      { textContent: "100", x: "57", y: "297.5" },
-      { textContent: "200", x: "57", y: "200" },
-      { textContent: "300", x: "57", y: "102.5" },
-      { textContent: "400", x: "57", y: "5" },
-      { textContent: "0", x: "73", y: "395" },
-      { textContent: "2500", x: "73", y: "297.5" },
-      { textContent: "5000", x: "73", y: "200" },
-      { textContent: "7500", x: "73", y: "102.5" },
-      { textContent: "10000", x: "73", y: "5" },
-      { textContent: "0", x: "543", y: "395" },
-      { textContent: "600", x: "543", y: "297.5" },
-      { textContent: "1200", x: "543", y: "200" },
-      { textContent: "1800", x: "543", y: "102.5" },
-      { textContent: "2400", x: "543", y: "5" },
-      { textContent: "Page A", x: "527", y: "395" },
-      { textContent: "Page B", x: "527", y: "297.5" },
-      { textContent: "Page C", x: "527", y: "200" },
-      { textContent: "Page D", x: "527", y: "102.5" },
-      { textContent: "Page E", x: "527", y: "5" },
-    ]);
-  });
-
-  it("should not leave space for hidden axes", () => {
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis yAxisId="a" />
-        <Area dataKey="uv" yAxisId="a" />
-        <YAxis yAxisId="b" hide />
-        <Area dataKey="pv" yAxisId="b" />
-        <YAxis yAxisId="c" orientation="right" />
-        <Area dataKey="amt" yAxisId="c" />
-        <YAxis yAxisId="d" type="category" orientation="right" hide />
-        <Area dataKey="name" yAxisId="d" />
-      </AreaChart>
-    ));
-    expectYAxisTicks(container, [
-      { textContent: "0", x: "57", y: "395" },
-      { textContent: "100", x: "57", y: "297.5" },
-      { textContent: "200", x: "57", y: "200" },
-      { textContent: "300", x: "57", y: "102.5" },
-      { textContent: "400", x: "57", y: "5" },
-      { textContent: "0", x: "543", y: "395" },
-      { textContent: "600", x: "543", y: "297.5" },
-      { textContent: "1200", x: "543", y: "200" },
-      { textContent: "1800", x: "543", y: "102.5" },
-      { textContent: "2400", x: "543", y: "5" },
-    ]);
-  });
-
-  it('Renders evenly distributed ticks when domain={[0, 1000]} and dataKey is "noExist", and allowDataOverflow', () => {
-    const domain = [0, 1000] as const;
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis domain={domain} allowDataOverflow />
-        <Area dataKey="noExist" stroke="#ff7300" fill="#ff7300" />
-      </AreaChart>
-    ));
-    expectYAxisTicks(container, [
-      { textContent: "0", x: "57", y: "395" },
-      { textContent: "250", x: "57", y: "297.5" },
-      { textContent: "500", x: "57", y: "200" },
-      { textContent: "750", x: "57", y: "102.5" },
-      { textContent: "1000", x: "57", y: "5" },
-    ]);
-  });
-
-  it('Renders no ticks when domain={[0, 1000]} and dataKey is "noExist", and allowDataOverflow=false', () => {
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis domain={[0, 1000]} allowDataOverflow={false} />
-        <Area dataKey="noExist" stroke="#ff7300" fill="#ff7300" />
-      </AreaChart>
-    ));
-    expectYAxisTicks(container, []);
-  });
-
-  it('Renders no ticks when dataKey is "noExist"', () => {
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis />
-        <Area dataKey="noExist" stroke="#ff7300" fill="#ff7300" />
-      </AreaChart>
-    ));
-    expectYAxisTicks(container, []);
-  });
-
-  const casesThatDoNotShowTicks: [AxisDomain][] = [
-    [[0, "dataMax + 100"]],
-    [[0, "dataMax - 100"]],
-    [["auto", "auto"]],
-  ];
-
-  test.each(casesThatDoNotShowTicks)(
-    'Should render 0 ticks when domain={%s} and dataKey is "noExist" ',
-    (domain) => {
-      const { container } = render(() => (
-        <AreaChart width={600} height={400} data={data}>
-          <YAxis domain={domain} />
-          <Area dataKey="noExist" stroke="#ff7300" fill="#ff7300" />
-        </AreaChart>
-      ));
-      const ticks = container.querySelectorAll("text");
-
-      expect(ticks).toHaveLength(0);
-    },
-  );
-
-  describe("in simple AreaChart", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis type="number" ticks={[0, 400, 800, 1200]} />
-        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
-        {props.children}
-      </AreaChart>
-    ));
-
-    it("should select numerical domain", () => {
-      const { spy } = renderTestCase((state) => selectNumericalDomain(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [0, 1200]);
-    });
-
-    it("should select domain", () => {
-      const { spy } = renderTestCase((state) => selectAxisDomain(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [0, 1200]);
-    });
-
-    it("should render ticks", () => {
-      const { container } = renderTestCase();
-      expectYAxisTicks(container, [
-        { textContent: "0", x: "57", y: "395" },
-        { textContent: "400", x: "57", y: "265.00000000000006" },
-        { textContent: "800", x: "57", y: "135.00000000000003" },
-        { textContent: "1200", x: "57", y: "5" },
-      ]);
-    });
-  });
-
-  // SKIP: parity gap — YAxisProps has no `onClick`/tick-click handler in this port
-  // (verified: `grep onClick src/cartesian/YAxis.tsx` → none). The tick click event
-  // contract (data/index/event passed to onClick) is unimplemented.
-  it("Should pass data, index, and event to the onClick event handler", () => {
-    // intentionally empty — see skip comment above.
-  });
-
-  it("Renders axis based on specified domain when data overflow is allowed", () => {
-    /*
-     * We take domain values that have nothing to do with the test data to make sure they're really used.
-     * We generate a random integer between 1 and 100.
-     */
-    const domainStart = Math.round(Math.random() * 100);
-    const domainEnd = domainStart + Math.round(Math.random() * 100);
-
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis type="number" domain={[domainStart, domainEnd]} allowDataOverflow />
-        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
-      </AreaChart>
-    ));
-
-    // all ticks
-    const ticks = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
-
-    // value of each tick
-    const tickValues: number[] = [];
-    ticks.forEach((tick) => {
-      const tickValueText = tick.textContent;
-      expect(tickValueText).toBeTruthy();
-      // convert string to number
-      if (tickValueText) tickValues.push(Number(tickValueText));
-    });
-
-    const tickValueMax = Math.max(...tickValues);
-    const tickValueMin = Math.min(...tickValues);
-
-    expect(tickValueMin).toBe(domainStart);
-    expect(tickValueMax).toBe(domainEnd);
-  });
-
-  it("Render ticks reversed", () => {
-    const { container } = render(() => (
-      <AreaChart width={600} height={400} data={data}>
-        <YAxis reversed type="number" />
-        <Area dataKey="uv" stroke="#ff7300" fill="#ff7300" />
-      </AreaChart>
-    ));
-    expectYAxisTicks(container, [
-      { textContent: "0", x: "57", y: "5" },
-      { textContent: "100", x: "57", y: "102.5" },
-      { textContent: "200", x: "57", y: "200" },
-      { textContent: "300", x: "57", y: "297.5" },
-      { textContent: "400", x: "57", y: "395" },
-    ]);
-  });
-
-  it("Should skip rendering ticks with empty text", () => {
-    const areaData = [
-      { day: "05-01", weather: "sunny" },
-      { day: "05-02" },
-      { day: "05-03", weather: "cloudy" },
-      { day: "05-04", weather: "rain" },
-    ];
-    const { container } = render(() => (
-      <AreaChart width={400} height={400} data={areaData}>
-        <YAxis type="category" />
-        <Area type="stepAfter" dataKey="weather" stroke="#0088FE" />
-      </AreaChart>
-    ));
-    expectYAxisTicks(container, [
-      { textContent: "sunny", x: "57", y: "395" },
-      { textContent: "cloudy", x: "57", y: "200" },
-      { textContent: "rain", x: "57", y: "5" },
-    ]);
-  });
-
-  it("Should render the YAxis line without any ticks", () => {
-    const areaData = [{ day: "05-01" }, { day: "05-02" }];
-    const { container } = render(() => (
-      <AreaChart width={400} height={400} data={areaData}>
-        <YAxis type="category" />
-        <Area type="stepAfter" dataKey="weather" stroke="#0088FE" />
-      </AreaChart>
-    ));
-    const ticksGroup = container.getElementsByClassName("recharts-cartesian-axis-tick-line");
-    expect(ticksGroup).toHaveLength(0);
-
-    const axisLine = container.getElementsByClassName("recharts-cartesian-axis-line");
-    expect(axisLine).toHaveLength(1);
-
-    expectYAxisTicks(container, []);
-  });
-
-  it("should not render anything when attempting to render outside of Chart", () => {
-    const { container } = render(() => <YAxis dataKey="x" name="stature" unit="cm" />);
-    expect(container.querySelectorAll(".recharts-cartesian-axis-line")).toHaveLength(0);
-  });
-
-  describe("includeHidden", () => {
-    it.each([undefined, true, false])(
-      "should show ticks for visibleData when includeHidden=%s",
-      (includeHidden) => {
-        const domainSpy = vi.fn();
-        function Comp(props: {
-          domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-        }): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.domainSpy(d),
-          );
-          return null;
-        }
-        const { container } = render(() => (
-          <BarChart width={600} height={400} data={data}>
-            <YAxis includeHidden={includeHidden} />
-            <Bar dataKey="pv" />
-            <Bar dataKey="uv" />
-            <Comp domainSpy={domainSpy} />
-          </BarChart>
-        ));
-        expectYAxisTicks(container, [
-          { textContent: "0", x: "57", y: "395" },
-          { textContent: "2500", x: "57", y: "297.5" },
-          { textContent: "5000", x: "57", y: "200" },
-          { textContent: "7500", x: "57", y: "102.5" },
-          { textContent: "10000", x: "57", y: "5" },
-        ]);
-        expect(domainSpy).toHaveBeenLastCalledWith([0, 9800]);
-      },
-    );
-
-    it.each([false, undefined])(
-      "should exclude hidden items domain when includeHidden=%s",
-      (includeHidden) => {
-        const domainSpy = vi.fn();
-        function Comp(props: {
-          domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-        }): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.domainSpy(d),
-          );
-          return null;
-        }
-        const { container } = render(() => (
-          <BarChart width={600} height={400} data={data}>
-            <YAxis includeHidden={includeHidden} />
-            <Bar dataKey="pv" hide />
-            <Bar dataKey="uv" />
-            <Comp domainSpy={domainSpy} />
-          </BarChart>
-        ));
-        expectYAxisTicks(container, [
-          { textContent: "0", x: "57", y: "395" },
-          { textContent: "100", x: "57", y: "297.5" },
-          { textContent: "200", x: "57", y: "200" },
-          { textContent: "300", x: "57", y: "102.5" },
-          { textContent: "400", x: "57", y: "5" },
-        ]);
-        expect(domainSpy).toHaveBeenLastCalledWith([0, 400]);
-      },
-    );
-
-    it("should include hidden data domain when includeHidden=true", () => {
-      const domainSpy = vi.fn();
-      function Comp(props: {
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): null {
-        const isPanorama = useIsPanorama();
-        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-        createEffect(
-          () => domain(),
-          (d) => props.domainSpy(d),
-        );
-        return null;
-      }
-      const { container } = render(() => (
-        <BarChart width={600} height={400} data={data}>
-          <YAxis includeHidden />
-          <Bar dataKey="pv" hide />
-          <Bar dataKey="uv" />
-          <Comp domainSpy={domainSpy} />
-        </BarChart>
-      ));
-      expectYAxisTicks(container, [
-        { textContent: "0", x: "57", y: "395" },
-        { textContent: "2500", x: "57", y: "297.5" },
-        { textContent: "5000", x: "57", y: "200" },
-        { textContent: "7500", x: "57", y: "102.5" },
-        { textContent: "10000", x: "57", y: "5" },
-      ]);
-      expect(domainSpy).toHaveBeenLastCalledWith([0, 9800]);
-    });
-  });
-
-  it("should render all labels in an example", () => {
-    const view = render(() => (
-      <AreaChart
-        width={500}
-        height={400}
-        data={data}
-        margin={{
-          top: 10,
-          right: 30,
-          left: 0,
-          bottom: 0,
-        }}
-      >
-        <YAxis />
-        <Area type="monotone" dataKey="uv" stroke="#000" fill="url(#splitColor)" />
-      </AreaChart>
-    ));
-    expect(view.getByText("0")).toBeVisible();
-    expect(view.getByText("100")).toBeVisible();
-    expect(view.getByText("200")).toBeVisible();
-    expect(view.getByText("300")).toBeVisible();
-    expect(view.getByText("400")).toBeVisible();
-  });
-
-  it("should render all labels in another example", () => {
-    const { container } = render(() => (
-      <LineChart
-        width={500}
-        height={300}
-        data={pageData}
-        accessibilityLayer
-        margin={{
-          top: 5,
-          right: 5,
-          bottom: 5,
-          left: 0,
-        }}
-      >
-        <YAxis />
-        <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
-        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
-        <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
-        <Tooltip />
-      </LineChart>
-    ));
-    expectYAxisTicks(container, [
-      { textContent: "0", x: "52", y: "295" },
-      { textContent: "400", x: "52", y: "222.5" },
-      { textContent: "800", x: "52", y: "150" },
-      { textContent: "1200", x: "52", y: "77.5" },
-      { textContent: "1600", x: "52", y: "5" },
-    ]);
-  });
-
-  describe("state integration", () => {
-    it("should publish its configuration to redux store", () => {
-      const spy = vi.fn();
-      function Comp(props: { spy: (settings: YAxisSettings) => void }): null {
-        const settings = useAppSelector((state) =>
-          selectRenderableAxisSettings(state, "yAxis", "foo"),
-        );
-        createEffect(
-          () => settings(),
-          (v) => props.spy(v as YAxisSettings),
-        );
-        return null;
-      }
-      const fakeTickFormatter = () => "";
-      const { container } = render(() => (
-        <BarChart width={100} height={100}>
-          <YAxis
-            yAxisId="foo"
-            scale="log"
-            type="number"
-            includeHidden
-            reversed
-            ticks={[1, 2, 3]}
-            width={32}
-            orientation="right"
-            mirror
-            name="axis name"
-            unit="axis unit"
-            interval={9}
-            angle={17}
-            tick={false}
-            minTickGap={8}
-            tickFormatter={fakeTickFormatter}
-          />
-          <Comp spy={spy} />
-        </BarChart>
-      ));
-      // PARITY GAP (rendering only): the published settings (the subject of this test)
-      // are asserted below. recharts asserts `.yAxis` is visible; this port gates the
-      // axis Layer on a resolvable domain, so a data-less chart renders no `.yAxis`.
-      // We assert the chart surface mounted instead.
-      expect(container.querySelector(".recharts-surface")).toBeVisible();
-      const expectedSettings: YAxisSettings = {
-        angle: 17,
-        minTickGap: 8,
-        tick: false,
-        tickFormatter: fakeTickFormatter,
-        interval: 9,
-        name: "axis name",
-        unit: "axis unit",
-        hide: false,
-        orientation: "right",
-        mirror: true,
-        width: 32,
-        ticks: [1, 2, 3],
-        includeHidden: true,
-        tickCount: 5,
-        allowDecimals: true,
-        id: "foo",
-        scale: "log",
-        type: "number",
-        allowDataOverflow: false,
-        allowDuplicatedCategory: true,
-        dataKey: undefined,
-        domain: undefined,
-        padding: {
-          top: 0,
-          bottom: 0,
-        },
-        reversed: true,
-        niceTicks: "auto",
-      };
-      expectLastCalledWith(spy, expectedSettings);
-    });
-
-    it("should remove the configuration from store when DOM element is removed", () => {
-      // recharts rerenders to add/remove axis children; this Solid port uses static
-      // renders (unmount between) per variant to avoid the dynamic-remount artifact.
-      const expectedSettingsFoo: YAxisSettings = {
-        angle: 0,
-        minTickGap: 5,
-        tick: true,
-        tickFormatter: undefined,
-        interval: "preserveEnd",
-        name: undefined,
-        unit: undefined,
-        orientation: "left",
-        mirror: false,
-        width: 60,
-        ticks: undefined,
-        includeHidden: false,
-        tickCount: 5,
-        allowDecimals: true,
-        id: "foo",
-        scale: "log",
-        type: "number",
-        allowDataOverflow: false,
-        allowDuplicatedCategory: true,
-        dataKey: undefined,
-        domain: undefined,
-        padding: {
-          top: 0,
-          bottom: 0,
-        },
-        reversed: false,
-        niceTicks: "auto",
-        hide: false,
-      };
-      const expectedSettingsBar: YAxisSettings = {
-        angle: 0,
-        minTickGap: 5,
-        tick: true,
-        tickFormatter: undefined,
-        interval: "preserveEnd",
-        name: undefined,
-        unit: undefined,
-        hide: false,
-        orientation: "left",
-        mirror: false,
-        width: 60,
-        includeHidden: false,
-        id: "bar",
-        scale: "utc",
-        type: "category",
-        allowDataOverflow: false,
-        allowDuplicatedCategory: true,
-        dataKey: undefined,
-        domain: undefined,
-        padding: {
-          top: 0,
-          bottom: 0,
-        },
-        allowDecimals: true,
-        tickCount: 5,
-        reversed: false,
-        niceTicks: "auto",
-        ticks: undefined,
-      };
-
-      const makeComp = (spy: Mock) => (): null => {
-        const foo = useAppSelector((state) => selectRenderableAxisSettings(state, "yAxis", "foo"));
-        const bar = useAppSelector((state) => selectRenderableAxisSettings(state, "yAxis", "bar"));
-        createEffect(
-          () => ({ foo: foo(), bar: bar() }),
-          (v) => spy(v),
-        );
-        return null;
-      };
-
-      // variant 1: only foo
-      const spy1 = vi.fn();
-      const Comp1 = makeComp(spy1);
-      const r1 = render(() => (
-        <BarChart width={100} height={100}>
-          <YAxis yAxisId="foo" scale="log" type="number" />
-          <Comp1 />
-        </BarChart>
-      ));
-      expectLastCalledWith(spy1, {
-        foo: expectedSettingsFoo,
-        bar: implicitYAxis,
-      });
-      r1.unmount();
-
-      // variant 2: foo + bar
-      const spy2 = vi.fn();
-      const Comp2 = makeComp(spy2);
-      const r2 = render(() => (
-        <BarChart width={100} height={100}>
-          <YAxis yAxisId="foo" scale="log" type="number" />
-          <YAxis yAxisId="bar" scale="utc" type="category" />
-          <Comp2 />
-        </BarChart>
-      ));
-      expectLastCalledWith(spy2, {
-        foo: expectedSettingsFoo,
-        bar: expectedSettingsBar,
-      });
-      r2.unmount();
-
-      // variant 3: only bar
-      const spy3 = vi.fn();
-      const Comp3 = makeComp(spy3);
-      const r3 = render(() => (
-        <BarChart width={100} height={100}>
-          <YAxis yAxisId="bar" scale="utc" type="category" />
-          <Comp3 />
-        </BarChart>
-      ));
-      expectLastCalledWith(spy3, {
-        foo: implicitYAxis,
-        bar: expectedSettingsBar,
-      });
-      r3.unmount();
-
-      // variant 4: neither
-      const spy4 = vi.fn();
-      const Comp4 = makeComp(spy4);
-      render(() => (
-        <BarChart width={100} height={100}>
-          <Comp4 />
-        </BarChart>
-      ));
-      expectLastCalledWith(spy4, {
-        foo: implicitYAxis,
-        bar: implicitYAxis,
-      });
-    });
-
-    it("should remove old ID configuration when the ID changes", () => {
-      const IDChangingComponent = (props: { children: JSX.Element }): JSX.Element => {
-        const [id, setId] = createSignal("1");
-        const onClick = () => setId("2");
-        return (
-          <>
-            <button type="button" class="pushbutton" onClick={onClick}>
-              Change ID
-            </button>
-            <BarChart width={100} height={100}>
-              <YAxis yAxisId={id()} scale="log" type="number" />
-              {props.children}
-            </BarChart>
-          </>
-        );
-      };
-      const renderTestCase = createSelectorTestCase(IDChangingComponent);
-
-      const { spy, container } = renderTestCase((state) => state.cartesianAxis.yAxis);
-
-      // only id "1" exists
-      const lastCallArgs1 = spy.mock.lastCall?.[0];
-      assertNotNull(lastCallArgs1);
-      expect(Object.keys(lastCallArgs1)).toEqual(["1"]);
-
-      fireEvent.click(container.getElementsByClassName("pushbutton")[0]!);
-      flush();
-      flush();
-      flush();
-
-      // only id "2" exists
-      const lastCallArgs2 = spy.mock.lastCall?.[0];
-      assertNotNull(lastCallArgs2);
-      expect(Object.keys(lastCallArgs2)).toEqual(["2"]);
-    });
-  });
-
-  describe("in stacked BarChart", () => {
-    it.each([undefined, "none"] as const)(
-      "should render sum of stacked values with stackOffset = %s",
-      (stackOffset: StackOffsetType | undefined) => {
-        const stackedData = [
-          {
-            x: 100,
-            y: 200,
-          },
-        ];
-        const domainSpy = vi.fn();
-        function Comp(props: {
-          domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-        }): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.domainSpy(d),
-          );
-          return null;
-        }
-        // variant A: single Bar
-        const rA = render(() => (
-          <BarChart width={100} height={100} data={stackedData} stackOffset={stackOffset}>
-            <YAxis />
-            <Bar dataKey="x" stackId="a" />
-            <Comp domainSpy={domainSpy} />
-          </BarChart>
-        ));
-        expectYAxisTicks(rA.container, [
-          { textContent: "0", x: "57", y: "95" },
-          { textContent: "25", x: "57", y: "72.5" },
-          { textContent: "50", x: "57", y: "50" },
-          { textContent: "75", x: "57", y: "27.5" },
-          { textContent: "100", x: "57", y: "5" },
-        ]);
-        expect(domainSpy).toHaveBeenLastCalledWith([0, 100]);
-        rA.unmount();
-
-        // variant B: two stacked Bars
-        const domainSpyB = vi.fn();
-        const rB = render(() => (
-          <BarChart width={100} height={100} data={stackedData}>
-            <YAxis />
-            <Bar dataKey="x" stackId="a" />
-            <Bar dataKey="y" stackId="a" />
-            <Comp domainSpy={domainSpyB} />
-          </BarChart>
-        ));
-        expectYAxisTicks(rB.container, [
-          { textContent: "0", x: "57", y: "95" },
-          { textContent: "75", x: "57", y: "72.5" },
-          { textContent: "150", x: "57", y: "50" },
-          { textContent: "225", x: "57", y: "27.5" },
-          { textContent: "300", x: "57", y: "5" },
-        ]);
-        expect(domainSpyB).toHaveBeenLastCalledWith([0, 300]);
-        rB.unmount();
-      },
-    );
-
-    it.each([undefined, false])(
-      "should ignore domain of hidden items when includeHidden=%s",
-      (includeHidden) => {
-        const stackedData = [
-          {
-            x: 100,
-            y: 200,
-          },
-        ];
-        const domainSpy = vi.fn();
-        function Comp(props: {
-          domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-        }): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.domainSpy(d),
-          );
-          return null;
-        }
-        const { container } = render(() => (
-          <BarChart width={100} height={100} data={stackedData}>
-            <YAxis includeHidden={includeHidden} />
-            <Bar dataKey="x" stackId="a" />
-            <Bar dataKey="y" stackId="a" hide />
-            <Comp domainSpy={domainSpy} />
-          </BarChart>
-        ));
-        expectYAxisTicks(container, [
-          { textContent: "0", x: "57", y: "95" },
-          { textContent: "25", x: "57", y: "72.5" },
-          { textContent: "50", x: "57", y: "50" },
-          { textContent: "75", x: "57", y: "27.5" },
-          { textContent: "100", x: "57", y: "5" },
-        ]);
-        expect(domainSpy).toHaveBeenLastCalledWith([0, 100]);
-      },
-    );
-
-    it("should include domain of hidden items when includeHidden=true", () => {
-      const stackedData = [
-        {
-          x: 10,
-          y: 200,
-        },
-      ];
-      const domainSpy = vi.fn();
-      function Comp(props: {
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): null {
-        const isPanorama = useIsPanorama();
-        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-        createEffect(
-          () => domain(),
-          (d) => props.domainSpy(d),
-        );
-        return null;
-      }
-      // variant A: stacked
-      const rA = render(() => (
-        <BarChart width={100} height={100} data={stackedData}>
-          <YAxis includeHidden />
-          <Bar dataKey="x" stackId="a" />
-          <Bar dataKey="y" stackId="a" hide />
-          <Comp domainSpy={domainSpy} />
-        </BarChart>
-      ));
-      expectYAxisTicks(rA.container, [
-        { textContent: "0", x: "57", y: "95" },
-        { textContent: "55", x: "57", y: "72.5" },
-        { textContent: "110", x: "57", y: "50" },
-        { textContent: "165", x: "57", y: "27.5" },
-        { textContent: "220", x: "57", y: "5" },
-      ]);
-      expect(domainSpy).toHaveBeenLastCalledWith([0, 210]);
-      rA.unmount();
-
-      // variant B: the same data, not stacked
-      const domainSpyB = vi.fn();
-      const rB = render(() => (
-        <BarChart width={100} height={100} data={stackedData}>
-          <YAxis includeHidden />
-          <Bar dataKey="x" />
-          <Bar dataKey="y" hide />
-          <Comp domainSpy={domainSpyB} />
-        </BarChart>
-      ));
-      expectYAxisTicks(rB.container, [
-        { textContent: "0", x: "57", y: "95" },
-        { textContent: "50", x: "57", y: "72.5" },
-        { textContent: "100", x: "57", y: "50" },
-        { textContent: "150", x: "57", y: "27.5" },
-        { textContent: "200", x: "57", y: "5" },
-      ]);
-      expect(domainSpyB).toHaveBeenLastCalledWith([0, 200]);
-      rB.unmount();
-    });
-
-    it('should render positive and negative ticks with stackOffset = "sign"', () => {
-      const stackedSignedData = [
-        {
-          x: 100,
-          y: -2000,
-        },
-      ];
-      const domainSpy = vi.fn();
-      function Comp(props: {
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): null {
-        const isPanorama = useIsPanorama();
-        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-        createEffect(
-          () => domain(),
-          (d) => props.domainSpy(d),
-        );
-        return null;
-      }
-      const { container } = render(() => (
-        <BarChart width={100} height={100} data={stackedSignedData} stackOffset="sign">
-          <YAxis />
-          <Bar dataKey="x" stackId="a" />
-          <Bar dataKey="y" stackId="a" />
-          <Comp domainSpy={domainSpy} />
-        </BarChart>
-      ));
-      expectYAxisTicks(container, [
-        { textContent: "-2100", x: "57", y: "95" },
-        { textContent: "-1400", x: "57", y: "72.5" },
-        { textContent: "-700", x: "57", y: "50" },
-        { textContent: "0", x: "57", y: "27.5" },
-        { textContent: "700", x: "57", y: "5" },
-      ]);
-      // -2000, 100 is the correct domain - the tick generator decides to extend it beyond, to 700. But the domain ends at 100.
-      expect(domainSpy).toHaveBeenLastCalledWith([-2000, 100]);
-    });
-
-    it('should render ticks between 0 and 1 with stackOffset = "expand"', () => {
-      const stackedData = [
-        {
-          x: 100,
-          y: 200,
-        },
-      ];
-      const domainSpy = vi.fn();
-      function Comp(props: {
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): null {
-        const isPanorama = useIsPanorama();
-        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-        createEffect(
-          () => domain(),
-          (d) => props.domainSpy(d),
-        );
-        return null;
-      }
-      const { container } = render(() => (
-        <BarChart width={100} height={100} data={stackedData} stackOffset="expand">
-          <YAxis />
-          <Bar dataKey="x" stackId="a" />
-          <Bar dataKey="y" stackId="a" />
-          <Comp domainSpy={domainSpy} />
-        </BarChart>
-      ));
-      expectYAxisTicks(container, [
-        { textContent: "0", x: "57", y: "95" },
-        { textContent: "0.25", x: "57", y: "72.5" },
-        { textContent: "0.5", x: "57", y: "50" },
-        { textContent: "0.75", x: "57", y: "27.5" },
-        { textContent: "1", x: "57", y: "5" },
-      ]);
-      expect(domainSpy).toHaveBeenLastCalledWith([0, 1]);
-    });
-
-    it('should render ticks with stackOffset = "wiggle"', () => {
-      const stackedData = [
-        {
-          x: 100,
-          y: 200,
-        },
-      ];
-      const domainSpy = vi.fn();
-      function Comp(props: {
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): null {
-        const isPanorama = useIsPanorama();
-        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-        createEffect(
-          () => domain(),
-          (d) => props.domainSpy(d),
-        );
-        return null;
-      }
-      const { container } = render(() => (
-        <BarChart width={100} height={100} data={stackedData} stackOffset="wiggle">
-          <YAxis />
-          <Bar dataKey="x" stackId="a" />
-          <Bar dataKey="y" stackId="a" />
-          <Comp domainSpy={domainSpy} />
-        </BarChart>
-      ));
-      expectYAxisTicks(container, [
-        { textContent: "0", x: "57", y: "95" },
-        { textContent: "75", x: "57", y: "72.5" },
-        { textContent: "150", x: "57", y: "50" },
-        { textContent: "225", x: "57", y: "27.5" },
-        { textContent: "300", x: "57", y: "5" },
-      ]);
-      expect(domainSpy).toHaveBeenLastCalledWith([0, 300]);
-    });
-
-    it('should render ticks with stackOffset = "silhouette"', () => {
-      const stackedData = [
-        {
-          x: 100,
-          y: 200,
-        },
-      ];
-      const domainSpy = vi.fn();
-      function Comp(props: {
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): null {
-        const isPanorama = useIsPanorama();
-        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-        createEffect(
-          () => domain(),
-          (d) => props.domainSpy(d),
-        );
-        return null;
-      }
-      const { container } = render(() => (
-        <BarChart width={100} height={100} data={stackedData} stackOffset="silhouette">
-          <YAxis />
-          <Bar dataKey="x" stackId="a" />
-          <Bar dataKey="y" stackId="a" />
-          <Comp domainSpy={domainSpy} />
-        </BarChart>
-      ));
-      expectYAxisTicks(container, [
-        { textContent: "-150", x: "57", y: "95" },
-        { textContent: "-75", x: "57", y: "72.5" },
-        { textContent: "0", x: "57", y: "50" },
-        { textContent: "75", x: "57", y: "27.5" },
-        { textContent: "150", x: "57", y: "5" },
-      ]);
-      expect(domainSpy).toHaveBeenLastCalledWith([-150, 150]);
-    });
-
-    it('should ignore negative values with stackOffset = "positive"', () => {
-      const stackedData = [
-        {
-          x: 100,
-          y: -200,
-        },
-      ];
-      const domainSpy = vi.fn();
-      function Comp(props: {
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): null {
-        const isPanorama = useIsPanorama();
-        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-        createEffect(
-          () => domain(),
-          (d) => props.domainSpy(d),
-        );
-        return null;
-      }
-      const { container } = render(() => (
-        <BarChart width={100} height={100} data={stackedData} stackOffset="positive">
-          <YAxis />
-          <Bar dataKey="x" stackId="a" />
-          <Bar dataKey="y" stackId="a" />
-          <Comp domainSpy={domainSpy} />
-        </BarChart>
-      ));
-      expectYAxisTicks(container, [
-        { textContent: "0", x: "57", y: "95" },
-        { textContent: "25", x: "57", y: "72.5" },
-        { textContent: "50", x: "57", y: "50" },
-        { textContent: "75", x: "57", y: "27.5" },
-        { textContent: "100", x: "57", y: "5" },
-      ]);
-      expect(domainSpy).toHaveBeenLastCalledWith([0, 100]);
-    });
-  });
-
-  describe("with reference elements", () => {
-    const casesThatDoNotExtendDomain: ReadonlyArray<IfOverflow | undefined> = [
-      "discard",
-      "hidden",
-      "visible",
-      undefined,
-    ];
-
-    it("should render usual domain when without reference elements", () => {
-      const domainSpy = vi.fn();
-      function Comp(props: {
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): null {
-        const isPanorama = useIsPanorama();
-        const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-        createEffect(
-          () => domain(),
-          (d) => props.domainSpy(d),
-        );
-        return null;
-      }
-      const { container } = render(() => (
-        <LineChart width={100} height={100} data={pageData}>
-          <YAxis />
-          <Line dataKey="pv" />
-          <Comp domainSpy={domainSpy} />
-        </LineChart>
-      ));
-      expectYAxisTicks(container, [
-        { textContent: "0", x: "57", y: "95" },
-        { textContent: "300", x: "57", y: "72.5" },
-        { textContent: "600", x: "57", y: "50" },
-        { textContent: "900", x: "57", y: "27.5" },
-        { textContent: "1200", x: "57", y: "5" },
-      ]);
-      expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
-    });
-
-    describe("ReferenceDot", () => {
-      const ChartWithReferenceDot = (props: {
-        ifOverflow: IfOverflow | undefined;
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): JSX.Element => {
-        function Comp(): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.domainSpy(d),
-          );
-          return null;
-        }
-        return (
-          <LineChart width={100} height={100} data={pageData}>
-            <YAxis />
-            <Line dataKey="pv" />
-            {/* the r prop is ignored from domain extension - perhaps it should expand the domain too? */}
-            <ReferenceDot x={9999} y={2000} r={500} ifOverflow={props.ifOverflow} />
-            <Comp />
-          </LineChart>
-        );
-      };
-
-      it.each(casesThatDoNotExtendDomain)(
-        "should not extend domain when ifOverflow=%s",
-        (ifOverflow) => {
-          const domainSpy = vi.fn();
-          const { container } = render(() => (
-            <ChartWithReferenceDot ifOverflow={ifOverflow} domainSpy={domainSpy} />
-          ));
-          expectYAxisTicks(container, [
-            { textContent: "0", x: "57", y: "95" },
-            { textContent: "300", x: "57", y: "72.5" },
-            { textContent: "600", x: "57", y: "50" },
-            { textContent: "900", x: "57", y: "27.5" },
-            { textContent: "1200", x: "57", y: "5" },
-          ]);
-          expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
-        },
-      );
-
-      it("should extend domain when ifOverflow=extendDomain", () => {
-        const domainSpy = vi.fn();
-        const { container } = render(() => (
-          <ChartWithReferenceDot ifOverflow="extendDomain" domainSpy={domainSpy} />
-        ));
-        expectYAxisTicks(container, [
-          { textContent: "0", x: "57", y: "95" },
-          { textContent: "500", x: "57", y: "72.5" },
-          { textContent: "1000", x: "57", y: "50" },
-          { textContent: "1500", x: "57", y: "27.5" },
-          { textContent: "2000", x: "57", y: "5" },
-        ]);
-        expect(domainSpy).toHaveBeenLastCalledWith([0, 2000]);
-      });
-    });
-
-    describe("ReferenceArea", () => {
-      const ChartWithReferenceArea = (props: {
-        ifOverflow: IfOverflow | undefined;
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): JSX.Element => {
-        function Comp(): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.domainSpy(d),
-          );
-          return null;
-        }
-        return (
-          <LineChart width={100} height={100} data={pageData}>
-            <YAxis />
-            <Line dataKey="pv" />
-            <ReferenceArea x1={-10} x2={3000} y1={-100} y2={5000} ifOverflow={props.ifOverflow} />
-            <Comp />
-          </LineChart>
-        );
-      };
-
-      it.each(casesThatDoNotExtendDomain)(
-        "should not extend domain when ifOverflow=%s",
-        (ifOverflow) => {
-          const domainSpy = vi.fn();
-          const { container } = render(() => (
-            <ChartWithReferenceArea ifOverflow={ifOverflow} domainSpy={domainSpy} />
-          ));
-          expectYAxisTicks(container, [
-            { textContent: "0", x: "57", y: "95" },
-            { textContent: "300", x: "57", y: "72.5" },
-            { textContent: "600", x: "57", y: "50" },
-            { textContent: "900", x: "57", y: "27.5" },
-            { textContent: "1200", x: "57", y: "5" },
-          ]);
-          expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
-        },
-      );
-
-      it("should extend domain when ifOverflow=extendDomain", () => {
-        const domainSpy = vi.fn();
-        const { container } = render(() => (
-          <ChartWithReferenceArea ifOverflow="extendDomain" domainSpy={domainSpy} />
-        ));
-        expectYAxisTicks(container, [
-          { textContent: "-2000", x: "57", y: "95" },
-          { textContent: "0", x: "57", y: "72.5" },
-          { textContent: "2000", x: "57", y: "50" },
-          { textContent: "4000", x: "57", y: "27.5" },
-          { textContent: "6000", x: "57", y: "5" },
-        ]);
-        expect(domainSpy).toHaveBeenLastCalledWith([-100, 5000]);
-      });
-    });
-
-    describe("ReferenceArea without any graphical elements", () => {
-      it("should render ticks following the domain of the area", () => {
-        const axisDomainSpy = vi.fn();
-        function Comp(props: {
-          axisDomainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-        }): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.axisDomainSpy(d),
-          );
-          return null;
-        }
-        const { container } = render(() => (
-          <ComposedChart
-            width={500}
-            height={500}
-            data={pageData}
-            margin={{
-              top: 5,
-              right: 30,
-              left: 20,
-              bottom: 5,
-            }}
-          >
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="name" />
-            <YAxis type="number" />
-            <ReferenceArea x1="Page B" x2="Page E" y1={1890} y2={-1000} ifOverflow="extendDomain" />
-            <Comp axisDomainSpy={axisDomainSpy} />
-          </ComposedChart>
-        ));
-        expect(axisDomainSpy).toHaveBeenLastCalledWith([-1000, 1890]);
-        expectYAxisTicks(container, [
-          { textContent: "-1900", x: "72", y: "465" },
-          { textContent: "-950", x: "72", y: "350" },
-          { textContent: "0", x: "72", y: "235" },
-          { textContent: "950", x: "72", y: "120" },
-          { textContent: "1900", x: "72", y: "5" },
-        ]);
-      });
-    });
-
-    describe("ReferenceLine with one dimension", () => {
-      const ChartWithReferenceLine = (props: {
-        ifOverflow: IfOverflow | undefined;
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): JSX.Element => {
-        function Comp(): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.domainSpy(d),
-          );
-          return null;
-        }
-        return (
-          <LineChart width={100} height={100} data={pageData}>
-            <YAxis />
-            <Line dataKey="pv" />
-            <ReferenceLine y={2000} ifOverflow={props.ifOverflow} />
-            <Comp />
-          </LineChart>
-        );
-      };
-
-      it.each(casesThatDoNotExtendDomain)(
-        "should not extend domain when ifOverflow=%s",
-        (ifOverflow) => {
-          const domainSpy = vi.fn();
-          const { container } = render(() => (
-            <ChartWithReferenceLine ifOverflow={ifOverflow} domainSpy={domainSpy} />
-          ));
-          expectYAxisTicks(container, [
-            { textContent: "0", x: "57", y: "95" },
-            { textContent: "300", x: "57", y: "72.5" },
-            { textContent: "600", x: "57", y: "50" },
-            { textContent: "900", x: "57", y: "27.5" },
-            { textContent: "1200", x: "57", y: "5" },
-          ]);
-          expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
-        },
-      );
-
-      it("should extend domain when ifOverflow=extendDomain", () => {
-        const domainSpy = vi.fn();
-        const { container } = render(() => (
-          <ChartWithReferenceLine ifOverflow="extendDomain" domainSpy={domainSpy} />
-        ));
-        expect(domainSpy).toHaveBeenLastCalledWith([0, 2000]);
-        expectYAxisTicks(container, [
-          { textContent: "0", x: "57", y: "95" },
-          { textContent: "500", x: "57", y: "72.5" },
-          { textContent: "1000", x: "57", y: "50" },
-          { textContent: "1500", x: "57", y: "27.5" },
-          { textContent: "2000", x: "57", y: "5" },
-        ]);
-      });
-    });
-
-    describe("ReferenceLine with segment", () => {
-      const ChartWithReferenceLineWithSegment = (props: {
-        ifOverflow: IfOverflow | undefined;
-        domainSpy: (domain: NumberDomain | CategoricalDomain | undefined) => void;
-      }): JSX.Element => {
-        function Comp(): null {
-          const isPanorama = useIsPanorama();
-          const domain = useAppSelector((state) => selectAxisDomain(state, "yAxis", 0, isPanorama));
-          createEffect(
-            () => domain(),
-            (d) => props.domainSpy(d),
-          );
-          return null;
-        }
-        return (
-          <LineChart width={100} height={100} data={pageData}>
-            <YAxis />
-            <Line dataKey="pv" />
-            <ReferenceLine
-              segment={[
-                { x: "Page A", y: 100 },
-                { x: "Page B", y: 2000 },
-              ]}
-              ifOverflow={props.ifOverflow}
-            />
-            <Comp />
-          </LineChart>
-        );
-      };
-
-      it.each(casesThatDoNotExtendDomain)(
-        "should not extend domain when ifOverflow=%s",
-        (ifOverflow) => {
-          const domainSpy = vi.fn();
-          const { container } = render(() => (
-            <ChartWithReferenceLineWithSegment ifOverflow={ifOverflow} domainSpy={domainSpy} />
-          ));
-          expectYAxisTicks(container, [
-            { textContent: "0", x: "57", y: "95" },
-            { textContent: "300", x: "57", y: "72.5" },
-            { textContent: "600", x: "57", y: "50" },
-            { textContent: "900", x: "57", y: "27.5" },
-            { textContent: "1200", x: "57", y: "5" },
-          ]);
-          expect(domainSpy).toHaveBeenLastCalledWith([0, 1200]);
-        },
-      );
-
-      it("should extend domain when ifOverflow=extendDomain", () => {
-        // https://github.com/recharts/recharts/issues/3379
-        const domainSpy = vi.fn();
-        const { container } = render(() => (
-          <ChartWithReferenceLineWithSegment ifOverflow="extendDomain" domainSpy={domainSpy} />
-        ));
-        expectYAxisTicks(container, [
-          { textContent: "0", x: "57", y: "95" },
-          { textContent: "500", x: "57", y: "72.5" },
-          { textContent: "1000", x: "57", y: "50" },
-          { textContent: "1500", x: "57", y: "27.5" },
-          { textContent: "2000", x: "57", y: "5" },
-        ]);
-        expect(domainSpy).toHaveBeenLastCalledWith([0, 2000]);
-      });
-    });
-  });
-
-  it("should render the axis when wrapped in a custom component", () => {
-    /*
-     * https://github.com/recharts/recharts/issues/5445#issuecomment-2628711736
-     */
-    const YAxisWrapper = (props: YAxisProps) => {
-      return <YAxis {...props} />;
-    };
-
-    const { container } = render(() => (
-      <BarChart width={100} height={100}>
-        <YAxisWrapper />
-      </BarChart>
-    ));
-
-    expect(container.querySelector(".yAxis")).toBeVisible();
-  });
-
-  it("should render the y-axis with given width in the prop", () => {
-    const yAxisWidth = 40;
-
-    const { container } = render(() => (
-      <BarChart width={100} height={100} data={data}>
-        <YAxis width={yAxisWidth} />
-        <Bar dataKey="amt" />
-      </BarChart>
-    ));
-
-    const yAxis = container.querySelector(".yAxis");
-    assertNotNull(yAxis);
-    const yAxisLine = yAxis.querySelector("line");
-
-    expect(yAxis).toBeVisible();
-    expect(yAxisLine).toHaveAttribute("width", String(yAxisWidth));
-  });
-
-  it("should render y-axis with dynamically calculated width", () => {
-    mockGetBoundingClientRect({ width: 80, height: 30 });
-
-    const { container } = render(() => (
-      <BarChart width={400} height={300} data={data}>
-        <YAxis width="auto" ticks={[0, 800, 1600, 2400]} />
-        <Bar dataKey="amt" />
-      </BarChart>
-    ));
-
-    // Get all tick elements from the rendered Y-axis
-    const tickElements = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
-
-    const yAxis = container.querySelector(".yAxis");
-    assertNotNull(yAxis);
-    const yAxisLine = yAxis.querySelector("line");
-
-    const calculatedYAxisWidth = getCalculatedYAxisWidth({
-      ticks: Array.from(tickElements),
-      tickSize: 6,
-      tickMargin: 2,
-      label: undefined,
-      labelGapWithTick: 5,
-    });
-
-    expect(calculatedYAxisWidth).toBe(88); // 80 width + 6 tick size + 2 tick margin
-    expect(yAxisLine).toHaveAttribute("width", "88");
-  });
-});