solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/cartesian/XAxis/XAxis.numberdomain.spec.tsx

@@ -0,0 +1,1466 @@
+import { describe, expect, it, vi } from "vitest";
+import { createSignal, flush } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { BarChart, Line, LineChart, XAxis } from "../../../src";
+import { render } from "@solidjs/testing-library";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+const data = [
+  { x: 90, y: 90, z: 90 },
+  { 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 dataWithSmallNumbers = [{ x: 0.1 }, { x: 0.3 }, { x: 0.5 }, { x: 0.7 }, { x: 0.9 }];
+
+const dataWithDecimalNumbers = [{ x: 4.1 }, { x: 6.3 }, { x: 12.5 }, { x: 3.7 }, { x: 7.9 }];
+
+describe("numerical domain", () => {
+  type XAxisTestCase = {
+    name: string;
+    Component: (props: { children: JSX.Element }) => JSX.Element;
+  };
+
+  const testCases: XAxisTestCase[] = [
+    {
+      name: "data defined on chart root",
+      Component: (props) => (
+        <BarChart width={300} height={300} data={data}>
+          {props.children}
+        </BarChart>
+      ),
+    },
+    {
+      name: "data defined on graphical element",
+      Component: (props) => (
+        <LineChart width={300} height={300}>
+          <Line data={data} />
+          {props.children}
+        </LineChart>
+      ),
+    },
+  ];
+
+  describe.each(testCases)("when $name", ({ Component }) => {
+    it("should start from 0 and calculate domain max by default", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "45",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "180",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 180]);
+    });
+
+    it("should reverse ticks", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" reversed />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "295",
+          y: "273",
+        },
+        {
+          textContent: "45",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "180",
+          x: "5",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 180]);
+    });
+
+    describe.each([true, false, undefined])(
+      "auto domain with allowDataOverflow = %s",
+      (allowDataOverflow) => {
+        it("should render ticks from domain auto, auto", () => {
+          const spy = vi.fn();
+          const { container } = render(() => (
+            <Component>
+              <XAxis
+                dataKey="x"
+                type="number"
+                domain={["auto", "auto"]}
+                allowDataOverflow={allowDataOverflow}
+              />
+              <ExpectAxisDomain assert={spy} axisType="xAxis" />
+            </Component>
+          ));
+          expectXAxisTicks(container, [
+            {
+              textContent: "75",
+              x: "5",
+              y: "273",
+            },
+            {
+              textContent: "100",
+              x: "77.5",
+              y: "273",
+            },
+            {
+              textContent: "125",
+              x: "150",
+              y: "273",
+            },
+            {
+              textContent: "150",
+              x: "222.5",
+              y: "273",
+            },
+            {
+              textContent: "175",
+              x: "295",
+              y: "273",
+            },
+          ]);
+          expectLastCalledWith(spy, [75, 175]);
+        });
+
+        it("should render ticks from number, auto", () => {
+          const domain = [-55, "auto"] as const;
+          const spy = vi.fn();
+          const { container } = render(() => (
+            <Component>
+              <XAxis
+                dataKey="x"
+                type="number"
+                domain={domain}
+                allowDataOverflow={allowDataOverflow}
+              />
+              <ExpectAxisDomain assert={spy} axisType="xAxis" />
+            </Component>
+          ));
+          expectXAxisTicks(container, [
+            {
+              textContent: "-60",
+              x: "5",
+              y: "273",
+            },
+            {
+              textContent: "0",
+              x: "77.5",
+              y: "273",
+            },
+            {
+              textContent: "60",
+              x: "150",
+              y: "273",
+            },
+            {
+              textContent: "120",
+              x: "222.5",
+              y: "273",
+            },
+            {
+              textContent: "180",
+              x: "295",
+              y: "273",
+            },
+          ]);
+          expectLastCalledWith(spy, [-60, 180]);
+        });
+
+        it("should render ticks from auto, number", () => {
+          const spy = vi.fn();
+          const { container } = render(() => (
+            <Component>
+              <XAxis
+                dataKey="x"
+                type="number"
+                domain={["auto", 555]}
+                allowDataOverflow={allowDataOverflow}
+              />
+              <ExpectAxisDomain assert={spy} axisType="xAxis" />
+            </Component>
+          ));
+          expectXAxisTicks(container, [
+            {
+              textContent: "0",
+              x: "5",
+              y: "273",
+            },
+            {
+              textContent: "150",
+              x: "77.5",
+              y: "273",
+            },
+            {
+              textContent: "300",
+              x: "150",
+              y: "273",
+            },
+            {
+              textContent: "450",
+              x: "222.5",
+              y: "273",
+            },
+            {
+              textContent: "600",
+              x: "295",
+              y: "273",
+            },
+          ]);
+          expectLastCalledWith(spy, [0, 600]);
+        });
+      },
+    );
+
+    it("should allow to expand the domain", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={[-500, 500]} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "-500",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "-250",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "0",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "250",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "500",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [-500, 500]);
+    });
+
+    it("should shrink down, but respect the data domain, if the provided domain is smaller than the data", () => {
+      const spy = vi.fn();
+      const [domain, setDomain] = createSignal<[number, number]>([-100, 100]);
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={domain()} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        { textContent: "-100", x: "5", y: "273" },
+        { textContent: "-30", x: "80.18518518518519", y: "273" },
+        { textContent: "40", x: "155.37037037037038", y: "273" },
+        { textContent: "110", x: "230.55555555555557", y: "273" },
+        { textContent: "170", x: "295", y: "273" },
+      ]);
+      expectLastCalledWith(spy, [-100, 170]);
+
+      setDomain([130, 175]);
+      flush();
+      expectXAxisTicks(container, [
+        { textContent: "90", x: "5", y: "273" },
+        { textContent: "115", x: "90.29411764705883", y: "273" },
+        { textContent: "140", x: "175.58823529411765", y: "273" },
+        { textContent: "165", x: "260.88235294117646", y: "273" },
+        { textContent: "175", x: "295", y: "273" },
+      ]);
+      expectLastCalledWith(spy, [90, 175]);
+
+      setDomain([130, 150]);
+      flush();
+      expectXAxisTicks(container, [
+        { textContent: "90", x: "5", y: "273" },
+        { textContent: "110", x: "77.5", y: "273" },
+        { textContent: "130", x: "150", y: "273" },
+        { textContent: "150", x: "222.5", y: "273" },
+        { textContent: "170", x: "295", y: "273" },
+      ]);
+      expectLastCalledWith(spy, [90, 170]);
+    });
+
+    it("should default to dataMin, dataMax for domain where the larger number is first", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={[100, 0]} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "90",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "110",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "130",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "150",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "170",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [90, 170]);
+    });
+
+    it("should reverse domain where the larger number is first, and allowDataOverflow is true", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={[100, 0]} allowDataOverflow />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "100",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "75",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "50",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "25",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "0",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [100, 0]);
+    });
+
+    it("should render one tick for domain that does not have any gap", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={[150, 150]} allowDataOverflow />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "150",
+          x: "150",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [150, 150]);
+    });
+
+    it("should shrink properly when allowDataOverflow = true", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={[0, 100]} allowDataOverflow />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "25",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "50",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "75",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "100",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 100]);
+    });
+
+    it("should allow providing more tickCount", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" tickCount={7} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "30",
+          x: "53.33333333333333",
+          y: "273",
+        },
+        {
+          textContent: "60",
+          x: "101.66666666666666",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "120",
+          x: "198.33333333333331",
+          y: "273",
+        },
+        {
+          textContent: "150",
+          x: "246.66666666666669",
+          y: "273",
+        },
+        {
+          textContent: "180",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 180]);
+    });
+
+    it("should allow providing less tickCount", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" tickCount={3} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "85",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "170",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 170]);
+    });
+
+    it("should make ticks from dataMin, dataMax", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} allowDataOverflow />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "90",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "110",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "130",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "150",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "170",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [90, 170]);
+    });
+
+    it("should default to dataMin, dataMax when domain is provided as an array of invalid values", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis
+            dataKey="x"
+            type="number"
+            domain={["not a valid number", "not a valid number either"]}
+            allowDataOverflow
+          />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "90",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "110",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "130",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "150",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "170",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [90, 170]);
+    });
+
+    it("should allow a function that returns a domain, and pass inside a computed domain and allowDataOverflow prop", () => {
+      const reduxDomainSpy = vi.fn();
+      const domainPropSpy = vi.fn();
+      domainPropSpy.mockReturnValue([-500, 500]);
+      const [allowDataOverflow, setAllowDataOverflow] = createSignal(true);
+      const { container } = render(() => (
+        <Component>
+          <XAxis
+            dataKey="x"
+            type="number"
+            domain={domainPropSpy}
+            allowDataOverflow={allowDataOverflow()}
+          />
+          <ExpectAxisDomain assert={reduxDomainSpy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "-500",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "-250",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "0",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "250",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "500",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expect(domainPropSpy).toHaveBeenCalledWith([90, 170], true);
+
+      setAllowDataOverflow(false);
+      flush();
+      expectXAxisTicks(container, [
+        {
+          textContent: "-500",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "-250",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "0",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "250",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "500",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expect(domainPropSpy).toHaveBeenLastCalledWith([90, 170], false);
+      expect(reduxDomainSpy).toHaveBeenLastCalledWith([-500, 500]);
+    });
+
+    it(`should allow array of functions,
+              and give them first and last elements of the data domain
+              - but this time, no allowDataOverflow parameter!`, () => {
+      const reduxDomainSpy = vi.fn();
+      const spyMin = vi.fn().mockReturnValue(-500);
+      const spyMax = vi.fn().mockReturnValue(500);
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={[spyMin, spyMax]} allowDataOverflow />
+          <ExpectAxisDomain assert={reduxDomainSpy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "-500",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "-250",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "0",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "250",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "500",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expect(spyMin).toHaveBeenLastCalledWith(90);
+      expect(spyMax).toHaveBeenLastCalledWith(170);
+      expect(reduxDomainSpy).toHaveBeenLastCalledWith([-500, 500]);
+    });
+
+    it("should allow mixing numbers and functions", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <Component>
+          <XAxis dataKey="x" type="number" domain={[-500, () => 500]} allowDataOverflow />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </Component>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "-500",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "-250",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "0",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "250",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "500",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [-500, 500]);
+    });
+  });
+
+  describe("when the axis dataKey and graphical item dataKey are different", () => {
+    it("should render ticks", () => {
+      const dataWithNegativeValues = [
+        {
+          x: -50,
+          y: -50,
+        },
+        {
+          x: 0,
+          y: 0,
+        },
+        {
+          x: 50,
+          y: 50,
+        },
+        {
+          x: 100,
+          y: 100,
+        },
+        {
+          x: 150,
+          y: 150,
+        },
+        {
+          x: 200,
+          y: 200,
+        },
+        {
+          x: 250,
+          y: 250,
+        },
+        {
+          x: 350,
+          y: 350,
+        },
+        {
+          x: 400,
+          y: 400,
+        },
+        {
+          x: 450,
+          y: 450,
+        },
+        {
+          x: 500,
+          y: 500,
+        },
+      ];
+
+      const { container } = render(() => (
+        <LineChart width={500} height={300}>
+          <XAxis
+            dataKey="x"
+            domain={["auto", "auto"]}
+            interval={0}
+            type="number"
+            allowDataOverflow
+          />
+
+          <Line data={dataWithNegativeValues} dataKey="y" />
+        </LineChart>
+      ));
+
+      expectXAxisTicks(container, [
+        {
+          textContent: "-200",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "0",
+          x: "127.5",
+          y: "273",
+        },
+        {
+          textContent: "200",
+          x: "250",
+          y: "273",
+        },
+        {
+          textContent: "400",
+          x: "372.5",
+          y: "273",
+        },
+        {
+          textContent: "600",
+          x: "495",
+          y: "273",
+        },
+      ]);
+    });
+  });
+
+  describe("when data is defined on multiple graphical elements", () => {
+    const spy = vi.fn();
+    const data1 = data.slice(0, 3);
+    const data2 = data.slice(3);
+    it("should merge and display domain of all data", () => {
+      const { container } = render(() => (
+        <LineChart width={300} height={300}>
+          <Line data={data1} />
+          <Line data={data2} />
+          <XAxis dataKey="x" type="number" />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </LineChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "45",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "180",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 180]);
+    });
+
+    it("should only display domain of data with matching xAxisId", () => {
+      const reduxDefaultDomainSpy = vi.fn();
+      const reduxDomainSpyA = vi.fn();
+      const reduxDomainSpyB = vi.fn();
+      const { container } = render(() => (
+        <LineChart width={300} height={300}>
+          <Line data={data1} xAxisId="xa" />
+          <Line data={data2} xAxisId="xb" />
+          <XAxis dataKey="x" type="number" xAxisId="xa" />
+          <XAxis dataKey="x" type="number" xAxisId="xb" />
+          <ExpectAxisDomain assert={reduxDefaultDomainSpy} axisType="xAxis" />
+          <ExpectAxisDomain assert={reduxDomainSpyA} axisType="xAxis" axisId="xa" />
+          <ExpectAxisDomain assert={reduxDomainSpyB} axisType="xAxis" axisId="xb" />
+        </LineChart>
+      ));
+      const allXAxes = container.querySelectorAll(".recharts-xAxis");
+      expect(allXAxes).toHaveLength(2);
+      expectXAxisTicks(allXAxes[0]!, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "243",
+        },
+        {
+          textContent: "30",
+          x: "77.5",
+          y: "243",
+        },
+        {
+          textContent: "60",
+          x: "150",
+          y: "243",
+        },
+        {
+          textContent: "90",
+          x: "222.5",
+          y: "243",
+        },
+        {
+          textContent: "120",
+          x: "295",
+          y: "243",
+        },
+      ]);
+      expectXAxisTicks(allXAxes[1]!, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "45",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "180",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expect(reduxDefaultDomainSpy).toHaveBeenLastCalledWith(undefined);
+      expect(reduxDomainSpyA).toHaveBeenLastCalledWith([0, 120]);
+      expect(reduxDomainSpyB).toHaveBeenLastCalledWith([0, 180]);
+    });
+
+    it("should only display domain of data with matching xAxisId, and dataMin dataMax domains", () => {
+      const reduxDefaultDomainSpy = vi.fn();
+      const reduxDomainSpyA = vi.fn();
+      const reduxDomainSpyB = vi.fn();
+      const { container } = render(() => (
+        <LineChart width={300} height={300}>
+          <Line data={data1} xAxisId="xa" />
+          <Line data={data2} xAxisId="xb" />
+          <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} xAxisId="xa" />
+          <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} xAxisId="xb" />
+          <ExpectAxisDomain assert={reduxDefaultDomainSpy} axisType="xAxis" />
+          <ExpectAxisDomain assert={reduxDomainSpyA} axisType="xAxis" axisId="xa" />
+          <ExpectAxisDomain assert={reduxDomainSpyB} axisType="xAxis" axisId="xb" />
+        </LineChart>
+      ));
+      const allXAxes = container.querySelectorAll(".recharts-xAxis");
+      expect(allXAxes).toHaveLength(2);
+      expectXAxisTicks(allXAxes[0]!, [
+        { textContent: "90", x: "5", y: "243" },
+        { textContent: "98", x: "82.33333333333334", y: "243" },
+        { textContent: "106", x: "159.66666666666669", y: "243" },
+        { textContent: "114", x: "237", y: "243" },
+        { textContent: "120", x: "295", y: "243" },
+      ]);
+      expectXAxisTicks(allXAxes[1]!, [
+        {
+          textContent: "110",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "125",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "140",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "155",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "170",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expect(reduxDefaultDomainSpy).toHaveBeenLastCalledWith(undefined);
+      expect(reduxDomainSpyA).toHaveBeenLastCalledWith([90, 120]);
+      expect(reduxDomainSpyB).toHaveBeenLastCalledWith([110, 170]);
+    });
+  });
+
+  describe("allowDecimals", () => {
+    it("should show decimals in small numbers by default", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <BarChart width={300} height={300} data={dataWithSmallNumbers}>
+          <XAxis dataKey="x" type="number" />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "0.25",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "0.5",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "0.75",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "1",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 1]);
+    });
+
+    it("should not allow decimals in small numbers if allowDecimals is false", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <BarChart width={300} height={300} data={dataWithSmallNumbers}>
+          <XAxis dataKey="x" type="number" allowDecimals={false} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "1",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "2",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "3",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "4",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 4]);
+    });
+
+    it.each([true, false, undefined])(
+      "should generate nice rounded ticks even if the data has decimals in it with allowDecimals=%s",
+      (allowDecimals) => {
+        const spy = vi.fn();
+        const { container } = render(() => (
+          <BarChart width={300} height={300} data={dataWithDecimalNumbers}>
+            <XAxis dataKey="x" type="number" allowDecimals={allowDecimals} />
+            <ExpectAxisDomain assert={spy} axisType="xAxis" />
+          </BarChart>
+        ));
+        expectXAxisTicks(container, [
+          {
+            textContent: "0",
+            x: "5",
+            y: "273",
+          },
+          {
+            textContent: "4",
+            x: "77.5",
+            y: "273",
+          },
+          {
+            textContent: "8",
+            x: "150",
+            y: "273",
+          },
+          {
+            textContent: "12",
+            x: "222.5",
+            y: "273",
+          },
+          {
+            textContent: "16",
+            x: "295",
+            y: "273",
+          },
+        ]);
+        expectLastCalledWith(spy, [0, 16]);
+      },
+    );
+  });
+
+  describe("interval", () => {
+    it("should display all ticks with interval = 0", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <BarChart width={300} height={300} data={data}>
+          <XAxis dataKey="x" type="number" interval={0} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "45",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "180",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 180]);
+    });
+
+    it("should display every second tick with interval = 1", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <BarChart width={300} height={300} data={data}>
+          <XAxis dataKey="x" type="number" interval={1} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "180",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 180]);
+    });
+
+    it("should display every third tick with interval = 2", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <BarChart width={300} height={300} data={data}>
+          <XAxis dataKey="x" type="number" interval={2} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "222.5",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 180]);
+    });
+
+    it("should add more ticks with tickCount and then reduce them again with interval", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <BarChart width={300} height={300} data={data}>
+          <XAxis dataKey="x" type="number" tickCount={20} interval={2} />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "27",
+          x: "50.78947368421052",
+          y: "273",
+        },
+        {
+          textContent: "54",
+          x: "96.57894736842104",
+          y: "273",
+        },
+        {
+          textContent: "81",
+          x: "142.36842105263156",
+          y: "273",
+        },
+        {
+          textContent: "108",
+          x: "188.15789473684208",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "233.94736842105263",
+          y: "273",
+        },
+        {
+          textContent: "162",
+          x: "279.7368421052631",
+          y: "273",
+        },
+      ]);
+      expectLastCalledWith(spy, [0, 171]);
+    });
+
+    it("should attempt to show the ticks start with interval = preserveStart", () => {
+      const { container } = render(() => (
+        <BarChart width={30} height={300} data={data}>
+          <XAxis dataKey="x" type="number" interval="preserveStart" tickCount={20} />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "45",
+          x: "10.263157894736842",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "15.526315789473683",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "20.789473684210527",
+          y: "273",
+        },
+      ]);
+    });
+
+    it("should attempt to show the ticks end with interval = preserveEnd", () => {
+      const { container } = render(() => (
+        <BarChart width={30} height={300} data={data}>
+          <XAxis dataKey="x" type="number" interval="preserveEnd" tickCount={20} />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "36",
+          x: "9.210526315789473",
+          y: "273",
+        },
+        {
+          textContent: "81",
+          x: "14.473684210526315",
+          y: "273",
+        },
+        {
+          textContent: "126",
+          x: "19.736842105263158",
+          y: "273",
+        },
+        {
+          textContent: "171",
+          x: "25",
+          y: "273",
+        },
+      ]);
+    });
+
+    it("should attempt to show the ticks start and end with interval = preserveStartEnd", () => {
+      const { container } = render(() => (
+        <BarChart width={30} height={300} data={data}>
+          <XAxis dataKey="x" type="number" interval="preserveStartEnd" tickCount={20} />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "45",
+          x: "10.263157894736842",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "15.526315789473683",
+          y: "273",
+        },
+        {
+          textContent: "171",
+          x: "25",
+          y: "273",
+        },
+      ]);
+    });
+
+    it("should do ... same thing as preserveStart? with interval = equidistantPreserveStart", () => {
+      const { container } = render(() => (
+        <BarChart width={30} height={300} data={data}>
+          <XAxis dataKey="x" type="number" interval="equidistantPreserveStart" tickCount={20} />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "45",
+          x: "10.263157894736842",
+          y: "273",
+        },
+        {
+          textContent: "90",
+          x: "15.526315789473683",
+          y: "273",
+        },
+        {
+          textContent: "135",
+          x: "20.789473684210527",
+          y: "273",
+        },
+      ]);
+    });
+  });
+
+  describe("XAxis ticks should be evenly spaced with type=number and clustered data", () => {
+    const clusteredData = [
+      { x: 1, y: 10 },
+      { x: 2, y: 20 },
+      { x: 3, y: 30 },
+      { x: 100, y: 40 },
+    ];
+
+    it("should render evenly spaced ticks even when data is highly clustered", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <BarChart width={300} height={300} data={clusteredData}>
+          <XAxis dataKey="x" type="number" />
+          <ExpectAxisDomain assert={spy} axisType="xAxis" />
+        </BarChart>
+      ));
+
+      // Ticks should be evenly spaced at nice values, not at data positions (1, 2, 3, 100)
+      expectXAxisTicks(container, [
+        { textContent: "0", x: "5", y: "273" },
+        { textContent: "25", x: "77.5", y: "273" },
+        { textContent: "50", x: "150", y: "273" },
+        { textContent: "75", x: "222.5", y: "273" },
+        { textContent: "100", x: "295", y: "273" },
+      ]);
+      expectLastCalledWith(spy, [0, 100]);
+    });
+  });
+});