solid-recharts 0.1.0

package/test/hooks/useAxisTicks.spec.tsx

@@ -0,0 +1,130 @@
+// Ported from recharts 3.8.1 test/hooks/useAxisTicks.spec.tsx (commit 7a23854).
+// Solid deviations: hooks imported from src/hooks (return Accessors;
+// createSelectorTestCase spies the accessor's value); components from src.
+import { describe, expect, it } from "vitest";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { Line, LineChart, XAxis, YAxis } from "../../src";
+import {
+  useXAxisInverseTickSnapScale,
+  useXAxisScale,
+  useXAxisTicks,
+  useYAxisInverseTickSnapScale,
+  useYAxisTicks,
+} from "../../src/hooks";
+import { PageData } from "../_data";
+
+describe("new axis hooks", () => {
+  describe("useXAxisInverseTickSnapScale", () => {
+    describe("in simple chart with categorical x-axis", () => {
+      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(useXAxisInverseTickSnapScale);
+        expect(spy).toHaveBeenCalled();
+        const inverseFunction = spy.mock.lastCall?.[0];
+        expect(inverseFunction).toBeDefined();
+        expect(typeof inverseFunction).toBe("function");
+      });
+
+      it("should snap to the closest tick", () => {
+        const { spy: scaleSpy } = renderTestCase(useXAxisScale);
+        const scaleFunction = scaleSpy.mock.lastCall?.[0];
+
+        const { spy: inverseSpy } = renderTestCase(useXAxisInverseTickSnapScale);
+        const inverseFunction = inverseSpy.mock.lastCall?.[0];
+
+        if (scaleFunction && inverseFunction) {
+          const pixelForPageC = scaleFunction("Page C");
+          const pixelForPageD = scaleFunction("Page D");
+          if (typeof pixelForPageC !== "number" || typeof pixelForPageD !== "number") {
+            throw new Error("Pixel coordinates should be numbers");
+          }
+          const nearC = pixelForPageC + (pixelForPageD - pixelForPageC) * 0.1;
+          expect(inverseFunction(nearC)).toBe("Page C");
+          const nearD = pixelForPageC + (pixelForPageD - pixelForPageC) * 0.9;
+          expect(inverseFunction(nearD)).toBe("Page D");
+        }
+      });
+    });
+  });
+
+  describe("useYAxisInverseTickSnapScale", () => {
+    describe("in simple chart with numerical y-axis", () => {
+      const renderTestCase = createSelectorTestCase((props) => (
+        <LineChart width={500} height={300} data={PageData}>
+          <Line dataKey="uv" />
+          <YAxis />
+          {props.children}
+        </LineChart>
+      ));
+
+      it("should return an inverse scale function", () => {
+        const { spy } = renderTestCase(useYAxisInverseTickSnapScale);
+        expect(spy).toHaveBeenCalled();
+        const inverseFunction = spy.mock.lastCall?.[0];
+        expect(inverseFunction).toBeDefined();
+        expect(typeof inverseFunction).toBe("function");
+      });
+
+      it("should snap to the closest tick", () => {
+        const { spy: inverseSpy } = renderTestCase(useYAxisInverseTickSnapScale);
+        const inverseFunction = inverseSpy.mock.lastCall?.[0];
+
+        const { spy: ticksSpy } = renderTestCase(useYAxisTicks);
+        const ticks = ticksSpy.mock.lastCall?.[0];
+
+        if (inverseFunction && ticks && ticks.length >= 2) {
+          const [tick1, tick2] = ticks;
+          const near1 = tick1.coordinate + (tick2.coordinate - tick1.coordinate) * 0.1;
+          expect(inverseFunction(near1)).toBe(tick1.value);
+          const near2 = tick1.coordinate + (tick2.coordinate - tick1.coordinate) * 0.9;
+          expect(inverseFunction(near2)).toBe(tick2.value);
+        }
+      });
+    });
+  });
+
+  describe("useXAxisTicks", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <XAxis dataKey="name" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should return ticks", () => {
+      const { spy } = renderTestCase(useXAxisTicks);
+      expect(spy).toHaveBeenCalled();
+      const ticks = spy.mock.lastCall?.[0];
+      expect(Array.isArray(ticks)).toBe(true);
+      expect(ticks.length).toBeGreaterThan(0);
+      expect(ticks[0].value).toBe("Page A");
+    });
+  });
+
+  describe("useYAxisTicks", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <Line dataKey="uv" />
+        <YAxis />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should return numerical ticks", () => {
+      const { spy } = renderTestCase(useYAxisTicks);
+      expect(spy).toHaveBeenCalled();
+      const ticks = spy.mock.lastCall?.[0];
+      expect(Array.isArray(ticks)).toBe(true);
+      expect(ticks.length).toBeGreaterThan(0);
+      expect(typeof ticks[0].value).toBe("number");
+    });
+  });
+});

package/test/hooks/useOffset.spec.tsx

@@ -0,0 +1,248 @@
+// Ported from recharts 3.8.1 test/hooks/useOffset.spec.tsx (commit 7a23854).
+// Solid deviations: hooks return Accessors; `Customized` hook probes are replaced
+// by createSelectorTestCase; call-count assertions are relaxed where Solid's
+// registration effects settle differently from React renders.
+import { flush } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import { Brush, ComposedChart, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "../../src";
+import { useActiveTooltipDataPoints, useOffset, usePlotArea } from "../../src/hooks";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { render } from "../helper/render";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { pageData } from "../_data";
+import { showTooltip } from "../component/Tooltip/tooltipTestHelpers";
+import { lineChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+
+describe("useOffset", () => {
+  it("should return undefined when used outside of chart", () => {
+    const offsetSpy = vi.fn();
+    const Comp = (): null => {
+      const offset = useOffset();
+      offsetSpy(offset());
+      return null;
+    };
+    render(() => <Comp />);
+    expectLastCalledWith(offsetSpy, undefined);
+  });
+
+  it("should return default offset in an empty chart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200}>
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5,
+    });
+  });
+
+  it("should add chart margin", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      top: 10,
+      right: 20,
+      bottom: 30,
+      left: 40,
+    });
+  });
+
+  it("should include default Brush height (40) in bottom property", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <Brush />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      top: 10,
+      right: 20,
+      bottom: 70,
+      left: 40,
+    });
+  });
+
+  it("should include explicit brush height in bottom property", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={300} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <Brush height={13} />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      top: 10,
+      right: 20,
+      bottom: 43,
+      left: 40,
+    });
+  });
+
+  it("should include default width of YAxis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={300} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <YAxis orientation="left" yAxisId="left" />
+        <YAxis orientation="right" yAxisId="right" />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      bottom: 30,
+      left: 100,
+      right: 80,
+      top: 10,
+    });
+  });
+
+  it("should include explicit width of YAxis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={300} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <YAxis orientation="left" yAxisId="left" width={23} />
+        <YAxis orientation="right" yAxisId="right" width={39} />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      bottom: 30,
+      left: 63,
+      right: 59,
+      top: 10,
+    });
+  });
+
+  it("should exclude hidden YAxis dimensions", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={300} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <YAxis orientation="left" yAxisId="left" width={23} hide />
+        <YAxis orientation="right" yAxisId="right" width={37} hide />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      bottom: 30,
+      left: 40,
+      right: 20,
+      top: 10,
+    });
+  });
+
+  it("should include default height of XAxis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <XAxis orientation="top" xAxisId="top" />
+        <XAxis orientation="bottom" xAxisId="bottom" />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      bottom: 60,
+      left: 40,
+      right: 20,
+      top: 40,
+    });
+  });
+
+  it("should include explicit height of XAxis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <XAxis orientation="top" xAxisId="top" height={23} />
+        <XAxis orientation="bottom" xAxisId="bottom" height={39} />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      bottom: 69,
+      left: 40,
+      right: 20,
+      top: 33,
+    });
+  });
+
+  it("should exclude hidden XAxis height", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <XAxis orientation="top" xAxisId="top" height={23} hide />
+        <XAxis orientation="bottom" xAxisId="bottom" height={37} hide />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      bottom: 30,
+      left: 40,
+      right: 20,
+      top: 10,
+    });
+  });
+
+  it("should include computed width and height on Legend - see appendOffsetOfLegend for detailed behaviour", () => {
+    mockGetBoundingClientRect({ height: 29, width: 43 });
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <Legend />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffset);
+
+    expectLastCalledWith(spy, {
+      bottom: 59,
+      left: 40,
+      right: 20,
+      top: 10,
+    });
+  });
+
+  it("should render when used in the same component as XAxis", () => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+    const spy = vi.fn();
+    const Child = () => {
+      usePlotArea();
+      useOffset();
+      useActiveTooltipDataPoints();
+      spy();
+      return <XAxis />;
+    };
+
+    const { container } = render(() => (
+      <LineChart width={500} height={300} data={pageData}>
+        <Line dataKey="uv" />
+        <Tooltip />
+        <Child />
+      </LineChart>
+    ));
+    flush();
+
+    expect(spy).toHaveBeenCalled();
+
+    showTooltip(container, lineChartMouseHoverTooltipSelector);
+    flush();
+
+    expect(spy.mock.calls.length).toBeGreaterThanOrEqual(1);
+  });
+});

package/test/hooks/useTooltipStateHooks.spec.tsx

@@ -0,0 +1,109 @@
+// Solid-recharts spec for the public tooltip-state hooks that recharts exposes
+// from its main entry but does not unit-test directly: useActiveTooltipLabel,
+// useIsTooltipActive, useActiveTooltipCoordinate. Behaviour is anchored to the
+// same hover/leave fixtures the useActiveTooltipDataPoints spec uses.
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  Area,
+  AreaChart,
+  Tooltip,
+  XAxis,
+  useActiveTooltipCoordinate,
+  useActiveTooltipLabel,
+  useIsTooltipActive,
+} from "../../src";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { PageData } from "../_data";
+import { hideTooltip, showTooltip } from "../component/Tooltip/tooltipTestHelpers";
+import { areaChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+import { render } from "../helper/render";
+
+describe("public tooltip-state hooks", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  describe("when called outside of a chart", () => {
+    it("useActiveTooltipLabel returns undefined", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        spy(useActiveTooltipLabel()());
+        return null;
+      };
+      render(() => <Comp />);
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("useIsTooltipActive returns false", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        spy(useIsTooltipActive()());
+        return null;
+      };
+      render(() => <Comp />);
+      expectLastCalledWith(spy, false);
+    });
+
+    it("useActiveTooltipCoordinate returns undefined", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        spy(useActiveTooltipCoordinate()());
+        return null;
+      };
+      render(() => <Comp />);
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+
+  describe("as a child of AreaChart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <AreaChart width={400} height={400} data={PageData}>
+        <Area dataKey="pv" />
+        <XAxis dataKey="name" />
+        <Tooltip />
+        {props.children}
+      </AreaChart>
+    ));
+
+    describe("useActiveTooltipLabel", () => {
+      it("is undefined before interaction, the category after hover, undefined after leave", () => {
+        const { container, spy } = renderTestCase(useActiveTooltipLabel);
+        expectLastCalledWith(spy, undefined);
+
+        showTooltip(container, areaChartMouseHoverTooltipSelector);
+        expectLastCalledWith(spy, "Page C");
+
+        hideTooltip(container, areaChartMouseHoverTooltipSelector);
+        expectLastCalledWith(spy, undefined);
+      });
+    });
+
+    describe("useIsTooltipActive", () => {
+      it("is false before interaction, true after hover, false after leave", () => {
+        const { container, spy } = renderTestCase(useIsTooltipActive);
+        expectLastCalledWith(spy, false);
+
+        showTooltip(container, areaChartMouseHoverTooltipSelector);
+        expectLastCalledWith(spy, true);
+
+        hideTooltip(container, areaChartMouseHoverTooltipSelector);
+        expectLastCalledWith(spy, false);
+      });
+    });
+
+    describe("useActiveTooltipCoordinate", () => {
+      it("is undefined before interaction and a numeric coordinate after hover", () => {
+        const { container, spy } = renderTestCase(useActiveTooltipCoordinate);
+        expectLastCalledWith(spy, undefined);
+
+        showTooltip(container, areaChartMouseHoverTooltipSelector);
+        const coordinate = spy.mock.lastCall?.[0];
+        expect(coordinate).toBeDefined();
+        expect(typeof coordinate.x).toBe("number");
+        expect(typeof coordinate.y).toBe("number");
+      });
+    });
+  });
+});

package/test/polar/Pie/Pie-TwoLevelPieChart.spec.tsx

@@ -0,0 +1,135 @@
+// Ported from recharts 3.8.1 test/polar/Pie/Pie-TwoLevelPieChart.spec.tsx.
+// Two concentric Pies, each with a function-form `activeShape`. Hovering a
+// sector of one Pie activates only THAT Pie's sector (the active index is
+// matched per graphical-item id + dataKey), so at most one `.customized-active-shape`
+// is rendered at a time. Solid uses `fireEvent.mouseEnter` + `flush()` to drive
+// the item-hover state (recharts uses `fireEvent.mouseOver`).
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { Pie, PieChart, Sector } from "../../../src";
+import type { PieSectorShapeProps } from "../../../src/polar/Pie";
+import { render, fireEvent } from "../../helper/render";
+
+const data1 = [
+  { name: "Group A", value: 400 },
+  { name: "Group B", value: 300 },
+  { name: "Group C", value: 300 },
+  { name: "Group D", value: 200 },
+];
+
+const data2 = [
+  { name: "A1", value: 100 },
+  { name: "A2", value: 300 },
+  { name: "B1", value: 100 },
+  { name: "B2", value: 200 },
+  { name: "C1", value: 200 },
+  { name: "C2", value: 100 },
+];
+
+describe("TwoLevelPieChart with activeShape", () => {
+  it("should only show active shape for the hovered pie component", () => {
+    const renderActiveShape = (props: PieSectorShapeProps): ReturnType<typeof Sector> => (
+      <Sector {...props} fill="#ff7300" class="customized-active-shape" />
+    );
+
+    const { container } = render(() => (
+      <PieChart width={800} height={400}>
+        <Pie
+          isAnimationActive={false}
+          activeShape={renderActiveShape}
+          data={data1}
+          cx={200}
+          cy={200}
+          outerRadius={80}
+          fill="#8884d8"
+          dataKey="value"
+        />
+        <Pie
+          isAnimationActive={false}
+          activeShape={renderActiveShape}
+          data={data2}
+          cx={200}
+          cy={200}
+          innerRadius={100}
+          outerRadius={140}
+          fill="#82ca9d"
+          dataKey="value"
+        />
+      </PieChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".customized-active-shape")).toHaveLength(0);
+    const allSectors = container.querySelectorAll(".recharts-pie-sector");
+    expect(allSectors).toHaveLength(data1.length + data2.length);
+
+    fireEvent.mouseEnter(allSectors[0]!);
+    flush();
+    expect(container.querySelectorAll(".customized-active-shape")).toHaveLength(1);
+
+    const innerPieSector = allSectors[data1.length]!; // first sector of the inner pie
+    fireEvent.mouseEnter(innerPieSector);
+    flush();
+    expect(container.querySelectorAll(".customized-active-shape")).toHaveLength(1);
+
+    fireEvent.mouseLeave(innerPieSector);
+    flush();
+    expect(container.querySelectorAll(".customized-active-shape")).toHaveLength(0);
+  });
+
+  it("should correctly identify sectors from different pies when they have different dataKeys", () => {
+    const data1WithDifferentKey = [
+      { name: "Group A", uv: 400 },
+      { name: "Group B", uv: 300 },
+    ];
+    const data2WithDifferentKey = [
+      { name: "A1", pv: 100 },
+      { name: "A2", pv: 300 },
+    ];
+
+    const renderActiveShape = (props: PieSectorShapeProps): ReturnType<typeof Sector> => (
+      <Sector {...props} fill="#ff7300" class="customized-active-shape" />
+    );
+
+    const { container } = render(() => (
+      <PieChart width={800} height={400}>
+        <Pie
+          isAnimationActive={false}
+          activeShape={renderActiveShape}
+          data={data1WithDifferentKey}
+          cx={200}
+          cy={200}
+          outerRadius={80}
+          fill="#8884d8"
+          dataKey="uv"
+        />
+        <Pie
+          isAnimationActive={false}
+          activeShape={renderActiveShape}
+          data={data2WithDifferentKey}
+          cx={200}
+          cy={200}
+          innerRadius={100}
+          outerRadius={140}
+          fill="#82ca9d"
+          dataKey="pv"
+        />
+      </PieChart>
+    ));
+    flush();
+
+    const allSectors = container.querySelectorAll(".recharts-pie-sector");
+
+    fireEvent.mouseEnter(allSectors[0]!);
+    flush();
+    expect(container.querySelectorAll(".customized-active-shape")).toHaveLength(1);
+
+    fireEvent.mouseEnter(allSectors[2]!);
+    flush();
+    expect(container.querySelectorAll(".customized-active-shape")).toHaveLength(1);
+
+    fireEvent.mouseLeave(allSectors[2]!);
+    flush();
+    expect(container.querySelectorAll(".customized-active-shape")).toHaveLength(0);
+  });
+});