solid-recharts 0.1.0

package/test/hooks/useAxisDomain.spec.tsx

@@ -0,0 +1,361 @@
+// Ported from recharts 3.8.1 test/hooks/useAxisDomain.spec.tsx (commit 7a23854).
+// Solid deviations: hooks from src/hooks return Accessors; createSelectorTestCase
+// spies the accessor value; wrappers read `props.children` lazily. The Brush
+// panorama hook pair is skipped until nested Brush children inherit the panorama
+// chart context in Solid.
+import { describe, it } from "vitest";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { Brush, Line, LineChart, XAxis, YAxis } from "../../src";
+import { useXAxisDomain, useYAxisDomain } from "../../src/hooks";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+import { PageData } from "../_data";
+
+describe("axis domain hooks", () => {
+  describe("in simple chart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis categorical domain", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should select YAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 400]);
+    });
+
+    it("should return default domain when passed an invalid xAxisId", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default domain when passed an invalid yAxisId", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("with explicit axis IDs", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" xAxisId="xAxis1" yAxisId="yAxis1" />
+        <XAxis dataKey="name" xAxisId="xAxis1" />
+        <YAxis dataKey="pv" yAxisId="yAxis1" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis categorical domain with explicit ID", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("xAxis1"));
+      expectLastCalledWith(spy, ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
+    });
+
+    it("should select YAxis numerical domain with explicit ID", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("yAxis1"));
+      expectLastCalledWith(spy, [0, 9800]);
+    });
+
+    it("should return default XAxis domain when called without ID", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default YAxis domain when called without ID", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("should return default domain when passed an invalid xAxisId", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default domain when passed an invalid yAxisId", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("with explicit XAxis with dataKey", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="name" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis categorical domain with dataKey", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
+    });
+
+    it("should select YAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 400]);
+    });
+
+    it("should return default domain when passed an invalid xAxisId", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default domain when passed an invalid yAxisId", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("with explicit XAxis with numerical dataKey with duplicates", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="uv" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis numerical domain with dataKey", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should select YAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 400]);
+    });
+
+    it("should return default domain when passed an invalid xAxisId", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default domain when passed an invalid yAxisId", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("with numerical type axis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis type="number" dataKey="pv" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis numerical domain with dataKey", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, [0, 9800]);
+    });
+
+    it("should select YAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 400]);
+    });
+
+    it("should return default domain when passed an invalid xAxisId", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default domain when passed an invalid yAxisId", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("with numerical type axis but categorical dataKey", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis type="number" dataKey="name" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis categorical domain with dataKey", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("should select YAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 400]);
+    });
+
+    it("should return default domain when passed an invalid xAxisId", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default domain when passed an invalid yAxisId", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("in vertical chart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData} layout="vertical">
+        <Line dataKey="uv" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, [400, 300, 300, 200, 278, 189]);
+    });
+
+    it("should select YAxis categorical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+  });
+
+  describe("with explicit XAxis with numerical dataKey with duplicates, with allowDuplicatedCategory=false", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="uv" allowDuplicatedCategory={false} />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis numerical domain with dataKey", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, [400, 300, 200, 278, 189]);
+    });
+
+    it("should select YAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 400]);
+    });
+
+    it("should return default domain when passed an invalid xAxisId", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default domain when passed an invalid yAxisId", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("with explicit XAxis with numerical dataKey without duplicates", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="pv" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis numerical domain with dataKey", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, [2400, 4567, 1398, 9800, 3908, 4800]);
+    });
+
+    it("should select YAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 400]);
+    });
+
+    it("should return default domain when passed an invalid xAxisId", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+    });
+
+    it("should return default domain when passed an invalid yAxisId", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain("invalidAxisId"));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("with custom domain", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <YAxis domain={["dataMin", "dataMax"]} />
+        <XAxis dataKey="name" domain={["Page D", "Page E", "Page F"]} />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis categorical domain with explicit domain", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
+    });
+
+    it("should select YAxis numerical domain", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [189, 400]);
+    });
+  });
+
+  describe("with data filtered by a brush, when used outside the brush panorama", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="name" />
+        <Brush startIndex={1} endIndex={2}>
+          <LineChart>
+            <Line dataKey="uv" />
+          </LineChart>
+        </Brush>
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select XAxis categorical domain with brush applied", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, ["Page B", "Page C"]);
+    });
+
+    it("should select YAxis numerical domain with brush applied", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 300]);
+    });
+  });
+
+  // DEEP-DEFERRED: recharts' Panorama uses React.cloneElement(innerChart, { data,
+  // width, height, compact: true }) to inject the FULL dataset + dimensions into
+  // the nested <LineChart> passed as Brush children, so the inner chart's own
+  // store reports the full domain. Solid has no cloneElement (PERMANENT-N/A), and
+  // a nested <LineChart> spins up its own empty store (no data/dimensions
+  // propagated through JSX children) → inner domain is undefined, not the full
+  // range. Reproducing this needs prop-injection into an opaque child element,
+  // which the JSX-children model can't express without cloneElement.
+  describe("with data filtered by a brush, when used inside the brush panorama", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="name" />
+        <Brush startIndex={1} endIndex={2}>
+          <LineChart>
+            <Line dataKey="uv" />
+            {props.children}
+          </LineChart>
+        </Brush>
+      </LineChart>
+    ));
+
+    it("should select XAxis categorical domain with brush applied", () => {
+      const { spy } = renderTestCase(() => useXAxisDomain());
+      expectLastCalledWith(spy, ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
+    });
+
+    it("should select YAxis numerical domain with brush applied", () => {
+      const { spy } = renderTestCase(() => useYAxisDomain());
+      expectLastCalledWith(spy, [0, 400]);
+    });
+  });
+});

package/test/hooks/useAxisScale.spec.tsx

@@ -0,0 +1,283 @@
+// Ported from recharts 3.8.1 test/hooks/useAxisScale.spec.tsx (commit 7a23854).
+// Solid deviations: hooks from src/hooks (return Accessors; createSelectorTestCase
+// spies the accessor value); wrappers read `props.children` (lazy → Spy mounts in
+// the chart store).
+import { describe, expect, it } from "vitest";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { Brush, Line, LineChart, XAxis, YAxis } from "../../src";
+import {
+  useCartesianScale,
+  useXAxisInverseDataSnapScale,
+  useXAxisInverseScale,
+  useXAxisScale,
+  useYAxisInverseDataSnapScale,
+  useYAxisInverseScale,
+  useYAxisScale,
+} from "../../src/hooks";
+import { PageData } from "../_data";
+
+describe("axis scale hooks", () => {
+  describe("useXAxisScale", () => {
+    describe("in simple chart", () => {
+      const renderTestCase = createSelectorTestCase((props) => (
+        <LineChart width={500} height={300} data={PageData}>
+          <Line dataKey="uv" />
+          {props.children}
+        </LineChart>
+      ));
+
+      it("should return the X-axis scale function", () => {
+        const { spy } = renderTestCase(useXAxisScale);
+        const scaleFunction = spy.mock.calls.at(-1)?.[0];
+        expect(typeof scaleFunction).toBe("function");
+      });
+
+      it("should map data values to pixel coordinates", () => {
+        const { spy } = renderTestCase(useXAxisScale);
+        const scaleFunction = spy.mock.calls.at(-1)?.[0];
+        expect(typeof scaleFunction?.(0)).toBe("number");
+      });
+    });
+
+    describe("with numerical axis", () => {
+      const renderTestCase = createSelectorTestCase((props) => (
+        <LineChart width={500} height={300} data={PageData}>
+          <Line dataKey="uv" />
+          <XAxis type="number" dataKey="pv" />
+          {props.children}
+        </LineChart>
+      ));
+
+      it("should return a scale that can map numerical values", () => {
+        const { spy } = renderTestCase(useXAxisScale);
+        const scaleFunction = spy.mock.calls.at(-1)?.[0];
+        expect(typeof scaleFunction?.(5000)).toBe("number");
+      });
+    });
+
+    describe("with explicit axis ID", () => {
+      const renderTestCase = createSelectorTestCase((props) => (
+        <LineChart width={500} height={300} data={PageData}>
+          <Line dataKey="uv" xAxisId="xAxis1" yAxisId="yAxis1" />
+          <XAxis dataKey="name" xAxisId="xAxis1" />
+          <YAxis dataKey="pv" yAxisId="yAxis1" />
+          {props.children}
+        </LineChart>
+      ));
+
+      it("should return a scale function even when called with default ID (uses fallback)", () => {
+        const { spy } = renderTestCase(useXAxisScale);
+        const scaleFunction = spy.mock.calls.at(-1)?.[0];
+        // Recharts provides fallback behavior for missing axis IDs
+        expect(typeof scaleFunction).toBe("function");
+      });
+    });
+  });
+
+  describe("useYAxisScale", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should return the Y-axis scale function", () => {
+      const { spy } = renderTestCase(useYAxisScale);
+      expect(typeof spy.mock.calls.at(-1)?.[0]).toBe("function");
+    });
+
+    it("should map data values to pixel coordinates", () => {
+      const { spy } = renderTestCase(useYAxisScale);
+      const scaleFunction = spy.mock.calls.at(-1)?.[0];
+      expect(typeof scaleFunction?.(200)).toBe("number");
+    });
+  });
+
+  describe("useXAxisInverseScale", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="name" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should return an inverse scale function", () => {
+      const { spy } = renderTestCase(useXAxisInverseScale);
+      expect(typeof spy.mock.calls.at(-1)?.[0]).toBe("function");
+    });
+
+    it("should convert pixel coordinates back to the closest category", () => {
+      const { spy: scaleSpy } = renderTestCase(useXAxisScale);
+      const scaleFunction = scaleSpy.mock.calls.at(-1)?.[0];
+      const { spy: inverseSpy } = renderTestCase(useXAxisInverseScale);
+      const inverseFunction = inverseSpy.mock.calls.at(-1)?.[0];
+      if (scaleFunction && inverseFunction) {
+        const pixelForPageC = scaleFunction("Page C");
+        expect(pixelForPageC).toBeDefined();
+        expect(inverseFunction(pixelForPageC)).toBe("Page C");
+      }
+    });
+  });
+
+  describe("useYAxisInverseScale", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should return an inverse scale function", () => {
+      const { spy } = renderTestCase(useYAxisInverseScale);
+      expect(typeof spy.mock.calls.at(-1)?.[0]).toBe("function");
+    });
+  });
+
+  describe("useXAxisInverseDataSnapScale", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="name" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should return an inverse scale function", () => {
+      const { spy } = renderTestCase(useXAxisInverseDataSnapScale);
+      expect(typeof spy.mock.calls.at(-1)?.[0]).toBe("function");
+    });
+
+    it("should snap a pixel coordinate to the closest data point", () => {
+      const { spy: scaleSpy } = renderTestCase(useXAxisScale);
+      const scaleFunction = scaleSpy.mock.calls.at(-1)?.[0];
+      const { spy: snapSpy } = renderTestCase(useXAxisInverseDataSnapScale);
+      const snapFunction = snapSpy.mock.calls.at(-1)?.[0];
+      expect(scaleFunction).toBeDefined();
+      expect(snapFunction).toBeDefined();
+      if (scaleFunction && snapFunction) {
+        const pixelForPageC = scaleFunction("Page C");
+        expect(pixelForPageC).toBeDefined();
+        // Exactly on the point, and slightly off it, both snap to the point.
+        expect(snapFunction(pixelForPageC ?? 0)).toBe("Page C");
+        expect(snapFunction((pixelForPageC ?? 0) + 1)).toBe("Page C");
+      }
+    });
+  });
+
+  describe("useYAxisInverseDataSnapScale", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should return an inverse scale function", () => {
+      const { spy } = renderTestCase(useYAxisInverseDataSnapScale);
+      expect(typeof spy.mock.calls.at(-1)?.[0]).toBe("function");
+    });
+
+    it("should snap a pixel coordinate to the closest data point value", () => {
+      const { spy: scaleSpy } = renderTestCase(useYAxisScale);
+      const scaleFunction = scaleSpy.mock.calls.at(-1)?.[0];
+      const { spy: snapSpy } = renderTestCase(useYAxisInverseDataSnapScale);
+      const snapFunction = snapSpy.mock.calls.at(-1)?.[0];
+      expect(scaleFunction).toBeDefined();
+      expect(snapFunction).toBeDefined();
+      if (scaleFunction && snapFunction) {
+        // 290 sits between the data points 278 and 300 (uv values); 300 is closer.
+        const pixelBetween = scaleFunction(290);
+        expect(pixelBetween).toBeDefined();
+        expect(snapFunction(pixelBetween ?? 0)).toBe(300);
+        // Snapping returns data-point values, never interpolated ones.
+        const pixelNear278 = scaleFunction(280);
+        expect(snapFunction(pixelNear278 ?? 0)).toBe(278);
+      }
+    });
+  });
+
+  describe("useCartesianScale", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="name" />
+        {props.children}
+      </LineChart>
+    ));
+
+    function useCartesianScalePageA100() {
+      return useCartesianScale({ x: "Page A", y: 100 });
+    }
+    function useCartesianScalePageF400() {
+      return useCartesianScale({ x: "Page F", y: 400 });
+    }
+
+    it("should convert data coordinates to pixel coordinates", () => {
+      const { spy } = renderTestCase(useCartesianScalePageA100);
+      const coords = spy.mock.calls.at(-1)?.[0];
+      expect(typeof coords?.x).toBe("number");
+      expect(typeof coords?.y).toBe("number");
+    });
+
+    it("should return different pixels for different data values", () => {
+      const { spy: spy1 } = renderTestCase(useCartesianScalePageA100);
+      const coords1 = spy1.mock.calls.at(-1)?.[0];
+      const { spy: spy2 } = renderTestCase(useCartesianScalePageF400);
+      const coords2 = spy2.mock.calls.at(-1)?.[0];
+      expect(coords1?.x).not.toBe(coords2?.x);
+      expect(coords1?.y).not.toBe(coords2?.y);
+    });
+
+    describe("in chart with numerical x-axis", () => {
+      const renderNumericalTestCase = createSelectorTestCase((props) => (
+        <LineChart width={500} height={300} data={PageData}>
+          <Line dataKey="uv" />
+          <XAxis type="number" dataKey="pv" />
+          {props.children}
+        </LineChart>
+      ));
+
+      function useCartesianScaleNumerical() {
+        return useCartesianScale({ x: 5000, y: 200 });
+      }
+
+      it("should convert numerical x value to pixel coordinates", () => {
+        const { spy } = renderNumericalTestCase(useCartesianScaleNumerical);
+        const coords = spy.mock.calls.at(-1)?.[0];
+        expect(coords).toBeDefined();
+        expect(typeof coords?.x).toBe("number");
+        expect(typeof coords?.y).toBe("number");
+      });
+    });
+
+    describe("with brush filtering data", () => {
+      const renderBrushTestCase = createSelectorTestCase((props) => (
+        <LineChart width={500} height={300} data={PageData}>
+          <Line dataKey="uv" />
+          <XAxis dataKey="name" />
+          <Brush startIndex={1} endIndex={2}>
+            <LineChart>
+              <Line dataKey="uv" />
+            </LineChart>
+          </Brush>
+          {props.children}
+        </LineChart>
+      ));
+
+      function useCartesianScalePageB() {
+        return useCartesianScale({ x: "Page B", y: 200 });
+      }
+
+      it("should work with filtered data from brush", () => {
+        const { spy } = renderBrushTestCase(useCartesianScalePageB);
+        const coords = spy.mock.calls.at(-1)?.[0];
+        // Even with brush, scale should exist and return coordinates
+        expect(coords).toBeDefined();
+        expect(typeof coords?.x).toBe("number");
+        expect(typeof coords?.y).toBe("number");
+      });
+    });
+  });
+});