solid-recharts 0.1.0

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

@@ -0,0 +1,132 @@
+import { describe, expect, it } from "vitest";
+import type { RadialBarDataItem } from "../../../src";
+import { getRelativeCoordinate, RadialBar, RadialBarChart } from "../../../src";
+import { render } from "../../helper/render";
+
+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

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

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

@@ -0,0 +1,57 @@
+// 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 "../helper/render";
+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);
+  });
+});