solid-recharts 0.2.1 → 1.0.0

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

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

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

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

@@ -1,336 +0,0 @@
-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",
-      },
-    ]);
-  });
-});