solid-recharts 0.2.0 → 1.0.0

package/test/chart/AreaChart.stacked.spec.tsx

@@ -1,1407 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { Area, AreaChart, Tooltip, XAxis, YAxis } from "../../src";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { expectAreaCurve } from "../helper/expectAreaCurve";
-import {
-  selectArea,
-  selectGraphicalItemStackedData,
-} from "../../src/state/selectors/areaSelectors";
-import {
-  selectAxisDomain,
-  selectDisplayedData,
-  selectStackGroups,
-} from "../../src/state/selectors/axisSelectors";
-import { defaultAxisId } from "../../src/state/cartesianAxisSlice";
-import { StackId } from "../../src/util/ChartUtils";
-import {
-  ExpectedStackedDataSeries,
-  expectGraphicalItemSettings,
-} from "../helper/expectStackGroups";
-import { ChartData } from "../../src/state/chartDataSlice";
-import { StackGroup } from "../../src/util/stacks/stackTypes";
-import { AreaSettings } from "../../src/state/types/AreaSettings";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-
-const data1 = [
-  { name: "a", value: 5 },
-  { name: "b", value: 25 },
-];
-const data2 = [
-  { name: "a", value: 10 },
-  { name: "b", value: 10 },
-];
-const data3 = [
-  { name: "a", value: 23 },
-  { name: "b", value: 13 },
-];
-const data1Value1 = [
-  { name: "a", value1: 5 },
-  { name: "b", value1: 25 },
-];
-const data2Value2 = [
-  { name: "a", value2: 10 },
-  { name: "b", value2: 10 },
-];
-const data3Value3 = [
-  { name: "a", value3: 23 },
-  { name: "b", value3: 13 },
-];
-const dataMerged = [
-  {
-    name: "a",
-    value1: 5,
-    value2: 10,
-    value3: 23,
-  },
-  {
-    name: "b",
-    value1: 25,
-    value2: 10,
-    value3: 13,
-  },
-];
-
-describe("AreaChart stacked", () => {
-  describe("with single data array", () => {
-    const areaSettings1: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area1",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value1",
-      stackId: "1",
-      data: undefined,
-    };
-
-    const areaSettings2: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area2",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value2",
-      stackId: "1",
-      data: undefined,
-    };
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <AreaChart width={500} height={400} data={dataMerged}>
-        <XAxis dataKey="name" allowDuplicatedCategory={false} />
-        <YAxis dataKey="sum" />
-        <Tooltip />
-        <Area
-          isAnimationActive={false}
-          type="monotone"
-          dataKey={areaSettings1.dataKey}
-          stackId={areaSettings1.stackId}
-          id={areaSettings1.id}
-          stroke="red"
-          fill="red"
-        />
-        <Area
-          isAnimationActive={false}
-          type="monotone"
-          dataKey={areaSettings2.dataKey}
-          stackId={areaSettings2.stackId}
-          stroke="green"
-          fill="green"
-          id={areaSettings2.id}
-        />
-        <Area
-          isAnimationActive={false}
-          type="monotone"
-          dataKey="value3"
-          stackId="1"
-          id="area3"
-          stroke="blue"
-          fill="blue"
-        />
-        {props.children}
-      </AreaChart>
-    ));
-
-    it("should select displayed data", () => {
-      const { spy } = renderTestCase((state) => selectDisplayedData(state, "xAxis", 0, false));
-      const expected: ChartData = [
-        { name: "a", value1: 5, value2: 10, value3: 23 },
-        { name: "b", value1: 25, value2: 10, value3: 13 },
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select stack groups for all areas", () => {
-      const { spy } = renderTestCase((state) => selectStackGroups(state, "yAxis", 0, false));
-      const expected: Record<StackId, StackGroup> = {
-        "1": {
-          graphicalItems: [
-            expectGraphicalItemSettings({
-              barSize: undefined,
-              data: undefined,
-              dataKey: "value1",
-              id: "area1",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              barSize: undefined,
-              data: undefined,
-              dataKey: "value2",
-              id: "area2",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              barSize: undefined,
-              data: undefined,
-              dataKey: "value3",
-              id: "area3",
-              stackId: "1",
-              hide: false,
-            }),
-          ],
-          stackedData: expect.toBeRechartsStackedData([
-            [
-              [0, 5],
-              [0, 25],
-            ],
-            [
-              [5, 15],
-              [25, 35],
-            ],
-            [
-              [15, 38],
-              [35, 48],
-            ],
-          ]),
-        },
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the first area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings1.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [0, 5],
-        [0, 25],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the second area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings2.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [5, 15],
-        [25, 35],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the first area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings1.id, false));
-      const expected = {
-        baseLine: [
-          {
-            x: 65,
-            y: 365,
-            payload: {
-              name: "a",
-              value1: 5,
-              value2: 10,
-              value3: 23,
-            },
-          },
-          {
-            x: 495,
-            y: 365,
-            payload: {
-              name: "b",
-              value1: 25,
-              value2: 10,
-              value3: 13,
-            },
-          },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: {
-              name: "a",
-              value1: 5,
-              value2: 10,
-              value3: 23,
-            },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
-            x: 65,
-            y: 335,
-          },
-          {
-            payload: {
-              name: "b",
-              value1: 25,
-              value2: 10,
-              value3: 13,
-            },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
-            x: 495,
-            y: 214.99999999999997,
-          },
-        ],
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the second area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings2.id, false));
-      expectLastCalledWith(spy, {
-        baseLine: [
-          // y-value of the first area becomes the baseline for the second area
-          {
-            x: 65,
-            y: 335,
-            payload: {
-              name: "a",
-              value1: 5,
-              value2: 10,
-              value3: 23,
-            },
-          },
-          {
-            x: 495,
-            y: 214.99999999999997,
-            payload: {
-              name: "b",
-              value1: 25,
-              value2: 10,
-              value3: 13,
-            },
-          },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: {
-              name: "a",
-              value1: 5,
-              value2: 10,
-              value3: 23,
-            },
-            // this should be 5 -> 15 because the first area has 5 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
-            x: 65,
-            y: 275,
-          },
-          {
-            payload: {
-              name: "b",
-              value1: 25,
-              value2: 10,
-              value3: 13,
-            },
-            // this should be 25 -> 35 because the first area has 25 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
-            x: 495,
-            y: 154.99999999999997,
-          },
-        ],
-      });
-    });
-
-    it("should render three stacked areas", () => {
-      const { container } = renderTestCase();
-      expectAreaCurve(container, [
-        { d: "M65,335L495,215" },
-        { d: "M65,275L495,155" },
-        { d: "M65,137L495,77" },
-      ]);
-    });
-  });
-
-  describe("with single data array, and without explicit XAxis dataKey", () => {
-    const areaSettings1: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area1",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value1",
-      stackId: "1",
-      data: undefined,
-    };
-
-    const areaSettings2: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area2",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value2",
-      stackId: "1",
-      data: undefined,
-    };
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <AreaChart width={500} height={400} data={dataMerged}>
-        <XAxis allowDuplicatedCategory={false} />
-        <YAxis dataKey="sum" />
-        <Tooltip />
-        <Area
-          isAnimationActive={false}
-          type="monotone"
-          dataKey={areaSettings1.dataKey}
-          stackId={areaSettings1.stackId}
-          id={areaSettings1.id}
-          stroke="red"
-          fill="red"
-        />
-        <Area
-          isAnimationActive={false}
-          type="monotone"
-          dataKey={areaSettings2.dataKey}
-          stackId={areaSettings2.stackId}
-          stroke="green"
-          fill="green"
-          id={areaSettings2.id}
-        />
-        <Area
-          isAnimationActive={false}
-          type="monotone"
-          dataKey="value3"
-          stackId="1"
-          id="area3"
-          stroke="blue"
-          fill="blue"
-        />
-        {props.children}
-      </AreaChart>
-    ));
-
-    it("should select displayed data", () => {
-      const { spy } = renderTestCase((state) => selectDisplayedData(state, "xAxis", 0, false));
-      const expected: ChartData = [
-        { name: "a", value1: 5, value2: 10, value3: 23 },
-        { name: "b", value1: 25, value2: 10, value3: 13 },
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select stack groups for all areas", () => {
-      const { spy } = renderTestCase((state) => selectStackGroups(state, "yAxis", 0, false));
-      const expected: Record<StackId, StackGroup> = {
-        "1": {
-          graphicalItems: [
-            expectGraphicalItemSettings({
-              barSize: undefined,
-              data: undefined,
-              dataKey: "value1",
-              id: "area1",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              barSize: undefined,
-              data: undefined,
-              dataKey: "value2",
-              id: "area2",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              barSize: undefined,
-              data: undefined,
-              dataKey: "value3",
-              id: "area3",
-              stackId: "1",
-              hide: false,
-            }),
-          ],
-          stackedData: expect.toBeRechartsStackedData([
-            [
-              [0, 5],
-              [0, 25],
-            ],
-            [
-              [5, 15],
-              [25, 35],
-            ],
-            [
-              [15, 38],
-              [35, 48],
-            ],
-          ]),
-        },
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the first area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings1.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [0, 5],
-        [0, 25],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the second area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings2.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [5, 15],
-        [25, 35],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the first area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings1.id, false));
-      const expected = {
-        baseLine: [
-          {
-            x: 65,
-            y: 365,
-            payload: {
-              name: "a",
-              value1: 5,
-              value2: 10,
-              value3: 23,
-            },
-          },
-          {
-            x: 495,
-            y: 365,
-            payload: {
-              name: "b",
-              value1: 25,
-              value2: 10,
-              value3: 13,
-            },
-          },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: {
-              name: "a",
-              value1: 5,
-              value2: 10,
-              value3: 23,
-            },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
-            x: 65,
-            y: 335,
-          },
-          {
-            payload: {
-              name: "b",
-              value1: 25,
-              value2: 10,
-              value3: 13,
-            },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
-            x: 495,
-            y: 214.99999999999997,
-          },
-        ],
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the second area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings2.id, false));
-      expectLastCalledWith(spy, {
-        baseLine: [
-          // y-value of the first area becomes the baseline for the second area
-          {
-            x: 65,
-            y: 335,
-            payload: {
-              name: "a",
-              value1: 5,
-              value2: 10,
-              value3: 23,
-            },
-          },
-          {
-            x: 495,
-            y: 214.99999999999997,
-            payload: {
-              name: "b",
-              value1: 25,
-              value2: 10,
-              value3: 13,
-            },
-          },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: {
-              name: "a",
-              value1: 5,
-              value2: 10,
-              value3: 23,
-            },
-            // this should be 5 -> 15 because the first area has 5 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
-            x: 65,
-            y: 275,
-          },
-          {
-            payload: {
-              name: "b",
-              value1: 25,
-              value2: 10,
-              value3: 13,
-            },
-            // this should be 25 -> 35 because the first area has 25 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
-            x: 495,
-            y: 154.99999999999997,
-          },
-        ],
-      });
-    });
-
-    it("should render three stacked areas", () => {
-      const { container } = renderTestCase();
-      expectAreaCurve(container, [
-        { d: "M65,335L495,215" },
-        { d: "M65,275L495,155" },
-        { d: "M65,137L495,77" },
-      ]);
-    });
-  });
-
-  describe("with multiple data arrays but each has their own dataKey", () => {
-    const areaSettings1: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area1",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value1",
-      stackId: "1",
-      data: data1Value1,
-    };
-
-    const areaSettings2: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area2",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value2",
-      stackId: "1",
-      data: data2Value2,
-    };
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <AreaChart width={500} height={400}>
-        <XAxis dataKey="name" allowDuplicatedCategory={false} />
-        <YAxis dataKey="sum" />
-        <Tooltip />
-        <Area
-          isAnimationActive={false}
-          data={areaSettings1.data}
-          id={areaSettings1.id}
-          type="monotone"
-          dataKey={areaSettings1.dataKey}
-          stackId={areaSettings1.stackId}
-          stroke="red"
-          fill="red"
-        />
-        <Area
-          isAnimationActive={false}
-          data={data2Value2}
-          id={areaSettings2.id}
-          type="monotone"
-          dataKey="value2"
-          stackId="1"
-          stroke="green"
-          fill="green"
-        />
-        <Area
-          isAnimationActive={false}
-          data={data3Value3}
-          id="area3"
-          type="monotone"
-          dataKey="value3"
-          stackId="1"
-          stroke="blue"
-          fill="blue"
-        />
-        {props.children}
-      </AreaChart>
-    ));
-
-    it("should select displayed data", () => {
-      const { spy } = renderTestCase((state) => selectDisplayedData(state, "xAxis", 0, false));
-      const expected: ChartData = [
-        { name: "a", value1: 5 },
-        { name: "b", value1: 25 },
-        { name: "a", value2: 10 },
-        { name: "b", value2: 10 },
-        { name: "a", value3: 23 },
-        { name: "b", value3: 13 },
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select stack groups for all areas", () => {
-      const { spy } = renderTestCase((state) => selectStackGroups(state, "yAxis", 0, false));
-      const expected: Record<StackId, StackGroup> = {
-        "1": {
-          graphicalItems: [
-            expectGraphicalItemSettings({
-              id: "area1",
-              barSize: undefined,
-              data: [
-                { name: "a", value1: 5 },
-                { name: "b", value1: 25 },
-              ],
-              dataKey: "value1",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              id: "area2",
-              barSize: undefined,
-              data: [
-                { name: "a", value2: 10 },
-                { name: "b", value2: 10 },
-              ],
-              dataKey: "value2",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              id: "area3",
-              barSize: undefined,
-              data: [
-                { name: "a", value3: 23 },
-                { name: "b", value3: 13 },
-              ],
-              dataKey: "value3",
-              stackId: "1",
-              hide: false,
-            }),
-          ],
-          stackedData: expect.toBeRechartsStackedData([
-            [
-              [0, 5],
-              [0, 25],
-            ],
-            [
-              [5, 15],
-              [25, 35],
-            ],
-            [
-              [15, 38],
-              [35, 48],
-            ],
-          ]),
-        },
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the first area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings1.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [0, 5],
-        [0, 25],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the second area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings2.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [5, 15],
-        [25, 35],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the first area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings1.id, false));
-      const expected = {
-        baseLine: [
-          { x: 65, y: 365, payload: { name: "a", value1: 5 } },
-          { x: 495, y: 365, payload: { name: "b", value1: 25 } },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: { name: "a", value1: 5 },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
-            x: 65,
-            y: 335,
-          },
-          {
-            payload: { name: "b", value1: 25 },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
-            x: 495,
-            y: 214.99999999999997,
-          },
-        ],
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the second area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings2.id, false));
-      expectLastCalledWith(spy, {
-        baseLine: [
-          // baseline.y from second point is the same as points.y from first point
-          { x: 65, y: 335, payload: { name: "a", value2: 10 } },
-          { x: 495, y: 214.99999999999997, payload: { name: "b", value2: 10 } },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: { name: "a", value2: 10 },
-            // this should be 5 -> 15 because the first area has 5 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
-            x: 65,
-            y: 275,
-          },
-          {
-            payload: { name: "b", value2: 10 },
-            // this should be 25 -> 35 because the first area has 25 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
-            x: 495,
-            y: 154.99999999999997,
-          },
-        ],
-      });
-    });
-
-    it("should render three stacked areas", () => {
-      const { container } = renderTestCase();
-      expectAreaCurve(container, [
-        { d: "M65,335L495,215" },
-        { d: "M65,275L495,155" },
-        { d: "M65,137L495,77" },
-      ]);
-    });
-  });
-
-  describe("with multiple data arrays with the same dataKey", () => {
-    /*
-     * https://github.com/recharts/recharts/issues/6073
-     * https://stackblitz.com/edit/react-qarbpqfn?file=src%2FExample.tsx
-     * Multiple Area components with the same stackId and individual data arrays.
-     */
-
-    const areaSettings1: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area1",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value",
-      stackId: "1",
-      data: data1,
-    };
-
-    const areaSettings2: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area2",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value",
-      stackId: "1",
-      data: data2,
-    };
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <AreaChart width={500} height={400}>
-        <XAxis dataKey="name" allowDuplicatedCategory={false} />
-        <YAxis dataKey="value" />
-        <Tooltip />
-        <Area
-          isAnimationActive={false}
-          data={areaSettings1.data}
-          type="monotone"
-          dataKey={areaSettings1.dataKey}
-          stackId={areaSettings1.stackId}
-          id={areaSettings1.id}
-          stroke="red"
-          fill="red"
-        />
-        <Area
-          isAnimationActive={false}
-          data={areaSettings2.data}
-          type="monotone"
-          dataKey={areaSettings2.dataKey}
-          stackId={areaSettings2.stackId}
-          id={areaSettings2.id}
-          stroke="green"
-          fill="green"
-        />
-        <Area
-          isAnimationActive={false}
-          data={data3}
-          type="monotone"
-          dataKey="value"
-          stackId="1"
-          id="area3"
-          stroke="blue"
-          fill="blue"
-        />
-        {props.children}
-      </AreaChart>
-    ));
-
-    it("should select displayed data", () => {
-      const { spy } = renderTestCase((state) => selectDisplayedData(state, "xAxis", 0, false));
-      const expected: ChartData = [
-        { name: "a", value: 5 },
-        { name: "b", value: 25 },
-        { name: "a", value: 10 },
-        { name: "b", value: 10 },
-        { name: "a", value: 23 },
-        { name: "b", value: 13 },
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select stack groups for all areas", () => {
-      const { spy } = renderTestCase((state) => selectStackGroups(state, "yAxis", 0, false));
-      const expected: Record<StackId, StackGroup> = {
-        "1": {
-          graphicalItems: [
-            expectGraphicalItemSettings({
-              id: "area1",
-              barSize: undefined,
-              data: [
-                { name: "a", value: 5 },
-                { name: "b", value: 25 },
-              ],
-              dataKey: "value",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              id: "area2",
-              barSize: undefined,
-              data: [
-                { name: "a", value: 10 },
-                { name: "b", value: 10 },
-              ],
-              dataKey: "value",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              id: "area3",
-              barSize: undefined,
-              data: [
-                { name: "a", value: 23 },
-                { name: "b", value: 13 },
-              ],
-              dataKey: "value",
-              stackId: "1",
-              hide: false,
-            }),
-          ],
-          stackedData: expect.toBeRechartsStackedData([
-            [
-              [0, 5],
-              [0, 25],
-            ],
-            [
-              [5, 15],
-              [25, 35],
-            ],
-            [
-              [15, 38],
-              [35, 48],
-            ],
-          ]),
-        },
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the first area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings1.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [0, 5],
-        [0, 25],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the second area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings2.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [5, 15],
-        [25, 35],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the first area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings1.id, false));
-      const expected = {
-        baseLine: [
-          {
-            x: 65,
-            y: 365,
-            payload: {
-              name: "a",
-              value: 5,
-            },
-          },
-          {
-            x: 495,
-            y: 365,
-            payload: {
-              name: "b",
-              value: 25,
-            },
-          },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: { name: "a", value: 5 },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
-            x: 65,
-            y: 335,
-          },
-          {
-            payload: { name: "b", value: 25 },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
-            x: 495,
-            y: 214.99999999999997,
-          },
-        ],
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the second area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings2.id, false));
-      expectLastCalledWith(spy, {
-        baseLine: [
-          {
-            x: 65,
-            y: 335,
-            payload: {
-              name: "a",
-              value: 10,
-            },
-          },
-          {
-            x: 495,
-            y: 214.99999999999997,
-            payload: {
-              name: "b",
-              value: 10,
-            },
-          },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: { name: "a", value: 10 },
-            // this should be 5 -> 15 because the first area has 5 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
-            x: 65,
-            y: 275,
-          },
-          {
-            payload: { name: "b", value: 10 },
-            // this should be 25 -> 35 because the first area has 25 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
-            x: 495,
-            y: 154.99999999999997,
-          },
-        ],
-      });
-    });
-
-    it("should render three stacked areas", () => {
-      const { container } = renderTestCase();
-      expectAreaCurve(container, [
-        { d: "M65,335L495,215" },
-        { d: "M65,275L495,155" },
-        { d: "M65,137L495,77" },
-      ]);
-    });
-  });
-
-  describe("with multiple data arrays with the same dataKey, and without explicit XAxis dataKey", () => {
-    /*
-     * https://github.com/recharts/recharts/issues/6073
-     * https://stackblitz.com/edit/react-qarbpqfn?file=src%2FExample.tsx
-     * This is a regression test for the issue where multiple Area components with the same stackId
-     * were not stacked correctly when they had individual data arrays.
-     *
-     * This test shows the problem, but it's not actually fixed in the code.
-     */
-
-    const areaSettings1: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area1",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value",
-      stackId: "1",
-      data: data1,
-    };
-
-    const areaSettings2: AreaSettings = {
-      hide: false,
-      isPanorama: false,
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-      barSize: undefined,
-      id: "area2",
-      connectNulls: false,
-      baseValue: undefined,
-      dataKey: "value",
-      stackId: "1",
-      data: data2,
-    };
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <AreaChart width={500} height={400}>
-        <XAxis allowDuplicatedCategory={false} />
-        <YAxis dataKey="value" />
-        <Tooltip />
-        <Area
-          isAnimationActive={false}
-          data={areaSettings1.data}
-          type="monotone"
-          dataKey={areaSettings1.dataKey}
-          stackId={areaSettings1.stackId}
-          id={areaSettings1.id}
-          stroke="red"
-          fill="red"
-        />
-        <Area
-          isAnimationActive={false}
-          data={areaSettings2.data}
-          type="monotone"
-          dataKey={areaSettings2.dataKey}
-          stackId={areaSettings2.stackId}
-          id={areaSettings2.id}
-          stroke="green"
-          fill="green"
-        />
-        <Area
-          isAnimationActive={false}
-          data={data3}
-          type="monotone"
-          dataKey="value"
-          stackId="1"
-          id="area3"
-          stroke="blue"
-          fill="blue"
-        />
-        {props.children}
-      </AreaChart>
-    ));
-
-    it("should select displayed data", () => {
-      const { spy } = renderTestCase((state) => selectDisplayedData(state, "xAxis", 0, false));
-      const expected: ChartData = [
-        { name: "a", value: 5 },
-        { name: "b", value: 25 },
-        { name: "a", value: 10 },
-        { name: "b", value: 10 },
-        { name: "a", value: 23 },
-        { name: "b", value: 13 },
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select stack groups for all areas", () => {
-      const { spy } = renderTestCase((state) => selectStackGroups(state, "yAxis", 0, false));
-      const expected: Record<StackId, StackGroup> = {
-        "1": {
-          graphicalItems: [
-            expectGraphicalItemSettings({
-              id: "area1",
-              barSize: undefined,
-              data: [
-                { name: "a", value: 5 },
-                { name: "b", value: 25 },
-              ],
-              dataKey: "value",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              id: "area2",
-              barSize: undefined,
-              data: [
-                { name: "a", value: 10 },
-                { name: "b", value: 10 },
-              ],
-              dataKey: "value",
-              stackId: "1",
-              hide: false,
-            }),
-            expectGraphicalItemSettings({
-              id: "area3",
-              barSize: undefined,
-              data: [
-                { name: "a", value: 23 },
-                { name: "b", value: 13 },
-              ],
-              dataKey: "value",
-              stackId: "1",
-              hide: false,
-            }),
-          ],
-          stackedData: expect.toBeRechartsStackedData([
-            [
-              [0, 5],
-              [0, 25],
-            ],
-            [
-              [5, 15],
-              [25, 35],
-            ],
-            [
-              [15, 38],
-              [35, 48],
-            ],
-          ]),
-        },
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the first area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings1.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [0, 5],
-        [0, 25],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select data stacks for the second area", () => {
-      const { spy } = renderTestCase((state) =>
-        selectGraphicalItemStackedData(state, areaSettings2.id, false),
-      );
-      const expected: ExpectedStackedDataSeries = [
-        [5, 15],
-        [25, 35],
-      ];
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the first area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings1.id, false));
-      const expected = {
-        baseLine: [
-          {
-            x: 65,
-            y: 365,
-            payload: {
-              name: "a",
-              value: 5,
-            },
-          },
-          {
-            x: 151,
-            y: 365,
-            payload: {
-              name: "b",
-              value: 25,
-            },
-          },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: { name: "a", value: 5 },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
-            x: 65,
-            y: 335,
-          },
-          {
-            payload: { name: "b", value: 25 },
-            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
-            x: 151,
-            y: 214.99999999999997,
-          },
-        ],
-      };
-      expectLastCalledWith(spy, expected);
-    });
-
-    it("should select points for the second area", () => {
-      const { spy } = renderTestCase((state) => selectArea(state, areaSettings2.id, false));
-      expectLastCalledWith(spy, {
-        baseLine: [
-          {
-            x: 65,
-            y: 335,
-            payload: {
-              name: "a",
-              value: 10,
-            },
-          },
-          {
-            x: 151,
-            y: 214.99999999999997,
-            payload: {
-              name: "b",
-              value: 10,
-            },
-          },
-        ],
-        isRange: false,
-        points: [
-          {
-            payload: { name: "a", value: 10 },
-            // this should be 5 -> 15 because the first area has 5 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
-            x: 65,
-            y: 275,
-          },
-          {
-            payload: { name: "b", value: 10 },
-            // this should be 25 -> 35 because the first area has 25 and the second area has 10
-            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
-            x: 151,
-            y: 154.99999999999997,
-          },
-        ],
-      });
-    });
-
-    it("should render three stacked areas", () => {
-      const { container } = renderTestCase();
-      expectAreaCurve(container, [
-        { d: "M65,335L151,215" },
-        { d: "M65,275L151,155" },
-        { d: "M65,137L151,77" },
-      ]);
-    });
-  });
-
-  describe.todo("when dataKey is defined on YAxis instead of individual Areas");
-  describe("when XAxis is type number", () => {
-    const numericData = [
-      { x: 1, value1: 5, value2: 10 },
-      { x: 2, value1: 15, value2: 20 },
-      { x: 3, value1: 25, value2: 10 },
-    ];
-
-    describe('with stackOffset="expand"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <AreaChart width={400} height={400} data={numericData} stackOffset="expand">
-          <XAxis dataKey="x" type="number" />
-          <YAxis />
-          <Area isAnimationActive={false} dataKey="value1" stackId="1" />
-          <Area isAnimationActive={false} dataKey="value2" stackId="1" />
-          {props.children}
-        </AreaChart>
-      ));
-
-      it("should render area curves when XAxis type is number", () => {
-        const { container } = renderTestCase();
-        const areaCurves = container.querySelectorAll(".recharts-area-curve");
-        expect(areaCurves.length).toBe(2);
-        areaCurves.forEach((curve) => {
-          const d = curve.getAttribute("d");
-          expect(d).toBeTruthy();
-          expect(d).not.toBe("");
-        });
-      });
-
-      it("should have Y axis domain [0, 1] for expand offset", () => {
-        const { spy } = renderTestCase((state) =>
-          selectAxisDomain(state, "yAxis", defaultAxisId, false),
-        );
-        expectLastCalledWith(spy, [0, 1]);
-      });
-
-      it("should not override X axis domain to [0, 1]", () => {
-        const { spy } = renderTestCase((state) =>
-          selectAxisDomain(state, "xAxis", defaultAxisId, false),
-        );
-        const result = spy.mock.lastCall?.[0];
-        expect(result).toBeDefined();
-        expect(result).not.toEqual([0, 1]);
-      });
-    });
-  });
-  describe.todo("vertical charts");
-});