solid-recharts 0.2.0 → 1.0.0

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

@@ -1,102 +0,0 @@
-import { describe, it } from "vitest";
-import {
-  PolarAngleAxis,
-  RadialBar,
-  RadialBarChart,
-  getRelativeCoordinate,
-  type TickItem,
-} from "../../../src";
-import { render } from "@solidjs/testing-library";
-
-// 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

@@ -1,79 +0,0 @@
-// 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 "@solidjs/testing-library";
-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

@@ -1,75 +0,0 @@
-// 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 "@solidjs/testing-library";
-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);
-  });
-});