solid-recharts 0.2.0 → 1.0.0

package/test/polar/PolarAngleAxis/PolarAngleAxis.spec.tsx

@@ -1,2079 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { createEffect, createSignal, flush } from "solid-js";
-import { Show } from "@solidjs/web";
-import {
-  PolarAngleAxis,
-  PolarRadiusAxis,
-  Radar,
-  RadarChart,
-  RadialBar,
-  RadialBarChart,
-} from "../../../src";
-import { exampleRadarData, PageData, pageDataWithFillColor } from "../../_data";
-import { assertNotNull } from "../../helper/assertNotNull";
-import {
-  implicitAngleAxis,
-  selectAngleAxis,
-  selectAngleAxisRangeWithReversed,
-  selectPolarOptions,
-} from "../../../src/state/selectors/polarAxisSelectors";
-import { useAppSelector } from "../../../src/state/hooks";
-import { selectNiceTicks, selectRealScaleType } from "../../../src/state/selectors/axisSelectors";
-import {
-  selectPolarAxisScale,
-  selectPolarAxisTicks,
-} from "../../../src/state/selectors/polarScaleSelectors";
-import {
-  selectPolarAppliedValues,
-  selectPolarAxisDomain,
-  selectPolarItemsSettings,
-  selectPolarNiceTicks,
-} from "../../../src/state/selectors/polarSelectors";
-import { expectLastCalledWithScale } from "../../helper/expectScale";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { render } from "@solidjs/testing-library";
-import type { PolarAngleTickContentProps } from "../../../src/polar/PolarAngleAxis";
-
-/*
- * Ported from recharts 3.8.1 test/polar/PolarAngleAxis/PolarAngleAxis.spec.tsx.
- * Wrappers read `props.children` (not destructured) so the Spy mounts inside the
- * chart store. Ported incrementally by describe block.
- */
-
-type ExpectedAngleAxisTick = {
-  x1: string | null;
-  x2: string | null;
-  y1: string | null;
-  y2: string | null;
-};
-
-function expectAngleAxisTicks(
-  container: Element,
-  expectedTicks: ReadonlyArray<ExpectedAngleAxisTick>,
-): void {
-  assertNotNull(container);
-  const allTicks = container.querySelectorAll(".recharts-polar-angle-axis-tick-line");
-  const actualTicks = Array.from(allTicks).map((tick) => ({
-    x1: tick.getAttribute("x1"),
-    x2: tick.getAttribute("x2"),
-    y1: tick.getAttribute("y1"),
-    y2: tick.getAttribute("y2"),
-  }));
-  expect(actualTicks).toEqual(expectedTicks);
-}
-
-type ExpectedAxisTickLabel = {
-  textContext: string | null;
-  x: string | null;
-  y: string | null;
-};
-
-function expectAngleAxisTickLabels(
-  container: Element,
-  expectedLabels: ReadonlyArray<ExpectedAxisTickLabel>,
-): void {
-  assertNotNull(container);
-  const allTickLabels = container.querySelectorAll(
-    ".recharts-text.recharts-polar-angle-axis-tick-value",
-  );
-  const actualLabels = Array.from(allTickLabels).map((label) => ({
-    textContext: label.textContent,
-    x: label.getAttribute("x"),
-    y: label.getAttribute("y"),
-  }));
-  expect(actualLabels).toEqual(expectedLabels);
-}
-
-describe("<PolarAngleAxis />", () => {
-  describe("in RadarChart", () => {
-    describe("when axis has a dataKey", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadarChart width={500} height={500} data={exampleRadarData}>
-          <Radar dataKey="value" />
-          <PolarAngleAxis dataKey="value" />
-          {props.children}
-        </RadarChart>
-      ));
-
-      it("should select angle axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: "value",
-          domain: undefined,
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "category",
-          unit: undefined,
-        });
-      });
-
-      it("should select polar items", () => {
-        const { spy } = renderTestCase((state) => selectPolarItemsSettings(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          {
-            id: expect.stringMatching("radar-"),
-            type: "radar",
-            angleAxisId: 0,
-            data: undefined,
-            dataKey: "value",
-            hide: false,
-            radiusAxisId: 0,
-          },
-        ]);
-      });
-
-      it("should select angle axis domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [420, 460, 999, 500, 864, 650, 765, 365]);
-      });
-
-      it("should select angle axis range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [90, -270]);
-      });
-
-      it("should select real scale type", () => {
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, "band");
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, {
-          domain: [420, 460, 999, 500, 864, 650, 765, 365],
-          range: [-270, 90],
-        });
-      });
-
-      it("should select ticks", () => {
-        const { spy } = renderTestCase((state) =>
-          selectPolarAxisTicks(state, "angleAxis", 0, false),
-        );
-        expectLastCalledWith(spy, [
-          { coordinate: 90, index: 0, offset: 45, value: 420 },
-          { coordinate: 45, index: 1, offset: 45, value: 460 },
-          { coordinate: 0, index: 2, offset: 45, value: 999 },
-          { coordinate: -45, index: 3, offset: 45, value: 500 },
-          { coordinate: -90, index: 4, offset: 45, value: 864 },
-          { coordinate: -135, index: 5, offset: 45, value: 650 },
-          { coordinate: -180, index: 6, offset: 45, value: 765 },
-          { coordinate: -225, index: 7, offset: 45, value: 365 },
-        ]);
-      });
-
-      it("should select nice ticks", () => {
-        const { spy } = renderTestCase((state) => selectNiceTicks(state, "angleAxis", 0, false));
-        expectLastCalledWith(spy, undefined);
-      });
-
-      it("should select applied data", () => {
-        const { spy } = renderTestCase((state) => selectPolarAppliedValues(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          { value: 420 },
-          { value: 460 },
-          { value: 999 },
-          { value: 500 },
-          { value: 864 },
-          { value: 650 },
-          { value: 765 },
-          { value: 365 },
-        ]);
-      });
-
-      it("should render axis ticks", () => {
-        const { container } = renderTestCase((): null => null);
-        expectAngleAxisTicks(container, [
-          { x1: "250", x2: "250", y1: "54", y2: "46" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.2497833620557",
-            y1: "111.4070708874367",
-            y2: "105.7502166379443",
-          },
-          { x1: "446", x2: "454", y1: "250", y2: "250" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.2497833620557",
-            y1: "388.5929291125633",
-            y2: "394.2497833620557",
-          },
-          { x1: "250", x2: "250", y1: "446", y2: "454" },
-          {
-            x1: "111.4070708874367",
-            x2: "105.7502166379443",
-            y1: "388.5929291125633",
-            y2: "394.2497833620557",
-          },
-          { x1: "54", x2: "46", y1: "250.00000000000003", y2: "250.00000000000003" },
-          {
-            x1: "111.40707088743665",
-            x2: "105.75021663794428",
-            y1: "111.4070708874367",
-            y2: "105.7502166379443",
-          },
-        ]);
-      });
-
-      it("should render angle labels", () => {
-        const { container } = renderTestCase((): null => null);
-        expectAngleAxisTickLabels(container, [
-          { textContext: "420", x: "250", y: "46" },
-          { textContext: "460", x: "394.2497833620557", y: "105.7502166379443" },
-          { textContext: "999", x: "454", y: "250" },
-          { textContext: "500", x: "394.2497833620557", y: "394.2497833620557" },
-          { textContext: "864", x: "250", y: "454" },
-          { textContext: "650", x: "105.7502166379443", y: "394.2497833620557" },
-          { textContext: "765", x: "46", y: "250.00000000000003" },
-          { textContext: "365", x: "105.75021663794428", y: "105.7502166379443" },
-        ]);
-      });
-    });
-
-    describe("with default axis", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadarChart width={500} height={500} data={exampleRadarData}>
-          <Radar dataKey="value" />
-          <PolarAngleAxis />
-          {props.children}
-        </RadarChart>
-      ));
-
-      it("should select angle axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: undefined,
-          domain: undefined,
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "category",
-          unit: undefined,
-        });
-      });
-
-      it("should select polar items", () => {
-        const { spy } = renderTestCase((state) => selectPolarItemsSettings(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          {
-            id: expect.stringMatching("radar-"),
-            type: "radar",
-            angleAxisId: 0,
-            data: undefined,
-            dataKey: "value",
-            hide: false,
-            radiusAxisId: 0,
-          },
-        ]);
-      });
-
-      it("should select angle axis domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5, 6, 7]);
-      });
-
-      it("should select angle axis range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [90, -270]);
-      });
-
-      it("should select real scale type", () => {
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, "band");
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 1, 2, 3, 4, 5, 6, 7], range: [-270, 90] });
-      });
-
-      it("should select applied data", () => {
-        const { spy } = renderTestCase((state) => selectPolarAppliedValues(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          { value: 420 },
-          { value: 460 },
-          { value: 999 },
-          { value: 500 },
-          { value: 864 },
-          { value: 650 },
-          { value: 765 },
-          { value: 365 },
-        ]);
-      });
-
-      it("should render ticks", () => {
-        const { container } = renderTestCase((): null => null);
-        expectAngleAxisTicks(container, [
-          { x1: "250", x2: "250", y1: "54", y2: "46" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.2497833620557",
-            y1: "111.4070708874367",
-            y2: "105.7502166379443",
-          },
-          { x1: "446", x2: "454", y1: "250", y2: "250" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.2497833620557",
-            y1: "388.5929291125633",
-            y2: "394.2497833620557",
-          },
-          { x1: "250", x2: "250", y1: "446", y2: "454" },
-          {
-            x1: "111.4070708874367",
-            x2: "105.7502166379443",
-            y1: "388.5929291125633",
-            y2: "394.2497833620557",
-          },
-          { x1: "54", x2: "46", y1: "250.00000000000003", y2: "250.00000000000003" },
-          {
-            x1: "111.40707088743665",
-            x2: "105.75021663794428",
-            y1: "111.4070708874367",
-            y2: "105.7502166379443",
-          },
-        ]);
-      });
-
-      it("should render labels", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTickLabels(container, [
-          { textContext: "0", x: "250", y: "46" },
-          { textContext: "1", x: "394.2497833620557", y: "105.7502166379443" },
-          { textContext: "2", x: "454", y: "250" },
-          { textContext: "3", x: "394.2497833620557", y: "394.2497833620557" },
-          { textContext: "4", x: "250", y: "454" },
-          { textContext: "5", x: "105.7502166379443", y: "394.2497833620557" },
-          { textContext: "6", x: "46", y: "250.00000000000003" },
-          { textContext: "7", x: "105.75021663794428", y: "105.7502166379443" },
-        ]);
-      });
-    });
-
-    describe("with implicit axis", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadarChart width={500} height={500} data={exampleRadarData}>
-          <Radar dataKey="value" />
-          {props.children}
-        </RadarChart>
-      ));
-
-      it("should select angle axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: undefined,
-          domain: undefined,
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "category",
-          unit: undefined,
-        });
-      });
-
-      it("should select polar items", () => {
-        const { spy } = renderTestCase((state) => selectPolarItemsSettings(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          {
-            id: expect.stringMatching("radar-"),
-            type: "radar",
-            angleAxisId: 0,
-            data: undefined,
-            dataKey: "value",
-            hide: false,
-            radiusAxisId: 0,
-          },
-        ]);
-      });
-
-      it("should select applied values", () => {
-        const { spy } = renderTestCase((state) => selectPolarAppliedValues(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          { value: 420 },
-          { value: 460 },
-          { value: 999 },
-          { value: 500 },
-          { value: 864 },
-          { value: 650 },
-          { value: 765 },
-          { value: 365 },
-        ]);
-      });
-
-      it("should select angle axis domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5, 6, 7]);
-      });
-
-      it("should select angle axis range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [90, -270]);
-      });
-
-      it("should select real scale type", () => {
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, "band");
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 1, 2, 3, 4, 5, 6, 7], range: [-270, 90] });
-      });
-
-      it("should not render ticks", () => {
-        const { container } = renderTestCase((): null => null);
-        expectAngleAxisTicks(container, []);
-      });
-
-      it("should not render labels", () => {
-        const { container } = renderTestCase((): null => null);
-        expectAngleAxisTickLabels(container, []);
-      });
-    });
-
-    describe("with type=number", () => {
-      const data = [
-        { angle: 0, r: 11 },
-        { angle: 90, r: 22 },
-        { angle: 180, r: 33 },
-        { angle: 270, r: 44 },
-      ];
-
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadarChart width={360} height={360} data={data}>
-          <PolarAngleAxis dataKey="angle" axisLineType="circle" type="number" domain={[0, 360]} />
-          {/* recharts also passes a no-op `type="number"` to this Radar; omitted (not a Radar prop). */}
-          <Radar name="r" dataKey="r" fillOpacity={0} stroke="#000" />
-          {props.children}
-        </RadarChart>
-      ));
-
-      it("should select axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: "angle",
-          domain: [0, 360],
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "number",
-          unit: undefined,
-        });
-      });
-
-      it("should select polar items", () => {
-        const { spy } = renderTestCase((state) => selectPolarItemsSettings(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          {
-            id: expect.stringMatching("radar-"),
-            type: "radar",
-            angleAxisId: 0,
-            data: undefined,
-            dataKey: "r",
-            hide: false,
-            radiusAxisId: 0,
-          },
-        ]);
-      });
-
-      it("should select angle axis domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 360]);
-      });
-
-      it("should select angle axis range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [90, -270]);
-      });
-
-      it("should select real scale type", () => {
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, "linear");
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 360], range: [-270, 90] });
-      });
-
-      it("should select ticks", () => {
-        const { spy } = renderTestCase((state) =>
-          selectPolarAxisTicks(state, "angleAxis", 0, false),
-        );
-        expectLastCalledWith(spy, [
-          { coordinate: 90, index: 0, offset: 0, value: 0 },
-          { coordinate: 0, index: 1, offset: 0, value: 90 },
-          { coordinate: -90, index: 2, offset: 0, value: 180 },
-          { coordinate: -180, index: 3, offset: 0, value: 270 },
-        ]);
-      });
-
-      it("should select nice ticks", () => {
-        const { spy } = renderTestCase((state) => selectNiceTicks(state, "angleAxis", 0, false));
-        expectLastCalledWith(spy, undefined);
-      });
-
-      it("should select applied data", () => {
-        const { spy } = renderTestCase((state) => selectPolarAppliedValues(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [{ value: 0 }, { value: 90 }, { value: 180 }, { value: 270 }]);
-      });
-
-      it("should render axis ticks", () => {
-        const { container } = renderTestCase((): null => null);
-        expectAngleAxisTicks(container, [
-          { x1: "180", x2: "180", y1: "40", y2: "32" },
-          { x1: "320", x2: "328", y1: "180", y2: "180" },
-          { x1: "180", x2: "180", y1: "320", y2: "328" },
-          { x1: "40", x2: "32", y1: "180.00000000000003", y2: "180.00000000000003" },
-        ]);
-      });
-
-      it("should render angle labels", () => {
-        const { container } = renderTestCase((): null => null);
-        expectAngleAxisTickLabels(container, [
-          { textContext: "0", x: "180", y: "32" },
-          { textContext: "90", x: "328", y: "180" },
-          { textContext: "180", x: "180", y: "328" },
-          { textContext: "270", x: "32", y: "180.00000000000003" },
-        ]);
-      });
-    });
-
-    describe("renders regularly spaced ticks, even if the data is different", () => {
-      const data = [
-        { angle: 0, value: 5 },
-        { angle: 45, value: 5 },
-        { angle: 90, value: 5 },
-        { angle: 125, value: 5 },
-        { angle: 180, value: 5 },
-        { angle: 225, value: 5 },
-        { angle: 270, value: 5 },
-        { angle: 315, value: 5 },
-        { angle: 360, value: 5 },
-      ];
-
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadarChart width={500} height={500} data={data}>
-          <PolarAngleAxis dataKey="angle" type="number" domain={[0, 360]} tickCount={9} />
-          <Radar dataKey="value" />
-          {props.children}
-        </RadarChart>
-      ));
-
-      it("should select axis settings with tickCount=9", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: "angle",
-          domain: [0, 360],
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: 9,
-          ticks: undefined,
-          type: "number",
-          unit: undefined,
-        });
-      });
-
-      it("should select nice ticks", () => {
-        const { spy } = renderTestCase((state) => selectPolarNiceTicks(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 45, 90, 135, 180, 225, 270, 315, 360]);
-      });
-
-      it("should render regularly spaced ticks and labels", () => {
-        const { container } = renderTestCase((): null => null);
-        expectAngleAxisTicks(container, [
-          { x1: "250", x2: "250", y1: "54", y2: "46" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.2497833620557",
-            y1: "111.4070708874367",
-            y2: "105.7502166379443",
-          },
-          { x1: "446", x2: "454", y1: "250", y2: "250" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.2497833620557",
-            y1: "388.5929291125633",
-            y2: "394.2497833620557",
-          },
-          { x1: "250", x2: "250", y1: "446", y2: "454" },
-          {
-            x1: "111.4070708874367",
-            x2: "105.7502166379443",
-            y1: "388.5929291125633",
-            y2: "394.2497833620557",
-          },
-          { x1: "54", x2: "46", y1: "250.00000000000003", y2: "250.00000000000003" },
-          {
-            x1: "111.40707088743665",
-            x2: "105.75021663794428",
-            y1: "111.4070708874367",
-            y2: "105.7502166379443",
-          },
-        ]);
-        expectAngleAxisTickLabels(container, [
-          { textContext: "0", x: "250", y: "46" },
-          { textContext: "45", x: "394.2497833620557", y: "105.7502166379443" },
-          { textContext: "90", x: "454", y: "250" },
-          { textContext: "135", x: "394.2497833620557", y: "394.2497833620557" },
-          { textContext: "180", x: "250", y: "454" },
-          { textContext: "225", x: "105.7502166379443", y: "394.2497833620557" },
-          { textContext: "270", x: "46", y: "250.00000000000003" },
-          { textContext: "315", x: "105.75021663794428", y: "105.7502166379443" },
-        ]);
-      });
-    });
-
-    // Adaptation: the reference passes `type="number"` to <Radar> too, but the
-    // port's RadarProps has no `type` (recharts' Radar ignores it as well).
-    it("renders 4 ticks", () => {
-      const data = [
-        { angle: 0, r: 1 },
-        { angle: 90, r: 2 },
-        { angle: 180, r: 3 },
-        { angle: 270, r: 4 },
-      ];
-
-      const { container } = render(() => (
-        <RadarChart width={500} height={500} data={data}>
-          <PolarAngleAxis dataKey="angle" axisLineType="circle" type="number" domain={[0, 360]} />
-          <Radar name="r" dataKey="r" fillOpacity={0} stroke="#000" />
-        </RadarChart>
-      ));
-
-      expectAngleAxisTicks(container, [
-        { x1: "250", x2: "250", y1: "54", y2: "46" },
-        { x1: "446", x2: "454", y1: "250", y2: "250" },
-        { x1: "250", x2: "250", y1: "446", y2: "454" },
-        { x1: "54", x2: "46", y1: "250.00000000000003", y2: "250.00000000000003" },
-      ]);
-      expectAngleAxisTickLabels(container, [
-        { textContext: "0", x: "250", y: "46" },
-        { textContext: "90", x: "454", y: "250" },
-        { textContext: "180", x: "250", y: "454" },
-        { textContext: "270", x: "46", y: "250.00000000000003" },
-      ]);
-    });
-
-    describe("orientation, axisLine, reversed, and linear-scale niceTicks", () => {
-      it("renders labels and ticks on the inside with orientation=inner", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadarChart width={500} height={500} data={exampleRadarData}>
-            <Radar dataKey="value" />
-            <PolarAngleAxis dataKey="value" orientation="inner" />
-            {props.children}
-          </RadarChart>
-        ));
-        const { container } = renderTestCase((): null => null);
-
-        expectAngleAxisTicks(container, [
-          { x1: "250", x2: "250", y1: "54", y2: "62" },
-          {
-            x1: "388.5929291125633",
-            x2: "382.936074863071",
-            y1: "111.4070708874367",
-            y2: "117.06392513692907",
-          },
-          { x1: "446", x2: "438", y1: "250", y2: "250" },
-          {
-            x1: "388.5929291125633",
-            x2: "382.936074863071",
-            y1: "388.5929291125633",
-            y2: "382.9360748630709",
-          },
-          { x1: "250", x2: "250", y1: "446", y2: "438" },
-          {
-            x1: "111.4070708874367",
-            x2: "117.06392513692907",
-            y1: "388.5929291125633",
-            y2: "382.936074863071",
-          },
-          { x1: "54", x2: "62", y1: "250.00000000000003", y2: "250.00000000000003" },
-          {
-            x1: "111.40707088743665",
-            x2: "117.06392513692904",
-            y1: "111.4070708874367",
-            y2: "117.06392513692907",
-          },
-        ]);
-        expectAngleAxisTickLabels(container, [
-          { textContext: "420", x: "250", y: "62" },
-          { textContext: "460", x: "382.936074863071", y: "117.06392513692907" },
-          { textContext: "999", x: "438", y: "250" },
-          { textContext: "500", x: "382.936074863071", y: "382.9360748630709" },
-          { textContext: "864", x: "250", y: "438" },
-          { textContext: "650", x: "117.06392513692907", y: "382.936074863071" },
-          { textContext: "765", x: "62", y: "250.00000000000003" },
-          { textContext: "365", x: "117.06392513692904", y: "117.06392513692907" },
-        ]);
-      });
-
-      it("does not render any line when axisLine=false", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadarChart width={500} height={500} data={exampleRadarData}>
-            <Radar dataKey="value" />
-            <PolarAngleAxis dataKey="value" axisLine={false} />
-            {props.children}
-          </RadarChart>
-        ));
-        const { container } = renderTestCase((): null => null);
-
-        const axisLineElement = container.querySelector(".recharts-polar-angle-axis-line");
-        expect(axisLineElement).toBeNull();
-      });
-
-      it.each([undefined, "polygon"] as const)(
-        "renders polygon axisLine when axisLineType=%s",
-        (axisLineType) => {
-          const renderTestCase = createSelectorTestCase((props) => (
-            <RadarChart width={500} height={500} data={exampleRadarData}>
-              <Radar dataKey="value" />
-              <PolarAngleAxis dataKey="value" axisLineType={axisLineType} />
-              {props.children}
-            </RadarChart>
-          ));
-          const { container } = renderTestCase((): null => null);
-
-          const axisLineElement = container.querySelector(".recharts-polar-angle-axis-line");
-          assertNotNull(axisLineElement);
-          expect(axisLineElement.tagName).toBe("path");
-          expect(axisLineElement.getAttribute("fill")).toBe("none");
-          expect(axisLineElement.getAttribute("d")).toBe(
-            "M250,54L388.5929,111.4071L446,250L388.5929,388.5929L250,446L111.4071,388.5929L54,250L111.4071,111.4071L250,54Z",
-          );
-        },
-      );
-
-      it("renders circle axisLine", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadarChart width={500} height={300} data={exampleRadarData}>
-            <Radar dataKey="value" />
-            <PolarAngleAxis dataKey="value" axisLineType="circle" />
-            {props.children}
-          </RadarChart>
-        ));
-        const { container } = renderTestCase((): null => null);
-
-        const axisLineElement = container.querySelector(".recharts-polar-angle-axis-line");
-        assertNotNull(axisLineElement);
-        expect(axisLineElement.tagName).toBe("circle");
-        expect(axisLineElement.getAttribute("fill")).toBe("none");
-        expect(axisLineElement.getAttribute("cx")).toBe("250");
-        expect(axisLineElement.getAttribute("cy")).toBe("150");
-        expect(axisLineElement.getAttribute("r")).toBe("116");
-      });
-
-      // Object-form axisLine/tickLine (recharts `SVGProps` form): extra
-      // presentation props restyle the shapes; geometry stays computed.
-      it("merges object-form axisLine presentation props onto the axis line", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadarChart width={500} height={500} data={exampleRadarData}>
-            <Radar dataKey="value" />
-            <PolarAngleAxis dataKey="value" axisLine={{ stroke: "red", strokeWidth: 2 }} />
-            {props.children}
-          </RadarChart>
-        ));
-        const { container } = renderTestCase((): null => null);
-
-        const axisLineElement = container.querySelector(".recharts-polar-angle-axis-line");
-        assertNotNull(axisLineElement);
-        expect(axisLineElement.getAttribute("stroke")).toBe("red");
-        expect(axisLineElement.getAttribute("stroke-width")).toBe("2");
-        expect(axisLineElement.getAttribute("fill")).toBe("none");
-      });
-
-      it("merges object-form tickLine presentation props onto each tick line", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadarChart width={500} height={500} data={exampleRadarData}>
-            <Radar dataKey="value" />
-            <PolarAngleAxis dataKey="value" tickLine={{ stroke: "red", strokeDasharray: "3 3" }} />
-            {props.children}
-          </RadarChart>
-        ));
-        const { container } = renderTestCase((): null => null);
-
-        const tickLines = container.querySelectorAll(".recharts-polar-angle-axis-tick-line");
-        expect(tickLines.length).toBeGreaterThan(0);
-        tickLines.forEach((tickLine) => {
-          expect(tickLine.getAttribute("stroke")).toBe("red");
-          expect(tickLine.getAttribute("stroke-dasharray")).toBe("3 3");
-        });
-      });
-
-      it("renders labels in reverse if reversed=true", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadarChart width={500} height={500} data={exampleRadarData}>
-            <Radar dataKey="value" />
-            <PolarAngleAxis dataKey="value" reversed />
-            {props.children}
-          </RadarChart>
-        ));
-        const { container } = renderTestCase((): null => null);
-
-        expectAngleAxisTickLabels(container, [
-          { textContext: "420", x: "394.24978336205567", y: "105.75021663794428" },
-          { textContext: "460", x: "249.99999999999997", y: "46" },
-          { textContext: "999", x: "105.75021663794428", y: "105.7502166379443" },
-          { textContext: "500", x: "46", y: "250.00000000000003" },
-          { textContext: "864", x: "105.7502166379443", y: "394.2497833620557" },
-          { textContext: "650", x: "250", y: "454" },
-          { textContext: "765", x: "394.2497833620557", y: "394.2497833620557" },
-          { textContext: "365", x: "454", y: "250" },
-        ]);
-      });
-
-      it("linear scale should produce niceTicks=undefined too because that is what the generator does", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadarChart width={500} height={500} data={exampleRadarData}>
-            <Radar dataKey="value" />
-            <PolarAngleAxis dataKey="value" type="number" />
-            {props.children}
-          </RadarChart>
-        ));
-        const { container, spy } = renderTestCase((state) =>
-          selectPolarNiceTicks(state, "angleAxis", 0),
-        );
-
-        expectAngleAxisTicks(container, [
-          {
-            x1: "343.9696838086067",
-            x2: "347.8051811069172",
-            y1: "422.0049375015452",
-            y2: "429.02554719548584",
-          },
-          {
-            x1: "298.1937708077547",
-            x2: "300.1608634937854",
-            y1: "439.9825267105625",
-            y2: "447.73691555589164",
-          },
-          {
-            x1: "249.99999999999997",
-            x2: "249.99999999999997",
-            y1: "54",
-            y2: "46",
-          },
-          {
-            x1: "249.3836324872836",
-            x2: "249.3584746296217",
-            y1: "445.9990308422194",
-            y2: "453.998991284759",
-          },
-          {
-            x1: "102.86822817046604",
-            x2: "96.86284972844425",
-            y1: "120.507754215544",
-            y2: "115.22235642842335",
-          },
-          {
-            x1: "90.9630154532783",
-            x2: "84.47170996157536",
-            y1: "364.5567001370317",
-            y2: "369.2324838160942",
-          },
-          {
-            x1: "54.96086149174786",
-            x2: "47.00008032814574",
-            y1: "230.6161291286071",
-            y2: "229.8249507256931",
-          },
-          {
-            x1: "396.72382587365814",
-            x2: "402.7125534603381",
-            y1: "379.95429550806097",
-            y2: "385.2585524675737",
-          },
-        ]);
-        expectAngleAxisTickLabels(container, [
-          { textContext: "420", x: "347.8051811069172", y: "429.02554719548584" },
-          { textContext: "460", x: "300.1608634937854", y: "447.73691555589164" },
-          { textContext: "999", x: "249.99999999999997", y: "46" },
-          { textContext: "500", x: "249.3584746296217", y: "453.998991284759" },
-          { textContext: "864", x: "96.86284972844425", y: "115.22235642842335" },
-          { textContext: "650", x: "84.47170996157536", y: "369.2324838160942" },
-          { textContext: "765", x: "47.00008032814574", y: "229.8249507256931" },
-          { textContext: "365", x: "402.7125534603381", y: "385.2585524675737" },
-        ]);
-
-        expectLastCalledWith(spy, undefined);
-      });
-    });
-
-    describe.each([
-      { axisType: "number", expectedScale: "linear" },
-      { axisType: "category", expectedScale: "band" },
-      { axisType: undefined, expectedScale: "band" },
-    ] as const)("uses $expectedScale scale when type=$axisType", ({ axisType, expectedScale }) => {
-      it("selects the expected real scale type", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadarChart width={500} height={500} data={PageData}>
-            <Radar dataKey="uv" />
-            <PolarAngleAxis dataKey="uv" type={axisType} />
-            {props.children}
-          </RadarChart>
-        ));
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, expectedScale);
-      });
-    });
-  });
-
-  describe("in RadialBarChart", () => {
-    describe("with default axis", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={500} height={500} data={PageData}>
-          <RadialBar dataKey="uv" />
-          <PolarAngleAxis />
-          <PolarRadiusAxis />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should render ticks", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTicks(container, [
-          { x1: "446", x2: "454", y1: "250", y2: "250" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.2497833620557",
-            y1: "111.4070708874367",
-            y2: "105.7502166379443",
-          },
-          { x1: "250", x2: "250", y1: "54", y2: "46" },
-          {
-            x1: "111.4070708874367",
-            x2: "105.7502166379443",
-            y1: "111.40707088743667",
-            y2: "105.7502166379443",
-          },
-          { x1: "54", x2: "46", y1: "249.99999999999997", y2: "249.99999999999997" },
-          {
-            x1: "111.40707088743665",
-            x2: "105.75021663794428",
-            y1: "388.5929291125633",
-            y2: "394.2497833620557",
-          },
-          { x1: "249.99999999999997", x2: "249.99999999999997", y1: "446", y2: "454" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.24978336205567",
-            y1: "388.59292911256335",
-            y2: "394.2497833620557",
-          },
-        ]);
-      });
-
-      it("should render labels", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTickLabels(container, [
-          { textContext: "0", x: "454", y: "250" },
-          { textContext: "50", x: "394.2497833620557", y: "105.7502166379443" },
-          { textContext: "100", x: "250", y: "46" },
-          { textContext: "150", x: "105.7502166379443", y: "105.7502166379443" },
-          { textContext: "200", x: "46", y: "249.99999999999997" },
-          { textContext: "250", x: "105.75021663794428", y: "394.2497833620557" },
-          { textContext: "300", x: "249.99999999999997", y: "454" },
-          { textContext: "350", x: "394.24978336205567", y: "394.2497833620557" },
-        ]);
-      });
-
-      it("should select axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: undefined,
-          domain: undefined,
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "number",
-          unit: undefined,
-        });
-      });
-
-      it("should select applied values", () => {
-        const { spy } = renderTestCase((state) => selectPolarAppliedValues(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          { value: 400 },
-          { value: 300 },
-          { value: 300 },
-          { value: 200 },
-          { value: 278 },
-          { value: 189 },
-        ]);
-      });
-
-      it("should select domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 400]);
-      });
-
-      it("should select range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [0, 360]);
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 400], range: [0, 360] });
-      });
-
-      it("should select real scale type", () => {
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, "linear");
-      });
-
-      it("should select polarItemsSettings", () => {
-        const { spy } = renderTestCase((state) => selectPolarItemsSettings(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          {
-            // Deviation: recharts auto-ids RadialBar as `radialBar-N`; this port uses
-            // the kebab `recharts-radial-bar-…` prefix (an internal id detail).
-            id: expect.stringMatching(/recharts-radial-bar-/),
-            maxBarSize: undefined,
-            minPointSize: 0,
-            barSize: undefined,
-            stackId: undefined,
-            type: "radialBar",
-            angleAxisId: 0,
-            data: undefined,
-            dataKey: "uv",
-            hide: false,
-            radiusAxisId: 0,
-          },
-        ]);
-      });
-
-      it("should select ticks", () => {
-        const { spy } = renderTestCase((state) =>
-          selectPolarAxisTicks(state, "angleAxis", 0, false),
-        );
-        expectLastCalledWith(spy, [
-          { coordinate: 0, index: 0, offset: -0, value: 0 },
-          { coordinate: 45, index: 1, offset: -0, value: 50 },
-          { coordinate: 90, index: 2, offset: -0, value: 100 },
-          { coordinate: 135, index: 3, offset: -0, value: 150 },
-          { coordinate: 180, index: 4, offset: -0, value: 200 },
-          { coordinate: 225, index: 5, offset: -0, value: 250 },
-          { coordinate: 270, index: 6, offset: -0, value: 300 },
-          { coordinate: 315, index: 7, offset: -0, value: 350 },
-          { coordinate: 360, index: 8, offset: -0, value: 400 },
-        ]);
-      });
-    });
-
-    describe("with category axis", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={500} height={500} data={PageData}>
-          <RadialBar dataKey="uv" />
-          <PolarAngleAxis type="category" />
-          <PolarRadiusAxis />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should render ticks", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTicks(container, [
-          {
-            x1: "310.5673308974897",
-            x2: "313.0394668524893",
-            y1: "436.4070771938501",
-            y2: "444.01552932421134",
-          },
-          { x1: "446", x2: "454", y1: "250", y2: "250" },
-          {
-            x1: "310.5673308974897",
-            x2: "313.0394668524893",
-            y1: "63.592922806149915",
-            y2: "55.984470675788685",
-          },
-          {
-            x1: "91.43266910251032",
-            x2: "84.96053314751074",
-            y1: "134.79409055067526",
-            y2: "130.09180853233545",
-          },
-          {
-            x1: "91.43266910251029",
-            x2: "84.96053314751072",
-            y1: "365.20590944932474",
-            y2: "369.9081914676645",
-          },
-        ]);
-      });
-
-      it("should render labels", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTickLabels(container, [
-          { textContext: "400", x: "313.0394668524893", y: "444.01552932421134" },
-          { textContext: "300", x: "454", y: "250" },
-          { textContext: "200", x: "313.0394668524893", y: "55.984470675788685" },
-          { textContext: "278", x: "84.96053314751074", y: "130.09180853233545" },
-          { textContext: "189", x: "84.96053314751072", y: "369.9081914676645" },
-        ]);
-      });
-
-      it("should select axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: undefined,
-          domain: undefined,
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "category",
-          unit: undefined,
-        });
-      });
-
-      it("should select applied values", () => {
-        const { spy } = renderTestCase((state) => selectPolarAppliedValues(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          { value: 400 },
-          { value: 300 },
-          { value: 300 },
-          { value: 200 },
-          { value: 278 },
-          { value: 189 },
-        ]);
-      });
-
-      it("should select domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [400, 300, 200, 278, 189]);
-      });
-
-      it("should select range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [0, 360]);
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [400, 300, 200, 278, 189], range: [0, 360] });
-      });
-
-      it("should select real scale type", () => {
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, "band");
-      });
-
-      it("should select polarItemsSettings", () => {
-        const { spy } = renderTestCase((state) => selectPolarItemsSettings(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          {
-            id: expect.stringMatching(/recharts-radial-bar-/),
-            maxBarSize: undefined,
-            minPointSize: 0,
-            barSize: undefined,
-            stackId: undefined,
-            type: "radialBar",
-            angleAxisId: 0,
-            data: undefined,
-            dataKey: "uv",
-            hide: false,
-            radiusAxisId: 0,
-          },
-        ]);
-      });
-
-      it("should select ticks", () => {
-        const { spy } = renderTestCase((state) =>
-          selectPolarAxisTicks(state, "angleAxis", 0, false),
-        );
-        expectLastCalledWith(spy, [
-          { coordinate: -72, index: 0, offset: -72, value: 400 },
-          { coordinate: 0, index: 1, offset: -72, value: 300 },
-          { coordinate: 72, index: 2, offset: -72, value: 200 },
-          { coordinate: 144, index: 3, offset: -72, value: 278 },
-          { coordinate: 216, index: 4, offset: -72, value: 189 },
-        ]);
-      });
-    });
-
-    describe("with implicit axis", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={500} height={500} data={PageData}>
-          <RadialBar dataKey="uv" />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should not render ticks", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTicks(container, []);
-      });
-
-      it("should not render axis labels", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTickLabels(container, []);
-      });
-
-      it("should select axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: undefined,
-          domain: undefined,
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "number",
-          unit: undefined,
-        });
-      });
-
-      it("should select applied values", () => {
-        const { spy } = renderTestCase((state) => selectPolarAppliedValues(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          { value: 400 },
-          { value: 300 },
-          { value: 300 },
-          { value: 200 },
-          { value: 278 },
-          { value: 189 },
-        ]);
-      });
-
-      it("should select domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 400]);
-      });
-
-      it("should select range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [0, 360]);
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 400], range: [0, 360] });
-      });
-
-      it("should select real scale type", () => {
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, "linear");
-      });
-
-      it("should select polarItemsSettings", () => {
-        const { spy } = renderTestCase((state) => selectPolarItemsSettings(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [
-          {
-            id: expect.stringMatching(/recharts-radial-bar-/),
-            maxBarSize: undefined,
-            minPointSize: 0,
-            barSize: undefined,
-            stackId: undefined,
-            type: "radialBar",
-            angleAxisId: 0,
-            data: undefined,
-            dataKey: "uv",
-            hide: false,
-            radiusAxisId: 0,
-          },
-        ]);
-      });
-
-      it("should select ticks", () => {
-        const { spy } = renderTestCase((state) =>
-          selectPolarAxisTicks(state, "angleAxis", 0, false),
-        );
-        expectLastCalledWith(spy, [
-          { index: 0, coordinate: 0, offset: -0, value: 0 },
-          { index: 1, coordinate: 45, offset: -0, value: 50 },
-          { index: 2, coordinate: 90, offset: -0, value: 100 },
-          { index: 3, coordinate: 135, offset: -0, value: 150 },
-          { index: 4, coordinate: 180, offset: -0, value: 200 },
-          { index: 5, coordinate: 225, offset: -0, value: 250 },
-          { index: 6, coordinate: 270, offset: -0, value: 300 },
-          { index: 7, coordinate: 315, offset: -0, value: 350 },
-          { index: 8, coordinate: 360, offset: -0, value: 400 },
-        ]);
-      });
-    });
-
-    describe("with reversed axis", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={500} height={500} data={PageData}>
-          <RadialBar dataKey="uv" />
-          <PolarAngleAxis reversed />
-          <PolarRadiusAxis />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should select axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: undefined,
-          domain: undefined,
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: true,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "number",
-          unit: undefined,
-        });
-      });
-
-      it("should select domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 400]);
-      });
-
-      it("should select range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [360, 0]);
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 400], range: [0, 360] });
-      });
-
-      it("should render ticks", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTicks(container, [
-          { x1: "446", x2: "454", y1: "250.00000000000006", y2: "250.00000000000006" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.24978336205567",
-            y1: "388.59292911256335",
-            y2: "394.2497833620557",
-          },
-          { x1: "249.99999999999997", x2: "249.99999999999997", y1: "446", y2: "454" },
-          {
-            x1: "111.40707088743665",
-            x2: "105.75021663794428",
-            y1: "388.5929291125633",
-            y2: "394.2497833620557",
-          },
-          { x1: "54", x2: "46", y1: "249.99999999999997", y2: "249.99999999999997" },
-          {
-            x1: "111.4070708874367",
-            x2: "105.7502166379443",
-            y1: "111.40707088743667",
-            y2: "105.7502166379443",
-          },
-          { x1: "250", x2: "250", y1: "54", y2: "46" },
-          {
-            x1: "388.5929291125633",
-            x2: "394.2497833620557",
-            y1: "111.4070708874367",
-            y2: "105.7502166379443",
-          },
-        ]);
-      });
-
-      it("should render labels reversed", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTickLabels(container, [
-          { textContext: "0", x: "454", y: "250.00000000000006" },
-          { textContext: "50", x: "394.24978336205567", y: "394.2497833620557" },
-          { textContext: "100", x: "249.99999999999997", y: "454" },
-          { textContext: "150", x: "105.75021663794428", y: "394.2497833620557" },
-          { textContext: "200", x: "46", y: "249.99999999999997" },
-          { textContext: "250", x: "105.7502166379443", y: "105.7502166379443" },
-          { textContext: "300", x: "250", y: "46" },
-          { textContext: "350", x: "394.2497833620557", y: "105.7502166379443" },
-        ]);
-      });
-    });
-
-    describe("with custom angles", () => {
-      const ringsData = [
-        { name: "Elves", rings: 3, fill: "green" },
-        { name: "Dwarves", rings: 7, fill: "blue" },
-        { name: "Humans", rings: 9, fill: "red" },
-        { name: "Sauron", rings: 1, fill: "black" },
-      ];
-
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={500} height={500} data={ringsData} startAngle={20} endAngle={220}>
-          <RadialBar dataKey="rings" />
-          <PolarAngleAxis type="number" />
-          <PolarRadiusAxis />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should select axis settings", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
-        expectLastCalledWith(spy, {
-          allowDataOverflow: false,
-          allowDecimals: false,
-          allowDuplicatedCategory: false,
-          dataKey: undefined,
-          domain: undefined,
-          id: 0,
-          includeHidden: false,
-          name: undefined,
-          reversed: false,
-          niceTicks: "auto",
-          scale: "auto",
-          tick: true,
-          tickCount: undefined,
-          ticks: undefined,
-          type: "number",
-          unit: undefined,
-        });
-      });
-
-      it("should select polar chart options", () => {
-        const { spy } = renderTestCase(selectPolarOptions);
-        expectLastCalledWith(spy, {
-          startAngle: 20,
-          endAngle: 220,
-          cx: "50%",
-          cy: "50%",
-          innerRadius: 0,
-          outerRadius: "80%",
-        });
-      });
-
-      it("should select axis domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 9]);
-      });
-
-      it("should select axis range", () => {
-        const { spy } = renderTestCase((state) => selectAngleAxisRangeWithReversed(state, 0));
-        expectLastCalledWith(spy, [20, 220]);
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 9], range: [20, 220] });
-      });
-
-      it("should render ticks in the angled part only", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTicks(container, [
-          {
-            x1: "434.179753674038",
-            x2: "441.6972946403253",
-            y1: "182.96405190816893",
-            y2: "180.22789076156357",
-          },
-          {
-            x1: "395.1466265693649",
-            x2: "401.0709786742369",
-            y1: "118.28645933111761",
-            y2: "112.91039644667342",
-          },
-          {
-            x1: "334.5516688735257",
-            x2: "338.00275739897575",
-            y1: "73.17518474291663",
-            y2: "65.95784534466833",
-          },
-          {
-            x1: "261.3963864664533",
-            x2: "261.8615450977371",
-            y1: "54.33160097883143",
-            y2: "46.34513571266129",
-          },
-          {
-            x1: "186.54814735656907",
-            x2: "183.95827582010253",
-            y1: "64.55496125235291",
-            y2: "56.985775997346906",
-          },
-          {
-            x1: "121.12581176046348",
-            x2: "115.86564081191096",
-            y1: "102.32656431977853",
-            y2: "96.29907714915723",
-          },
-          {
-            x1: "74.84800249661123",
-            x2: "67.69894137402392",
-            y1: "162.0353606807094",
-            y2: "158.44496723910567",
-          },
-          {
-            x1: "54.58938353111273",
-            x2: "46.613440001770414",
-            y1: "234.8114855483016",
-            y2: "234.19154618292615",
-          },
-          {
-            x1: "63.3594144736706",
-            x2: "55.74143139096327",
-            y1: "309.84389554824213",
-            y2: "312.28650352980304",
-          },
-          {
-            x1: "99.8552891486803",
-            x2: "93.72693360372847",
-            y1: "375.9863714985617",
-            y2: "381.128672376054",
-          },
-        ]);
-      });
-    });
-
-    describe("RadialBarWithColors with default axis", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={500} height={500} data={pageDataWithFillColor}>
-          <RadialBar dataKey="uv" />
-          <PolarAngleAxis />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should render ticks", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTicks(container, [
-          { x1: "446", x2: "454", y1: "250", y2: "250" },
-          {
-            x1: "430.5803711701581",
-            x2: "437.9509985648584",
-            y1: "173.79810010211077",
-            y2: "170.6878184736255",
-          },
-          {
-            x1: "386.74765767298027",
-            x2: "392.32919472085706",
-            y1: "109.58604727110134",
-            y2: "103.85486552706465",
-          },
-          {
-            x1: "321.39863678123476",
-            x2: "324.3128668539382",
-            y1: "67.46716825244476",
-            y2: "60.01684858927925",
-          },
-          {
-            x1: "244.8155293780266",
-            x2: "244.60391833223176",
-            y1: "54.06858020120944",
-            y2: "46.071379393095526",
-          },
-          {
-            x1: "169.04816292043114",
-            x2: "165.74400630493852",
-            y1: "71.49845918468117",
-            y2: "64.2126820085457",
-          },
-          {
-            x1: "106.01801361447642",
-            x2: "100.14119784363871",
-            y1: "117.01433311638843",
-            y2: "111.58634671297571",
-          },
-          {
-            x1: "65.64244378044125",
-            x2: "58.11764556739806",
-            y1: "183.4545909566089",
-            y2: "180.73845181198072",
-          },
-          {
-            x1: "54.274272812552084",
-            x2: "46.285467621227696",
-            y1: "260.36531316192213",
-            y2: "260.7883871685312",
-          },
-          {
-            x1: "73.70220455569708",
-            x2: "66.50637617021533",
-            y1: "335.645124329869",
-            y2: "339.1408436902718",
-          },
-          {
-            x1: "120.86938700568427",
-            x2: "115.59874974061017",
-            y1: "397.44926174013983",
-            y2: "403.46759895402306",
-          },
-          {
-            x1: "188.35438703671548",
-            x2: "185.83823956882634",
-            y1: "436.0532676476845",
-            y2: "443.6472785720798",
-          },
-          {
-            x1: "265.5389020767459",
-            x2: "266.1731429778376",
-            y1: "445.3830661092442",
-            y2: "453.35788513411137",
-          },
-          {
-            x1: "340.278477295892",
-            x2: "343.9633131038876",
-            y1: "423.97067723365086",
-            y2: "431.0715212023713",
-          },
-          {
-            x1: "400.81335240048736",
-            x2: "406.96899943724196",
-            y1: "375.1851937639847",
-            y2: "380.2947935094535",
-          },
-          {
-            x1: "437.6187793765148",
-            x2: "445.2766887388216",
-            y1: "306.7026774082729",
-            y2: "309.0170724045289",
-          },
-        ]);
-      });
-
-      it("should render labels", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTickLabels(container, [
-          { textContext: "0", x: "454", y: "250" },
-          { textContext: "2", x: "437.9509985648584", y: "170.6878184736255" },
-          { textContext: "4", x: "392.32919472085706", y: "103.85486552706465" },
-          { textContext: "6", x: "324.3128668539382", y: "60.01684858927925" },
-          { textContext: "8", x: "244.60391833223176", y: "46.071379393095526" },
-          { textContext: "10", x: "165.74400630493852", y: "64.2126820085457" },
-          { textContext: "12", x: "100.14119784363871", y: "111.58634671297571" },
-          { textContext: "14", x: "58.11764556739806", y: "180.73845181198072" },
-          { textContext: "16", x: "46.285467621227696", y: "260.7883871685312" },
-          { textContext: "18", x: "66.50637617021533", y: "339.1408436902718" },
-          { textContext: "20", x: "115.59874974061017", y: "403.46759895402306" },
-          { textContext: "22", x: "185.83823956882634", y: "443.6472785720798" },
-          { textContext: "24", x: "266.1731429778376", y: "453.35788513411137" },
-          { textContext: "26", x: "343.9633131038876", y: "431.0715212023713" },
-          { textContext: "28", x: "406.96899943724196", y: "380.2947935094535" },
-          { textContext: "30", x: "445.2766887388216", y: "309.0170724045289" },
-        ]);
-      });
-
-      it("should select domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 31.47]);
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 31.47], range: [0, 360] });
-      });
-    });
-
-    describe("RadialBarWithColors with implicit axis", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={500} height={500} data={pageDataWithFillColor}>
-          <RadialBar dataKey="pv" />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should not render ticks", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTicks(container, []);
-      });
-
-      it("should not render labels", () => {
-        const { container } = renderTestCase();
-        expectAngleAxisTickLabels(container, []);
-      });
-
-      it("should select domain", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisDomain(state, "angleAxis", 0));
-        expectLastCalledWith(spy, [0, 9800]);
-      });
-
-      it("should select scale", () => {
-        const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
-        expectLastCalledWithScale(spy, { domain: [0, 9800], range: [0, 360] });
-      });
-    });
-
-    describe.each([
-      { axisType: "number", expectedScale: "linear" },
-      { axisType: "category", expectedScale: "band" },
-      { axisType: undefined, expectedScale: "linear" },
-    ] as const)("uses $expectedScale scale when type=$axisType", ({ axisType, expectedScale }) => {
-      it("selects the expected real scale type", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadialBarChart width={500} height={500} data={PageData}>
-            <RadialBar dataKey="uv" />
-            <PolarAngleAxis dataKey="uv" type={axisType} />
-            {props.children}
-          </RadialBarChart>
-        ));
-        const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
-        expectLastCalledWith(spy, expectedScale);
-      });
-    });
-  });
-
-  describe("state integration", () => {
-    // Solid deviation: the reference unmounts via `rerender()`; here a signal-driven
-    // <Show> removes the axis (same pattern as Radar.spec). Call-count assertions are
-    // omitted (Solid's flush timing differs from React's render count).
-    it("should report its settings to Redux store, and remove it when component is removed", () => {
-      const angleAxisSpy = vi.fn();
-      const [showAxis, setShowAxis] = createSignal(true);
-      const Comp = (): null => {
-        const settings = useAppSelector((state) => selectAngleAxis(state, 0));
-        createEffect(
-          () => settings(),
-          (v) => angleAxisSpy(v),
-        );
-        return null;
-      };
-      render(() => (
-        <RadarChart width={1} height={2}>
-          <Show when={showAxis()}>
-            <PolarAngleAxis />
-          </Show>
-          <Comp />
-        </RadarChart>
-      ));
-      flush();
-
-      const expectedAxis = {
-        allowDataOverflow: false,
-        allowDecimals: false,
-        allowDuplicatedCategory: false,
-        dataKey: undefined,
-        domain: undefined,
-        id: 0,
-        includeHidden: false,
-        name: undefined,
-        reversed: false,
-        niceTicks: "auto",
-        scale: "auto",
-        tick: true,
-        tickCount: undefined,
-        ticks: undefined,
-        type: "category",
-        unit: undefined,
-      };
-      expect(angleAxisSpy).toHaveBeenLastCalledWith(expectedAxis);
-
-      setShowAxis(false);
-      flush();
-
-      expect(angleAxisSpy).toHaveBeenLastCalledWith({ ...implicitAngleAxis, type: "category" });
-    });
-
-    it("should select angle axis settings", () => {
-      const exampleTicks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadarChart
-          cx={100}
-          cy={150}
-          outerRadius={150}
-          width={600}
-          height={500}
-          data={exampleRadarData}
-        >
-          <Radar dataKey="value" angleAxisId="angle-id" />
-          <PolarAngleAxis
-            dataKey="value"
-            allowDuplicatedCategory={false}
-            angleAxisId="angle-id"
-            id="html-id"
-            name="angle-name"
-            reversed
-            scale="log"
-            domain={[100, 200]}
-            ticks={exampleTicks}
-            tick={false}
-            allowDecimals
-            tickCount={19}
-          />
-          {props.children}
-        </RadarChart>
-      ));
-
-      const settingsCase = renderTestCase((state) => selectAngleAxis(state, "angle-id"));
-      expectLastCalledWith(settingsCase.spy, {
-        allowDataOverflow: false,
-        allowDecimals: true,
-        allowDuplicatedCategory: false,
-        dataKey: "value",
-        domain: [100, 200],
-        id: "angle-id",
-        includeHidden: false,
-        name: "angle-name",
-        reversed: true,
-        niceTicks: "auto",
-        scale: "log",
-        tick: false,
-        tickCount: 19,
-        ticks: exampleTicks,
-        type: "category",
-        unit: undefined,
-      });
-
-      const rangeCase = renderTestCase((state) =>
-        selectAngleAxisRangeWithReversed(state, "angle-id"),
-      );
-      expectLastCalledWith(rangeCase.spy, [-270, 90]);
-
-      const domainCase = renderTestCase((state) =>
-        selectPolarAxisDomain(state, "angleAxis", "angle-id"),
-      );
-      expectLastCalledWith(domainCase.spy, [420, 460, 999, 500, 864, 650, 765, 365]);
-
-      const scaleCase = renderTestCase((state) =>
-        selectPolarAxisScale(state, "angleAxis", "angle-id"),
-      );
-      expectLastCalledWithScale(scaleCase.spy, {
-        domain: [420, 460, 999, 500, 864, 650, 765, 365],
-        range: [-270, 90],
-      });
-
-      const ticksCase = renderTestCase((state) =>
-        selectPolarAxisTicks(state, "angleAxis", "angle-id", false),
-      );
-      expectLastCalledWith(ticksCase.spy, [
-        { coordinate: -24172.926148617094, index: 0, offset: -0, value: 1 },
-        { coordinate: -21429.954757673444, index: 1, offset: -0, value: 2 },
-        { coordinate: -19825.41935342046, index: 2, offset: -0, value: 3 },
-        { coordinate: -18686.983366729797, index: 3, offset: -0, value: 4 },
-        { coordinate: -17803.943812512767, index: 4, offset: -0, value: 5 },
-        { coordinate: -17082.44796247681, index: 5, offset: -0, value: 6 },
-        { coordinate: -16472.431913188248, index: 6, offset: -0, value: 7 },
-        { coordinate: -15944.011975786148, index: 7, offset: -0, value: 8 },
-        { coordinate: -15477.912558223828, index: 8, offset: -0, value: 9 },
-        { coordinate: -15060.972421569122, index: 9, offset: -0, value: 10 },
-      ]);
-
-      const niceTicksCase = renderTestCase((state) =>
-        selectNiceTicks(state, "angleAxis", "angle-id", false),
-      );
-      expectLastCalledWith(niceTicksCase.spy, undefined);
-    });
-  });
-
-  describe("with custom tick formatter and numerical values", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <RadialBarChart width={500} height={500} data={PageData}>
-        <RadialBar dataKey="uv" />
-        <PolarAngleAxis tickFormatter={(value) => `${String(value)}°`} />
-        {props.children}
-      </RadialBarChart>
-    ));
-
-    it("should render labels with custom formatter", () => {
-      const { container } = renderTestCase();
-      expectAngleAxisTickLabels(container, [
-        { textContext: "0°", x: "454", y: "250" },
-        { textContext: "50°", x: "394.2497833620557", y: "105.7502166379443" },
-        { textContext: "100°", x: "250", y: "46" },
-        { textContext: "150°", x: "105.7502166379443", y: "105.7502166379443" },
-        { textContext: "200°", x: "46", y: "249.99999999999997" },
-        { textContext: "250°", x: "105.75021663794428", y: "394.2497833620557" },
-        { textContext: "300°", x: "249.99999999999997", y: "454" },
-        { textContext: "350°", x: "394.24978336205567", y: "394.2497833620557" },
-      ]);
-    });
-
-    it("should call the custom tick formatter with the tick value and index", () => {
-      const formatter = vi.fn((value: unknown) => `${String(value)}°`);
-      const renderFormatterCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={500} height={500} data={PageData}>
-          <RadialBar dataKey="uv" />
-          <PolarAngleAxis tickFormatter={formatter} />
-          {props.children}
-        </RadialBarChart>
-      ));
-      renderFormatterCase();
-      expect(formatter).toHaveBeenCalledWith(0, 0);
-      expect(formatter).toHaveBeenCalledWith(50, 1);
-      expect(formatter).toHaveBeenCalledWith(100, 2);
-      expect(formatter).toHaveBeenLastCalledWith(350, 7);
-    });
-  });
-
-  describe("with custom tick formatter and category values", () => {
-    // https://github.com/recharts/recharts/issues/6010
-    const renderTestCase = createSelectorTestCase((props) => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar dataKey="value" />
-        <PolarAngleAxis dataKey="name" tickFormatter={(value) => `Formatted: ${String(value)}`} />
-        {props.children}
-      </RadarChart>
-    ));
-
-    it("should select ticks", () => {
-      const { spy } = renderTestCase((state) => selectPolarAxisTicks(state, "angleAxis", 0, false));
-      expectLastCalledWith(spy, [
-        { coordinate: 90, index: 0, offset: 45, value: "iPhone 3GS" },
-        { coordinate: 45, index: 1, offset: 45, value: "iPhone 4" },
-        { coordinate: 0, index: 2, offset: 45, value: "iPhone 4s" },
-        { coordinate: -45, index: 3, offset: 45, value: "iPhone 5" },
-        { coordinate: -90, index: 4, offset: 45, value: "iPhone 5s" },
-        { coordinate: -135, index: 5, offset: 45, value: "iPhone 6" },
-        { coordinate: -180, index: 6, offset: 45, value: "iPhone 6s" },
-        { coordinate: -225, index: 7, offset: 45, value: "iPhone 5se" },
-      ]);
-    });
-
-    it("should render labels with custom formatter", () => {
-      const { container } = renderTestCase();
-      expectAngleAxisTickLabels(container, [
-        { textContext: "Formatted: iPhone 3GS", x: "250", y: "46" },
-        { textContext: "Formatted: iPhone 4", x: "394.2497833620557", y: "105.7502166379443" },
-        { textContext: "Formatted: iPhone 4s", x: "454", y: "250" },
-        { textContext: "Formatted: iPhone 5", x: "394.2497833620557", y: "394.2497833620557" },
-        { textContext: "Formatted: iPhone 5s", x: "250", y: "454" },
-        { textContext: "Formatted: iPhone 6", x: "105.7502166379443", y: "394.2497833620557" },
-        { textContext: "Formatted: iPhone 6s", x: "46", y: "250.00000000000003" },
-        { textContext: "Formatted: iPhone 5se", x: "105.75021663794428", y: "105.7502166379443" },
-      ]);
-    });
-  });
-
-  describe("function-form tick", () => {
-    it("Renders ticks when tick is set to be a function", () => {
-      const Tick = (props: PolarAngleTickContentProps) => (
-        <text x={props.x} y={props.y} class="customized-tick">
-          test
-        </text>
-      );
-      const { container } = render(() => (
-        <RadarChart width={500} height={500} data={exampleRadarData}>
-          <Radar dataKey="value" />
-          <PolarAngleAxis tick={Tick} axisLineType="circle" />
-        </RadarChart>
-      ));
-
-      expect(container.querySelectorAll(".customized-tick")).toHaveLength(exampleRadarData.length);
-    });
-
-    it("passes custom data to the tick function", () => {
-      const tick = vi.fn().mockImplementation(() => null);
-
-      render(() => (
-        <RadarChart width={500} height={500} data={exampleRadarData}>
-          <Radar dataKey="value" />
-          <PolarAngleAxis tick={tick} />
-        </RadarChart>
-      ));
-
-      // Harness deviation: Solid re-runs the renderer when the polar layout
-      // settles after the first flush, so assert on the final round of calls
-      // (recharts' single React render calls it exactly once per tick).
-      expect(tick.mock.calls.length % exampleRadarData.length).toBe(0);
-      const lastRound = tick.mock.calls
-        .slice(-exampleRadarData.length)
-        .map((args: ReadonlyArray<unknown>) => args[0]);
-      expect(lastRound[0]).toEqual({
-        angle: 0,
-        cx: 250,
-        cy: 250,
-        fill: undefined,
-        index: 0,
-        orientation: "outer",
-        payload: {
-          coordinate: 90,
-          index: 0,
-          offset: 45,
-          value: 0,
-        },
-        radius: 196,
-        stroke: "none",
-        textAnchor: "middle",
-        verticalAnchor: "end",
-        x: 250,
-        y: 46,
-      });
-      expect(lastRound[1]).toEqual({
-        angle: 0,
-        cx: 250,
-        cy: 250,
-        fill: undefined,
-        index: 1,
-        orientation: "outer",
-        payload: {
-          coordinate: 45,
-          index: 1,
-          offset: 45,
-          value: 1,
-        },
-        radius: 196,
-        stroke: "none",
-        textAnchor: "start",
-        verticalAnchor: "end",
-        x: 394.2497833620557,
-        y: 105.7502166379443,
-      });
-    });
-  });
-});