solid-recharts 0.1.0

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

@@ -0,0 +1,233 @@
+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 "victory-vendor/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 "../../helper/render";
+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

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

@@ -0,0 +1,102 @@
+import { describe, it } from "vitest";
+import { getRelativeCoordinate, Line, LineChart, XAxis, type TickItem } from "../../../src";
+import { render } from "../../helper/render";
+
+// 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>
+    );
+  });
+});