solid-recharts 0.2.0 → 1.0.0

package/test/hooks/useAxisTicks.spec.tsx

@@ -1,130 +0,0 @@
-// 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

@@ -1,248 +0,0 @@
-// 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 "@solidjs/testing-library";
-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

@@ -1,109 +0,0 @@
-// 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 "@solidjs/testing-library";
-
-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

@@ -1,135 +0,0 @@
-// 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 "@solidjs/testing-library";
-
-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);
-  });
-});