solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/state/selectors/selectBarRectangles.stackOffset.spec.tsx

@@ -0,0 +1,503 @@
+import { describe, expect, it, test } from "vitest";
+import { Bar, BarChart, BarRectangleItem, BarStack } from "../../../src";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { PageData } from "../../_data";
+import {
+  selectBarPosition,
+  selectBarRectangles,
+  selectStackedDataOfItem,
+} from "../../../src/state/selectors/barSelectors";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+import { expectBars, ExpectedBar } from "../../helper/expectBars";
+import "../../helper/expectStackGroups"; // registers toBeRechartsStacked* matchers (expect.extend)
+import { BarPositionPosition, getStackedData } from "../../../src/util/ChartUtils";
+import { StackSeries } from "../../../src/util/stacks/stackTypes";
+import { selectDisplayedStackedData } from "../../../src/state/selectors/axisSelectors";
+import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
+import { DisplayedStackedData } from "../../../src/state/selectors/combiners/combineDisplayedStackedData";
+
+describe("stackOffset=sign with all positive numbers should behave the same as stackOffset=none", () => {
+  const expectedBars: ReadonlyArray<ExpectedBar> = [
+    {
+      d: "M 8.1667,189.5714 h 25 v 5.4286 h -25 Z",
+      height: "5.4286",
+      radius: "0",
+      width: "25",
+      x: "8.1667",
+      y: "189.5714",
+    },
+    {
+      d: "M 39.8333,190.9286 h 25 v 4.0714 h -25 Z",
+      height: "4.0714",
+      radius: "0",
+      width: "25",
+      x: "39.8333",
+      y: "190.9286",
+    },
+    {
+      d: "M 71.5,190.9286 h 25 v 4.0714 h -25 Z",
+      height: "4.0714",
+      radius: "0",
+      width: "25",
+      x: "71.5",
+      y: "190.9286",
+    },
+    {
+      d: "M 103.1667,192.2857 h 25 v 2.7143 h -25 Z",
+      height: "2.7143",
+      radius: "0",
+      width: "25",
+      x: "103.1667",
+      y: "192.2857",
+    },
+    {
+      d: "M 134.8333,191.2271 h 25 v 3.7729 h -25 Z",
+      height: "3.7729",
+      radius: "0",
+      width: "25",
+      x: "134.8333",
+      y: "191.2271",
+    },
+    {
+      d: "M 166.5,192.435 h 25 v 2.565 h -25 Z",
+      height: "2.565",
+      radius: "0",
+      width: "25",
+      x: "166.5",
+      y: "192.435",
+    },
+    {
+      d: "M 8.1667,157 h 25 v 32.5714 h -25 Z",
+      height: "32.5714",
+      radius: "0",
+      width: "25",
+      x: "8.1667",
+      y: "157",
+    },
+    {
+      d: "M 39.8333,128.9479 h 25 v 61.9807 h -25 Z",
+      height: "61.9807",
+      radius: "0",
+      width: "25",
+      x: "39.8333",
+      y: "128.9479",
+    },
+    {
+      d: "M 71.5,171.9557 h 25 v 18.9729 h -25 Z",
+      height: "18.9729",
+      radius: "0",
+      width: "25",
+      x: "71.5",
+      y: "171.9557",
+    },
+    {
+      d: "M 103.1667,59.2857 h 25 v 133 h -25 Z",
+      height: "133",
+      radius: "0",
+      width: "25",
+      x: "103.1667",
+      y: "59.2857",
+    },
+    {
+      d: "M 134.8333,138.19 h 25 v 53.0371 h -25 Z",
+      height: "53.0371",
+      radius: "0",
+      width: "25",
+      x: "134.8333",
+      y: "138.19",
+    },
+    {
+      d: "M 166.5,127.2921 h 25 v 65.1429 h -25 Z",
+      height: "65.1429",
+      radius: "0",
+      width: "25",
+      x: "166.5",
+      y: "127.2921",
+    },
+    {
+      d: "M 8.1667,124.4286 h 25 v 32.5714 h -25 Z",
+      height: "32.5714",
+      radius: "0",
+      width: "25",
+      x: "8.1667",
+      y: "124.4286",
+    },
+    {
+      d: "M 39.8333,96.3764 h 25 v 32.5714 h -25 Z",
+      height: "32.5714",
+      radius: "0",
+      width: "25",
+      x: "39.8333",
+      y: "96.3764",
+    },
+    {
+      d: "M 71.5,139.3843 h 25 v 32.5714 h -25 Z",
+      height: "32.5714",
+      radius: "0",
+      width: "25",
+      x: "71.5",
+      y: "139.3843",
+    },
+    {
+      d: "M 103.1667,26.7143 h 25 v 32.5714 h -25 Z",
+      height: "32.5714",
+      radius: "0",
+      width: "25",
+      x: "103.1667",
+      y: "26.7143",
+    },
+    {
+      d: "M 134.8333,105.6186 h 25 v 32.5714 h -25 Z",
+      height: "32.5714",
+      radius: "0",
+      width: "25",
+      x: "134.8333",
+      y: "105.6186",
+    },
+    {
+      d: "M 166.5,94.7207 h 25 v 32.5714 h -25 Z",
+      height: "32.5714",
+      radius: "0",
+      width: "25",
+      x: "166.5",
+      y: "94.7207",
+    },
+  ];
+
+  const expectedRectangles1: ReadonlyArray<BarRectangleItem> = [
+    expect.objectContaining({
+      width: 25,
+      height: 5.428571428571445,
+      x: 8.166666666666668,
+      y: 189.57142857142856,
+    }),
+    expect.objectContaining({
+      height: 4.071428571428584,
+      width: 25,
+      x: 39.833333333333336,
+      y: 190.92857142857142,
+    }),
+    expect.objectContaining({
+      height: 4.071428571428584,
+      width: 25,
+      x: 71.50000000000001,
+      y: 190.92857142857142,
+    }),
+    expect.objectContaining({
+      height: 2.714285714285694,
+      width: 25,
+      x: 103.16666666666667,
+      y: 192.2857142857143,
+    }),
+    expect.objectContaining({
+      height: 3.7728571428571627,
+      width: 25,
+      x: 134.83333333333334,
+      y: 191.22714285714284,
+    }),
+    expect.objectContaining({
+      height: 2.5649999999999977,
+      width: 25,
+      x: 166.5,
+      y: 192.435,
+    }),
+  ];
+
+  const expectedRectangles2: ReadonlyArray<BarRectangleItem> = [
+    expect.objectContaining({
+      height: 32.571428571428555,
+      width: 25,
+      x: 8.166666666666668,
+      y: 157,
+    }),
+    expect.objectContaining({
+      height: 61.98071428571427,
+      width: 25,
+      x: 39.833333333333336,
+      y: 128.94785714285715,
+    }),
+    expect.objectContaining({
+      height: 18.972857142857123,
+      width: 25,
+      x: 71.50000000000001,
+      y: 171.9557142857143,
+    }),
+    expect.objectContaining({
+      height: 133.00000000000003,
+      width: 25,
+      x: 103.16666666666667,
+      y: 59.28571428571428,
+    }),
+    expect.objectContaining({
+      height: 53.03714285714281,
+      width: 25,
+      x: 134.83333333333334,
+      y: 138.19000000000003,
+    }),
+    expect.objectContaining({
+      height: 65.14285714285714,
+      width: 25,
+      x: 166.5,
+      y: 127.29214285714286,
+    }),
+  ];
+
+  const expectedRectangles3: ReadonlyArray<BarRectangleItem> = [
+    expect.objectContaining({
+      height: 32.57142857142857,
+      width: 25,
+      x: 8.166666666666668,
+      y: 124.42857142857143,
+    }),
+    expect.objectContaining({
+      height: 32.57142857142857,
+      width: 25,
+      x: 39.833333333333336,
+      y: 96.37642857142858,
+    }),
+    expect.objectContaining({
+      height: 32.571428571428555,
+      width: 25,
+      x: 71.50000000000001,
+      y: 139.38428571428574,
+    }),
+    expect.objectContaining({
+      height: 32.571428571428555,
+      width: 25,
+      x: 103.16666666666667,
+      y: 26.714285714285722,
+    }),
+    expect.objectContaining({
+      height: 32.5714285714286,
+      width: 25,
+      x: 134.83333333333334,
+      y: 105.61857142857143,
+    }),
+    expect.objectContaining({
+      height: 32.571428571428584,
+      width: 25,
+      x: 166.5,
+      y: 94.72071428571428,
+    }),
+  ];
+
+  const expectedBarPosition3: BarPositionPosition = {
+    offset: 3.166666666666667,
+    size: 25,
+  };
+
+  const expectedStackedDataOfItem3: StackSeries = expect.toBeRechartsStackedSeries([
+    [2800, 5200],
+    [4867, 7267],
+    [1698, 4098],
+    [10000, 12400],
+    [4186, 6586],
+    [4989, 7389],
+  ]);
+
+  const expectedStackedData: DisplayedStackedData = [
+    { blue: 2400, green: 2400, red: 400 },
+    { blue: 2400, green: 4567, red: 300 },
+    { blue: 2400, green: 1398, red: 300 },
+    { blue: 2400, green: 9800, red: 200 },
+    { blue: 2400, green: 3908, red: 278 },
+    { blue: 2400, green: 4800, red: 189 },
+  ];
+
+  describe("in chart with stackOffset=none", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={200} height={200} data={PageData} stackOffset="none">
+        <BarStack stackId="mystackid">
+          <Bar dataKey="uv" id="red" isAnimationActive={false} />
+          <Bar dataKey="pv" id="green" isAnimationActive={false} />
+          <Bar dataKey="amt" id="blue" isAnimationActive={false} />
+          {props.children}
+        </BarStack>
+      </BarChart>
+    ));
+
+    it("should render bars", () => {
+      const { container } = renderTestCase();
+      expectBars(container, expectedBars);
+    });
+
+    it("should select rectangles for first bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "red", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles1);
+    });
+
+    it("should select rectangles for second bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "green", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles2);
+    });
+
+    it("should select rectangles for third bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "blue", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles3);
+    });
+
+    test("selectBarPosition", () => {
+      const { spy } = renderTestCase((state) => selectBarPosition(state, "blue", false));
+      expectLastCalledWith(spy, expectedBarPosition3);
+    });
+
+    test("selectStackedDataOfItem", () => {
+      const { spy } = renderTestCase((state) => selectStackedDataOfItem(state, "blue", false));
+      expectLastCalledWith(spy, expectedStackedDataOfItem3);
+    });
+
+    test("selectDisplayedStackedData", () => {
+      const { spy } = renderTestCase((state) =>
+        selectDisplayedStackedData(state, "yAxis", defaultAxisId, false),
+      );
+      expectLastCalledWith(spy, expectedStackedData);
+    });
+
+    test("getStackedData", () => {
+      const actual = getStackedData(expectedStackedData, ["red", "green", "blue"], "none");
+      expect(actual[2]).toEqual(expectedStackedDataOfItem3);
+    });
+  });
+
+  describe("in chart with stackOffset=sign", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={200} height={200} data={PageData} stackOffset="sign">
+        <BarStack stackId="mystackid">
+          <Bar dataKey="uv" id="red" isAnimationActive={false} />
+          <Bar dataKey="pv" id="green" isAnimationActive={false} />
+          <Bar dataKey="amt" id="blue" isAnimationActive={false} />
+          {props.children}
+        </BarStack>
+      </BarChart>
+    ));
+
+    /*
+     * Because all numbers are positive in PageData,
+     * stackOffset=sign should behave the same as stackOffset=none
+     *
+     * https://github.com/recharts/recharts/issues/6803
+     */
+
+    it("should render bars", () => {
+      const { container } = renderTestCase();
+      expectBars(container, expectedBars);
+    });
+
+    it("should select rectangles for first bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "red", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles1);
+    });
+
+    it("should select rectangles for second bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "green", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles2);
+    });
+
+    it("should select rectangles for third bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "blue", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles3);
+    });
+
+    test("selectBarPosition", () => {
+      const { spy } = renderTestCase((state) => selectBarPosition(state, "blue", false));
+      expectLastCalledWith(spy, expectedBarPosition3);
+    });
+
+    test("selectStackedDataOfItem", () => {
+      const { spy } = renderTestCase((state) => selectStackedDataOfItem(state, "blue", false));
+      expectLastCalledWith(spy, expectedStackedDataOfItem3);
+    });
+
+    test("selectDisplayedStackedData", () => {
+      const { spy } = renderTestCase((state) =>
+        selectDisplayedStackedData(state, "yAxis", defaultAxisId, false),
+      );
+      expectLastCalledWith(spy, expectedStackedData);
+    });
+
+    test("getStackedData", () => {
+      const actual = getStackedData(expectedStackedData, ["red", "green", "blue"], "sign");
+      expect(actual[2]).toEqual(expectedStackedDataOfItem3);
+    });
+  });
+
+  describe("in chart with stackOffset=positive", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={200} height={200} data={PageData} stackOffset="positive">
+        <BarStack stackId="mystackid">
+          <Bar dataKey="uv" id="red" isAnimationActive={false} />
+          <Bar dataKey="pv" id="green" isAnimationActive={false} />
+          <Bar dataKey="amt" id="blue" isAnimationActive={false} />
+          {props.children}
+        </BarStack>
+      </BarChart>
+    ));
+
+    /*
+     * Because all numbers are positive in PageData,
+     * stackOffset=positive should behave the same as stackOffset=none
+     * This was not reported in https://github.com/recharts/recharts/issues/6803
+     * but it stands to reason that it should behave the same!
+     */
+
+    it("should render bars", () => {
+      const { container } = renderTestCase();
+      expectBars(container, expectedBars);
+    });
+
+    it("should select rectangles for first bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "red", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles1);
+    });
+
+    it("should select rectangles for second bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "green", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles2);
+    });
+
+    it("should select rectangles for third bar", () => {
+      const { spy } = renderTestCase((state) =>
+        selectBarRectangles(state, "blue", false, undefined),
+      );
+      expectLastCalledWith(spy, expectedRectangles3);
+    });
+
+    test("selectBarPosition", () => {
+      const { spy } = renderTestCase((state) => selectBarPosition(state, "blue", false));
+      expectLastCalledWith(spy, expectedBarPosition3);
+    });
+
+    test("selectStackedDataOfItem", () => {
+      const { spy } = renderTestCase((state) => selectStackedDataOfItem(state, "blue", false));
+      expectLastCalledWith(spy, expectedStackedDataOfItem3);
+    });
+
+    test("selectDisplayedStackedData", () => {
+      const { spy } = renderTestCase((state) =>
+        selectDisplayedStackedData(state, "yAxis", defaultAxisId, false),
+      );
+      expectLastCalledWith(spy, expectedStackedData);
+    });
+
+    test("getStackedData", () => {
+      const actual = getStackedData(expectedStackedData, ["red", "green", "blue"], "positive");
+      expect(actual[2]).toEqual(expectedStackedDataOfItem3);
+    });
+  });
+});

package/test/state/selectors/selectBaseAxis.spec.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { shouldReturnUndefinedOutOfContext } from "../../helper/selectorTestHelpers";
+import {
+  implicitXAxis,
+  implicitYAxis,
+  implicitZAxis,
+  selectBaseAxis,
+} from "../../../src/state/selectors/axisSelectors";
+import { createRechartsStore } from "../../../src/state/store";
+import type { RechartsRootState } from "../../../src/state/store";
+import {
+  implicitAngleAxis,
+  implicitRadiusAxis,
+} from "../../../src/state/selectors/polarAxisSelectors";
+
+/*
+ * Ported from recharts 3.8.1 test/state/selectors/selectBaseAxis.spec.tsx.
+ * The "should be stable between renders" test is omitted — reselect reference
+ * stability is N/A in this no-reselect Solid rewrite (store state read via
+ * `store.state`, not `getState()`).
+ */
+
+describe("selectBaseAxis", () => {
+  const selector = (state: RechartsRootState) => selectBaseAxis(state, "xAxis", "0");
+  shouldReturnUndefinedOutOfContext(selector);
+
+  it("should return implicit XAxis when called with initial state", () => {
+    const initialState = createRechartsStore().state;
+    const result = selectBaseAxis(initialState, "xAxis", "0");
+    expect(result).toBe(implicitXAxis);
+  });
+
+  it("should return implicit YAxis when called with initial state", () => {
+    const initialState = createRechartsStore().state;
+    const result = selectBaseAxis(initialState, "yAxis", "0");
+    expect(result).toBe(implicitYAxis);
+  });
+
+  it("should return implicit ZAxis when called with initial state", () => {
+    const initialState = createRechartsStore().state;
+    const result = selectBaseAxis(initialState, "zAxis", "0");
+    expect(result).toBe(implicitZAxis);
+  });
+
+  it("should return implicit PolarAngleAxis when called with initial state", () => {
+    const initialState = createRechartsStore().state;
+    const result = selectBaseAxis(initialState, "angleAxis", "0");
+    expect(result).toEqual({ ...implicitAngleAxis, type: "category" });
+  });
+
+  it("should return implicit RadiusAxis when called with initial state", () => {
+    const initialState = createRechartsStore().state;
+    const result = selectBaseAxis(initialState, "radiusAxis", "0");
+    expect(result).toEqual({ ...implicitRadiusAxis, type: "category" });
+  });
+});

package/test/state/selectors/selectCartesianItemsSettings.spec.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import type { RechartsRootState } from "../../../src/state/store";
+import { selectCartesianItemsSettings } from "../../../src/state/selectors/axisSelectors";
+import {
+  shouldReturnFromInitialState,
+  shouldReturnUndefinedOutOfContext,
+} from "../../helper/selectorTestHelpers";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { Line, LineChart, XAxis } from "../../../src";
+import { PageData } from "../../_data";
+import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
+
+/*
+ * Ported from recharts 3.8.1 test/state/selectors/selectCartesianItemsSettings.spec.tsx.
+ * The "stable between renders" test is omitted (reselect stability — N/A here).
+ */
+
+describe("selectCartesianItemsSettings", () => {
+  const selector = (state: RechartsRootState) =>
+    selectCartesianItemsSettings(state, "xAxis", defaultAxisId);
+
+  shouldReturnUndefinedOutOfContext(selector);
+  shouldReturnFromInitialState(selector, []);
+
+  it("should return one item from a simple chart", () => {
+    // NB: the wrapper reads `props.children` (NOT destructured) so the Spy mounts
+    // INSIDE the chart's store — see the test-wrapper-no-destructure-children rule.
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={100} height={100}>
+        <Line data={PageData} dataKey="pv" />
+        <XAxis dataKey="name" />
+        {props.children}
+      </LineChart>
+    ));
+    const { spy } = renderTestCase(selector);
+    expect(spy).toHaveBeenLastCalledWith([
+      {
+        data: [
+          { amt: 2400, name: "Page A", pv: 2400, uv: 400 },
+          { amt: 2400, name: "Page B", pv: 4567, uv: 300 },
+          { amt: 2400, name: "Page C", pv: 1398, uv: 300 },
+          { amt: 2400, name: "Page D", pv: 9800, uv: 200 },
+          { amt: 2400, name: "Page E", pv: 3908, uv: 278 },
+          { amt: 2400, name: "Page F", pv: 4800, uv: 189 },
+        ],
+        dataKey: "pv",
+        hide: false,
+        id: expect.stringMatching(/recharts-line-.+/),
+        isPanorama: false,
+        type: "line",
+        xAxisId: 0,
+        yAxisId: 0,
+        zAxisId: 0,
+      },
+    ]);
+  });
+});

package/test/state/selectors/selectChartOffset.spec.tsx

@@ -0,0 +1,26 @@
+import { describe } from "vitest";
+import { selectChartOffsetInternal } from "../../../src/state/selectors/selectChartOffsetInternal";
+import {
+  shouldReturnFromInitialState,
+  shouldReturnUndefinedOutOfContext,
+} from "../../helper/selectorTestHelpers";
+
+/*
+ * Ported from recharts 3.8.1 test/state/selectors/selectChartOffset.spec.tsx.
+ * The "should be stable" test (reselect reference stability via repeated
+ * useAppSelector reads) is omitted — N/A in this no-reselect Solid rewrite; see
+ * the selectorTestHelpers header and the test-porting-tier1-tier2-done memory.
+ */
+
+describe("selectChartOffset", () => {
+  shouldReturnUndefinedOutOfContext(selectChartOffsetInternal);
+  shouldReturnFromInitialState(selectChartOffsetInternal, {
+    bottom: 5,
+    brushBottom: 5,
+    height: 0,
+    left: 5,
+    right: 5,
+    top: 5,
+    width: 0,
+  });
+});