solid-recharts 0.1.0

package/test/polar/PolarAngleAxis/PolarAngleAxis.typed.spec.tsx

@@ -0,0 +1,102 @@
+import { describe, it } from "vitest";
+import {
+  PolarAngleAxis,
+  RadialBar,
+  RadialBarChart,
+  getRelativeCoordinate,
+  type TickItem,
+} from "../../../src";
+import { render } from "../../helper/render";
+
+// Ported from recharts 3.8.1 test/polar/PolarAngleAxis/PolarAngleAxis.typed.spec.tsx.
+
+type ExampleDataPoint = { value: number; name: string };
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+];
+
+describe("PolarAngleAxis with strong typing", () => {
+  it("should allow implicit dataKey typing", () => {
+    render(() => (
+      <RadialBarChart data={data} width={400} height={400}>
+        <PolarAngleAxis dataKey="name" />
+        <RadialBar dataKey="value" />
+      </RadialBarChart>
+    ));
+  });
+
+  it("should allow explicit dataKey typing and reject invalid values", () => {
+    render(() => (
+      <RadialBarChart data={data} width={400} height={400}>
+        <PolarAngleAxis<ExampleDataPoint, string> dataKey="name" />
+        {/* @ts-expect-error TypeScript is correct here - value is not string-valued */}
+        <PolarAngleAxis<ExampleDataPoint, string> dataKey="value" />
+        <RadialBar dataKey="value" />
+      </RadialBarChart>
+    ));
+  });
+});
+
+describe("PolarAngleAxis 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 `PolarTickEventHandler` 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 (golden-anchored to the Solid
+     * type surface).
+     */
+    return (
+      <RadialBarChart width={100} height={100}>
+        <PolarAngleAxis
+          onClick={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseDown={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseUp={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseMove={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseLeave={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseOver={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseOut={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseEnter={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onTouchStart={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onTouchMove={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onTouchEnd={(_axisProps: TickItem, _index: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+        />
+      </RadialBarChart>
+    );
+  });
+});

package/test/polar/PolarAngleAxis.render.spec.tsx

@@ -0,0 +1,79 @@
+// Subset port of recharts 3.8.1 test/polar/PolarAngleAxis/PolarAngleAxis.spec.tsx
+// (commit 7a23854) — the payoff of the polar-axis spine: a category PolarAngleAxis
+// in a RadarChart renders one tick (line + label) per category plus the polygon
+// axis line. The angle/radius axis selectors + the un-deferred axisSelectors polar
+// branches feed this. `flush()` because the axis registers via an effect and its
+// ticks compute from the store.
+//
+// Tier-A subset: asserts the structural parity facts (tick count, ordered category
+// labels, axis line). Exact tick geometry + the numeric-axis/explicit-tick cases
+// come online with Radar (which provides the item domain).
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render } from "../helper/render";
+import { RadarChart, PolarAngleAxis } from "../../src";
+
+const data = [
+  { subject: "Math", value: 120 },
+  { subject: "English", value: 98 },
+  { subject: "Science", value: 86 },
+  { subject: "History", value: 99 },
+];
+
+describe("<PolarAngleAxis /> in RadarChart", () => {
+  it("renders one tick (line + label) per category + a polygon axis line", () => {
+    const { container } = render(() => (
+      <RadarChart width={500} height={500} data={data}>
+        <PolarAngleAxis dataKey="subject" />
+      </RadarChart>
+    ));
+    flush();
+
+    const axis = container.querySelector(".recharts-polar-angle-axis.angleAxis");
+    expect(axis).not.toBeNull();
+
+    const ticks = container.querySelectorAll(".recharts-polar-angle-axis-tick");
+    expect(ticks).toHaveLength(data.length);
+
+    const tickLines = container.querySelectorAll(".recharts-polar-angle-axis-tick-line");
+    expect(tickLines).toHaveLength(data.length);
+
+    const labels = container.querySelectorAll(".recharts-polar-angle-axis-tick-value");
+    expect([...labels].map((l) => l.textContent)).toEqual([
+      "Math",
+      "English",
+      "Science",
+      "History",
+    ]);
+
+    // Default axisLineType "polygon" → the ported <Polygon> draws a <path>
+    // (documented Polygon deviation: it renders `path d=` not `<polygon>`).
+    expect(container.querySelectorAll(".recharts-polar-angle-axis-line")).toHaveLength(1);
+    expect(container.querySelector(".recharts-polar-angle-axis-line")?.tagName.toLowerCase()).toBe(
+      "path",
+    );
+
+    // Geometric faithfulness: the polar viewBox is byte-faithful to recharts —
+    // cx/cy = 250 (centric: full-width/2, NOT margin-offset like Pie) and
+    // outerRadius = 0.8 · maxRadius = 0.8 · (min(500−10, 500−10)/2) = 196. So every
+    // tick-line inner point (x1,y1) must lie exactly on the circle r=196 about (250,250)
+    // — matching the reference golden (first tick y1=54 = 250−196).
+    for (const tl of tickLines) {
+      const x1 = Number(tl.getAttribute("x1"));
+      const y1 = Number(tl.getAttribute("y1"));
+      const r = Math.sqrt((x1 - 250) ** 2 + (y1 - 250) ** 2);
+      expect(r).toBeCloseTo(196, 6);
+    }
+  });
+
+  it("renders nothing when hide is set", () => {
+    const { container } = render(() => (
+      <RadarChart width={500} height={500} data={data}>
+        <PolarAngleAxis dataKey="subject" hide />
+      </RadarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-polar-angle-axis-tick")).toHaveLength(0);
+  });
+});

package/test/polar/PolarGrid.render.spec.tsx

@@ -0,0 +1,75 @@
+// Subset port of recharts 3.8.1 test/polar/PolarGrid.spec.tsx (commit 7a23854).
+// PolarGrid draws concentric rings (one per radius tick) + radial lines (one per
+// angle tick), reading from the polar axis ticks + viewBox. `flush()` because the
+// grid reads store-derived ticks that depend on the Radar/axis effects.
+//
+// Tier-A subset: structural parity (one radial line per angle tick = data length;
+// concentric polygons by default, circles when gridType="circle"). Exact grid
+// geometry comes online with the full spec.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render } from "../helper/render";
+import { RadarChart, Radar, PolarGrid } from "../../src";
+
+const exampleRadarData = [
+  { name: "iPhone 3GS", value: 420 },
+  { name: "iPhone 4", value: 460 },
+  { name: "iPhone 4s", value: 999 },
+  { name: "iPhone 5", value: 500 },
+  { name: "iPhone 5s", value: 864 },
+  { name: "iPhone 6", value: 650 },
+  { name: "iPhone 6s", value: 765 },
+  { name: "iPhone 5se", value: 365 },
+];
+
+describe("<PolarGrid /> in RadarChart", () => {
+  it("draws one radial line per angle tick + concentric polygons by default", () => {
+    const { container } = render(() => (
+      <RadarChart width={500} height={500} data={exampleRadarData}>
+        <Radar dataKey="value" />
+        <PolarGrid />
+      </RadarChart>
+    ));
+    flush();
+
+    expect(container.querySelector(".recharts-polar-grid")).not.toBeNull();
+
+    // 8 categories → 8 radial lines.
+    expect(container.querySelectorAll(".recharts-polar-grid-angle line")).toHaveLength(
+      exampleRadarData.length,
+    );
+
+    // Default gridType "polygon" → concentric polygons (one per radius tick).
+    expect(
+      container.querySelectorAll(".recharts-polar-grid-concentric-polygon").length,
+    ).toBeGreaterThan(0);
+    expect(container.querySelectorAll(".recharts-polar-grid-concentric-circle")).toHaveLength(0);
+  });
+
+  it("draws concentric circles when gridType is circle", () => {
+    const { container } = render(() => (
+      <RadarChart width={500} height={500} data={exampleRadarData}>
+        <Radar dataKey="value" />
+        <PolarGrid gridType="circle" />
+      </RadarChart>
+    ));
+    flush();
+
+    expect(
+      container.querySelectorAll(".recharts-polar-grid-concentric-circle").length,
+    ).toBeGreaterThan(0);
+    expect(container.querySelectorAll(".recharts-polar-grid-concentric-polygon")).toHaveLength(0);
+  });
+
+  it("omits radial lines when radialLines is false", () => {
+    const { container } = render(() => (
+      <RadarChart width={500} height={500} data={exampleRadarData}>
+        <Radar dataKey="value" />
+        <PolarGrid radialLines={false} />
+      </RadarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-polar-grid-angle line")).toHaveLength(0);
+  });
+});