solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,265 @@
+import { describe, expect, it, vi } from "vitest";
+import { createEffect } from "solid-js";
+import {
+  BarChart,
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "../../../src";
+import {
+  selectRenderableAxisSettings,
+  selectCartesianGraphicalItemsData,
+  selectDisplayedData,
+} from "../../../src/state/selectors/axisSelectors";
+import { useAppSelector } from "../../../src/state/hooks";
+import { render } from "@solidjs/testing-library";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
+import type { XAxisSettings } from "../../../src/state/cartesianAxisSlice";
+import { pageData } from "../../_data";
+import { useIsPanorama } from "../../../src/context/PanoramaContext";
+
+describe("<XAxis />", () => {
+  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 },
+  ];
+
+  describe("layout=vertical", () => {
+    it.each(["category", undefined] as const)(
+      "should render categorical XAxis when type=%s",
+      (axisDomainType) => {
+        const axisDomainSpy = vi.fn();
+        const { container } = render(() => (
+          <BarChart width={300} height={300} layout="vertical" data={data}>
+            <XAxis dataKey="z" type={axisDomainType} />
+            <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+          </BarChart>
+        ));
+        expectXAxisTicks(container, [
+          {
+            textContent: "90",
+            x: "29.166666666666668",
+            y: "273",
+          },
+          {
+            textContent: "200",
+            x: "77.5",
+            y: "273",
+          },
+          {
+            textContent: "260",
+            x: "125.83333333333334",
+            y: "273",
+          },
+          {
+            textContent: "400",
+            x: "174.16666666666666",
+            y: "273",
+          },
+          {
+            textContent: "280",
+            x: "222.5",
+            y: "273",
+          },
+          {
+            textContent: "500",
+            x: "270.83333333333337",
+            y: "273",
+          },
+        ]);
+        expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 200, 260, 400, 280, 500]);
+      },
+    );
+
+    it.each(["category", undefined] as const)(
+      "should render categorical XAxis, but ignore allowDuplicatedCategory when type=%s",
+      (axisDomainType) => {
+        const axisDomainSpy = vi.fn();
+        const { container } = render(() => (
+          <BarChart width={300} height={300} layout="vertical" data={data}>
+            <XAxis dataKey="z" type={axisDomainType} allowDuplicatedCategory />
+            <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+          </BarChart>
+        ));
+        expectXAxisTicks(container, [
+          {
+            textContent: "90",
+            x: "29.166666666666668",
+            y: "273",
+          },
+          {
+            textContent: "200",
+            x: "77.5",
+            y: "273",
+          },
+          {
+            textContent: "260",
+            x: "125.83333333333334",
+            y: "273",
+          },
+          {
+            textContent: "400",
+            x: "174.16666666666666",
+            y: "273",
+          },
+          {
+            textContent: "280",
+            x: "222.5",
+            y: "273",
+          },
+          {
+            textContent: "500",
+            x: "270.83333333333337",
+            y: "273",
+          },
+        ]);
+        expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 200, 260, 400, 280, 500]);
+      },
+    );
+
+    it("should allow switching to number", () => {
+      const axisDomainSpy = vi.fn();
+      const { container } = render(() => (
+        <BarChart width={300} height={300} layout="vertical" data={data}>
+          <XAxis dataKey="z" type="number" />
+          <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+        </BarChart>
+      ));
+      expectXAxisTicks(container, [
+        {
+          textContent: "0",
+          x: "5",
+          y: "273",
+        },
+        {
+          textContent: "150",
+          x: "77.5",
+          y: "273",
+        },
+        {
+          textContent: "300",
+          x: "150",
+          y: "273",
+        },
+        {
+          textContent: "450",
+          x: "222.5",
+          y: "273",
+        },
+        {
+          textContent: "600",
+          x: "295",
+          y: "273",
+        },
+      ]);
+      expect(axisDomainSpy).toHaveBeenLastCalledWith([0, 600]);
+    });
+
+    it("should render with in LineChart VerticalWithSpecifiedDomain", () => {
+      const axisDomainSpy = vi.fn();
+      const axisSettingsSpy = vi.fn();
+      const displayedDataSpy = vi.fn();
+      const itemDataSpy = vi.fn();
+      const Comp = (): null => {
+        const isPanorama = useIsPanorama();
+        const settings = useAppSelector((state) => selectRenderableAxisSettings(state, "xAxis", 0));
+        const displayed = useAppSelector((state) =>
+          selectDisplayedData(state, "xAxis", 0, isPanorama),
+        );
+        const itemData = useAppSelector((state) =>
+          selectCartesianGraphicalItemsData(state, "xAxis", 0),
+        );
+        createEffect(
+          () => settings(),
+          (v) => axisSettingsSpy(v),
+        );
+        createEffect(
+          () => displayed(),
+          (v) => displayedDataSpy(v),
+        );
+        createEffect(
+          () => itemData(),
+          (v) => itemDataSpy(v),
+        );
+        return null;
+      };
+      const { container } = render(() => (
+        <LineChart
+          layout="vertical"
+          width={500}
+          height={300}
+          data={pageData}
+          margin={{
+            top: 20,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis type="number" domain={[0, "dataMax + 1000"]} />
+          <YAxis dataKey="name" type="category" />
+          <Legend />
+          <Line dataKey="pv" stroke="#8884d8" />
+          <Line dataKey="uv" stroke="#82ca9d" />
+          <Tooltip />
+          <Comp />
+          <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+        </LineChart>
+      ));
+      expectXAxisTicks(container, [
+        { textContent: "0", x: "80", y: "273" },
+        { textContent: "650", x: "180.59523809523813", y: "273" },
+        { textContent: "1300", x: "281.1904761904762", y: "273" },
+        { textContent: "1950", x: "381.7857142857143", y: "273" },
+        { textContent: "2520", x: "470", y: "273" },
+      ]);
+      const expectedSettings: XAxisSettings = {
+        angle: 0,
+        minTickGap: 5,
+        tick: true,
+        tickFormatter: undefined,
+        interval: "preserveEnd",
+        name: undefined,
+        unit: undefined,
+        hide: false,
+        mirror: false,
+        orientation: "bottom",
+        height: 30,
+        ticks: undefined,
+        includeHidden: false,
+        allowDataOverflow: false,
+        allowDecimals: true,
+        allowDuplicatedCategory: true,
+        dataKey: undefined,
+        domain: [0, "dataMax + 1000"],
+        id: 0,
+        padding: {
+          left: 0,
+          right: 0,
+        },
+        scale: "auto",
+        tickCount: 5,
+        type: "number",
+        reversed: false,
+        niceTicks: "auto",
+      };
+      expect(axisSettingsSpy).toHaveBeenLastCalledWith(expectedSettings);
+      expect(itemDataSpy).toHaveBeenLastCalledWith([]);
+      expect(displayedDataSpy).toHaveBeenLastCalledWith(pageData);
+      expect(axisDomainSpy).toHaveBeenLastCalledWith([0, 2520]);
+    });
+  });
+
+  describe.todo("in vertical stacked BarChart");
+});

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

@@ -0,0 +1,54 @@
+// Ported from recharts 3.8.1 test/cartesian/XAxis.tickFormatter.spec.tsx (commit 7a23854).
+import { flush } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import { Line, LineChart, XAxis } from "../../src";
+import { PageData } from "../_data";
+import { expectXAxisTicks } from "../helper/expectAxisTicks";
+import { render } from "@solidjs/testing-library";
+
+describe("XAxis with custom tickFormatter", () => {
+  it("should render ticks formatted with tickFormatter", () => {
+    const tickFormatterSpy = vi.fn((value, index) => `formatted: ${value}: ${index}`);
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" tickFormatter={tickFormatterSpy} />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    ));
+    flush();
+
+    expectXAxisTicks(container, [
+      { textContent: "formatted: Page A: 0", x: "20", y: "358" },
+      { textContent: "formatted: Page B: 1", x: "92", y: "358" },
+      { textContent: "formatted: Page C: 2", x: "164", y: "358" },
+      { textContent: "formatted: Page D: 3", x: "236", y: "358" },
+      { textContent: "formatted: Page E: 4", x: "308", y: "358" },
+      { textContent: "formatted: Page F: 5", x: "380", y: "358" },
+    ]);
+  });
+
+  it("should call the tickFormatter with the correct parameters", () => {
+    const tickFormatterSpy = vi.fn((value, index) => `formatted: ${value}: ${index}`);
+    render(() => (
+      <LineChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" tickFormatter={tickFormatterSpy} />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    ));
+    flush();
+
+    expect(tickFormatterSpy).toHaveBeenCalled();
+    expect(tickFormatterSpy).toHaveBeenCalledWith("Page A", 0);
+    expect(tickFormatterSpy).toHaveBeenCalledWith("Page F", 5);
+  });
+});

package/test/cartesian/YAxis/YAxis.7362.derivedDomain.spec.tsx

@@ -0,0 +1,230 @@
+// Ported from recharts 3.9.1 test/cartesian/YAxis/YAxis.7362.derivedDomain.spec.tsx (commit 89fc87b).
+/**
+ * @fileOverview https://github.com/recharts/recharts/issues/7362
+ *
+ * Ticks-fallback for the derived/function-`domain` half of #7362.
+ *
+ * YAxis.7362.spec.tsx covers the LITERAL case: `type="number"` + `domain={[0, 100]}` +
+ * `ticks` + `allowDataOverflow` already renders the ladder on all-null/empty data,
+ * because a literal domain resolves without data.
+ *
+ * A NON-literal `domain` (a function bound, or 'auto'/'dataMin'/'dataMax') cannot
+ * resolve without data, so previously the scale never built and the axis rendered zero
+ * ticks even when explicit `ticks` were supplied. The fix: when the domain cannot
+ * be resolved without data, there is no data domain, `allowDataOverflow` is set,
+ * and explicit numeric `ticks` are present, fall back to
+ * `[min(ticks), max(ticks)]` so the explicit ladder still renders. See
+ * `combineNumericalDomain` in src/state/selectors/axisSelectors.ts.
+ *
+ * Negative guards below pin the boundaries: a resolvable literal domain still
+ * wins, data-present behavior is unchanged, and the fallback requires
+ * `allowDataOverflow`.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { Line, LineChart, XAxis, YAxis } from "../../../src";
+import type { AxisDomain, AxisTick } from "../../../src/util/types";
+import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
+import { expectYAxisTicks } from "../../helper/expectAxisTicks";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+import { render } from "@solidjs/testing-library";
+
+type Datum = { name: string; value: number | null };
+
+const explicitTicks = [0, 25, 50, 75, 100];
+const ladder = [
+  { textContent: "0", x: "57", y: "265" },
+  { textContent: "25", x: "57", y: "200" },
+  { textContent: "50", x: "57", y: "135" },
+  { textContent: "75", x: "57", y: "70" },
+  { textContent: "100", x: "57", y: "5" },
+];
+
+const allNullData: ReadonlyArray<Datum> = [
+  { name: "A", value: null },
+  { name: "B", value: null },
+  { name: "C", value: null },
+  { name: "D", value: null },
+];
+
+function renderChart(options: {
+  data: ReadonlyArray<Datum>;
+  domain: AxisDomain;
+  ticks?: ReadonlyArray<number>;
+  allowDataOverflow?: boolean;
+}) {
+  const ticks = options.ticks ?? explicitTicks;
+  const allowDataOverflow = options.allowDataOverflow ?? true;
+  const axisDomainSpy = vi.fn();
+  const renderResult = render(() => (
+    <LineChart width={500} height={300} data={options.data}>
+      <XAxis dataKey="name" />
+      <YAxis
+        type="number"
+        domain={options.domain}
+        allowDataOverflow={allowDataOverflow}
+        ticks={[...ticks]}
+      />
+      <Line
+        type="monotone"
+        dataKey="value"
+        stroke="#8884d8"
+        isAnimationActive={false}
+        connectNulls
+      />
+      <ExpectAxisDomain assert={axisDomainSpy} axisType="yAxis" />
+    </LineChart>
+  ));
+  return { ...renderResult, axisDomainSpy };
+}
+
+function yTickCount(container: Element): number {
+  return container.querySelectorAll(".recharts-yAxis .recharts-cartesian-axis-tick").length;
+}
+
+// Flexible variant for edge cases: optional/non-numeric ticks, tickCount-only, and extra chart children.
+function renderChartEx(options: {
+  data?: ReadonlyArray<Datum>;
+  domain: AxisDomain;
+  ticks?: ReadonlyArray<AxisTick>;
+  tickCount?: number;
+  allowDataOverflow?: boolean;
+}) {
+  const data = options.data ?? allNullData;
+  const allowDataOverflow = options.allowDataOverflow ?? true;
+  const axisDomainSpy = vi.fn();
+  const renderResult = render(() => (
+    <LineChart width={500} height={300} data={data}>
+      <XAxis dataKey="name" />
+      <YAxis
+        type="number"
+        domain={options.domain}
+        allowDataOverflow={allowDataOverflow}
+        ticks={options.ticks == null ? undefined : [...options.ticks]}
+        tickCount={options.tickCount}
+      />
+      <Line
+        type="monotone"
+        dataKey="value"
+        stroke="#8884d8"
+        isAnimationActive={false}
+        connectNulls
+      />
+      <ExpectAxisDomain assert={axisDomainSpy} axisType="yAxis" />
+    </LineChart>
+  ));
+  return { ...renderResult, axisDomainSpy };
+}
+
+const functionUpperBound: AxisDomain = [
+  0,
+  (dataMax: number) => (Number.isFinite(dataMax) && dataMax > 0 ? dataMax : 100),
+];
+const wholeDomainFunction: AxisDomain = () => [0, 100];
+
+describe("YAxis issue 7362 — ticks fallback for non-literal domains on empty/all-null data", () => {
+  it("function upper-bound domain + all-null data renders the ladder from ticks", () => {
+    const { container, axisDomainSpy } = renderChart({
+      data: allNullData,
+      domain: functionUpperBound,
+    });
+    expectLastCalledWith(axisDomainSpy, [0, 100]);
+    expectYAxisTicks(container, ladder);
+  });
+
+  it("function upper-bound domain + empty data renders the ladder from ticks", () => {
+    const { container, axisDomainSpy } = renderChart({ data: [], domain: functionUpperBound });
+    expectLastCalledWith(axisDomainSpy, [0, 100]);
+    expectYAxisTicks(container, ladder);
+  });
+
+  it("whole-domain function + all-null data renders the ladder from ticks", () => {
+    const { container, axisDomainSpy } = renderChart({
+      data: allNullData,
+      domain: wholeDomainFunction,
+    });
+    expectLastCalledWith(axisDomainSpy, [0, 100]);
+    expectYAxisTicks(container, ladder);
+  });
+
+  it("['auto','auto'] domain + all-null data renders the ladder from ticks", () => {
+    const { container, axisDomainSpy } = renderChart({
+      data: allNullData,
+      domain: ["auto", "auto"],
+    });
+    expectLastCalledWith(axisDomainSpy, [0, 100]);
+    expectYAxisTicks(container, ladder);
+  });
+
+  it("['dataMin','dataMax'] domain + all-null data renders the ladder from ticks", () => {
+    const { container, axisDomainSpy } = renderChart({
+      data: allNullData,
+      domain: ["dataMin", "dataMax"],
+    });
+    expectLastCalledWith(axisDomainSpy, [0, 100]);
+    expectYAxisTicks(container, ladder);
+  });
+
+  it("derives the domain from min/max of unsorted ticks", () => {
+    const { axisDomainSpy } = renderChart({
+      data: allNullData,
+      domain: ["auto", "auto"],
+      ticks: [100, 0, 50, 25, 75],
+    });
+    expectLastCalledWith(axisDomainSpy, [0, 100]);
+  });
+
+  // ---- Negative guards: the fallback must not engage here ----
+
+  it("does NOT override a resolvable literal domain (literal wins over ticks extent)", () => {
+    const { container, axisDomainSpy } = renderChart({ data: allNullData, domain: [0, 200] });
+    expectLastCalledWith(axisDomainSpy, [0, 200]);
+    expect(yTickCount(container)).toBe(5);
+  });
+
+  it("does NOT engage without allowDataOverflow", () => {
+    const { container, axisDomainSpy } = renderChart({
+      data: allNullData,
+      domain: functionUpperBound,
+      allowDataOverflow: false,
+    });
+    expectLastCalledWith(axisDomainSpy, undefined);
+    expect(yTickCount(container)).toBe(0);
+  });
+
+  it("does NOT engage when data is present (function resolves from data)", () => {
+    const data: ReadonlyArray<Datum> = [
+      { name: "A", value: 10 },
+      { name: "B", value: 40 },
+    ];
+    const { axisDomainSpy } = renderChart({ data, domain: [0, (dataMax: number) => dataMax] });
+    expectLastCalledWith(axisDomainSpy, [0, 40]);
+  });
+
+  it("does NOT engage from tickCount alone (no explicit ticks array)", () => {
+    const { container, axisDomainSpy } = renderChartEx({ domain: ["auto", "auto"], tickCount: 5 });
+    expectLastCalledWith(axisDomainSpy, undefined);
+    expect(yTickCount(container)).toBe(0);
+  });
+
+  it("drops non-numeric ticks and derives the domain from the numeric ones", () => {
+    const { axisDomainSpy } = renderChartEx({
+      domain: ["auto", "auto"],
+      ticks: [0, "foo", NaN, 100],
+    });
+    expectLastCalledWith(axisDomainSpy, [0, 100]);
+  });
+
+  it("does NOT engage when no ticks are numeric", () => {
+    const { container, axisDomainSpy } = renderChartEx({
+      domain: ["auto", "auto"],
+      ticks: ["foo", NaN],
+    });
+    expectLastCalledWith(axisDomainSpy, undefined);
+    expect(yTickCount(container)).toBe(0);
+  });
+
+  it("handles a single tick without crashing", () => {
+    const { container } = renderChartEx({ domain: ["auto", "auto"], ticks: [50] });
+    expect(yTickCount(container)).toBe(1);
+  });
+});

package/test/cartesian/YAxis/YAxis.7362.spec.tsx

@@ -0,0 +1,104 @@
+// Ported from recharts 3.8.1 test/cartesian/YAxis/YAxis.7362.spec.tsx (commit 7a23854).
+import { flush } from "solid-js";
+import { describe, it } from "vitest";
+import { Line, LineChart, XAxis, YAxis } from "../../../src";
+import { selectAxisScale } from "../../../src/state/selectors/axisSelectors";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { expectYAxisTicks } from "../../helper/expectAxisTicks";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+type Datum = {
+  name: string;
+  value: number | null;
+};
+
+const explicitDomain = [0, 100] as const;
+const explicitTicks = [0, 25, 50, 75, 100] as const;
+
+const allNullData: ReadonlyArray<Datum> = [
+  { name: "Page A", value: null },
+  { name: "Page B", value: null },
+  { name: "Page C", value: null },
+  { name: "Page D", value: null },
+];
+
+const partlyNumericData: ReadonlyArray<Datum> = [
+  { name: "Page A", value: null },
+  { name: "Page B", value: 25 },
+  { name: "Page C", value: null },
+  { name: "Page D", value: 75 },
+];
+
+function renderIssue7362Chart(props: {
+  data: ReadonlyArray<Datum>;
+  ticks?: ReadonlyArray<number>;
+  tickCount?: number;
+}) {
+  const renderTestCase = createSelectorTestCase((chartProps) => (
+    <LineChart width={500} height={300} data={props.data}>
+      <XAxis dataKey="name" />
+      <YAxis
+        type="number"
+        domain={explicitDomain}
+        allowDataOverflow
+        ticks={props.ticks}
+        tickCount={props.tickCount}
+      />
+      <Line
+        type="monotone"
+        dataKey="value"
+        stroke="#8884d8"
+        isAnimationActive={false}
+        connectNulls
+      />
+      {chartProps.children}
+    </LineChart>
+  ));
+
+  return renderTestCase((state) => selectAxisScale(state, "yAxis", 0, false)?.domain());
+}
+
+const expectedTicks = [
+  { textContent: "0", x: "57", y: "265" },
+  { textContent: "25", x: "57", y: "200" },
+  { textContent: "50", x: "57", y: "135" },
+  { textContent: "75", x: "57", y: "70" },
+  { textContent: "100", x: "57", y: "5" },
+];
+
+describe("YAxis issue 7362 current behavior", () => {
+  it("renders the explicit tick ladder for all-null series data when ticks are supplied", () => {
+    const { container, spy } = renderIssue7362Chart({ data: allNullData, ticks: explicitTicks });
+    flush();
+
+    expectLastCalledWith(spy, [0, 100]);
+    expectYAxisTicks(container, expectedTicks);
+  });
+
+  it("renders the computed tick ladder for all-null series data when tickCount is supplied", () => {
+    const { container, spy } = renderIssue7362Chart({ data: allNullData, tickCount: 5 });
+    flush();
+
+    expectLastCalledWith(spy, [0, 100]);
+    expectYAxisTicks(container, expectedTicks);
+  });
+
+  it("renders the explicit tick ladder for empty data when the Y axis is fully specified", () => {
+    const { container, spy } = renderIssue7362Chart({ data: [], ticks: explicitTicks });
+    flush();
+
+    expectLastCalledWith(spy, [0, 100]);
+    expectYAxisTicks(container, expectedTicks);
+  });
+
+  it("renders the explicit tick ladder again as soon as the series contains numeric values", () => {
+    const { container, spy } = renderIssue7362Chart({
+      data: partlyNumericData,
+      ticks: explicitTicks,
+    });
+    flush();
+
+    expectLastCalledWith(spy, [0, 100]);
+    expectYAxisTicks(container, expectedTicks);
+  });
+});