solid-recharts 0.2.0 → 1.0.0

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

@@ -1,752 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { Bar, BarChart, BarStack, BarRectangleItem } from "../../../src";
-import { PageData } from "../../_data";
-import {
-  expandRectangle,
-  selectAllBarsInStack,
-  selectStackRects,
-} from "../../../src/state/selectors/barStackSelectors";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
-import { selectBarRectangles } from "../../../src/state/selectors/barSelectors";
-
-describe("BarStack Selectors", () => {
-  describe("in chart with BarStack", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={200} height={200} data={PageData}>
-        <BarStack stackId="mystackid">
-          <Bar dataKey="uv" id="red" />
-          <Bar dataKey="pv" id="green" />
-          {props.children}
-        </BarStack>
-        <Bar dataKey="amt" id="blue" />
-      </BarChart>
-    ));
-
-    test("selectAllBarsInStack", () => {
-      const { spy } = renderTestCase((state) => selectAllBarsInStack(state, "mystackid", false));
-      expectLastCalledWith(spy, [
-        expect.objectContaining({
-          id: "red",
-          stackId: "mystackid",
-          type: "bar",
-          xAxisId: defaultAxisId,
-          yAxisId: defaultAxisId,
-        }),
-        expect.objectContaining({
-          id: "green",
-          stackId: "mystackid",
-          type: "bar",
-          xAxisId: defaultAxisId,
-          yAxisId: defaultAxisId,
-        }),
-      ]);
-    });
-
-    test("selectBarRectangles for first bar", () => {
-      const { spy } = renderTestCase((state) =>
-        selectBarRectangles(state, "red", false, undefined),
-      );
-      expectLastCalledWith(spy, [
-        {
-          name: "Page A",
-          uv: 400,
-          pv: 2400,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 8.166666666666668,
-          y: 187.39999999999998,
-          width: 11,
-          height: 7.600000000000023,
-          value: [0, 400],
-          payload: {
-            name: "Page A",
-            uv: 400,
-            pv: 2400,
-            amt: 2400,
-          },
-          background: {
-            x: 8.166666666666668,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 13.666666666666668,
-            y: 191.2,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 0,
-        },
-        {
-          name: "Page B",
-          uv: 300,
-          pv: 4567,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 39.833333333333336,
-          y: 189.3,
-          width: 11,
-          height: 5.699999999999989,
-          value: [0, 300],
-          payload: {
-            name: "Page B",
-            uv: 300,
-            pv: 4567,
-            amt: 2400,
-          },
-          background: {
-            x: 39.833333333333336,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 45.333333333333336,
-            y: 192.15,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 1,
-        },
-        {
-          name: "Page C",
-          uv: 300,
-          pv: 1398,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 71.50000000000001,
-          y: 189.3,
-          width: 11,
-          height: 5.699999999999989,
-          value: [0, 300],
-          payload: {
-            name: "Page C",
-            uv: 300,
-            pv: 1398,
-            amt: 2400,
-          },
-          background: {
-            x: 71.50000000000001,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 77.00000000000001,
-            y: 192.15,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 2,
-        },
-        {
-          name: "Page D",
-          uv: 200,
-          pv: 9800,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 103.16666666666667,
-          y: 191.2,
-          width: 11,
-          height: 3.8000000000000114,
-          value: [0, 200],
-          payload: {
-            name: "Page D",
-            uv: 200,
-            pv: 9800,
-            amt: 2400,
-          },
-          background: {
-            x: 103.16666666666667,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 108.66666666666667,
-            y: 193.1,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 3,
-        },
-        {
-          name: "Page E",
-          uv: 278,
-          pv: 3908,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 134.83333333333334,
-          y: 189.718,
-          width: 11,
-          height: 5.282000000000011,
-          value: [0, 278],
-          payload: {
-            name: "Page E",
-            uv: 278,
-            pv: 3908,
-            amt: 2400,
-          },
-          background: {
-            x: 134.83333333333334,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 140.33333333333334,
-            y: 192.35899999999998,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 4,
-        },
-        {
-          name: "Page F",
-          uv: 189,
-          pv: 4800,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 166.5,
-          y: 191.409,
-          width: 11,
-          height: 3.591000000000008,
-          value: [0, 189],
-          payload: {
-            name: "Page F",
-            uv: 189,
-            pv: 4800,
-            amt: 2400,
-          },
-          background: {
-            x: 166.5,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 172,
-            y: 193.2045,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 5,
-        },
-      ] as unknown as BarRectangleItem[]);
-    });
-
-    test("selectBarRectangles for second bar", () => {
-      const { spy } = renderTestCase((state) =>
-        selectBarRectangles(state, "green", false, undefined),
-      );
-      expectLastCalledWith(spy, [
-        {
-          name: "Page A",
-          uv: 400,
-          pv: 2400,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 8.166666666666668,
-          y: 141.8,
-          width: 11,
-          height: 45.599999999999966,
-          value: [400, 2800],
-          payload: {
-            name: "Page A",
-            uv: 400,
-            pv: 2400,
-            amt: 2400,
-          },
-          background: {
-            x: 8.166666666666668,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 13.666666666666668,
-            y: 164.6,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 0,
-        },
-        {
-          name: "Page B",
-          uv: 300,
-          pv: 4567,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 39.833333333333336,
-          y: 102.52699999999999,
-          width: 11,
-          height: 86.77300000000002,
-          value: [300, 4867],
-          payload: {
-            name: "Page B",
-            uv: 300,
-            pv: 4567,
-            amt: 2400,
-          },
-          background: {
-            x: 39.833333333333336,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 45.333333333333336,
-            y: 145.9135,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 1,
-        },
-        {
-          name: "Page C",
-          uv: 300,
-          pv: 1398,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 71.50000000000001,
-          y: 162.738,
-          width: 11,
-          height: 26.562000000000012,
-          value: [300, 1698],
-          payload: {
-            name: "Page C",
-            uv: 300,
-            pv: 1398,
-            amt: 2400,
-          },
-          background: {
-            x: 71.50000000000001,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 77.00000000000001,
-            y: 176.019,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 2,
-        },
-        {
-          name: "Page D",
-          uv: 200,
-          pv: 9800,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 103.16666666666667,
-          y: 5,
-          width: 11,
-          height: 186.2,
-          value: [200, 10000],
-          payload: {
-            name: "Page D",
-            uv: 200,
-            pv: 9800,
-            amt: 2400,
-          },
-          background: {
-            x: 103.16666666666667,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 108.66666666666667,
-            y: 98.1,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 3,
-        },
-        {
-          name: "Page E",
-          uv: 278,
-          pv: 3908,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 134.83333333333334,
-          y: 115.466,
-          width: 11,
-          height: 74.252,
-          value: [278, 4186],
-          payload: {
-            name: "Page E",
-            uv: 278,
-            pv: 3908,
-            amt: 2400,
-          },
-          background: {
-            x: 134.83333333333334,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 140.33333333333334,
-            y: 152.59199999999998,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 4,
-        },
-        {
-          name: "Page F",
-          uv: 189,
-          pv: 4800,
-          amt: 2400,
-          stackedBarStart: 195,
-          x: 166.5,
-          y: 100.209,
-          width: 11,
-          height: 91.19999999999999,
-          value: [189, 4989],
-          payload: {
-            name: "Page F",
-            uv: 189,
-            pv: 4800,
-            amt: 2400,
-          },
-          background: {
-            x: 166.5,
-            y: 5,
-            width: 11,
-            height: 190,
-          },
-          tooltipPosition: {
-            x: 172,
-            y: 145.809,
-          },
-          parentViewBox: {
-            x: 0,
-            y: 0,
-            width: 200,
-            height: 200,
-          },
-          originalDataIndex: 5,
-        },
-      ] as unknown as BarRectangleItem[]);
-    });
-
-    test("selectStackRects should select edges of all rectangles in this stack", () => {
-      const { spy } = renderTestCase((state) => selectStackRects(state, "mystackid", false));
-      expectLastCalledWith(spy, [
-        {
-          x: 8.166666666666668,
-          y: 141.8,
-          width: 11,
-          height: 53.19999999999999,
-        },
-        {
-          x: 39.833333333333336,
-          y: 102.52699999999999,
-          width: 11,
-          height: 92.47300000000001,
-        },
-        {
-          x: 71.50000000000001,
-          y: 162.738,
-          width: 11,
-          height: 32.262,
-        },
-        {
-          x: 103.16666666666667,
-          y: 5,
-          width: 11,
-          height: 190,
-        },
-        {
-          x: 134.83333333333334,
-          y: 115.466,
-          width: 11,
-          height: 79.534,
-        },
-        {
-          x: 166.5,
-          y: 100.209,
-          width: 11,
-          height: 94.791,
-        },
-      ]);
-    });
-  });
-
-  describe("in chart with stackOffset=sign and negative values", () => {
-    // https://github.com/recharts/recharts/issues/6802
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart
-        width={100}
-        height={100}
-        data={[{ name: "A", value1: -100, value2: 200 }]}
-        margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
-        stackOffset="sign"
-      >
-        <BarStack stackId="mystackid">
-          <Bar dataKey="value1" id="red" />
-          <Bar dataKey="value2" id="green" />
-          {props.children}
-        </BarStack>
-        <Bar dataKey="amt" id="blue" />
-      </BarChart>
-    ));
-
-    test("selectStackRects should select edges of all rectangles in this stack", () => {
-      const { spy } = renderTestCase((state) => selectStackRects(state, "mystackid", false));
-      expectLastCalledWith(spy, [{ height: 75, width: 38, x: 10, y: 25 }]);
-    });
-
-    test("selectBarRectangles should select rectangles with negative height", () => {
-      const { spy } = renderTestCase((state) =>
-        selectBarRectangles(state, "red", false, undefined),
-      );
-      expectLastCalledWith(spy, [
-        expect.objectContaining({
-          x: 10,
-          y: 100,
-          width: 38,
-          height: -25,
-          value: [0, -100],
-        }),
-      ]);
-    });
-
-    test("selectBarRectangles should select rectangles with positive height", () => {
-      const { spy } = renderTestCase((state) =>
-        selectBarRectangles(state, "green", false, undefined),
-      );
-      expectLastCalledWith(spy, [
-        expect.objectContaining({
-          x: 10,
-          y: 25,
-          width: 38,
-          height: 50,
-          value: [0, 200],
-        }),
-      ]);
-    });
-  });
-
-  describe("with sparse BarStack data after zero-dimension filtering", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart
-        width={200}
-        height={200}
-        data={[
-          { name: "A", value1: 0, value2: 0 },
-          { name: "B", value1: 10, value2: 20 },
-        ]}
-      >
-        <BarStack stackId="sparse">
-          <Bar dataKey="value1" id="bar-one" isAnimationActive={false} />
-          <Bar dataKey="value2" id="bar-two" isAnimationActive={false} />
-          {props.children}
-        </BarStack>
-      </BarChart>
-    ));
-
-    // This case cross-references three selectors across three chart configs. Each
-    // chart is unmounted before the next renders: leaving multiple charts mounted in
-    // one test and then calling flush() (outside any reactive owner) creates the
-    // later charts' registration effects unowned → NO_OWNER_EFFECT. Capturing each
-    // spy's recorded value before unmounting keeps the assertions intact.
-    test("selectStackRects should preserve original data indices when combining filtered bars", () => {
-      const stack = renderTestCase((state) => selectStackRects(state, "sparse", false));
-      const stackRects = stack.spy.mock.lastCall?.[0];
-      stack.unmount();
-
-      const firstBar = renderTestCase((state) =>
-        selectBarRectangles(state, "bar-one", false, undefined),
-      );
-      const firstRects = firstBar.spy.mock.lastCall?.[0] ?? [];
-      firstBar.unmount();
-
-      const secondBar = renderTestCase((state) =>
-        selectBarRectangles(state, "bar-two", false, undefined),
-      );
-      const secondRects = secondBar.spy.mock.lastCall?.[0] ?? [];
-      secondBar.unmount();
-
-      expect(firstRects).toHaveLength(1);
-      expect(secondRects).toHaveLength(1);
-      expect(firstRects[0]).toEqual(expect.objectContaining({ originalDataIndex: 1 }));
-      expect(secondRects[0]).toEqual(expect.objectContaining({ originalDataIndex: 1 }));
-
-      expect(stackRects).toHaveLength(2);
-      expect(stackRects?.[0]).toBeUndefined();
-      expect(stackRects?.[1]).toEqual(expandRectangle(firstRects[0], secondRects[0]));
-    });
-  });
-
-  describe("expandRectangle", () => {
-    it("should return undefined if both rectangles are undefined", () => {
-      const result = expandRectangle(undefined, undefined);
-      expect(result).toBeUndefined();
-    });
-
-    it("should return the other rectangle if one is undefined", () => {
-      const rect1 = { x: 0, y: 0, width: 10, height: 10 };
-      const result1 = expandRectangle(rect1, undefined);
-      expect(result1).toEqual(rect1);
-
-      const rect2 = { x: 5, y: 5, width: 15, height: 15 };
-      const result2 = expandRectangle(undefined, rect2);
-      expect(result2).toEqual(rect2);
-    });
-
-    it("should expand two rectangles that are touching each other", () => {
-      const rect1 = { x: 5, y: 0, width: 25, height: 10 };
-      const rect2 = { x: 2, y: 10, width: 20, height: 15 };
-      const result = expandRectangle(rect1, rect2);
-      /*
-       * The resulting rectangle should start at (min x of both) and (min y of both)
-       * and should have width that both rectangles fit inside,
-       * and height that both rectangles fit inside.
-       *
-       * First rectangle width:
-       * from x=5 to x=30 (5 + 25)
-       *
-       * Second rectangle width:
-       * from x=2 to x=22 (2 + 20)
-       *
-       * First rectangle height:
-       * from y=0 to y=10 (0 + 10)
-       *
-       * Second rectangle height:
-       * from y=10 to y=25 (10 + 15)
-       */
-      expect(result).toEqual({ x: 2, y: 0, width: 28, height: 25 });
-    });
-
-    it("should expand two rectangles that have a gap between them", () => {
-      const rect1 = { x: 5, y: 0, width: 10, height: 10 };
-      const rect2 = { x: 20, y: 15, width: 10, height: 10 };
-      const result = expandRectangle(rect1, rect2);
-      /*
-       * The resulting rectangle should start at (min x of both) and (min y of both)
-       * and should have width that both rectangles fit inside,
-       * and height that both rectangles fit inside.
-       *
-       * First rectangle width:
-       * from x=5 to x=15 (5 + 10)
-       *
-       * Second rectangle width:
-       * from x=20 to x=30 (20 + 10)
-       *
-       * First rectangle height:
-       * from y=0 to y=10 (0 + 10)
-       *
-       * Second rectangle height:
-       * from y=15 to y=25 (15 + 10)
-       */
-      expect(result).toEqual({ x: 5, y: 0, width: 25, height: 25 });
-    });
-
-    it("should expand two overlapping rectangles", () => {
-      const rect1 = { x: 5, y: 5, width: 20, height: 20 };
-      const rect2 = { x: 15, y: 15, width: 20, height: 20 };
-      const result = expandRectangle(rect1, rect2);
-      /*
-       * The resulting rectangle should start at (min x of both) and (min y of both)
-       * and should have width that both rectangles fit inside,
-       * and height that both rectangles fit inside.
-       *
-       * First rectangle width:
-       * from x=5 to x=25 (5 + 20)
-       *
-       * Second rectangle width:
-       * from x=15 to x=35 (15 + 20)
-       *
-       * First rectangle height:
-       * from y=5 to y=25 (5 + 20)
-       *
-       * Second rectangle height:
-       * from y=15 to y=35 (15 + 20)
-       */
-      expect(result).toEqual({ x: 5, y: 5, width: 30, height: 30 });
-    });
-
-    it("should expand rectangles with negative height", () => {
-      const rect1 = { x: 10, y: 100, width: 60, height: -25 };
-      /*
-       * With stackOffset=sign, height can be negative, that means the bar goes down from YAxis zero.
-       * In other words, y is the bottom edge, and height is negative going upwards.
-       */
-      const rect2 = { x: 100, y: 25, width: -50, height: 50 };
-      const result = expandRectangle(rect1, rect2);
-      /*
-       * The resulting rectangle should start at (min x of both) and (min y of both)
-       * and should have width that both rectangles fit inside,
-       * and height that both rectangles fit inside.
-       *
-       * First rectangle width:
-       * from x=10 to x=70 (10 + 60)
-       *
-       * Second rectangle width:
-       * from x=50 (100 - 50) to x=100
-       *
-       * Total width: 10 -> 100 = 90
-       *
-       * First rectangle height:
-       * from y=75 (100 - 25) to y=100
-       *
-       * Second rectangle height:
-       * from y=25 to y=75 (25 + 50)
-       *
-       * Total height: 25 -> 100 = 75
-       */
-      expect(result).toEqual({ x: 10, y: 25, width: 90, height: 75 });
-    });
-  });
-});