solid-recharts 0.1.0

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

@@ -0,0 +1,428 @@
+import { describe, expect, it, vi } from "vitest";
+import type { Mock } from "vitest";
+import type { JSX } from "@solidjs/web";
+import { Bar, BarChart, ComposedChart, Line, LineChart, XAxis, YAxis } from "../../../src";
+import type { CartesianTickContentProps } from "../../../src";
+import { render, fireEvent } from "../../helper/render";
+import { expectYAxisTicks } from "../../helper/expectAxisTicks";
+import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
+import { expectLastCalledWith, expectNthCalledWith } from "../../helper/expectLastCalledWith";
+import { dateWithValueData } from "../../_data";
+
+type YAxisTickContentProps = CartesianTickContentProps;
+
+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("YAxis tick", () => {
+  it("Render duplicated ticks of YAxis", () => {
+    const spy = vi.fn();
+    const { container } = render(() => (
+      <LineChart
+        width={600}
+        height={300}
+        data={lineData}
+        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+      >
+        <XAxis />
+        <YAxis type="category" dataKey="name" interval={0} />
+        <Line type="monotone" dataKey="balance" stroke="#8884d8" activeDot={{ r: 8 }} />
+        <ExpectAxisDomain assert={spy} axisType="yAxis" />
+      </LineChart>
+    ));
+
+    expectYAxisTicks(container, [
+      {
+        textContent: "Page A",
+        x: "72",
+        y: "265",
+      },
+      {
+        textContent: "Page B",
+        x: "72",
+        y: "213",
+      },
+      {
+        textContent: "Page C",
+        x: "72",
+        y: "161",
+      },
+      {
+        textContent: "Page D",
+        x: "72",
+        y: "109",
+      },
+      {
+        textContent: "Page E",
+        x: "72",
+        y: "57",
+      },
+      {
+        textContent: "Page F",
+        x: "72",
+        y: "5",
+      },
+    ]);
+    expectLastCalledWith(spy, ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
+  });
+
+  it("Render axis with tick for a single data point", () => {
+    const spy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data.slice(0, 1)}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <YAxis dataKey="y" type="number" domain={["dataMin", "dataMax"]} />
+        <XAxis dataKey="x" />
+        <ExpectAxisDomain assert={spy} axisType="yAxis" />
+      </BarChart>
+    ));
+
+    // For a single data point, unless barSize is given, the bar will have no width and thus not be rendered.
+    // This test merely confirms this known limitation.
+    const bar = container.querySelector(".recharts-rectangle");
+    expect(bar).not.toBeInTheDocument();
+
+    expectYAxisTicks(container, [
+      {
+        textContent: "90",
+        x: "57",
+        y: "135",
+      },
+    ]);
+    expectLastCalledWith(spy, [90, 90]);
+  });
+
+  it("Render no ticks if type is category and data is empty", () => {
+    const spy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={[]}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <XAxis dataKey="x" />
+        <YAxis type="category" dataKey="y" />
+        <ExpectAxisDomain assert={spy} axisType="yAxis" />
+      </BarChart>
+    ));
+
+    expect(
+      container.querySelectorAll(".recharts-yAxis .recharts-cartesian-axis-tick"),
+    ).toHaveLength(0);
+    expectYAxisTicks(container, []);
+    expectLastCalledWith(spy, undefined);
+  });
+
+  describe("custom tick components", () => {
+    // SKIP — PERMANENT N/A: element-form tick (`tick={<CustomTick />}`). Solid JSX
+    // evaluates eagerly to DOM; there is no cloneElement to re-invoke the element
+    // with per-tick props. The function-form equivalent below is live.
+    it.skip("should pass object padding to custom tick component", () => {
+      const expectedPadding = { top: 20, bottom: 30 };
+      expect.assertions(5);
+
+      const CustomYAxisTick = (props: { padding?: unknown }): JSX.Element => {
+        expect(props.padding).toEqual(expectedPadding);
+        return <text>Custom Tick</text>;
+      };
+
+      render(() => (
+        <LineChart width={400} height={400} data={lineData}>
+          <YAxis padding={expectedPadding} tick={<CustomYAxisTick />} />
+          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        </LineChart>
+      ));
+    });
+
+    // SKIP — PERMANENT N/A: element-form tick (see above).
+    it.skip("should pass string padding to custom tick component", () => {
+      const expectedPadding = "gap";
+      expect.assertions(5);
+
+      const CustomYAxisTick = (props: { padding?: unknown }): JSX.Element => {
+        expect(props.padding).toBe(expectedPadding);
+        return <text>Custom Tick</text>;
+      };
+
+      render(() => (
+        <LineChart width={400} height={400} data={lineData}>
+          <YAxis padding={expectedPadding} tick={<CustomYAxisTick />} />
+          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        </LineChart>
+      ));
+    });
+
+    it("should pass padding to function-based custom tick", () => {
+      const expectedPadding = { top: 15, bottom: 25 };
+      expect.assertions(5);
+
+      const customTickFunction = (props: YAxisTickContentProps): JSX.Element => {
+        expect(props.padding).toEqual(expectedPadding);
+        return <text>Function Tick</text>;
+      };
+
+      render(() => (
+        <LineChart width={400} height={400} data={lineData}>
+          <YAxis padding={expectedPadding} tick={customTickFunction} />
+          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        </LineChart>
+      ));
+    });
+
+    // SKIP — PERMANENT N/A: element-form tick (see above).
+    it.skip("should pass default padding when no padding is specified", () => {
+      expect.assertions(5);
+
+      const CustomYAxisTick = (props: { padding?: unknown }): JSX.Element => {
+        expect(props.padding).toEqual({ top: 0, bottom: 0 });
+        return <text>Custom Tick</text>;
+      };
+
+      render(() => (
+        <LineChart width={400} height={400} data={lineData}>
+          <YAxis tick={<CustomYAxisTick />} />
+          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        </LineChart>
+      ));
+    });
+
+    it("should pass all TextProps and index and payload to custom tick component", () => {
+      const myCustomTick: Mock = vi.fn<(props: YAxisTickContentProps) => JSX.Element>();
+
+      render(() => (
+        <LineChart width={400} height={400} data={lineData}>
+          <YAxis tick={myCustomTick} />
+          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        </LineChart>
+      ));
+
+      expect(myCustomTick).toHaveBeenCalledTimes(5);
+      expectNthCalledWith(myCustomTick, 1, {
+        angle: 0,
+        class: "recharts-yAxis yAxis recharts-cartesian-axis-tick-value",
+        fill: "#666",
+        height: 390,
+        index: 0,
+        name: undefined,
+        orientation: "left",
+        padding: {
+          top: 0,
+          bottom: 0,
+        },
+        payload: {
+          coordinate: 395,
+          index: 0,
+          isShow: true,
+          offset: 0,
+          tickCoord: 395,
+          value: 0,
+        },
+        stroke: "none",
+        textAnchor: "end",
+        tickFormatter: undefined,
+        verticalAnchor: "middle",
+        visibleTicksCount: 5,
+        width: 60,
+        x: 57,
+        y: 395,
+      });
+
+      expectNthCalledWith(myCustomTick, 2, {
+        angle: 0,
+        class: "recharts-yAxis yAxis recharts-cartesian-axis-tick-value",
+        fill: "#666",
+        height: 390,
+        index: 1,
+        name: undefined,
+        orientation: "left",
+        padding: {
+          bottom: 0,
+          top: 0,
+        },
+        payload: {
+          coordinate: 297.5,
+          index: 1,
+          isShow: true,
+          offset: 0,
+          tickCoord: 297.5,
+          value: 100,
+        },
+        stroke: "none",
+        textAnchor: "end",
+        tickFormatter: undefined,
+        verticalAnchor: "middle",
+        visibleTicksCount: 5,
+        width: 60,
+        x: 57,
+        y: 297.5,
+      });
+    });
+  });
+
+  it("Render ticks of YAxis when specify ticks", () => {
+    const axisDomainSpy = vi.fn();
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={400}
+        data={lineData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <YAxis ticks={[0, 4]} />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="yAxis" />
+      </LineChart>
+    ));
+
+    // So despite explicitly specifying two ticks, only one is rendered, why?
+    expectYAxisTicks(container, [
+      {
+        textContent: "4",
+        x: "72",
+        y: "376.4",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([0, 400]);
+  });
+
+  it("Should render the axis line without any ticks", () => {
+    const spy = vi.fn();
+    const barData = [{ day: "05-01" }, { day: "05-02" }];
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={barData}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <YAxis dataKey="y" type="number" />
+        <ExpectAxisDomain assert={spy} axisType="yAxis" />
+      </BarChart>
+    ));
+    const ticksGroup = container.getElementsByClassName("recharts-cartesian-axis-tick-line");
+    expect(ticksGroup).toHaveLength(0);
+
+    const axisLine = container.getElementsByClassName("recharts-cartesian-axis-line");
+    expect(axisLine).toHaveLength(1);
+    expectYAxisTicks(container, []);
+    expectLastCalledWith(spy, undefined);
+  });
+
+  // Per-tick events: YAxis forwards the props-first `(tickItem, index, event)` handlers
+  // to CartesianAxis, which attaches them to each tick-label Layer.
+  it("Should pass data, index, and event to the onClick event handler", () => {
+    const onClickFn = vi.fn();
+    const { container } = render(() => (
+      <LineChart width={400} height={400} data={lineData}>
+        <YAxis ticks={[0, 4]} onClick={onClickFn} />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    ));
+
+    const ticksGroup = container.getElementsByClassName("recharts-cartesian-axis-tick-label");
+    expect(ticksGroup).toHaveLength(1);
+
+    const firstTick = ticksGroup[0]!;
+
+    const eventData = {
+      coordinate: 391.1,
+      isShow: true,
+      offset: 0,
+      tickCoord: 391.1,
+      value: 4,
+      index: 1,
+    };
+    const eventIndex = 0;
+    const eventExpect = expect.objectContaining({
+      type: "click",
+      pageX: 0,
+      pageY: 0,
+      target: expect.any(Object),
+    });
+
+    fireEvent.click(firstTick);
+    expect(onClickFn).toHaveBeenCalledWith(eventData, eventIndex, eventExpect);
+  });
+
+  // ENV REQUIREMENT (not a src gap): the tickFormatter uses `toLocaleDateString` WITHOUT a
+  // `timeZone`, so the rendered AM/PM strings depend on the host TZ and only match the
+  // golden under TZ=UTC (recharts CI runs UTC). Runs in UTC CI; skipped on non-UTC hosts.
+  it.skipIf(new Date().getTimezoneOffset() !== 0)(
+    "should render ticks formatted by tickFormatter",
+    () => {
+      const tickFormatter = (value: unknown) =>
+        new Date(value as number).toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "numeric",
+          day: "numeric",
+          hour: "numeric",
+          minute: "numeric",
+        });
+
+      const { container } = render(() => (
+        <ComposedChart width={600} height={50} data={dateWithValueData}>
+          <YAxis
+            dataKey="time"
+            type="number"
+            scale="time"
+            domain={["auto", "auto"]}
+            tickFormatter={tickFormatter}
+          />
+          <Line dataKey="value" />
+        </ComposedChart>
+      ));
+
+      expectYAxisTicks(container, [
+        {
+          textContent: "12/31/2016, 12:00 AM",
+          x: "57",
+          y: "45",
+        },
+        {
+          textContent: "12/31/2016, 3:00 AM",
+          x: "57",
+          y: "33",
+        },
+        {
+          textContent: "12/31/2016, 6:00 AM",
+          x: "57",
+          y: "21",
+        },
+        {
+          textContent: "12/31/2016, 9:00 AM",
+          x: "57",
+          y: "9",
+        },
+      ]);
+    },
+  );
+
+  it("Forwards class, fontSize and letterSpacing to the rendered axis", () => {
+    const { container } = render(() => (
+      <LineChart width={600} height={300} data={lineData}>
+        <YAxis class="styled-axis" fontSize="0.8rem" letterSpacing={2} />
+        <Line dataKey="uv" />
+      </LineChart>
+    ));
+
+    const layer = container.querySelector(".recharts-yAxis");
+    expect(layer).not.toBeNull();
+    expect(layer).toHaveClass("styled-axis");
+
+    const tickTexts = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
+    expect(tickTexts.length).toBeGreaterThan(0);
+    tickTexts.forEach((text) => {
+      expect(text).toHaveAttribute("font-size", "0.8rem");
+      expect(text).toHaveAttribute("letter-spacing", "2");
+    });
+  });
+});

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

@@ -0,0 +1,54 @@
+// Ported from recharts 3.8.1 test/cartesian/YAxis/YAxis.tickFormatter.spec.tsx (commit 7a23854).
+import { flush } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import { Line, LineChart, YAxis } from "../../../src";
+import { PageData } from "../../_data";
+import { expectYAxisTicks } from "../../helper/expectAxisTicks";
+import { render } from "../../helper/render";
+
+describe("YAxis 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 }}
+      >
+        <YAxis type="category" dataKey="name" tickFormatter={tickFormatterSpy} />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    ));
+    flush();
+
+    expectYAxisTicks(container, [
+      { textContent: "formatted: Page A: 0", x: "72", y: "380" },
+      { textContent: "formatted: Page B: 1", x: "72", y: "308" },
+      { textContent: "formatted: Page C: 2", x: "72", y: "236" },
+      { textContent: "formatted: Page D: 3", x: "72", y: "164" },
+      { textContent: "formatted: Page E: 4", x: "72", y: "92" },
+      { textContent: "formatted: Page F: 5", x: "72", y: "20" },
+    ]);
+  });
+
+  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 }}
+      >
+        <YAxis type="category" 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);
+  });
+});