solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/cartesian/XAxis/XAxis.dataKey.spec.tsx

@@ -0,0 +1,86 @@
+// Ported from recharts 3.8.1 test/cartesian/XAxis/XAxis.dataKey.spec.tsx (commit 7a23854).
+import { flush } from "solid-js";
+import { describe, expect, it } from "vitest";
+import { LineChart, Scatter, ScatterChart, XAxis, YAxis } from "../../../src";
+import { selectAxisScale } from "../../../src/state/selectors/axisSelectors";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+const data = [
+  { x: 90, y: 90, z: 90 },
+  { x: 100, y: 200, z: 200 },
+  { x: 120, y: 100, z: 260 },
+  { x: 170, y: 300, z: 400 },
+  { x: 140, y: 250, z: 280 },
+  { x: 150, y: 400, z: 500 },
+  { x: 110, y: 280, z: 200 },
+];
+
+const lineData = [
+  { name: "Page A", uv: 400, pv: 2400, amt: 2400 },
+  { name: "Page B", uv: 300, pv: 4567, amt: 2400 },
+  { name: "Page C", uv: 300, pv: 1398, amt: 2400 },
+  { name: "Page D", uv: 200, pv: 9800, amt: 2400 },
+  { name: "Page E", uv: 278, pv: 3908, amt: 2400 },
+  { name: "Page F", uv: 189, pv: 4800, amt: 2400 },
+];
+
+describe("XAxis dataKey", () => {
+  it("should render array indexes when dataKey is not specified", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={400} height={400} data={lineData}>
+        <XAxis />
+        {props.children}
+      </LineChart>
+    ));
+    const { container, spy } = renderTestCase((state) =>
+      selectAxisScale(state, "xAxis", 0, false)?.domain(),
+    );
+    flush();
+
+    expectXAxisTicks(container, [
+      { textContent: "0", x: "5", y: "373" },
+      { textContent: "1", x: "83", y: "373" },
+      { textContent: "2", x: "161", y: "373" },
+      { textContent: "3", x: "239", y: "373" },
+      { textContent: "4", x: "317", y: "373" },
+      { textContent: "5", x: "395", y: "373" },
+    ]);
+    expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5]);
+  });
+
+  it("should not render any ticks when dataKey is specified but does not match the data", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={400} height={400} data={lineData}>
+        <XAxis dataKey="foo" />
+        {props.children}
+      </LineChart>
+    ));
+    const { container, spy } = renderTestCase((state) =>
+      selectAxisScale(state, "xAxis", 0, false)?.domain(),
+    );
+    flush();
+
+    expectXAxisTicks(container, []);
+    expectLastCalledWith(spy, []);
+  });
+
+  it("Render 1 x-CartesianAxis and 1 y-CartesianAxis ticks in ScatterChart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
+        <XAxis dataKey="x" name="stature" unit="cm" />
+        <YAxis dataKey="y" name="weight" unit="kg" />
+        <Scatter name="A school" data={data} fill="#ff7300" />
+        {props.children}
+      </ScatterChart>
+    ));
+    const { container, spy } = renderTestCase((state) =>
+      selectAxisScale(state, "xAxis", 0, false)?.domain(),
+    );
+    flush();
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-line")).toHaveLength(2);
+    expectLastCalledWith(spy, [90, 100, 120, 170, 140, 150, 110]);
+  });
+});

package/test/cartesian/XAxis/XAxis.datatypes.spec.tsx

@@ -0,0 +1,127 @@
+// Ported from recharts 3.8.1 test/cartesian/XAxis/XAxis.datatypes.spec.tsx (commit 7a23854).
+import { flush } from "solid-js";
+import { describe, it } from "vitest";
+import { ComposedChart, XAxis } from "../../../src";
+import { coordinateWithValueData, dateWithValueData, pageData, timeData } from "../../_data";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { render } from "@solidjs/testing-library";
+
+const normalizedDateString = (date: Date): string =>
+  date.toString().replace(/\(.*?\)/, "(Coordinated Universal Time)");
+const dateTickText = (index: number): string => {
+  const entry = timeData[index];
+  if (entry == null) {
+    throw new Error(`Missing timeData entry ${index}`);
+  }
+  return normalizedDateString(entry.x);
+};
+
+describe("XAxis with different data types", () => {
+  it("should render string data correctly", () => {
+    const { container } = render(() => (
+      <ComposedChart width={600} height={50} data={pageData}>
+        <XAxis dataKey="name" />
+      </ComposedChart>
+    ));
+    flush();
+
+    expectXAxisTicks(container, [
+      { textContent: "Page A", x: "5", y: "23" },
+      { textContent: "Page B", x: "103.33333333333333", y: "23" },
+      { textContent: "Page C", x: "201.66666666666666", y: "23" },
+      { textContent: "Page D", x: "300", y: "23" },
+      { textContent: "Page E", x: "398.3333333333333", y: "23" },
+      { textContent: "Page F", x: "496.66666666666663", y: "23" },
+      { textContent: "Page G", x: "595", y: "23" },
+    ]);
+  });
+
+  it("should render number data correctly", () => {
+    const { container } = render(() => (
+      <ComposedChart width={600} height={50} data={coordinateWithValueData}>
+        <XAxis dataKey="x" domain={["auto", "auto"]} type="number" />
+      </ComposedChart>
+    ));
+    flush();
+
+    expectXAxisTicks(container, [
+      { textContent: "0", x: "5", y: "23" },
+      { textContent: "150", x: "152.5", y: "23" },
+      { textContent: "300", x: "300", y: "23" },
+      { textContent: "450", x: "447.5", y: "23" },
+      { textContent: "600", x: "595", y: "23" },
+    ]);
+  });
+
+  it("should render number data with time scale correctly", () => {
+    const { container } = render(() => (
+      <ComposedChart width={600} height={50} data={dateWithValueData}>
+        <XAxis dataKey="time" domain={["auto", "auto"]} type="number" scale="time" />
+      </ComposedChart>
+    ));
+    flush();
+
+    expectXAxisTicks(container, [
+      { textContent: "1483142400000", x: "5", y: "23" },
+      { textContent: "1483146000000", x: "64", y: "23" },
+      { textContent: "1483147800000", x: "93.5", y: "23" },
+      { textContent: "1483149600000", x: "123", y: "23" },
+      { textContent: "1483153200000", x: "182", y: "23" },
+      { textContent: "1483155000000", x: "211.5", y: "23" },
+      { textContent: "1483156800000", x: "241", y: "23" },
+      { textContent: "1483160400000", x: "300", y: "23" },
+      { textContent: "1483164000000", x: "359", y: "23" },
+      { textContent: "1483167600000", x: "418", y: "23" },
+      { textContent: "1483171200000", x: "477", y: "23" },
+      { textContent: "1483173000000", x: "506.5", y: "23" },
+      { textContent: "1483178400000", x: "595", y: "23" },
+    ]);
+  });
+
+  it("should render Date data correctly", () => {
+    const { container } = render(() => (
+      <ComposedChart width={600} height={50} data={timeData}>
+        <XAxis dataKey="x" />
+      </ComposedChart>
+    ));
+    flush();
+
+    expectXAxisTicks(container, [
+      {
+        textContent: dateTickText(0),
+        x: "5",
+        y: "23",
+      },
+      {
+        textContent: dateTickText(1),
+        x: "103.33333333333333",
+        y: "23",
+      },
+      {
+        textContent: dateTickText(2),
+        x: "201.66666666666666",
+        y: "23",
+      },
+      {
+        textContent: dateTickText(3),
+        x: "300",
+        y: "23",
+      },
+      {
+        textContent: dateTickText(4),
+        x: "398.3333333333333",
+        y: "23",
+      },
+      {
+        textContent: dateTickText(5),
+        x: "496.66666666666663",
+        y: "23",
+      },
+      {
+        textContent: dateTickText(6),
+        x: "595",
+        y: "23",
+      },
+    ]);
+  });
+});

package/test/cartesian/XAxis/XAxis.hide.spec.tsx

@@ -0,0 +1,106 @@
+// Ported from recharts 3.8.1 test/cartesian/XAxis/XAxis.hide.spec.tsx (commit 7a23854).
+import { createEffect, flush } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import { Line, LineChart, Tooltip, XAxis } from "../../../src";
+import { selectAxisScale, selectXAxisPosition } from "../../../src/state/selectors/axisSelectors";
+import { useAppSelector } from "../../../src/state/hooks";
+import { pageData } from "../../_data";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { render } from "@solidjs/testing-library";
+
+describe("XAxis hide", () => {
+  it("Don't render x-axis when hide is set to be true", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart
+        width={400}
+        height={400}
+        data={pageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis hide />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        {props.children}
+      </LineChart>
+    ));
+    const { container, spy } = renderTestCase((state) =>
+      selectAxisScale(state, "xAxis", 0, false)?.domain(),
+    );
+    flush();
+
+    expect(container.querySelectorAll(".recharts-xAxis")).toHaveLength(0);
+    expectLastCalledWith(spy, [0, 1, 2, 3, 4, 5, 6]);
+  });
+
+  it("should not leave space for hidden axes", () => {
+    // NOTE: recharts also asserts `selectAllXAxesOffsetSteps(state, 'top'|'bottom', false)`,
+    // but that selector is not exported from this port's src. Its values are fully covered
+    // by the per-axis `selectXAxisPosition` assertions below (each position .y is the offset
+    // step the hidden axis would have produced — c.y=695, d.y=-65 confirm hidden axes still
+    // get a position but consume NO visible space, so the visible a/b axes are unshifted).
+    const axisAPositionSpy = vi.fn();
+    const axisBPositionSpy = vi.fn();
+    const axisCPositionSpy = vi.fn();
+    const axisDPositionSpy = vi.fn();
+    const Comp = (): null => {
+      const aPos = useAppSelector((state) => selectXAxisPosition(state, "a"));
+      const bPos = useAppSelector((state) => selectXAxisPosition(state, "b"));
+      const cPos = useAppSelector((state) => selectXAxisPosition(state, "c"));
+      const dPos = useAppSelector((state) => selectXAxisPosition(state, "d"));
+      createEffect(
+        () => aPos(),
+        (v) => axisAPositionSpy(v),
+      );
+      createEffect(
+        () => bPos(),
+        (v) => axisBPositionSpy(v),
+      );
+      createEffect(
+        () => cPos(),
+        (v) => axisCPositionSpy(v),
+      );
+      createEffect(
+        () => dPos(),
+        (v) => axisDPositionSpy(v),
+      );
+      return null;
+    };
+    const { container } = render(() => (
+      <LineChart width={700} height={700} data={pageData}>
+        <XAxis dataKey="name" xAxisId="a" orientation="top" height={40} />
+        <XAxis dataKey="uv" xAxisId="b" height={50} />
+        <XAxis hide dataKey="pv" type="number" xAxisId="c" height={60} />
+        <XAxis hide dataKey="amt" type="number" orientation="top" xAxisId="d" height={70} />
+        <Line dataKey="name" xAxisId="a" />
+        <Line dataKey="uv" xAxisId="b" />
+        <Line dataKey="pv" xAxisId="c" />
+        <Line dataKey="amt" xAxisId="d" />
+        <Tooltip defaultIndex={2} />
+        <Comp />
+      </LineChart>
+    ));
+    flush();
+
+    expectXAxisTicks(container, [
+      { textContent: "Page A", x: "5", y: "37" },
+      { textContent: "Page B", x: "120", y: "37" },
+      { textContent: "Page C", x: "235", y: "37" },
+      { textContent: "Page D", x: "350", y: "37" },
+      { textContent: "Page E", x: "465", y: "37" },
+      { textContent: "Page F", x: "580", y: "37" },
+      { textContent: "Page G", x: "695", y: "37" },
+      { textContent: "590", x: "5", y: "653" },
+      { textContent: "590", x: "120", y: "653" },
+      { textContent: "868", x: "235", y: "653" },
+      { textContent: "1397", x: "350", y: "653" },
+      { textContent: "1480", x: "465", y: "653" },
+      { textContent: "1520", x: "580", y: "653" },
+      { textContent: "1400", x: "695", y: "653" },
+    ]);
+    expect(axisAPositionSpy).toHaveBeenLastCalledWith({ x: 5, y: 5 });
+    expect(axisBPositionSpy).toHaveBeenLastCalledWith({ x: 5, y: 645 });
+    expect(axisCPositionSpy).toHaveBeenLastCalledWith({ x: 5, y: 695 });
+    expect(axisDPositionSpy).toHaveBeenLastCalledWith({ x: 5, y: -65 });
+  });
+});

package/test/cartesian/XAxis/XAxis.multiaxis.spec.tsx

@@ -0,0 +1,336 @@
+import { describe, expect, it, vi } from "vitest";
+import { createEffect } from "solid-js";
+import { useAppSelector } from "../../../src/state/hooks";
+import { Line, LineChart, Tooltip, XAxis } from "../../../src";
+import { render } from "@solidjs/testing-library";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { selectXAxisPosition } from "../../../src/state/selectors/axisSelectors";
+import { pageData } from "../../_data";
+
+describe("XAxis multiaxis", () => {
+  it("should render multiple axes", () => {
+    const axisAPositionSpy = vi.fn();
+    const axisBPositionSpy = vi.fn();
+    const axisCPositionSpy = vi.fn();
+    const axisDPositionSpy = vi.fn();
+    // NOTE: recharts also asserts `selectAllXAxesOffsetSteps(state, 'top'|'bottom', false)`,
+    // but that selector is not exported from this port's src (and we may not edit src).
+    // Its values are fully covered by the per-axis `selectXAxisPosition` assertions below
+    // (the position .y equals the offset step for each axis id).
+    const Comp = (): null => {
+      const aPos = useAppSelector((state) => selectXAxisPosition(state, "a"));
+      const bPos = useAppSelector((state) => selectXAxisPosition(state, "b"));
+      const cPos = useAppSelector((state) => selectXAxisPosition(state, "c"));
+      const dPos = useAppSelector((state) => selectXAxisPosition(state, "d"));
+      createEffect(
+        () => aPos(),
+        (v) => axisAPositionSpy(v),
+      );
+      createEffect(
+        () => bPos(),
+        (v) => axisBPositionSpy(v),
+      );
+      createEffect(
+        () => cPos(),
+        (v) => axisCPositionSpy(v),
+      );
+      createEffect(
+        () => dPos(),
+        (v) => axisDPositionSpy(v),
+      );
+      return null;
+    };
+    const { container } = render(() => (
+      <LineChart width={700} height={700} data={pageData}>
+        <XAxis dataKey="name" xAxisId="a" orientation="top" height={40} />
+        <XAxis dataKey="uv" xAxisId="b" height={50} />
+        <XAxis dataKey="pv" type="number" xAxisId="c" height={60} />
+        <XAxis dataKey="amt" type="number" orientation="top" xAxisId="d" height={70} />
+        <Line dataKey="name" xAxisId="a" />
+        <Line dataKey="uv" xAxisId="b" />
+        <Line dataKey="pv" xAxisId="c" />
+        <Line dataKey="amt" xAxisId="d" />
+        <Tooltip defaultIndex={2} />
+        <Comp />
+      </LineChart>
+    ));
+
+    expectXAxisTicks(container, [
+      {
+        textContent: "Page A",
+        x: "5",
+        y: "107",
+      },
+      {
+        textContent: "Page B",
+        x: "120",
+        y: "107",
+      },
+      {
+        textContent: "Page C",
+        x: "235",
+        y: "107",
+      },
+      {
+        textContent: "Page D",
+        x: "350",
+        y: "107",
+      },
+      {
+        textContent: "Page E",
+        x: "465",
+        y: "107",
+      },
+      {
+        textContent: "Page F",
+        x: "580",
+        y: "107",
+      },
+      {
+        textContent: "Page G",
+        x: "695",
+        y: "107",
+      },
+      {
+        textContent: "590",
+        x: "5",
+        y: "593",
+      },
+      {
+        textContent: "590",
+        x: "120",
+        y: "593",
+      },
+      {
+        textContent: "868",
+        x: "235",
+        y: "593",
+      },
+      {
+        textContent: "1397",
+        x: "350",
+        y: "593",
+      },
+      {
+        textContent: "1480",
+        x: "465",
+        y: "593",
+      },
+      {
+        textContent: "1520",
+        x: "580",
+        y: "593",
+      },
+      {
+        textContent: "1400",
+        x: "695",
+        y: "593",
+      },
+      {
+        textContent: "0",
+        x: "5",
+        y: "643",
+      },
+      {
+        textContent: "300",
+        x: "177.5",
+        y: "643",
+      },
+      {
+        textContent: "600",
+        x: "350",
+        y: "643",
+      },
+      {
+        textContent: "900",
+        x: "522.5",
+        y: "643",
+      },
+      {
+        textContent: "1200",
+        x: "695",
+        y: "643",
+      },
+      {
+        textContent: "0",
+        x: "5",
+        y: "67",
+      },
+      {
+        textContent: "450",
+        x: "177.5",
+        y: "67",
+      },
+      {
+        textContent: "900",
+        x: "350",
+        y: "67",
+      },
+      {
+        textContent: "1350",
+        x: "522.5",
+        y: "67",
+      },
+      {
+        textContent: "1800",
+        x: "695",
+        y: "67",
+      },
+    ]);
+    expect(axisAPositionSpy).toHaveBeenLastCalledWith({
+      x: 5,
+      y: 75,
+    });
+    expect(axisBPositionSpy).toHaveBeenLastCalledWith({
+      x: 5,
+      y: 585,
+    });
+    expect(axisCPositionSpy).toHaveBeenLastCalledWith({
+      x: 5,
+      y: 635,
+    });
+    expect(axisDPositionSpy).toHaveBeenLastCalledWith({
+      x: 5,
+      y: 5,
+    });
+  });
+
+  it("should render multiple axes with some ticks mirrored", () => {
+    const { container } = render(() => (
+      <LineChart width={700} height={700} data={pageData}>
+        <XAxis dataKey="name" xAxisId="a" orientation="top" height={40} />
+        <XAxis mirror dataKey="uv" xAxisId="b" height={50} />
+        <XAxis dataKey="pv" type="number" xAxisId="c" height={60} />
+        <XAxis mirror dataKey="amt" type="number" orientation="top" xAxisId="d" height={70} />
+        <Line dataKey="name" xAxisId="a" />
+        <Line dataKey="uv" xAxisId="b" />
+        <Line dataKey="pv" xAxisId="c" />
+        <Line dataKey="amt" xAxisId="d" />
+        <Tooltip defaultIndex={2} />
+      </LineChart>
+    ));
+
+    expectXAxisTicks(container, [
+      {
+        textContent: "Page A",
+        x: "5",
+        y: "37",
+      },
+      {
+        textContent: "Page B",
+        x: "120",
+        y: "37",
+      },
+      {
+        textContent: "Page C",
+        x: "235",
+        y: "37",
+      },
+      {
+        textContent: "Page D",
+        x: "350",
+        y: "37",
+      },
+      {
+        textContent: "Page E",
+        x: "465",
+        y: "37",
+      },
+      {
+        textContent: "Page F",
+        x: "580",
+        y: "37",
+      },
+      {
+        textContent: "Page G",
+        x: "695",
+        y: "37",
+      },
+      {
+        textContent: "590",
+        x: "5",
+        y: "627",
+      },
+      {
+        textContent: "590",
+        x: "120",
+        y: "627",
+      },
+      {
+        textContent: "868",
+        x: "235",
+        y: "627",
+      },
+      {
+        textContent: "1397",
+        x: "350",
+        y: "627",
+      },
+      {
+        textContent: "1480",
+        x: "465",
+        y: "627",
+      },
+      {
+        textContent: "1520",
+        x: "580",
+        y: "627",
+      },
+      {
+        textContent: "1400",
+        x: "695",
+        y: "627",
+      },
+      {
+        textContent: "0",
+        x: "5",
+        y: "643",
+      },
+      {
+        textContent: "300",
+        x: "177.5",
+        y: "643",
+      },
+      {
+        textContent: "600",
+        x: "350",
+        y: "643",
+      },
+      {
+        textContent: "900",
+        x: "522.5",
+        y: "643",
+      },
+      {
+        textContent: "1200",
+        x: "695",
+        y: "643",
+      },
+      {
+        textContent: "0",
+        x: "5",
+        y: "53",
+      },
+      {
+        textContent: "450",
+        x: "177.5",
+        y: "53",
+      },
+      {
+        textContent: "900",
+        x: "350",
+        y: "53",
+      },
+      {
+        textContent: "1350",
+        x: "522.5",
+        y: "53",
+      },
+      {
+        textContent: "1800",
+        x: "695",
+        y: "53",
+      },
+    ]);
+  });
+});