solid-recharts 0.2.0 → 1.0.0

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

@@ -1,85 +0,0 @@
-// Proves PER-ROW legend payloads for Pie and RadialBar (recharts emits one legend
-// entry per data row, not one per series). Pie's entry color is cell/data/component
-// aware (its sectors already resolve fill); RadialBar reads name/fill off each row.
-// `flush()` because legend payload registers via effects/selectors.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { PieChart, Pie, RadialBarChart, RadialBar, Legend, Cell } from "../../src";
-
-const pieData = [
-  { name: "Group A", value: 400 },
-  { name: "Group B", value: 300 },
-  { name: "Group C", value: 200 },
-];
-
-const radialData = [
-  { name: "Alpha", uv: 10, fill: "#aa1111" },
-  { name: "Beta", uv: 20, fill: "#11aa11" },
-  { name: "Gamma", uv: 30, fill: "#1111aa" },
-];
-
-function legendTexts(container: Element): Array<string | null> {
-  return [...container.querySelectorAll(".recharts-legend-item-text")].map((n) => n.textContent);
-}
-
-function legendIconFills(container: Element): Array<string | null> {
-  return [...container.querySelectorAll(".recharts-legend-item .recharts-legend-icon")].map((n) =>
-    n.getAttribute("fill"),
-  );
-}
-
-describe("per-row legend payloads", () => {
-  it("Pie emits one legend entry per slice, colored from its <Cell>", () => {
-    const colors = ["#e11111", "#11e111", "#1111e1"];
-    const { container } = render(() => (
-      <PieChart width={400} height={400}>
-        <Pie data={pieData} dataKey="value" nameKey="name" isAnimationActive={false}>
-          {pieData.map((_entry, i) => (
-            <Cell fill={colors[i]} />
-          ))}
-        </Pie>
-        <Legend />
-      </PieChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-legend-item")).toHaveLength(pieData.length);
-    expect(legendTexts(container)).toEqual(["Group A", "Group B", "Group C"]);
-    // The rect legend icon's fill mirrors the cell color, per row.
-    expect(legendIconFills(container)).toEqual(colors);
-  });
-
-  it("Pie legend falls back to the Pie fill when no Cell sets a color", () => {
-    const { container } = render(() => (
-      <PieChart width={400} height={400}>
-        <Pie
-          data={pieData}
-          dataKey="value"
-          nameKey="name"
-          fill="#abcdef"
-          isAnimationActive={false}
-        />
-        <Legend />
-      </PieChart>
-    ));
-    flush();
-
-    expect(legendTexts(container)).toEqual(["Group A", "Group B", "Group C"]);
-    expect(legendIconFills(container)).toEqual(["#abcdef", "#abcdef", "#abcdef"]);
-  });
-
-  it("RadialBar emits one legend entry per data row, named/colored from the row", () => {
-    const { container } = render(() => (
-      <RadialBarChart width={400} height={400} data={radialData}>
-        <RadialBar dataKey="uv" isAnimationActive={false} />
-        <Legend />
-      </RadialBarChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-legend-item")).toHaveLength(radialData.length);
-    expect(legendTexts(container)).toEqual(["Alpha", "Beta", "Gamma"]);
-    expect(legendIconFills(container)).toEqual(["#aa1111", "#11aa11", "#1111aa"]);
-  });
-});

package/test/polar/PolarRadiusAxis.events.spec.tsx

@@ -1,65 +0,0 @@
-// Solid-recharts spec: PolarRadiusAxis forwards its per-tick mouse handlers
-// (props-first `(tickItem, index, event)`). recharts declares these but does not
-// unit-test them; behaviour mirrors the PolarAngleAxis events.
-import { describe, expect, it, vi } from "vitest";
-import { flush } from "solid-js";
-import { PolarAngleAxis, PolarRadiusAxis, RadarChart } from "../../src";
-import { fireEvent, render } from "@solidjs/testing-library";
-import { assertNotNull } from "../helper/assertNotNull";
-
-describe("PolarRadiusAxis events", () => {
-  it("fires the props-first (tickItem, index, event) mouse handlers", () => {
-    const onClick = vi.fn();
-    const onMouseEnter = vi.fn();
-    const onMouseLeave = vi.fn();
-    const onMouseOver = vi.fn();
-    const onMouseOut = vi.fn();
-    const onMouseMove = vi.fn();
-    const onMouseDown = vi.fn();
-    const onMouseUp = vi.fn();
-
-    const { container } = render(() => (
-      <RadarChart width={300} height={300} data={[{ x: 1, y: 1 }]}>
-        <PolarAngleAxis dataKey="y" />
-        <PolarRadiusAxis
-          dataKey="x"
-          onClick={onClick}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          onMouseOver={onMouseOver}
-          onMouseOut={onMouseOut}
-          onMouseMove={onMouseMove}
-          onMouseDown={onMouseDown}
-          onMouseUp={onMouseUp}
-        />
-      </RadarChart>
-    ));
-    flush();
-
-    const tick = container.querySelector(".recharts-polar-radius-axis-tick");
-    assertNotNull(tick);
-
-    fireEvent.click(tick);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenLastCalledWith(
-      expect.objectContaining({ index: 0 }),
-      0,
-      expect.any(Object),
-    );
-
-    fireEvent.mouseEnter(tick);
-    expect(onMouseEnter).toHaveBeenCalledTimes(1);
-    fireEvent.mouseLeave(tick);
-    expect(onMouseLeave).toHaveBeenCalledTimes(1);
-    fireEvent.mouseOver(tick);
-    expect(onMouseOver).toHaveBeenCalledTimes(1);
-    fireEvent.mouseOut(tick);
-    expect(onMouseOut).toHaveBeenCalledTimes(1);
-    fireEvent.mouseMove(tick);
-    expect(onMouseMove).toHaveBeenCalledTimes(1);
-    fireEvent.mouseDown(tick);
-    expect(onMouseDown).toHaveBeenCalledTimes(1);
-    fireEvent.mouseUp(tick);
-    expect(onMouseUp).toHaveBeenCalledTimes(1);
-  });
-});

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

@@ -1,52 +0,0 @@
-// Subset port of recharts 3.8.1 test/polar/PolarRadiusAxis.spec.tsx (commit 7a23854).
-// The radius axis (the value axis in a centric RadarChart) renders its axis line +
-// numeric tick labels along `angle`. An explicit numeric `domain` gives it a domain
-// without needing a Radar item (deferred). `flush()` because the axis registers via
-// an effect and ticks compute from the store.
-//
-// Tier-A subset: structural parity (axis present, ≥1 tick with numeric labels, one
-// axis line). Exact nice-tick geometry comes online with Radar + the full spec.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { RadarChart, PolarRadiusAxis } from "../../src";
-
-const data = [
-  { subject: "Math", value: 120 },
-  { subject: "English", value: 98 },
-  { subject: "Science", value: 86 },
-];
-
-describe("<PolarRadiusAxis /> in RadarChart", () => {
-  it("renders the axis line + numeric tick labels for an explicit domain", () => {
-    const { container } = render(() => (
-      <RadarChart width={500} height={500} data={data}>
-        <PolarRadiusAxis domain={[0, 150]} allowDataOverflow />
-      </RadarChart>
-    ));
-    flush();
-
-    const axis = container.querySelector(".recharts-polar-radius-axis.radiusAxis");
-    expect(axis).not.toBeNull();
-
-    expect(container.querySelectorAll(".recharts-polar-radius-axis-line")).toHaveLength(1);
-
-    const labels = container.querySelectorAll(".recharts-polar-radius-axis-tick-value");
-    expect(labels.length).toBeGreaterThan(0);
-    // Every tick label is a finite number (the radius scale is numeric).
-    for (const l of labels) {
-      expect(Number.isFinite(Number(l.textContent))).toBe(true);
-    }
-  });
-
-  it("renders nothing when hide is set", () => {
-    const { container } = render(() => (
-      <RadarChart width={500} height={500} data={data}>
-        <PolarRadiusAxis domain={[0, 150]} allowDataOverflow hide />
-      </RadarChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-polar-radius-axis-tick")).toHaveLength(0);
-  });
-});