solid-recharts 0.2.0 → 1.0.0

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

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

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

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

@@ -1,104 +0,0 @@
-// 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);
-  });
-});