solid-recharts 0.2.1 → 1.0.0

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

@@ -1,233 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { createEffect } from "solid-js";
-// @ts-expect-error d3-time-format ships no types and victory-vendor does not re-export it.
-import { timeFormat } from "d3-time-format";
-import { scaleTime } from "d3-scale";
-import { useAppSelector } from "../../../src/state/hooks";
-import { selectRealScaleType } from "../../../src/state/selectors/axisSelectors";
-import { Line, LineChart, XAxis, YAxis } from "../../../src";
-import { render } from "@solidjs/testing-library";
-import { expectXAxisTicks } from "../../helper/expectAxisTicks";
-import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
-import type { XAxisProps } from "../../../src/cartesian/XAxis";
-
-describe("time scale", () => {
-  const timeData = [
-    {
-      x: new Date("2019-07-04T00:00:00.000Z"),
-      y: 5,
-    },
-    {
-      x: new Date("2019-07-05T00:00:00.000Z"),
-      y: 30,
-    },
-    {
-      x: new Date("2019-07-06T00:00:00.000Z"),
-      y: 50,
-    },
-    {
-      x: new Date("2019-07-07T00:00:00.000Z"),
-      y: 43,
-    },
-    {
-      x: new Date("2019-07-08T00:00:00.000Z"),
-      y: 20,
-    },
-    {
-      x: new Date("2019-07-09T00:00:00.000Z"),
-      y: -20,
-    },
-    {
-      x: new Date("2019-07-10T00:00:00.000Z"),
-      y: 30,
-    },
-  ];
-
-  it("should render ticks of when XAxis.scale=time", () => {
-    // recharts guards `getTimezoneOffset()===0`; this port's tickFormatter pins
-    // `timeZone: "UTC"`, so the rendered tick strings are host-TZ-independent and
-    // the guard is unnecessary here.
-    const axisDomainSpy = vi.fn();
-    const scaleTypeSpy = vi.fn();
-    const Comp = (): null => {
-      const scaleType = useAppSelector((state) => selectRealScaleType(state, "xAxis", 0));
-      createEffect(
-        () => scaleType(),
-        (v) => scaleTypeSpy(v),
-      );
-      return null;
-    };
-
-    const tickFormatter = (value: unknown) =>
-      new Date(value as number).toLocaleString("en-US", {
-        weekday: "short",
-        year: "numeric",
-        month: "short",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        timeZone: "UTC",
-        timeZoneName: "long",
-        hourCycle: "h23",
-      });
-
-    const { container } = render(() => (
-      <LineChart
-        width={600}
-        height={300}
-        data={timeData}
-        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-      >
-        <XAxis
-          dataKey="x"
-          domain={[timeData[0]!.x.getTime(), timeData[timeData.length - 1]!.x.getTime()]}
-          scale="time"
-          type="number"
-          tickFormatter={tickFormatter}
-        />
-        <YAxis />
-        <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8 }} />
-        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
-        <Comp />
-      </LineChart>
-    ));
-
-    expect(scaleTypeSpy).toHaveBeenLastCalledWith("time");
-    expectXAxisTicks(container, [
-      {
-        textContent: "Thu, Jul 04, 2019, 00:00:00 Coordinated Universal Time",
-        x: "80",
-        y: "273",
-      },
-      {
-        textContent: "Fri, Jul 05, 2019, 00:00:00 Coordinated Universal Time",
-        x: "161.66666666666669",
-        y: "273",
-      },
-      {
-        textContent: "Sat, Jul 06, 2019, 00:00:00 Coordinated Universal Time",
-        x: "243.33333333333334",
-        y: "273",
-      },
-      {
-        textContent: "Sun, Jul 07, 2019, 00:00:00 Coordinated Universal Time",
-        x: "325",
-        y: "273",
-      },
-      {
-        textContent: "Mon, Jul 08, 2019, 00:00:00 Coordinated Universal Time",
-        x: "406.6666666666667",
-        y: "273",
-      },
-      {
-        textContent: "Tue, Jul 09, 2019, 00:00:00 Coordinated Universal Time",
-        x: "488.3333333333333",
-        y: "273",
-      },
-      {
-        textContent: "Wed, Jul 10, 2019, 00:00:00 Coordinated Universal Time",
-        x: "570",
-        y: "273",
-      },
-    ]);
-    expect(axisDomainSpy).toHaveBeenLastCalledWith([
-      new Date("2019-07-04T00:00:00.000Z"),
-      new Date("2019-07-10T00:00:00.000Z"),
-    ]);
-  });
-
-  // ENV REQUIREMENT (not a src gap): the supplied d3 `scaleTime().nice()` + `ticks(5)`
-  // are computed in the HOST timezone, so the resulting tick x-coordinates only match
-  // the golden under TZ=UTC (recharts CI runs with TZ=UTC and guards the same way).
-  // Runs in UTC CI; skipped on non-UTC hosts.
-  it.skipIf(new Date().getTimezoneOffset() !== 0)(
-    "should render ticks of when the scale of XAxis is a function",
-    () => {
-      const axisDomainSpy = vi.fn();
-      const scaleTypeSpy = vi.fn();
-      const Comp = (): null => {
-        const scaleType = useAppSelector((state) => selectRealScaleType(state, "xAxis", 0));
-        createEffect(
-          () => scaleType(),
-          (v) => scaleTypeSpy(v),
-        );
-        return null;
-      };
-
-      // The d3 scaleTime domain requires numeric values
-      const numericValues = timeData.map((obj) => obj.x).map((time) => time.valueOf());
-      const formatDay = timeFormat("%a %d");
-      const timeScale = scaleTime()
-        .domain([Math.min(...numericValues), Math.max(...numericValues)])
-        .nice();
-
-      const xAxisArgs: XAxisProps = {
-        domain: timeScale.domain().map((date) => date.valueOf()),
-        // @ts-expect-error we need to wrap the d3 scales in unified interface
-        scale: timeScale,
-        type: "number",
-        ticks: timeScale.ticks(5).map((date) => date.valueOf()),
-        tickFormatter: formatDay,
-      };
-
-      const { container } = render(() => (
-        <LineChart
-          width={600}
-          height={300}
-          data={timeData}
-          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-        >
-          <XAxis dataKey="x" {...xAxisArgs} />
-          <YAxis />
-          <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8 }} />
-          <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
-          <Comp />
-        </LineChart>
-      ));
-
-      expect(scaleTypeSpy).toHaveBeenLastCalledWith(undefined);
-      expectXAxisTicks(container, [
-        {
-          textContent: "Thu 04",
-          x: "80",
-          y: "273",
-        },
-        {
-          textContent: "Fri 05",
-          x: "161.66666666666669",
-          y: "273",
-        },
-        {
-          textContent: "Sat 06",
-          x: "243.33333333333334",
-          y: "273",
-        },
-        {
-          textContent: "Sun 07",
-          x: "325",
-          y: "273",
-        },
-        {
-          textContent: "Mon 08",
-          x: "406.6666666666667",
-          y: "273",
-        },
-        {
-          textContent: "Tue 09",
-          x: "488.3333333333333",
-          y: "273",
-        },
-        {
-          textContent: "Wed 10",
-          x: "570",
-          y: "273",
-        },
-      ]);
-      expect(axisDomainSpy).toHaveBeenLastCalledWith([
-        new Date("2019-07-04T00:00:00.000Z"),
-        new Date("2019-07-10T00:00:00.000Z"),
-      ]);
-    },
-  );
-});

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

@@ -1,107 +0,0 @@
-// Ported from recharts 3.8.1 test/cartesian/XAxis/XAxis.type.spec.tsx (commit 7a23854).
-import type { JSX } from "@solidjs/web";
-import { describe, expect, it } from "vitest";
-import { BarChart, XAxis } from "../../../src";
-import { selectXAxisSettings } from "../../../src/state/selectors/axisSelectors";
-import type { AxisDomainTypeInput } from "../../../src/util/types";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-
-describe("XAxis type", () => {
-  describe("in vertical chart", () => {
-    const TestCase = (props: { children?: JSX.Element; axisType?: AxisDomainTypeInput }) => (
-      <BarChart
-        layout="vertical"
-        width={400}
-        height={400}
-        data={[
-          { x: "A", y: 12 },
-          { x: "B", y: 5 },
-        ]}
-      >
-        <XAxis type={props.axisType} dataKey="x" />
-        {props.children}
-      </BarChart>
-    );
-
-    it('should default to "category" type', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase>{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectXAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "category" }));
-    });
-
-    it('should set type to "number"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="number">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectXAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "number" }));
-    });
-
-    it('should set type to "category"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="category">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectXAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "category" }));
-    });
-
-    it('should infer type as "number"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="auto">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectXAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "number" }));
-    });
-  });
-
-  describe("in horizontal chart", () => {
-    const TestCase = (props: { children?: JSX.Element; axisType?: AxisDomainTypeInput }) => (
-      <BarChart
-        width={400}
-        height={400}
-        data={[
-          { x: 12, y: "A" },
-          { x: 5, y: "B" },
-        ]}
-      >
-        <XAxis type={props.axisType} dataKey="x" />
-        {props.children}
-      </BarChart>
-    );
-
-    it('should default to "category" type', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase>{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectXAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "category" }));
-    });
-
-    it('should set type to "number"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="number">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectXAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "number" }));
-    });
-
-    it('should set type to "category"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="category">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectXAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "category" }));
-    });
-
-    it('should infer type as "category"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="auto">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectXAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "category" }));
-    });
-  });
-});

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

@@ -1,102 +0,0 @@
-import { describe, it } from "vitest";
-import { getRelativeCoordinate, Line, LineChart, XAxis, type TickItem } from "../../../src";
-import { render } from "@solidjs/testing-library";
-
-// Ported from recharts 3.8.1 test/cartesian/XAxis/XAxis.typed.spec.tsx.
-//
-// Solid type-surface deviation (same golden-anchored convention as Bar.typed):
-// the tick handlers are props-first `(tickItem, index, event)` like recharts, but
-// the 3rd argument is a raw DOM `MouseEvent`/`TouchEvent` whose `currentTarget`
-// is `EventTarget | null` — NOT assignable to `getRelativeCoordinate`'s recharts
-// pointer types, so each call carries `// @ts-expect-error`.
-
-type ExampleDataPoint = { value: number; name: string };
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { value: 100, name: "a" },
-  { value: 80, name: "b" },
-];
-
-describe("XAxis with strong typing", () => {
-  it("should allow implicit dataKey typing", () => {
-    render(() => (
-      <LineChart data={data} width={400} height={400}>
-        <XAxis dataKey="name" />
-        <Line dataKey="value" />
-      </LineChart>
-    ));
-  });
-
-  it("should allow explicit dataKey typing and reject invalid values", () => {
-    render(() => (
-      <LineChart data={data} width={400} height={400}>
-        <XAxis<ExampleDataPoint, number> dataKey="value" />
-        <XAxis<ExampleDataPoint, number> dataKey={(entry: ExampleDataPoint) => entry.value} />
-        {/* @ts-expect-error TypeScript is correct here - name is not number-valued */}
-        <XAxis<ExampleDataPoint, number> dataKey="name" />
-        <Line dataKey="value" />
-      </LineChart>
-    ));
-  });
-});
-
-describe("XAxis event handlers", () => {
-  it("should NOT allow calling getRelativeCoordinate with the raw DOM event Solid passes to a tick handler", () => {
-    /*
-     * Provenance: the React reference passes a recharts pointer event here and
-     * expects NO error. The Solid tick handler's 3rd arg is a raw DOM
-     * `MouseEvent`/`TouchEvent`, whose `currentTarget` is `EventTarget | null` —
-     * NOT assignable to `getRelativeCoordinate`'s `HTMLElementTarget | SVGElementTarget`.
-     * So each call below is a genuine Solid type error.
-     */
-    return (
-      <LineChart width={100} height={100}>
-        <XAxis
-          onClick={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseDown={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseUp={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseMove={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseLeave={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseOver={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseOut={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseEnter={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchStart={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchMove={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchEnd={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-        />
-      </LineChart>
-    );
-  });
-});