solid-recharts 0.2.0 → 1.0.0

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

@@ -1,132 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { RadialBarDataItem } from "../../../src";
-import { getRelativeCoordinate, RadialBar, RadialBarChart } from "../../../src";
-import { render } from "@solidjs/testing-library";
-
-type ExampleDataPoint = {
-  value: number;
-  name: string;
-};
-
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { value: 100, name: "a" },
-  { value: 80, name: "b" },
-  { value: 60, name: "c" },
-  { value: 40, name: "d" },
-  { value: 20, name: "e" },
-];
-
-describe("RadialBar with strong typing", () => {
-  describe("with all implicit types", () => {
-    it("should render RadialBar with correct data and correct dataKey", () => {
-      const { container } = render(() => (
-        <RadialBarChart data={data} width={400} height={400}>
-          <RadialBar dataKey="value" isAnimationActive={false} />
-        </RadialBarChart>
-      ));
-      expect(container.querySelectorAll(".recharts-radial-bar-sector").length).toBeGreaterThan(0);
-    });
-
-    it("should allow incorrect or non-existent dataKeys in implicit mode", () => {
-      render(() => (
-        <RadialBarChart data={data} width={400} height={400}>
-          <RadialBar dataKey="name" isAnimationActive={false} />
-          <RadialBar dataKey="foo" isAnimationActive={false} />
-        </RadialBarChart>
-      ));
-    });
-  });
-
-  describe("with explicit RadialBar type parameters", () => {
-    it("should allow correct dataKey when typed explicitly", () => {
-      render(() => (
-        <RadialBarChart data={data} width={400} height={400}>
-          <RadialBar<ExampleDataPoint> dataKey="value" isAnimationActive={false} />
-          <RadialBar<ExampleDataPoint>
-            dataKey={(entry: ExampleDataPoint) => entry.value}
-            isAnimationActive={false}
-          />
-        </RadialBarChart>
-      ));
-    });
-
-    it("should show errors when dataKey does not match explicit typing", () => {
-      render(() => (
-        <RadialBarChart data={data} width={400} height={400}>
-          {/* @ts-expect-error TypeScript is correct here - the dataKey does not match and this should be an error */}
-          <RadialBar<ExampleDataPoint, number> dataKey="name" isAnimationActive={false} />
-          <RadialBar<ExampleDataPoint, number>
-            /* @ts-expect-error TypeScript is correct here - the dataKey return type does not match and this should be an error */
-            dataKey={(entry: ExampleDataPoint) => entry.name}
-            isAnimationActive={false}
-          />
-        </RadialBarChart>
-      ));
-    });
-  });
-});
-
-// Ported from the reference RadialBar.typed.spec "RadialBar event handlers" case,
-// golden-anchored via `@ts-expect-error` (the Bar.typed convention). Provenance: the
-// React reference passes a recharts pointer event to each handler and expects
-// getRelativeCoordinate(e) to type-check with NO error. The port's RadialBar handler
-// 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 and is annotated.
-describe("RadialBar event handlers", () => {
-  it("should NOT allow calling getRelativeCoordinate with the raw DOM event Solid passes to a RadialBar handler", () => {
-    return (
-      <RadialBarChart data={data} width={400} height={400}>
-        <RadialBar
-          dataKey="value"
-          isAnimationActive={false}
-          onClick={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseDown={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseUp={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseMove={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseLeave={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseOver={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseOut={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseEnter={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchStart={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchMove={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchEnd={(_data: RadialBarDataItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-        />
-      </RadialBarChart>
-    );
-  });
-});

package/test/polar/RadialBar.animation.spec.tsx

@@ -1,375 +0,0 @@
-// Ported from recharts 3.9.0 test/polar/RadialBar/RadialBar.animation.spec.tsx
-// (migrated to the v3.9 animation engine). <RadialBar> animates its ring sectors on
-// the new engine: each sector is driven by <AnimatedItems> + the default
-// `defaultRadialBarAnimateItems` interpolation (matched sectors tween start/end angle
-// prev→next; added sectors sweep endAngle from startAngle to final; removed sectors
-// drop). Animation is driven in tests via AnimationControllerProvider + the new-engine
-// MockControllerAnimationManager (deterministic progress → t mapping).
-//
-// Tier split: settled (t=1) frames are Tier-A — byte-identical to the reference (and
-// to the isAnimationActive=false static render). Mid-animation frames are Tier-B: the
-// exact intermediate easing-frame geometry is coupled to the mock manager's progress→t
-// mapping (a harness detail), so those cases assert the animation runs (frames differ
-// from the settled state) and lands on the byte-identical settled frame.
-//
-// PERMANENT-N/A: the reference `key`-prop re-animation describe uses React's `key`
-// to force a remount (Solid has none); its re-animation-from-zero semantics are the
-// same engine path exercised by the dataKey-change re-animation case ported below.
-//
-// GOTCHA (v3.9 engine): the JavascriptAnimation state machine calls onAnimationStart
-// SYNCHRONOUSLY in its constructor (on first render), not lazily when the first frame
-// ticks — matching recharts 3.9. So right after render onAnimationStart is already
-// called once (toHaveBeenCalledTimes(1)), not not.toHaveBeenCalled().
-import { describe, expect, it, vi } from "vitest";
-import type { JSX } from "@solidjs/web";
-import { createSignal, flush } from "solid-js";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { assertNotNull } from "../helper/assertNotNull";
-import { trim } from "../helper/trim";
-import { RadialBarChart, RadialBar } from "../../src";
-import type { AnimationController } from "../../src";
-import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
-import { MockControllerAnimationManager as MockProgressAnimationManager } from "../animation/mockControllerAnimationManager";
-import { PageData, pageDataWithFillColor } from "../_data";
-
-const SECTOR = ".recharts-radial-bar-sectors path.recharts-sector.recharts-radial-bar-sector";
-
-const smallerData = pageDataWithFillColor.slice(0, 2);
-
-function getRadialBarPathStrings(container: Element): ReadonlyArray<string> {
-  return Array.from(container.querySelectorAll(SECTOR)).map(
-    (bar) => trim(bar.getAttribute("d")) ?? "",
-  );
-}
-
-// The new engine increments the animation id every cycle (useAnimationId), so each
-// re-animation subscribes a fresh AnimationController via the context factory. We hand
-// the context ONE MockControllerAnimationManager whose factory rebinds to the newest
-// AnimationHandle on every subscribe, so `current()` always drives the most recently
-// created animation — the same idiom Radar/Bar.animation.spec use.
-function createManagerRegistry(): {
-  factory: AnimationController;
-  current: () => MockProgressAnimationManager;
-} {
-  const manager = new MockProgressAnimationManager("radialbar-anim");
-  return { factory: manager.factory, current: (): MockProgressAnimationManager => manager };
-}
-
-// Steps the animation through `steps` progress points, asserting each sector path
-// changes from its initial (t=0.1) frame each step and after the final frame; returns
-// the frames. Tier-B: the exact intermediate geometry is harness-coupled, so callers
-// assert movement + the byte-identical settled frame.
-async function expectAnimatedRadialBarPaths(
-  container: Element,
-  manager: MockProgressAnimationManager,
-  steps = 5,
-): Promise<ReadonlyArray<ReadonlyArray<string>>> {
-  let progress = 0.1;
-  await manager.setAnimationProgress(progress);
-  flush();
-  const stepSize = (1 - progress) / steps;
-  const initialPaths = getRadialBarPathStrings(container);
-
-  const pathsDuringAnimation: Array<ReadonlyArray<string>> = [];
-  for (progress += stepSize; progress < 1; progress += stepSize) {
-    await manager.setAnimationProgress(progress);
-    flush();
-    const currentPaths = getRadialBarPathStrings(container);
-    pathsDuringAnimation.push(currentPaths);
-    initialPaths.forEach((initial, index) => {
-      expect(currentPaths[index]).not.toBe(initial);
-    });
-  }
-
-  await manager.completeAnimation();
-  flush();
-  const finalPaths = getRadialBarPathStrings(container);
-  finalPaths.forEach((final, index) => {
-    expect(final).not.toBe(initialPaths[index]);
-  });
-  pathsDuringAnimation.push(finalPaths);
-  expect(pathsDuringAnimation).toHaveLength(steps);
-  return pathsDuringAnimation;
-}
-
-describe("RadialBar animation", () => {
-  const onAnimationStart = vi.fn();
-  const onAnimationEnd = vi.fn();
-
-  // Byte-identical settled ring geometry for smallerData (dataKey="uv", 400x400).
-  const settledPaths = [
-    "M 269.8,200 A 69.8,69.8,0, 1,0, 269.8,200.0012 L 207.8,200.0001 A 7.8,7.8,0, 1,1, 207.8,200 Z",
-    "M 347.8,200 A 147.8,147.8,0, 1,0, 285.4481,320.5963 L 249.6038,270.0079 A 85.8,85.8,0, 1,1, 285.8,200 Z",
-  ];
-
-  describe("with isAnimationActive=false", () => {
-    it("should render all bars without animation", () => {
-      const { container } = render(() => (
-        <RadialBarChart width={400} height={400} data={smallerData}>
-          <RadialBar dataKey="uv" isAnimationActive={false} />
-        </RadialBarChart>
-      ));
-      flush();
-      expect(getRadialBarPathStrings(container)).toEqual(settledPaths);
-    });
-
-    it("does not call the animation callbacks when isAnimationActive=false", () => {
-      const start = vi.fn();
-      const end = vi.fn();
-      const { container } = render(() => (
-        <RadialBarChart width={500} height={500} data={PageData}>
-          <RadialBar
-            dataKey="uv"
-            isAnimationActive={false}
-            onAnimationStart={start}
-            onAnimationEnd={end}
-          />
-        </RadialBarChart>
-      ));
-      flush();
-      expect(container.querySelectorAll(SECTOR)).toHaveLength(PageData.length);
-      expect(start).not.toHaveBeenCalled();
-      expect(end).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("initial animation with simple props", () => {
-    it("grows the rings from zero-sweep (t=0) to full (t=1)", async () => {
-      const manager = new MockProgressAnimationManager("radialbar-anim");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <RadialBarChart width={500} height={500} data={PageData}>
-            <RadialBar dataKey="uv" fill="#8884d8" />
-          </RadialBarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      // t=0: every ring has zero sweep (endAngle === startAngle) → no sector path.
-      expect(container.querySelectorAll(SECTOR)).toHaveLength(0);
-
-      await manager.completeAnimation();
-      flush();
-      expect(container.querySelectorAll(SECTOR)).toHaveLength(PageData.length);
-    });
-
-    it("should render paths with animation, landing on the settled frame", async () => {
-      onAnimationStart.mockClear();
-      onAnimationEnd.mockClear();
-      const manager = new MockProgressAnimationManager("radialbar-anim");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <RadialBarChart width={400} height={400} data={smallerData}>
-            <RadialBar
-              dataKey="uv"
-              isAnimationActive
-              onAnimationStart={onAnimationStart}
-              onAnimationEnd={onAnimationEnd}
-            />
-          </RadialBarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      // Tier-B: the exact intermediate easing frames are harness-coupled, so we assert
-      // the animation runs (frames differ from the settled state) and lands on the
-      // byte-identical settled rings.
-      const paths = await expectAnimatedRadialBarPaths(container, manager);
-      expect(paths).toHaveLength(5);
-      expect(paths[paths.length - 1]).toEqual(settledPaths);
-      // A mid frame is not yet settled (rings still sweeping open).
-      expect(paths[0]).not.toEqual(settledPaths);
-      expect(onAnimationEnd).toHaveBeenCalledTimes(1);
-    });
-
-    it("calls onAnimationStart when the animation begins and onAnimationEnd when it ends", async () => {
-      const start = vi.fn();
-      const end = vi.fn();
-      const manager = new MockProgressAnimationManager("radialbar-anim-cb");
-      render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <RadialBarChart width={500} height={500} data={PageData}>
-            <RadialBar
-              dataKey="uv"
-              isAnimationActive
-              onAnimationStart={start}
-              onAnimationEnd={end}
-            />
-          </RadialBarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      // v3.9 engine: onAnimationStart fires synchronously in the JavascriptAnimation
-      // constructor on first render (matching recharts 3.9).
-      expect(start).toHaveBeenCalledTimes(1);
-      expect(end).not.toHaveBeenCalled();
-
-      await manager.setAnimationProgress(0.1);
-      flush();
-      expect(start).toHaveBeenCalledTimes(1);
-      expect(end).not.toHaveBeenCalled();
-
-      await manager.completeAnimation();
-      flush();
-      expect(start).toHaveBeenCalledTimes(1);
-      expect(end).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("shape prop", () => {
-    function CustomShape(props: {
-      animationElapsedTime?: number;
-      isAnimating?: boolean;
-      isEntrance?: boolean;
-    }): JSX.Element {
-      return (
-        <path
-          class="custom-radial-bar-shape"
-          data-t={props.animationElapsedTime}
-          data-is-animating={String(props.isAnimating)}
-          data-is-entrance={String(props.isEntrance)}
-        />
-      );
-    }
-
-    it("should pass animationElapsedTime, isAnimating, isEntrance props to the custom shape", async () => {
-      const manager = new MockProgressAnimationManager("radialbar-anim");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <RadialBarChart width={400} height={400} data={smallerData}>
-            <RadialBar
-              dataKey="uv"
-              isAnimationActive
-              animationEasing="linear"
-              shape={CustomShape}
-            />
-          </RadialBarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      await manager.setAnimationProgress(0.5);
-      flush();
-      const shapeDuringAnimation = container.querySelector(".custom-radial-bar-shape");
-      assertNotNull(shapeDuringAnimation);
-      expect(shapeDuringAnimation.getAttribute("data-t")).toBe("0.5");
-      expect(shapeDuringAnimation.getAttribute("data-is-animating")).toBe("true");
-      expect(shapeDuringAnimation.getAttribute("data-is-entrance")).toBe("true");
-
-      await manager.completeAnimation();
-      flush();
-      const shapeAfterAnimation = container.querySelector(".custom-radial-bar-shape");
-      assertNotNull(shapeAfterAnimation);
-      expect(shapeAfterAnimation.getAttribute("data-t")).toBe("1");
-      expect(shapeAfterAnimation.getAttribute("data-is-animating")).toBe("false");
-      expect(shapeAfterAnimation.getAttribute("data-is-entrance")).toBe("false");
-    });
-  });
-
-  // Re-animation has no React `key`: the chart's `dataKey` is a signal swapped via an
-  // in-tree button click (so the re-render runs inside the render-root owner). A fresh
-  // sectors reference yields a new useAnimationId memo → a NEW animation subscribes a
-  // NEW manager via the context factory; the registry drives the most-recently-created
-  // one. Tier-B: assert the animation re-runs and lands on the settled frame.
-  describe("when changing dataKey prop", () => {
-    it("should animate the bar paths", async () => {
-      const registry = createManagerRegistry();
-      const [dataKey, setDataKey] = createSignal("uv");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={registry.factory}>
-          <button
-            type="button"
-            data-testid="swap"
-            onClick={() => setDataKey((prev) => (prev === "uv" ? "pv" : "uv"))}
-          />
-          <RadialBarChart width={400} height={400} data={smallerData}>
-            <RadialBar dataKey={dataKey()} isAnimationActive />
-          </RadialBarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      await registry.current().completeAnimation();
-      flush();
-      const initial = getRadialBarPathStrings(container);
-
-      const button = container.querySelector<HTMLButtonElement>('[data-testid="swap"]');
-      assertNotNull(button);
-      fireEvent.click(button);
-      flush();
-
-      const paths = await expectAnimatedRadialBarPaths(container, registry.current());
-      const settled = paths[paths.length - 1];
-      expect(paths).toHaveLength(5);
-      // The new dataKey (pv) settles to different geometry than the initial (uv) frame.
-      expect(settled).not.toEqual(initial);
-      // A mid frame differs from the settled state (the animation re-ran).
-      expect(paths[0]).not.toEqual(settled);
-    });
-  });
-
-  describe("tests that change data array", () => {
-    const data1 = smallerData;
-    const data2 = pageDataWithFillColor.slice(3, 6);
-
-    it("should animate from 2 to 3 bars", async () => {
-      const registry = createManagerRegistry();
-      const [data, setData] =
-        createSignal<ReadonlyArray<(typeof pageDataWithFillColor)[number]>>(data1);
-      const { container } = render(() => (
-        <AnimationControllerProvider value={registry.factory}>
-          <button
-            type="button"
-            data-testid="swap"
-            onClick={() => setData((prev) => (prev === data1 ? data2 : data1))}
-          />
-          <RadialBarChart width={400} height={400} data={data()}>
-            <RadialBar dataKey="uv" isAnimationActive />
-          </RadialBarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      await registry.current().completeAnimation();
-      flush();
-      expect(getRadialBarPathStrings(container)).toHaveLength(2);
-
-      const button = container.querySelector<HTMLButtonElement>('[data-testid="swap"]');
-      assertNotNull(button);
-      fireEvent.click(button);
-      flush();
-
-      const paths = await expectAnimatedRadialBarPaths(container, registry.current());
-      expect(paths).toHaveLength(5);
-      // 3 bars after the swap; a mid frame differs from the settled frame.
-      expect(paths[paths.length - 1]).toHaveLength(3);
-      expect(paths[0]).not.toEqual(paths[paths.length - 1]);
-    });
-  });
-
-  describe("when the radial bar element hides during the animation", () => {
-    it("should not crash when the bar hides during the animation", async () => {
-      const manager = new MockProgressAnimationManager("radialbar-anim");
-      const [isVisible, setIsVisible] = createSignal(true);
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <button type="button" data-testid="toggle" onClick={() => setIsVisible((p) => !p)} />
-          <RadialBarChart width={400} height={400} data={smallerData}>
-            <RadialBar dataKey="uv" isAnimationActive hide={!isVisible()} />
-          </RadialBarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      // Advance mid-animation, then hide the bar: the sectors unmount without crashing.
-      await manager.setAnimationProgress(0.3);
-      flush();
-      expect(getRadialBarPathStrings(container).length).toBeGreaterThan(0);
-
-      const button = container.querySelector<HTMLButtonElement>('[data-testid="toggle"]');
-      assertNotNull(button);
-      fireEvent.click(button);
-      flush();
-      expect(getRadialBarPathStrings(container)).toHaveLength(0);
-    });
-  });
-});

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

@@ -1,66 +0,0 @@
-// Subset port of recharts 3.8.1 test/polar/RadialBar/RadialBar.spec.tsx (commit
-// 7a23854) — the last polar graphical item: a <RadialBar> in a RadialBarChart
-// registers as a polar item and renders one ring sector per data row. `flush()`
-// because RadialBar registers via an effect and its sectors compute from the store.
-//
-// Tier-A subset: structural parity (one `.recharts-radial-bar-sector` per data row,
-// inside `.recharts-radial-bar-sectors`, fill forwarded). Stacks/background/
-// animation/label/exact geometry deferred.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { RadialBarChart, RadialBar } from "../../src";
-import { PageData } from "../_data";
-
-describe("<RadialBar /> in RadialBarChart", () => {
-  it("renders one ring sector per data row", () => {
-    const { container } = render(() => (
-      <RadialBarChart width={500} height={500} data={PageData}>
-        <RadialBar dataKey="uv" fill="#8884d8" isAnimationActive={false} />
-      </RadialBarChart>
-    ));
-    flush();
-
-    const sectors = container.querySelectorAll(
-      ".recharts-radial-bar-sectors .recharts-radial-bar-sector",
-    );
-    expect(sectors).toHaveLength(PageData.length);
-    const first = sectors.item(0);
-    if (first == null) {
-      throw new Error("expected a radial bar sector");
-    }
-    // Each sector is a <Sector> path.
-    expect(first.tagName.toLowerCase()).toBe("path");
-    expect(first).toHaveAttribute("fill", "#8884d8");
-    // The path describes a real arc (non-empty `d`).
-    expect((first.getAttribute("d") ?? "").length).toBeGreaterThan(0);
-  });
-
-  it("renders nothing when hide is set", () => {
-    const { container } = render(() => (
-      <RadialBarChart width={500} height={500} data={PageData}>
-        <RadialBar dataKey="uv" hide />
-      </RadialBarChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-radial-bar-sector")).toHaveLength(0);
-  });
-
-  it("renders a custom sector via the shape render prop (function form)", () => {
-    const { container } = render(() => (
-      <RadialBarChart width={500} height={500} data={PageData}>
-        <RadialBar
-          dataKey="uv"
-          isAnimationActive={false}
-          shape={(p) => <circle class="custom-radial" data-angle={p.endAngle} />}
-        />
-      </RadialBarChart>
-    ));
-    flush();
-
-    // No default sector <path>s; one custom circle per data row.
-    expect(container.querySelectorAll(".recharts-radial-bar-sector path")).toHaveLength(0);
-    expect(container.querySelectorAll("circle.custom-radial")).toHaveLength(PageData.length);
-  });
-});

package/test/polar/RadialBar.stacked.spec.tsx

@@ -1,57 +0,0 @@
-// Stacked RadialBar regression: two RadialBars sharing a stackId must render
-// ADJACENT arcs spanning the full [0, total] numeric angle-axis domain
-// (verified against released recharts: mobile [0,570]→[0°,56°], desktop
-// [570,1830]→[56°,180°] with endAngle=180 and total=1830).
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { RadialBarChart, RadialBar } from "../../src";
-
-const data = [{ month: "january", desktop: 1260, mobile: 570 }];
-
-describe("RadialBar stacking", () => {
-  it("stacks two RadialBars into adjacent arcs over the [0, total] domain", () => {
-    const { container } = render(() => (
-      <RadialBarChart
-        width={400}
-        height={300}
-        data={data}
-        endAngle={180}
-        innerRadius={80}
-        outerRadius={110}
-      >
-        <RadialBar dataKey="mobile" stackId="a" isAnimationActive={false} />
-        <RadialBar dataKey="desktop" stackId="a" isAnimationActive={false} />
-      </RadialBarChart>
-    ));
-    flush();
-
-    const sectors = Array.from(container.querySelectorAll(".recharts-sector"));
-    expect(sectors).toHaveLength(2);
-    // cx=200 cy=150, outerRadius=110. Convert each path's arc endpoints to angles.
-    const angleOf = (x: number, y: number): number =>
-      (Math.atan2(150 - y, x - 200) * 180) / Math.PI;
-    // Take real path endpoints only: M/L coords and each arc command's final pair
-    // (the A command's leading rx/ry/flags would otherwise pollute the angles).
-    const angleRange = (d: string): [number, number] => {
-      const angles: number[] = [];
-      for (const m of d.matchAll(/([MLA])\s*([^MLAZ]+)/g)) {
-        const nums = [...(m[2] ?? "").matchAll(/-?\d+(?:\.\d+)?/g)].map((n) => Number(n[0]));
-        const x = (m[1] === "A" ? nums[nums.length - 2] : nums[0]) ?? Number.NaN;
-        const y = (m[1] === "A" ? nums[nums.length - 1] : nums[1]) ?? Number.NaN;
-        if (Number.isFinite(x) && Number.isFinite(y)) {
-          angles.push(angleOf(x, y));
-        }
-      }
-      return [Math.min(...angles), Math.max(...angles)];
-    };
-    const [mobileStart, mobileEnd] = angleRange(sectors[0]?.getAttribute("d") ?? "");
-    const [desktopStart, desktopEnd] = angleRange(sectors[1]?.getAttribute("d") ?? "");
-    // mobile: [0, 570] of 1830 → 0°..56°
-    expect(mobileStart).toBeCloseTo(0, 0);
-    expect(mobileEnd).toBeCloseTo((570 / 1830) * 180, 0);
-    // desktop: [570, 1830] → 56°..180°
-    expect(desktopStart).toBeCloseTo((570 / 1830) * 180, 0);
-    expect(desktopEnd).toBeCloseTo(180, 0);
-  });
-});