solid-recharts 0.2.1 → 1.0.0

package/test/chart/ScatterChart.spec.tsx

@@ -1,2613 +0,0 @@
-// Ported from recharts 3.8.1 test/chart/ScatterChart.spec.tsx (commit
-// 7a23854). Solid deviations: this first batch covers the base three-dimensional
-// scatter render, clip path, empty data, and item mouse-enter callback.
-import { describe, expect, it, test, vi } from "vitest";
-import { createEffect, flush } from "solid-js";
-import {
-  Bar,
-  Brush,
-  CartesianGrid,
-  ComposedChart,
-  Legend,
-  Scatter,
-  ScatterChart,
-  Symbols,
-  type SymbolsProps,
-  Tooltip,
-  XAxis,
-  YAxis,
-  ZAxis,
-} from "../../src";
-import { expectScatterPoints, expectScatterPointsUnordered } from "../helper/expectScatterPoints";
-import { expectXAxisTicks, expectYAxisTicks } from "../helper/expectAxisTicks";
-import { assertNotNull } from "../helper/assertNotNull";
-import { fireEvent, render } from "@solidjs/testing-library";
-import { boxPlotData, PageData } from "../_data";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
-import {
-  selectActiveCoordinate,
-  selectIsTooltipActive,
-  selectTooltipPayload,
-  selectTooltipPayloadConfigurations,
-} from "../../src/state/selectors/tooltipSelectors";
-import { selectChartDataWithIndexes } from "../../src/state/selectors/dataSelectors";
-import { selectTooltipState } from "../../src/state/selectors/selectTooltipState";
-import type { TooltipPayloadConfiguration, TooltipState } from "../../src/state/tooltipSlice";
-import {
-  selectAxisDomain,
-  selectBaseAxis,
-  selectDisplayedData,
-  selectDomainOfStackGroups,
-  selectNumericalDomain,
-  selectTicksOfGraphicalItem,
-  selectZAxisWithScale,
-} from "../../src/state/selectors/axisSelectors";
-import { expectScale } from "../helper/expectScale";
-import { useChartHeight, useChartWidth, useViewBox } from "../../src/context/chartLayoutContext";
-import { useClipPathId } from "../../src/container/ClipPathProvider";
-import {
-  expectTooltipCoordinate,
-  expectTooltipNotVisible,
-  expectTooltipPayload,
-  showTooltip,
-} from "../component/Tooltip/tooltipTestHelpers";
-import { scatterChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
-
-describe("ScatterChart of three dimension data", () => {
-  const data01 = [
-    { x: 100, y: 200, z: 200 },
-    { x: 120, y: 100, z: 260 },
-    { x: 170, y: 300, z: 400 },
-    { x: 140, y: 250, z: 280 },
-    { x: 150, y: 400, z: 500 },
-    { x: 110, y: 280, z: 200 },
-  ];
-
-  const data02 = [
-    { x: 200, y: 260, z: 240 },
-    { x: 240, y: 290, z: 220 },
-    { x: 190, y: 290, z: 250 },
-    { x: 198, y: 250, z: 210 },
-    { x: 180, y: 280, z: 260 },
-    { x: 210, y: 220, z: 230 },
-  ];
-
-  test("Render 2 Scatter", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <ZAxis dataKey="z" range={[4, 20]} name="score" unit="km" />
-        <CartesianGrid />
-        <Scatter name="A school" data={data01} fillOpacity={0.3} fill="#ff7300" />
-        <Scatter name="B school" data={data02} fill="#347300" />
-        <Tooltip />
-        <Legend />
-      </ScatterChart>
-    ));
-
-    expect(container.querySelectorAll(".recharts-scatter")).toHaveLength(2);
-    expect(container.querySelectorAll(".recharts-legend-item")).toHaveLength(2);
-    expect(container.querySelectorAll(".recharts-scatter-symbol")).toHaveLength(
-      data01.length + data02.length,
-    );
-    expect(container.querySelectorAll(".recharts-scatter-symbol path")).toHaveLength(
-      data01.length + data02.length,
-    );
-
-    expectScatterPoints(container, [
-      {
-        cx: "73.33333333333333",
-        cy: "185",
-        d: "M0,0",
-        height: "3.638913473173784",
-        transform: "translate(73.33333333333333, 185)",
-        width: "3.638913473173784",
-      },
-      {
-        cx: "100",
-        cy: "267.5",
-        d: "M0,0",
-        height: "3.960594802695323",
-        transform: "translate(100, 267.5)",
-        width: "3.960594802695323",
-      },
-      {
-        cx: "126.66666666666667",
-        cy: "102.5",
-        d: "M0,0",
-        height: "4.624978308224887",
-        transform: "translate(126.66666666666667, 102.5)",
-        width: "4.624978308224887",
-      },
-      {
-        cx: "153.33333333333334",
-        cy: "143.75",
-        d: "M0,0",
-        height: "4.062165001543845",
-        transform: "translate(153.33333333333334, 143.75)",
-        width: "4.062165001543845",
-      },
-      {
-        cx: "180.00000000000003",
-        cy: "20",
-        d: "M0,0",
-        height: "5.046265044040321",
-        transform: "translate(180.00000000000003, 20)",
-        width: "5.046265044040321",
-      },
-      {
-        cx: "206.66666666666669",
-        cy: "119.00000000000001",
-        d: "M0,0",
-        height: "3.638913473173784",
-        transform: "translate(206.66666666666669, 119.00000000000001)",
-        width: "3.638913473173784",
-      },
-      {
-        cx: "73.33333333333333",
-        cy: "135.5",
-        d: "M0,0",
-        height: "3.8563503319209342",
-        transform: "translate(73.33333333333333, 135.5)",
-        width: "3.8563503319209342",
-      },
-      {
-        cx: "100",
-        cy: "110.75000000000001",
-        d: "M0,0",
-        height: "3.749208526326083",
-        transform: "translate(100, 110.75000000000001)",
-        width: "3.749208526326083",
-      },
-      {
-        cx: "126.66666666666667",
-        cy: "110.75000000000001",
-        d: "M0,0",
-        height: "3.9088200952233594",
-        transform: "translate(126.66666666666667, 110.75000000000001)",
-        width: "3.9088200952233594",
-      },
-      {
-        cx: "153.33333333333334",
-        cy: "143.75",
-        d: "M0,0",
-        height: "3.694472617243352",
-        transform: "translate(153.33333333333334, 143.75)",
-        width: "3.694472617243352",
-      },
-      {
-        cx: "180.00000000000003",
-        cy: "119.00000000000001",
-        d: "M0,0",
-        height: "3.960594802695323",
-        transform: "translate(180.00000000000003, 119.00000000000001)",
-        width: "3.960594802695323",
-      },
-      {
-        cx: "206.66666666666669",
-        cy: "168.49999999999997",
-        d: "M0,0",
-        height: "3.803156745151513",
-        transform: "translate(206.66666666666669, 168.49999999999997)",
-        width: "3.803156745151513",
-      },
-    ]);
-  });
-
-  test("should render clipPath if one of axes has allowDataOverflow=true", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" allowDataOverflow />
-        <YAxis dataKey="y" name="weight" unit="kg" allowDataOverflow />
-        <ZAxis dataKey="z" range={[4, 20]} name="score" unit="km" />
-        <CartesianGrid />
-        <Scatter name="A school" data={[]} fillOpacity={0.3} fill="#ff7300" />
-        <Tooltip />
-        <Legend layout="vertical" />
-      </ScatterChart>
-    ));
-
-    const clipPath = container.querySelector("clipPath rect");
-    assertNotNull(clipPath);
-    expect(clipPath.getAttributeNames().sort()).toEqual(["height", "width", "x", "y"]);
-    expect(clipPath).toHaveAttribute("width", "280");
-    expect(clipPath).toHaveAttribute("height", "330");
-    expect(clipPath).toHaveAttribute("x", "100");
-    expect(clipPath).toHaveAttribute("y", "10");
-  });
-
-  test("Don't render any symbols when data is empty", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <ZAxis dataKey="z" range={[4, 20]} name="score" unit="km" />
-        <CartesianGrid />
-        <Scatter name="A school" data={[]} fillOpacity={0.3} fill="#ff7300" />
-        <Tooltip />
-        <Legend layout="vertical" />
-      </ScatterChart>
-    ));
-
-    expect(container.querySelectorAll(".recharts-symbol")).toHaveLength(0);
-  });
-
-  test("mouse enter on scatter symbol should call onMouseEnter from props", () => {
-    const onMouseEnter = vi.fn();
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <ZAxis dataKey="z" range={[4, 20]} name="score" unit="km" />
-        <CartesianGrid />
-        <Scatter
-          name="A school"
-          data={data01}
-          fillOpacity={0.3}
-          fill="#ff7300"
-          onMouseEnter={onMouseEnter}
-        />
-        <Scatter name="B school" data={data02} fill="#347300" />
-        <Tooltip />
-        <Legend />
-      </ScatterChart>
-    ));
-
-    const symbol = container.querySelectorAll(".recharts-scatter-symbol")[0];
-    assertNotNull(symbol);
-    fireEvent.mouseEnter(symbol);
-
-    expect(onMouseEnter).toHaveBeenCalled();
-  });
-});
-
-describe("ScatterChart of two dimension data", () => {
-  const data = [
-    { x: 100, y: 200, z: 200 },
-    { x: 120, y: 100, z: 260 },
-    { x: 170, y: 300, z: 400 },
-    { x: 140, y: 250, z: 280 },
-    { x: 150, y: 400, z: 500 },
-    { x: 110, y: 280, z: 200 },
-  ];
-
-  test("renders 6 circles in simple ScatterChart", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <Scatter line name="A school" data={data} fill="#ff7300" />
-      </ScatterChart>
-    ));
-
-    expect(container.querySelectorAll(".recharts-symbols")).toHaveLength(6);
-
-    expectScatterPoints(container, [
-      {
-        cx: "105",
-        cy: "185",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(105, 185)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "155",
-        cy: "267.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(155, 267.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "205",
-        cy: "102.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(205, 102.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "255",
-        cy: "143.75",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(255, 143.75)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "305",
-        cy: "20",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(305, 20)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "355",
-        cy: "119.00000000000001",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(355, 119.00000000000001)",
-        width: "9.0270333367641",
-      },
-    ]);
-  });
-
-  test("renders 6 circles in ScatterChart when data is defined on chart root", () => {
-    const { container } = render(() => (
-      <ScatterChart
-        width={400}
-        height={400}
-        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
-        data={data}
-      >
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <Scatter line name="A school" fill="#ff7300" />
-      </ScatterChart>
-    ));
-
-    expectScatterPoints(container, [
-      {
-        cx: "105",
-        cy: "185",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(105, 185)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "155",
-        cy: "267.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(155, 267.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "205",
-        cy: "102.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(205, 102.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "255",
-        cy: "143.75",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(255, 143.75)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "305",
-        cy: "20",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(305, 20)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "355",
-        cy: "119.00000000000001",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(355, 119.00000000000001)",
-        width: "9.0270333367641",
-      },
-    ]);
-  });
-
-  test("renders 6 circles in ScatterChart when data is defined on chart root and there are no axes", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} data={data}>
-        <Scatter dataKey="y" />
-      </ScatterChart>
-    ));
-
-    expectScatterPoints(container, [
-      {
-        cx: "37.5",
-        cy: "200",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(37.5, 200)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "102.5",
-        cy: "297.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(102.5, 297.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "167.5",
-        cy: "102.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(167.5, 102.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "232.5",
-        cy: "151.25",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(232.5, 151.25)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "297.5",
-        cy: "5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(297.5, 5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "362.5",
-        cy: "122.00000000000001",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(362.5, 122.00000000000001)",
-        width: "9.0270333367641",
-      },
-    ]);
-  });
-
-  test("renders line when line prop=true", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <Scatter line name="A school" data={data} fill="#ff7300" />
-      </ScatterChart>
-    ));
-
-    const allLines = container.querySelectorAll(".recharts-scatter-line path");
-    expect(allLines).toHaveLength(1);
-    const line = allLines[0]!;
-    expect(line.getAttributeNames()).toEqual(["name", "fill", "stroke", "class", "d"]);
-    expect(line.getAttribute("name")).toEqual("A school");
-    expect(line.getAttribute("fill")).toEqual("none");
-    expect(line.getAttribute("stroke")).toEqual("#ff7300");
-    expect(line.getAttribute("class")).toEqual("recharts-curve");
-    expect(line.getAttribute("d")).toEqual(
-      "M105,185L155,267.5L205,102.5L255,143.75L305,20L355,119",
-    );
-  });
-
-  test("ignores points when data have nulls in it", () => {
-    const dataWithNulls: Array<{ x: number | null; y: number | null }> = [
-      { x: null, y: 2 },
-      { x: 3, y: 4 },
-    ];
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" />
-        <YAxis dataKey="y" />
-        <Scatter name="A school" data={dataWithNulls} fill="#ff7300" />
-      </ScatterChart>
-    ));
-
-    expectScatterPoints(container, [
-      {
-        cx: "230",
-        cy: "185",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(230, 185)",
-        width: "9.0270333367641",
-      },
-    ]);
-  });
-
-  // DEFERRED: Scatter does not yet mirror into the Brush panorama (the nested
-  // panorama ScatterChart renders no points). Tracked with the other panorama gaps.
-  // DEFERRED (PERMANENT-N/A for the Scatter cluster): the nested <ScatterChart>
-  // inside <Brush> creates its OWN store, so the panorama Scatter registers there
-  // instead of the outer chart's panorama surface — the 6 panorama points never
-  // render. Faithful panorama mirroring of a nested chart is cross-cutting Brush
-  // infra (RootSurface/store-sharing), tracked with the other panorama gaps.
-  test("renders scatter points in Brush panorama", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} data={data}>
-        <Scatter dataKey="y" />
-        <Brush>
-          <ScatterChart data={data}>
-            <Scatter dataKey="y" />
-          </ScatterChart>
-        </Brush>
-      </ScatterChart>
-    ));
-
-    expectScatterPointsUnordered(container, [
-      {
-        cx: "33.333333333333336",
-        cy: "20",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(33.333333333333336, 20)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "98",
-        cy: "29.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(98, 29.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "162.66666666666669",
-        cy: "10.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(162.66666666666669, 10.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "227.33333333333334",
-        cy: "15.25",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(227.33333333333334, 15.25)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "292",
-        cy: "1",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(292, 1)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "356.6666666666667",
-        cy: "12.4",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(356.6666666666667, 12.4)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "37.5",
-        cy: "180",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(37.5, 180)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "102.5",
-        cy: "267.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(102.5, 267.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "167.5",
-        cy: "92.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(167.5, 92.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "232.5",
-        cy: "136.25",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(232.5, 136.25)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "297.5",
-        cy: "5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(297.5, 5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "362.5",
-        cy: "110.00000000000001",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(362.5, 110.00000000000001)",
-        width: "9.0270333367641",
-      },
-    ]);
-  });
-});
-
-describe("ScatterChart with joint line", () => {
-  const data01 = [
-    { x: 10, y: 30, z: 120 },
-    { x: 30, y: 200, z: 190 },
-    { x: 45, y: 100, z: 32 },
-    { x: 50, y: 400, z: 67 },
-    { x: 70, y: 150, z: 109 },
-    { x: 100, y: 250, z: 120 },
-  ];
-  const data02 = [
-    { x: 30, y: 20, z: 190 },
-    { x: 50, y: 180, z: 32 },
-    { x: 75, y: 240, z: 67 },
-    { x: 100, y: 100, z: 109 },
-    { x: 120, y: 190, z: 120 },
-  ];
-
-  const renderTestCase = createSelectorTestCase((props) => (
-    <ScatterChart width={600} height={400}>
-      <CartesianGrid />
-      <XAxis type="number" dataKey="x" name="stature" unit="cm" />
-      <YAxis type="number" dataKey="y" name="weight" unit="kg" />
-      <ZAxis type="number" dataKey="z" range={[100, 200]} />
-      <Legend />
-      <Scatter name="A school" data={data01} fill="#8884d8" line shape="cross" />
-      <Scatter name="B school" data={data02} fill="#82ca9d" line shape="diamond" />
-      <Tooltip cursor={{ strokeDasharray: "3 3" }} />
-      {props.children}
-    </ScatterChart>
-  ));
-
-  it("should select ZAxis domain", () => {
-    const { spy } = renderTestCase((state) => selectNumericalDomain(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, [0, 190]);
-  });
-
-  it("should select zAxis axis settings", () => {
-    const { spy } = renderTestCase((state) => selectZAxisWithScale(state, "zAxis", 0, false));
-    const settings = spy.mock.lastCall?.[0];
-    assertNotNull(settings);
-    // The port has no `toBeRechartsScale` matcher; assert the scale separately.
-    expect(settings).toMatchObject({
-      domain: undefined,
-      allowDataOverflow: false,
-      allowDuplicatedCategory: false,
-      dataKey: "z",
-      id: 0,
-      includeHidden: false,
-      name: undefined,
-      range: [100, 200],
-      reversed: false,
-      type: "number",
-      unit: undefined,
-    });
-    expectScale(settings.scale, { domain: [0, 190], range: [100, 200] });
-  });
-
-  it("should render scatter points", () => {
-    const { container } = renderTestCase();
-    expectScatterPoints(container, [
-      {
-        cx: "109.16666666666666",
-        cy: "338",
-        d: "M0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0Z",
-        height: "14.413156615213909",
-        transform: "translate(109.16666666666666, 338)",
-        width: "14.413156615213909",
-      },
-      {
-        cx: "197.5",
-        cy: "185",
-        d: "M0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0Z",
-        height: "15.957691216057308",
-        transform: "translate(197.5, 185)",
-        width: "15.957691216057308",
-      },
-      {
-        cx: "263.75",
-        cy: "275",
-        d: "M0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0Z",
-        height: "12.197048368812888",
-        transform: "translate(263.75, 275)",
-        width: "12.197048368812888",
-      },
-      {
-        cx: "285.83333333333337",
-        cy: "5",
-        d: "M0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0Z",
-        height: "13.12335329012121",
-        transform: "translate(285.83333333333337, 5)",
-        width: "13.12335329012121",
-      },
-      {
-        cx: "374.1666666666667",
-        cy: "230",
-        d: "M0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0Z",
-        height: "14.155129698337069",
-        transform: "translate(374.1666666666667, 230)",
-        width: "14.155129698337069",
-      },
-      {
-        cx: "506.6666666666667",
-        cy: "140",
-        d: "M0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0Z",
-        height: "14.413156615213909",
-        transform: "translate(506.6666666666667, 140)",
-        width: "14.413156615213909",
-      },
-      {
-        cx: "197.5",
-        cy: "347",
-        d: "M0,0L0,0L0,0L0,0Z",
-        height: "15.957691216057308",
-        transform: "translate(197.5, 347)",
-        width: "15.957691216057308",
-      },
-      {
-        cx: "285.83333333333337",
-        cy: "203.00000000000003",
-        d: "M0,0L0,0L0,0L0,0Z",
-        height: "12.197048368812888",
-        transform: "translate(285.83333333333337, 203.00000000000003)",
-        width: "12.197048368812888",
-      },
-      {
-        cx: "396.25",
-        cy: "149",
-        d: "M0,0L0,0L0,0L0,0Z",
-        height: "13.12335329012121",
-        transform: "translate(396.25, 149)",
-        width: "13.12335329012121",
-      },
-      {
-        cx: "506.6666666666667",
-        cy: "275",
-        d: "M0,0L0,0L0,0L0,0Z",
-        height: "14.155129698337069",
-        transform: "translate(506.6666666666667, 275)",
-        width: "14.155129698337069",
-      },
-      {
-        cx: "595",
-        cy: "194",
-        d: "M0,0L0,0L0,0L0,0Z",
-        height: "14.413156615213909",
-        transform: "translate(595, 194)",
-        width: "14.413156615213909",
-      },
-    ]);
-  });
-});
-
-describe("ScatterChart layout context", () => {
-  it("should provide viewBox", () => {
-    const spy = vi.fn();
-    const Comp = (): null => {
-      const viewBox = useViewBox();
-      createEffect(
-        () => viewBox(),
-        (v) => spy(v),
-      );
-      return null;
-    };
-    render(() => (
-      <ScatterChart width={100} height={50} barSize={20}>
-        <Comp />
-      </ScatterChart>
-    ));
-
-    expectLastCalledWith(spy, { x: 5, y: 5, width: 90, height: 40 });
-  });
-
-  it("should provide clipPathId", () => {
-    const spy = vi.fn();
-    const Comp = (): null => {
-      createEffect(
-        () => useClipPathId(),
-        (v) => spy(v),
-      );
-      return null;
-    };
-    render(() => (
-      <ScatterChart width={100} height={50} barSize={20}>
-        <Comp />
-      </ScatterChart>
-    ));
-
-    expect(spy).toHaveBeenCalledWith(expect.stringMatching(/recharts\d+-clip/));
-  });
-
-  it("should provide width", () => {
-    const spy = vi.fn();
-    const Comp = (): null => {
-      const width = useChartWidth();
-      createEffect(
-        () => width(),
-        (v) => spy(v),
-      );
-      return null;
-    };
-    render(() => (
-      <ScatterChart width={100} height={50} barSize={20}>
-        <Comp />
-      </ScatterChart>
-    ));
-
-    expect(spy).toHaveBeenCalledWith(100);
-  });
-
-  it("should provide height", () => {
-    const spy = vi.fn();
-    const Comp = (): null => {
-      const height = useChartHeight();
-      createEffect(
-        () => height(),
-        (v) => spy(v),
-      );
-      return null;
-    };
-    render(() => (
-      <ScatterChart width={100} height={50} barSize={20}>
-        <Comp />
-      </ScatterChart>
-    ));
-
-    expect(spy).toHaveBeenCalledWith(50);
-  });
-});
-
-describe("Tooltip integration", () => {
-  describe("with default Tooltip", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <ScatterChart width={100} height={100} data={PageData}>
-        <Scatter isAnimationActive={false} id="my-scatter" />
-        <XAxis dataKey="uv" />
-        <YAxis dataKey="pv" />
-        <Tooltip isAnimationActive={false} />
-        {props.children}
-      </ScatterChart>
-    ));
-
-    it("should return tooltip payload", () => {
-      // ScatterChart only allows item interaction
-      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "item", "hover", "0"));
-      expectLastCalledWith(spy, [
-        {
-          color: undefined,
-          dataKey: "uv",
-          fill: undefined,
-          graphicalItemId: "my-scatter",
-          hide: false,
-          name: "uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page A",
-            pv: 2400,
-            uv: 400,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: "",
-          value: 400,
-        },
-        {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "my-scatter",
-          hide: false,
-          name: "pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page A",
-            pv: 2400,
-            uv: 400,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: "",
-          value: 2400,
-        },
-      ]);
-    });
-
-    it("should not render tooltip before user interaction", () => {
-      const { container } = renderTestCase();
-      expectTooltipNotVisible(container);
-    });
-
-    it("should render tooltip after mouse hover", () => {
-      mockGetBoundingClientRect({ width: 10, height: 10 });
-      const { container } = renderTestCase();
-      showTooltip(container, scatterChartMouseHoverTooltipSelector);
-
-      expectTooltipPayload(container, "", ["pv : 2400", "uv : 400"]);
-      expectTooltipCoordinate(container, { x: 77.5, y: 30.6 });
-    });
-  });
-});
-
-describe("ScatterChart with multiple Y axes", () => {
-  it("should render points", () => {
-    const data01 = [
-      { x: 100, y: 200, z: 200 },
-      { x: 120, y: 100, z: 260 },
-      { x: 170, y: 300, z: 400 },
-      { x: 140, y: 250, z: 280 },
-      { x: 150, y: 400, z: 500 },
-      { x: 110, y: 280, z: 200 },
-    ];
-    const data02 = [
-      { x: 300, y: 300, z: 200 },
-      { x: 400, y: 500, z: 260 },
-      { x: 200, y: 700, z: 400 },
-      { x: 340, y: 350, z: 280 },
-      { x: 560, y: 500, z: 500 },
-      { x: 230, y: 780, z: 200 },
-      { x: 500, y: 400, z: 200 },
-      { x: 300, y: 500, z: 260 },
-      { x: 240, y: 300, z: 400 },
-      { x: 320, y: 550, z: 280 },
-      { x: 500, y: 400, z: 500 },
-      { x: 420, y: 280, z: 200 },
-    ];
-
-    const { container } = render(() => (
-      <ScatterChart
-        width={800}
-        height={400}
-        margin={{
-          top: 20,
-          right: 20,
-          bottom: 20,
-          left: 20,
-        }}
-      >
-        <CartesianGrid yAxisId="left" />
-        <XAxis type="number" dataKey="x" name="stature" unit="cm" />
-        <YAxis yAxisId="left" type="number" dataKey="y" name="weight" unit="kg" stroke="#8884d8" />
-        <YAxis
-          yAxisId="right"
-          type="number"
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          orientation="right"
-          stroke="#82ca9d"
-        />
-        <Scatter yAxisId="left" name="A school" data={data01} fill="#8884d8" />
-        <Scatter yAxisId="right" name="A school" data={data02} fill="#82ca9d" />
-        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
-      </ScatterChart>
-    ));
-
-    expectScatterPoints(container, [
-      {
-        cx: "186.66666666666669",
-        cy: "185",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(186.66666666666669, 185)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "208",
-        cy: "267.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(208, 267.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "261.3333333333333",
-        cy: "102.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(261.3333333333333, 102.5)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "229.33333333333331",
-        cy: "143.75",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(229.33333333333331, 143.75)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "240",
-        cy: "20",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(240, 20)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "197.33333333333331",
-        cy: "119.00000000000001",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(197.33333333333331, 119.00000000000001)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "400",
-        cy: "226.25",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(400, 226.25)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "506.6666666666667",
-        cy: "143.75",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(506.6666666666667, 143.75)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "293.33333333333337",
-        cy: "61.25",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(293.33333333333337, 61.25)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "442.6666666666667",
-        cy: "205.625",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(442.6666666666667, 205.625)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "677.3333333333334",
-        cy: "143.75",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(677.3333333333334, 143.75)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "325.3333333333333",
-        cy: "28.250000000000007",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(325.3333333333333, 28.250000000000007)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "613.3333333333334",
-        cy: "185",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(613.3333333333334, 185)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "400",
-        cy: "143.75",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(400, 143.75)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "336",
-        cy: "226.25",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(336, 226.25)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "421.3333333333333",
-        cy: "123.125",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(421.3333333333333, 123.125)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "613.3333333333334",
-        cy: "185",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(613.3333333333334, 185)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "528",
-        cy: "234.5",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(528, 234.5)",
-        width: "9.0270333367641",
-      },
-    ]);
-  });
-});
-
-describe("with Tooltip and defaultIndex=number", () => {
-  const renderTestCase = createSelectorTestCase((props) => (
-    <ScatterChart width={100} height={100} data={PageData}>
-      <Scatter isAnimationActive={false} id="my-scatter" />
-      <XAxis dataKey="uv" />
-      <YAxis dataKey="pv" />
-      <Tooltip defaultIndex={1} />
-      {props.children}
-    </ScatterChart>
-  ));
-
-  it("should render tooltip before user interaction", () => {
-    mockGetBoundingClientRect({
-      width: 10,
-      height: 10,
-    });
-    const { container } = renderTestCase();
-    expectTooltipPayload(container, "", ["pv : 4567", "uv : 300"]);
-    expectTooltipCoordinate(container, {
-      x: 82.5,
-      y: 47.598,
-    });
-  });
-
-  it("should select tooltip state", () => {
-    const { spy } = renderTestCase(selectTooltipState);
-    const expected: TooltipState = {
-      axisInteraction: {
-        click: {
-          active: false,
-          dataKey: undefined,
-          index: null,
-          coordinate: undefined,
-          graphicalItemId: undefined,
-        },
-        hover: {
-          active: false,
-          dataKey: undefined,
-          index: null,
-          coordinate: undefined,
-          graphicalItemId: undefined,
-        },
-      },
-      itemInteraction: {
-        click: {
-          active: false,
-          index: null,
-          dataKey: undefined,
-          coordinate: undefined,
-          graphicalItemId: undefined,
-        },
-        hover: {
-          active: false,
-          index: null,
-          dataKey: undefined,
-          coordinate: undefined,
-          graphicalItemId: undefined,
-        },
-      },
-      keyboardInteraction: {
-        active: false,
-        dataKey: undefined,
-        index: null,
-        coordinate: undefined,
-        graphicalItemId: undefined,
-      },
-      settings: {
-        active: undefined,
-        axisId: 0,
-        shared: undefined,
-        trigger: "hover",
-        defaultIndex: "1",
-      },
-      syncInteraction: {
-        active: false,
-        dataKey: undefined,
-        index: null,
-        coordinate: undefined,
-        label: undefined,
-        sourceViewBox: undefined,
-        graphicalItemId: undefined,
-      },
-      tooltipItemPayloads: [
-        {
-          dataDefinedOnItem: [
-            [
-              {
-                dataKey: "uv",
-                name: "uv",
-                payload: {
-                  amt: 2400,
-                  name: "Page A",
-                  pv: 2400,
-                  uv: 400,
-                },
-                type: undefined,
-                unit: "",
-                value: 400,
-                graphicalItemId: "my-scatter",
-              },
-              {
-                dataKey: "pv",
-                name: "pv",
-                payload: {
-                  amt: 2400,
-                  name: "Page A",
-                  pv: 2400,
-                  uv: 400,
-                },
-                type: undefined,
-                unit: "",
-                value: 2400,
-                graphicalItemId: "my-scatter",
-              },
-            ],
-            [
-              {
-                dataKey: "uv",
-                name: "uv",
-                payload: {
-                  amt: 2400,
-                  name: "Page B",
-                  pv: 4567,
-                  uv: 300,
-                },
-                type: undefined,
-                unit: "",
-                value: 300,
-                graphicalItemId: "my-scatter",
-              },
-              {
-                dataKey: "pv",
-                name: "pv",
-                payload: {
-                  amt: 2400,
-                  name: "Page B",
-                  pv: 4567,
-                  uv: 300,
-                },
-                type: undefined,
-                unit: "",
-                value: 4567,
-                graphicalItemId: "my-scatter",
-              },
-            ],
-            [
-              {
-                dataKey: "uv",
-                name: "uv",
-                payload: {
-                  amt: 2400,
-                  name: "Page C",
-                  pv: 1398,
-                  uv: 300,
-                },
-                type: undefined,
-                unit: "",
-                value: 300,
-                graphicalItemId: "my-scatter",
-              },
-              {
-                dataKey: "pv",
-                name: "pv",
-                payload: {
-                  amt: 2400,
-                  name: "Page C",
-                  pv: 1398,
-                  uv: 300,
-                },
-                type: undefined,
-                unit: "",
-                value: 1398,
-                graphicalItemId: "my-scatter",
-              },
-            ],
-            [
-              {
-                dataKey: "uv",
-                name: "uv",
-                payload: {
-                  amt: 2400,
-                  name: "Page D",
-                  pv: 9800,
-                  uv: 200,
-                },
-                type: undefined,
-                unit: "",
-                value: 200,
-                graphicalItemId: "my-scatter",
-              },
-              {
-                dataKey: "pv",
-                name: "pv",
-                payload: {
-                  amt: 2400,
-                  name: "Page D",
-                  pv: 9800,
-                  uv: 200,
-                },
-                type: undefined,
-                unit: "",
-                value: 9800,
-                graphicalItemId: "my-scatter",
-              },
-            ],
-            [
-              {
-                dataKey: "uv",
-                name: "uv",
-                payload: {
-                  amt: 2400,
-                  name: "Page E",
-                  pv: 3908,
-                  uv: 278,
-                },
-                type: undefined,
-                unit: "",
-                value: 278,
-                graphicalItemId: "my-scatter",
-              },
-              {
-                dataKey: "pv",
-                name: "pv",
-                payload: {
-                  amt: 2400,
-                  name: "Page E",
-                  pv: 3908,
-                  uv: 278,
-                },
-                type: undefined,
-                unit: "",
-                value: 3908,
-                graphicalItemId: "my-scatter",
-              },
-            ],
-            [
-              {
-                dataKey: "uv",
-                name: "uv",
-                payload: {
-                  amt: 2400,
-                  name: "Page F",
-                  pv: 4800,
-                  uv: 189,
-                },
-                type: undefined,
-                unit: "",
-                value: 189,
-                graphicalItemId: "my-scatter",
-              },
-              {
-                dataKey: "pv",
-                name: "pv",
-                payload: {
-                  amt: 2400,
-                  name: "Page F",
-                  pv: 4800,
-                  uv: 189,
-                },
-                type: undefined,
-                unit: "",
-                value: 4800,
-                graphicalItemId: "my-scatter",
-              },
-            ],
-          ],
-          getPosition: expect.functionReturning([
-            ["0", { x: 67.5, y: 50.6 }],
-            ["1", { x: 72.5, y: 37.598 }],
-            ["2", { x: 77.5, y: 56.611999999999995 }],
-            ["3", { x: 82.5, y: 6.200000000000001 }],
-            ["4", { x: 87.5, y: 41.552 }],
-            ["5", { x: 92.5, y: 36.2 }],
-          ]),
-          settings: {
-            color: undefined,
-            dataKey: undefined,
-            fill: undefined,
-            graphicalItemId: "my-scatter",
-            hide: false,
-            name: undefined,
-            nameKey: undefined,
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: "",
-          },
-        },
-      ],
-    };
-    expectLastCalledWith(spy, expected);
-  });
-
-  it("should select tooltip payload configurations", () => {
-    const { spy } = renderTestCase((state) =>
-      selectTooltipPayloadConfigurations(state, "axis", "hover", "0"),
-    );
-    // toHaveBeenCalledTimes dropped — Solid's fine-grained reactivity differs.
-    expectLastCalledWith(spy, [
-      {
-        dataDefinedOnItem: [
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page A",
-                pv: 2400,
-                uv: 400,
-              },
-              type: undefined,
-              unit: "",
-              value: 400,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page A",
-                pv: 2400,
-                uv: 400,
-              },
-              type: undefined,
-              unit: "",
-              value: 2400,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page B",
-                pv: 4567,
-                uv: 300,
-              },
-              type: undefined,
-              unit: "",
-              value: 300,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page B",
-                pv: 4567,
-                uv: 300,
-              },
-              type: undefined,
-              unit: "",
-              value: 4567,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page C",
-                pv: 1398,
-                uv: 300,
-              },
-              type: undefined,
-              unit: "",
-              value: 300,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page C",
-                pv: 1398,
-                uv: 300,
-              },
-              type: undefined,
-              unit: "",
-              value: 1398,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page D",
-                pv: 9800,
-                uv: 200,
-              },
-              type: undefined,
-              unit: "",
-              value: 200,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page D",
-                pv: 9800,
-                uv: 200,
-              },
-              type: undefined,
-              unit: "",
-              value: 9800,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page E",
-                pv: 3908,
-                uv: 278,
-              },
-              type: undefined,
-              unit: "",
-              value: 278,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page E",
-                pv: 3908,
-                uv: 278,
-              },
-              type: undefined,
-              unit: "",
-              value: 3908,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page F",
-                pv: 4800,
-                uv: 189,
-              },
-              type: undefined,
-              unit: "",
-              value: 189,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page F",
-                pv: 4800,
-                uv: 189,
-              },
-              type: undefined,
-              unit: "",
-              value: 4800,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-        ],
-        getPosition: expect.functionReturning([
-          ["0", { x: 67.5, y: 50.6 }],
-          ["1", { x: 72.5, y: 37.598 }],
-          ["2", { x: 77.5, y: 56.611999999999995 }],
-          ["3", { x: 82.5, y: 6.200000000000001 }],
-          ["4", { x: 87.5, y: 41.552 }],
-          ["5", { x: 92.5, y: 36.2 }],
-        ]),
-        settings: {
-          color: undefined,
-          dataKey: undefined,
-          fill: undefined,
-          graphicalItemId: "my-scatter",
-          hide: false,
-          name: undefined,
-          nameKey: undefined,
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: "",
-        },
-      },
-    ]);
-  });
-
-  it("should select active coordinate", () => {
-    const { spy } = renderTestCase((state) => selectActiveCoordinate(state, "item", "hover", "0"));
-    expectLastCalledWith(spy, {
-      x: 67.5,
-      y: 50.6,
-    });
-  });
-
-  it("should select tooltip data", () => {
-    const { spy } = renderTestCase((state) =>
-      selectTooltipPayloadConfigurations(state, "item", "hover", "0"),
-    );
-    const expected: ReadonlyArray<TooltipPayloadConfiguration> = [
-      {
-        getPosition: expect.functionReturning([
-          ["0", { x: 67.5, y: 50.6 }],
-          ["1", { x: 72.5, y: 37.598 }],
-          ["2", { x: 77.5, y: 56.611999999999995 }],
-          ["3", { x: 82.5, y: 6.200000000000001 }],
-          ["4", { x: 87.5, y: 41.552 }],
-          ["5", { x: 92.5, y: 36.2 }],
-        ]),
-        dataDefinedOnItem: [
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page A",
-                pv: 2400,
-                uv: 400,
-              },
-              type: undefined,
-              unit: "",
-              value: 400,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page A",
-                pv: 2400,
-                uv: 400,
-              },
-              type: undefined,
-              unit: "",
-              value: 2400,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page B",
-                pv: 4567,
-                uv: 300,
-              },
-              type: undefined,
-              unit: "",
-              value: 300,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page B",
-                pv: 4567,
-                uv: 300,
-              },
-              type: undefined,
-              unit: "",
-              value: 4567,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page C",
-                pv: 1398,
-                uv: 300,
-              },
-              type: undefined,
-              unit: "",
-              value: 300,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page C",
-                pv: 1398,
-                uv: 300,
-              },
-              type: undefined,
-              unit: "",
-              value: 1398,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page D",
-                pv: 9800,
-                uv: 200,
-              },
-              type: undefined,
-              unit: "",
-              value: 200,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page D",
-                pv: 9800,
-                uv: 200,
-              },
-              type: undefined,
-              unit: "",
-              value: 9800,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page E",
-                pv: 3908,
-                uv: 278,
-              },
-              type: undefined,
-              unit: "",
-              value: 278,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page E",
-                pv: 3908,
-                uv: 278,
-              },
-              type: undefined,
-              unit: "",
-              value: 3908,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "uv",
-              name: "uv",
-              payload: {
-                amt: 2400,
-                name: "Page F",
-                pv: 4800,
-                uv: 189,
-              },
-              type: undefined,
-              unit: "",
-              value: 189,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "pv",
-              name: "pv",
-              payload: {
-                amt: 2400,
-                name: "Page F",
-                pv: 4800,
-                uv: 189,
-              },
-              type: undefined,
-              unit: "",
-              value: 4800,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-        ],
-        settings: {
-          color: undefined,
-          dataKey: undefined,
-          fill: undefined,
-          graphicalItemId: "my-scatter",
-          hide: false,
-          name: undefined,
-          nameKey: undefined,
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: "",
-        },
-      },
-    ];
-    expectLastCalledWith(spy, expected);
-  });
-});
-
-describe("ScatterChart with allowDuplicateCategory=false", () => {
-  const data = [
-    { x: 100, y: 100, z: 200 },
-    { x: 100, y: 200, z: 200 },
-    { x: 100, y: 300, z: 200 },
-  ];
-
-  const renderTestCase = createSelectorTestCase((props) => (
-    <ScatterChart width={500} height={500}>
-      <CartesianGrid />
-      <XAxis type="category" allowDuplicatedCategory={false} dataKey="x" name="stature" unit="cm" />
-      <YAxis type="category" allowDuplicatedCategory={false} dataKey="y" name="weight" unit="kg" />
-      <Scatter
-        activeShape={{ fill: "red" }}
-        name="A school"
-        data={data}
-        isAnimationActive={false}
-        id="my-scatter"
-      />
-      <Tooltip shared={false} cursor={{ strokeDasharray: "3 3" }} />
-      <Legend />
-      {props.children}
-    </ScatterChart>
-  ));
-
-  it("should render three scatter points", () => {
-    const { container } = renderTestCase();
-    expectScatterPoints(container, [
-      {
-        cx: "280",
-        cy: "388.33333333333337",
-        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(280, 388.33333333333337)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "280",
-        cy: "235",
-        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(280, 235)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "280",
-        cy: "81.66666666666667",
-        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(280, 81.66666666666667)",
-        width: "9.0270333367641",
-      },
-    ]);
-  });
-
-  it("should select tooltip active", () => {
-    const { container, spy } = renderTestCase((state) =>
-      selectIsTooltipActive(state, "item", "hover", undefined),
-    );
-    expectLastCalledWith(spy, { activeIndex: null, isActive: false });
-
-    showTooltip(container, scatterChartMouseHoverTooltipSelector);
-    expectLastCalledWith(spy, { activeIndex: "0", isActive: true });
-  });
-
-  it("should select tooltipPayloadConfigurations", () => {
-    const { spy } = renderTestCase((state) =>
-      selectTooltipPayloadConfigurations(state, "axis", "hover", undefined),
-    );
-    expectLastCalledWith(spy, [
-      {
-        dataDefinedOnItem: [
-          [
-            {
-              dataKey: "x",
-              name: "stature",
-              payload: {
-                x: 100,
-                y: 100,
-                z: 200,
-              },
-              type: undefined,
-              unit: "cm",
-              value: 100,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "y",
-              name: "weight",
-              payload: {
-                x: 100,
-                y: 100,
-                z: 200,
-              },
-              type: undefined,
-              unit: "kg",
-              value: 100,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "x",
-              name: "stature",
-              payload: {
-                x: 100,
-                y: 200,
-                z: 200,
-              },
-              type: undefined,
-              unit: "cm",
-              value: 100,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "y",
-              name: "weight",
-              payload: {
-                x: 100,
-                y: 200,
-                z: 200,
-              },
-              type: undefined,
-              unit: "kg",
-              value: 200,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-          [
-            {
-              dataKey: "x",
-              name: "stature",
-              payload: {
-                x: 100,
-                y: 300,
-                z: 200,
-              },
-              type: undefined,
-              unit: "cm",
-              value: 100,
-              graphicalItemId: "my-scatter",
-            },
-            {
-              dataKey: "y",
-              name: "weight",
-              payload: {
-                x: 100,
-                y: 300,
-                z: 200,
-              },
-              type: undefined,
-              unit: "kg",
-              value: 300,
-              graphicalItemId: "my-scatter",
-            },
-          ],
-        ],
-        getPosition: expect.functionReturning([
-          ["0", { x: 280, y: 388.33333333333337 }],
-          ["1", { x: 280, y: 235 }],
-          ["2", { x: 280, y: 81.66666666666667 }],
-        ]),
-        settings: {
-          color: undefined,
-          dataKey: undefined,
-          fill: undefined,
-          graphicalItemId: "my-scatter",
-          hide: false,
-          name: "A school",
-          nameKey: undefined,
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: "",
-        },
-      },
-    ]);
-  });
-
-  it("should select chartDataWithIndexes", () => {
-    const { spy } = renderTestCase(selectChartDataWithIndexes);
-    expectLastCalledWith(spy, {
-      chartData: undefined,
-      computedData: undefined,
-      dataEndIndex: 0,
-      dataStartIndex: 0,
-    });
-  });
-
-  it("should select tooltip payload", () => {
-    const { container, spy } = renderTestCase((state) =>
-      selectTooltipPayload(state, "item", "hover", undefined),
-    );
-    expect(spy).toHaveBeenCalledTimes(1);
-    expectLastCalledWith(spy, undefined);
-
-    showTooltip(container, scatterChartMouseHoverTooltipSelector);
-    expect(spy).toHaveBeenCalledTimes(2);
-    expectLastCalledWith(spy, [
-      {
-        color: undefined,
-        dataKey: "x",
-        fill: undefined,
-        graphicalItemId: "my-scatter",
-        hide: false,
-        name: "stature",
-        nameKey: undefined,
-        payload: {
-          x: 100,
-          y: 100,
-          z: 200,
-        },
-        stroke: undefined,
-        strokeWidth: undefined,
-        type: undefined,
-        unit: "cm",
-        value: 100,
-      },
-      {
-        color: undefined,
-        dataKey: "y",
-        fill: undefined,
-        graphicalItemId: "my-scatter",
-        hide: false,
-        name: "weight",
-        nameKey: undefined,
-        payload: {
-          x: 100,
-          y: 100,
-          z: 200,
-        },
-        stroke: undefined,
-        strokeWidth: undefined,
-        type: undefined,
-        unit: "kg",
-        value: 100,
-      },
-    ]);
-  });
-
-  it("should show tooltip when hovering over a point", () => {
-    const { container } = renderTestCase();
-    showTooltip(container, scatterChartMouseHoverTooltipSelector);
-    expectTooltipPayload(container, "", ["stature : 100cm", "weight : 100kg"]);
-  });
-
-  it("should show different tooltip when hovering over the second point", () => {
-    const { container } = renderTestCase();
-    showTooltip(container, `${scatterChartMouseHoverTooltipSelector}:nth-child(2)`);
-    expectTooltipPayload(container, "", ["stature : 100cm", "weight : 200kg"]);
-  });
-
-  it("should render an empty chart with tick labels when ticks are provided and allowDataOverflow is set to true", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
-        <XAxis
-          dataKey="x"
-          name="stature"
-          unit="cm"
-          type="number"
-          allowDataOverflow
-          ticks={[150, 250, 350, 450]}
-        />
-        <YAxis
-          dataKey="y"
-          name="weight"
-          unit="kg"
-          type="number"
-          allowDataOverflow
-          ticks={[100, 200, 300, 400]}
-        />
-        <CartesianGrid />
-        <Scatter name="A school" data={[]} fillOpacity={0.3} fill="#ff7300" />
-        <Tooltip />
-        <Legend layout="vertical" />
-      </ScatterChart>
-    ));
-    expectScatterPoints(container, []);
-
-    expectXAxisTicks(container, [
-      {
-        textContent: "150cm",
-        x: "100",
-        y: "348",
-      },
-      {
-        textContent: "250cm",
-        x: "193.33333333333331",
-        y: "348",
-      },
-      {
-        textContent: "350cm",
-        x: "286.66666666666663",
-        y: "348",
-      },
-      {
-        textContent: "450cm",
-        x: "380",
-        y: "348",
-      },
-    ]);
-
-    expectYAxisTicks(container, [
-      {
-        textContent: "100kg",
-        x: "92",
-        y: "340",
-      },
-      {
-        textContent: "200kg",
-        x: "92",
-        y: "230.00000000000003",
-      },
-      {
-        textContent: "300kg",
-        x: "92",
-        y: "120.00000000000001",
-      },
-      {
-        textContent: "400kg",
-        x: "92",
-        y: "10",
-      },
-    ]);
-  });
-});
-
-describe("ScatterChart with data with type property", () => {
-  // https://github.com/recharts/recharts/issues/6197
-  const data = [
-    { type: 1, x: 100, y: 200, z: 200 },
-    { x: 120, y: 100, z: 260 },
-    { x: 170, y: 300, z: 400 },
-    { x: 140, y: 250, z: 280 },
-    { x: 150, y: 400, z: 500 },
-    { x: 110, y: 280, z: 200 },
-  ];
-
-  const renderTestCase = createSelectorTestCase((props) => (
-    <ScatterChart width={500} height={500}>
-      <CartesianGrid />
-      <XAxis type="number" dataKey="x" name="stature" unit="cm" />
-      <YAxis type="number" dataKey="y" name="weight" unit="kg" />
-      <Tooltip cursor={{ strokeDasharray: "3 3" }} />
-      <Scatter name="A school" data={data} fill="#8884d8" />
-      {props.children}
-    </ScatterChart>
-  ));
-
-  it("should render without throwing error", () => {
-    const { container } = renderTestCase();
-    expect(container).toBeInTheDocument();
-  });
-});
-
-describe("Composed chart when there are stacks but the stacks are smaller than the ZAxis dataKey", () => {
-  const renderTestCase = createSelectorTestCase((props) => (
-    <ComposedChart width={400} height={200} data={boxPlotData}>
-      <Bar stackId="a" dataKey="min" />
-      <ZAxis type="number" dataKey="size" range={[0, 250]} />
-      <Scatter dataKey="average" />
-      <XAxis />
-      <YAxis />
-      {props.children}
-    </ComposedChart>
-  ));
-
-  it("should select YAxis numerical domain", () => {
-    const { spy } = renderTestCase((state) => selectNumericalDomain(state, "yAxis", 0, false));
-    expectLastCalledWith(spy, [0, 550]);
-  });
-
-  it("should select YAxis final domain", () => {
-    const { spy } = renderTestCase((state) => selectAxisDomain(state, "yAxis", 0, false));
-    expectLastCalledWith(spy, [0, 550]);
-  });
-
-  it("should select YAxis ticks", () => {
-    const { spy } = renderTestCase((state) => selectTicksOfGraphicalItem(state, "yAxis", 0, false));
-    expectLastCalledWith(spy, [
-      { index: 0, coordinate: 165, value: 0, offset: 0 },
-      { index: 1, coordinate: 138.33333333333334, value: 100, offset: 0 },
-      { index: 2, coordinate: 111.66666666666669, value: 200, offset: 0 },
-      { index: 3, coordinate: 85, value: 300, offset: 0 },
-      { index: 4, coordinate: 58.33333333333334, value: 400, offset: 0 },
-      { index: 5, coordinate: 31.66666666666666, value: 500, offset: 0 },
-      { index: 6, coordinate: 5, value: 600, offset: 0 },
-    ]);
-  });
-
-  it("should select ZAxis displayed data", () => {
-    const { spy } = renderTestCase((state) => selectDisplayedData(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, [
-      {
-        average: 150,
-        bottomBox: 50,
-        bottomWhisker: 100,
-        min: 100,
-        size: 150,
-        topBox: 200,
-        topWhisker: 200,
-      },
-      {
-        average: 550,
-        bottomBox: 200,
-        bottomWhisker: 200,
-        min: 200,
-        size: 250,
-        topBox: 100,
-        topWhisker: 100,
-      },
-      {
-        average: 400,
-        bottomBox: 200,
-        bottomWhisker: 200,
-        min: 0,
-        size: 350,
-        topBox: 200,
-        topWhisker: 200,
-      },
-    ]);
-  });
-
-  it("should select ZAxis stack groups domain", () => {
-    const { spy } = renderTestCase((state) => selectDomainOfStackGroups(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, undefined);
-  });
-
-  it("should select ZAxis numerical domain", () => {
-    const { spy } = renderTestCase((state) => selectNumericalDomain(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, [0, 350]);
-  });
-
-  it("should select ZAxis final domain", () => {
-    const { spy } = renderTestCase((state) => selectAxisDomain(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, [0, 350]);
-  });
-
-  it("should select ZAxis axis settings", () => {
-    const { spy } = renderTestCase((state) => selectZAxisWithScale(state, "zAxis", 0, false));
-    const settings = spy.mock.lastCall?.[0];
-    assertNotNull(settings);
-    expect(settings).toMatchObject({
-      domain: undefined,
-      allowDataOverflow: false,
-      allowDuplicatedCategory: false,
-      dataKey: "size",
-      id: 0,
-      includeHidden: false,
-      name: undefined,
-      range: [0, 250],
-      reversed: false,
-      type: "number",
-      unit: undefined,
-    });
-    expectScale(settings.scale, { domain: [0, 350], range: [0, 250] });
-  });
-
-  it("should render scatter points", () => {
-    const { container } = renderTestCase();
-    expectScatterPoints(container, [
-      {
-        cx: "120",
-        cy: "125",
-        d: "M0,0",
-        height: "11.67983401638037",
-        transform: "translate(120, 125)",
-        width: "11.67983401638037",
-      },
-      {
-        cx: "230",
-        cy: "18.33333333333334",
-        d: "M0,0",
-        height: "15.078600877302687",
-        transform: "translate(230, 18.33333333333334)",
-        width: "15.078600877302687",
-      },
-      {
-        cx: "340",
-        cy: "58.33333333333334",
-        d: "M0,0",
-        height: "17.841241161527712",
-        transform: "translate(340, 58.33333333333334)",
-        width: "17.841241161527712",
-      },
-    ]);
-  });
-});
-
-describe("Composed chart when stacks are bigger than ZAxis dataKey", () => {
-  const renderTestCase = createSelectorTestCase((props) => (
-    <ComposedChart width={400} height={200} data={boxPlotData}>
-      <Bar stackId="a" dataKey="min" />
-      <Bar stackId="a" dataKey="bar" />
-      <Bar stackId="a" dataKey="bottomWhisker" />
-      <Bar stackId="a" dataKey="bottomBox" />
-      <Bar stackId="a" dataKey="bar" />
-      <Bar stackId="a" dataKey="topBox" />
-      <Bar stackId="a" dataKey="topWhisker" />
-      <Bar stackId="a" dataKey="bar" />
-      <ZAxis type="number" dataKey="size" range={[0, 250]} />
-
-      <Scatter dataKey="average" />
-      <XAxis />
-      <YAxis />
-
-      {props.children}
-    </ComposedChart>
-  ));
-
-  it("should select YAxis numeric domain", () => {
-    const { spy } = renderTestCase((state) => selectNumericalDomain(state, "yAxis", 0, false));
-    expectLastCalledWith(spy, [0, 800]);
-  });
-
-  it("should select YAxis final domain", () => {
-    const { spy } = renderTestCase((state) => selectAxisDomain(state, "yAxis", 0, false));
-    expectLastCalledWith(spy, [0, 800]);
-  });
-
-  it("should select YAxis ticks", () => {
-    const { spy } = renderTestCase((state) => selectTicksOfGraphicalItem(state, "yAxis", 0, false));
-
-    expectLastCalledWith(spy, [
-      { index: 0, coordinate: 165, offset: 0, value: 0 },
-      { index: 1, coordinate: 125, offset: 0, value: 200 },
-      { index: 2, coordinate: 85, offset: 0, value: 400 },
-      { index: 3, coordinate: 45, offset: 0, value: 600 },
-      { index: 4, coordinate: 5, offset: 0, value: 800 },
-    ]);
-  });
-
-  it("should select ZAxis displayed data", () => {
-    const { spy } = renderTestCase((state) => selectDisplayedData(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, [
-      {
-        average: 150,
-        bottomBox: 50,
-        bottomWhisker: 100,
-        min: 100,
-        size: 150,
-        topBox: 200,
-        topWhisker: 200,
-      },
-      {
-        average: 550,
-        bottomBox: 200,
-        bottomWhisker: 200,
-        min: 200,
-        size: 250,
-        topBox: 100,
-        topWhisker: 100,
-      },
-      {
-        average: 400,
-        bottomBox: 200,
-        bottomWhisker: 200,
-        min: 0,
-        size: 350,
-        topBox: 200,
-        topWhisker: 200,
-      },
-    ]);
-  });
-
-  it("should select ZAxis stack groups domain", () => {
-    const { spy } = renderTestCase((state) => selectDomainOfStackGroups(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, undefined);
-  });
-
-  it("should select ZAxis numerical domain", () => {
-    const { spy } = renderTestCase((state) => selectNumericalDomain(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, [0, 350]);
-  });
-
-  it("should select ZAxis final domain", () => {
-    const { spy } = renderTestCase((state) => selectAxisDomain(state, "zAxis", 0, false));
-    expectLastCalledWith(spy, [0, 350]);
-  });
-
-  it("should select ZAxis axis settings", () => {
-    const { spy } = renderTestCase((state) => selectBaseAxis(state, "zAxis", 0));
-    expectLastCalledWith(spy, {
-      allowDataOverflow: false,
-      allowDuplicatedCategory: false,
-      dataKey: "size",
-      id: 0,
-      includeHidden: false,
-      name: undefined,
-      range: [0, 250],
-      reversed: false,
-      scale: "auto",
-      type: "number",
-      unit: undefined,
-      domain: undefined,
-    });
-  });
-
-  it("should render Scatter points", () => {
-    const { container } = renderTestCase();
-    expectScatterPoints(container, [
-      {
-        cx: "120",
-        cy: "135",
-        d: "M0,0",
-        height: "11.67983401638037",
-        transform: "translate(120, 135)",
-        width: "11.67983401638037",
-      },
-      {
-        cx: "230",
-        cy: "55",
-        d: "M0,0",
-        height: "15.078600877302687",
-        transform: "translate(230, 55)",
-        width: "15.078600877302687",
-      },
-      {
-        cx: "340",
-        cy: "85",
-        d: "M0,0",
-        height: "17.841241161527712",
-        transform: "translate(340, 85)",
-        width: "17.841241161527712",
-      },
-    ]);
-  });
-});
-
-describe("ScatterChart customized active shape", () => {
-  const data = [
-    { x: 100, y: 200, z: 200 },
-    { x: 120, y: 100, z: 260 },
-    { x: 170, y: 300, z: 400 },
-    { x: 140, y: 250, z: 280 },
-    { x: 150, y: 400, z: 500 },
-    { x: 110, y: 280, z: 200 },
-  ];
-
-  // recharts fires mouseOver on a point + mouseOut to dismiss; the port's per-item
-  // Layers listen for the non-bubbling mouseEnter/mouseLeave, so adapt the events
-  // (and flush() — Solid defers reactive propagation).
-  function assertActiveShapeInteractions(container: HTMLElement): void {
-    const sectorNodes = container.querySelectorAll(".recharts-scatter-symbol");
-    expect(sectorNodes.length).toBeGreaterThanOrEqual(2);
-    const sector1 = sectorNodes[0]!;
-    fireEvent.mouseEnter(sector1, { clientX: 200, clientY: 200 });
-    flush();
-    expect(container.querySelectorAll(".recharts-active-shape")).toHaveLength(1);
-
-    const sector2 = container.querySelectorAll(".recharts-scatter-symbol")[1]!;
-    fireEvent.mouseEnter(sector2, { clientX: 200, clientY: 200 });
-    flush();
-    expect(container.querySelectorAll(".recharts-active-shape")).toHaveLength(1);
-
-    fireEvent.mouseLeave(container.querySelectorAll(".recharts-scatter-symbol")[1]!);
-    flush();
-    expect(container.querySelectorAll(".recharts-active-shape")).toHaveLength(0);
-  }
-
-  test("Renders customized active shape when activeShape set to be an object", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <Scatter line name="A school" data={data} fill="#ff7300" activeShape={{ fill: "red" }} />
-        <Tooltip />
-      </ScatterChart>
-    ));
-
-    assertActiveShapeInteractions(container);
-  });
-
-  test("Renders customized active shape when activeShape set to be an object as symbols props", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <Scatter
-          line
-          name="A school"
-          data={data}
-          fill="#ff7300"
-          activeShape={{ type: "triangle", class: "triangle-symbols-type", fill: "red" }}
-        />
-        <Tooltip />
-      </ScatterChart>
-    ));
-
-    assertActiveShapeInteractions(container);
-  });
-
-  test("Renders customized active shape when activeShape set to be a function", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <Scatter
-          line
-          name="A school"
-          data={data}
-          fill="#ff7300"
-          activeShape={(props: SymbolsProps) => <Symbols {...props} type="circle" fill="red" />}
-        />
-        <Tooltip />
-      </ScatterChart>
-    ));
-
-    assertActiveShapeInteractions(container);
-  });
-
-  // DEFERRED: element-form activeShape={<Symbols/>} — Solid has no cloneElement and
-  // elements aren't introspectable, so ActiveShape excludes the element constituent.
-  test.skip("Renders customized active shape when activeShape set to be a ReactElement", () => {});
-
-  test("Renders customized active shape when activeShape is set to be a truthy boolean", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <Scatter line name="A school" data={data} fill="#ff7300" activeShape />
-        <Tooltip />
-      </ScatterChart>
-    ));
-
-    assertActiveShapeInteractions(container);
-  });
-
-  test("Does not render customized active shape when activeShape set to be a falsy boolean", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis dataKey="x" name="stature" unit="cm" />
-        <YAxis dataKey="y" name="weight" unit="kg" />
-        <Scatter line name="A school" data={data} fill="#ff7300" activeShape={false} />
-        <Tooltip />
-      </ScatterChart>
-    ));
-
-    const sector = container.querySelectorAll(".recharts-scatter-symbol")[0]!;
-    fireEvent.mouseEnter(sector, { clientX: 200, clientY: 200 });
-    flush();
-
-    expect(container.querySelectorAll(".recharts-active-shape")).toHaveLength(0);
-  });
-});