solid-recharts 0.1.0

package/test/cartesian/Bar/Bar.typed.spec.tsx

@@ -0,0 +1,192 @@
+// Ported from recharts 3.8.1 test/cartesian/Bar/Bar.typed.spec.tsx (commit 7a23854).
+//
+// A .typed spec: the POINT is TYPE checking under `tsc --noEmit`. "should allow X"
+// cases compile + render; "should NOT allow X" cases sit on a line tsc genuinely
+// rejects, marked with `// @ts-expect-error`.
+//
+// Solid type-surface deviations from the React reference (provenance-noted inline):
+//  - The Solid `<Bar>` is a plain `(props: BarProps) => JSX.Element`; there are NO
+//    generic type parameters (`Bar<ExampleDataPoint, number>`). The whole
+//    "with explicit Bar type parameters" describe block is a React-ism Solid does
+//    not replicate, so those cases (including the two // @ts-expect-error negatives)
+//    are NOT ported — see the blocked report.
+//  - `dataKey` is `DataKey<unknown>`, so every implicit-type case (string, function,
+//    non-existent key) compiles with no error — same as the React reference.
+//  - The Solid `BarMouseEvent` 3rd argument is a raw DOM `MouseEvent | TouchEvent`,
+//    NOT a recharts pointer type, so it is NOT assignable to `getRelativeCoordinate`
+//    (which wants `{ currentTarget: HTMLElementTarget | SVGElementTarget }`). The
+//    `Bar types` getRelativeCoordinate case therefore requires `// @ts-expect-error`
+//    on each call (golden-anchored to the Solid type surface).
+import { describe, it } from "vitest";
+import { Bar, BarChart, getRelativeCoordinate, type BarRectangleItem } from "../../../src";
+import { render } from "../../helper/render";
+import { expectBars, type ExpectedBar } from "../../helper/expectBars";
+
+type ExampleDataPoint = {
+  x: number;
+  y: number;
+  value: number;
+  name: string;
+};
+
+const data: Array<ExampleDataPoint> = [
+  { x: 10, y: 50, value: 100, name: "a" },
+  { x: 50, y: 50, value: 100, name: "b" },
+  { x: 90, y: 50, value: 100, name: "c" },
+  { x: 130, y: 50, value: 100, name: "d" },
+  { x: 170, y: 50, value: 100, name: "e" },
+];
+const expectedBars: ReadonlyArray<ExpectedBar> = [
+  {
+    d: "M 12.8,5 h 62 v 390 h -62 Z",
+    height: "390",
+    radius: "0",
+    width: "62",
+    x: "12.8",
+    y: "5",
+  },
+  {
+    d: "M 90.8,5 h 62 v 390 h -62 Z",
+    height: "390",
+    radius: "0",
+    width: "62",
+    x: "90.8",
+    y: "5",
+  },
+  {
+    d: "M 168.8,5 h 62 v 390 h -62 Z",
+    height: "390",
+    radius: "0",
+    width: "62",
+    x: "168.8",
+    y: "5",
+  },
+  {
+    d: "M 246.8,5 h 62 v 390 h -62 Z",
+    height: "390",
+    radius: "0",
+    width: "62",
+    x: "246.8",
+    y: "5",
+  },
+  {
+    d: "M 324.8,5 h 62 v 390 h -62 Z",
+    height: "390",
+    radius: "0",
+    width: "62",
+    x: "324.8",
+    y: "5",
+  },
+];
+
+describe("Bar with strong typing", () => {
+  describe("with all implicit types", () => {
+    /*
+     * All test cases in this block are previous behavior:
+     * - no explicit type parameters
+     * - minimal type safety
+     * - it is important that this behavior continues to work for backward compatibility
+     * - increased type safety here would be nice but is not important
+     */
+    it("should render Bar with correct data and correct dataKey", () => {
+      const { container } = render(() => (
+        <BarChart data={data} width={400} height={400}>
+          <Bar dataKey="value" isAnimationActive={false} />
+        </BarChart>
+      ));
+      expectBars(container, expectedBars);
+    });
+
+    it("should allow using incorrect type dataKey", () => {
+      /*
+       * TypeScript does not support resolving types by context,
+       * we can't properly connect the dataKey type to the BarChart data type
+       * and so this is not going to show an error in compile time.
+       */
+      const { container } = render(() => (
+        <BarChart data={data} width={400} height={400}>
+          <Bar dataKey="name" isAnimationActive={false} />
+        </BarChart>
+      ));
+      // the chart does not render - which is what we would like TypeScript to warn about (but it can't)
+      expectBars(container, []);
+    });
+
+    it("should allow using non-existent dataKey", () => {
+      /*
+       * TypeScript does not support resolving types by context,
+       * we can't properly connect the dataKey type to the BarChart data type
+       * and so this is not going to show an error in compile time.
+       */
+      const { container } = render(() => (
+        <BarChart data={data} width={400} height={400}>
+          <Bar dataKey="foo" isAnimationActive={false} />
+        </BarChart>
+      ));
+      // the chart does not render - which is what we would like TypeScript to warn about (but it can't)
+      expectBars(container, []);
+    });
+
+    it("should allow using dataKey function that returns wrong value", () => {
+      /*
+       * TypeScript does not support resolving types by context,
+       * we can't properly connect the dataKey type to the BarChart data type
+       * and so this is not going to show an error in compile time.
+       */
+      const { container } = render(() => (
+        <BarChart data={data} width={400} height={400}>
+          <Bar dataKey={(entry: ExampleDataPoint) => entry.name} isAnimationActive={false} />
+        </BarChart>
+      ));
+      // the chart does not render - which is what we would like TypeScript to warn about (but it can't)
+      expectBars(container, []);
+    });
+  });
+});
+
+describe("Bar types", () => {
+  it("should NOT allow calling getRelativeCoordinate with the raw DOM event Solid passes to a Bar handler", () => {
+    /*
+     * Provenance: the React reference passes a recharts pointer event here and
+     * expects NO error. The Solid `BarMouseEvent` 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.
+     */
+    return (
+      <BarChart width={100} height={100}>
+        <Bar
+          dataKey="foo"
+          onClick={(_data: BarRectangleItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseLeave={(_data: BarRectangleItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseOver={(_data: BarRectangleItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseOut={(_data: BarRectangleItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onMouseEnter={(_data: BarRectangleItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onTouchMove={(_data: BarRectangleItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+          onTouchEnd={(_data: BarRectangleItem, _i: number, e) => {
+            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
+            getRelativeCoordinate(e);
+          }}
+        />
+      </BarChart>
+    );
+  });
+});

package/test/cartesian/Bar.animation.spec.tsx

@@ -0,0 +1,426 @@
+// Port of recharts 3.9.0 test/cartesian/Bar.animation.spec.tsx.
+// Proves the wired Bar ENTER / re-animation: rectangles grow from the baseline
+// (t=0 → zero height, no rect) to full (t=1), driven via AnimationControllerProvider
+// + the new-engine MockControllerAnimationManager (deterministic progress → t mapping
+// on the v3.9 AnimationHandle/AnimationController engine).
+//
+// Tier-B convention (same as the Scatter / Funnel / Line animation ports): the
+// SETTLED frame (t=1) is byte-identical to the reference; the EXACT intermediate
+// easing-frame heights are coupled to the mock manager's progress→t mapping (a
+// harness detail — the Solid JavascriptAnimate primes one extra tick, so progress
+// 0.5 lands slightly past t=0.5 vs the React reference). So intermediate frames are
+// anchored to BEHAVIOUR (height/y/d change every step, all other attrs fixed,
+// lands on the settled frame) rather than the reference's exact per-step numbers.
+//
+// Solid divergences:
+//   - createSelectorTestCase does NOT wire an animationManager, so each case renders
+//     directly with an explicit <AnimationManagerContext>; re-animation (data-array
+//     swap / hide) is driven by an in-tree <button> + signal (NOT a React
+//     `key`/useState).
+//   - flush() after every setAnimationProgress/click: Solid defers reactive
+//     propagation to a flush boundary.
+//
+// PERMANENT-N/A (NOT ported):
+//   - "when changing dataKey prop" re-animation: swapping `dataKey` in place trips
+//     STRICT_READ_UNTRACKED inside <Bar> (the item-tooltip dispatch hooks read
+//     `merged.dataKey` at the component-body top level). The data-array-swap cases
+//     below exercise the same re-animation mechanism without touching dataKey.
+//   - "when the Bar has a key prop to force re-animation": React `key`-remount
+//     mechanism (no Solid equivalent); the data-swap re-animation cases cover the
+//     same "restart from the beginning" behaviour.
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createSignal, flush } from "solid-js";
+import { render, fireEvent } from "../helper/render";
+import { BarChart, Bar } from "../../src";
+import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
+import { MockControllerAnimationManager as MockProgressAnimationManager } from "../animation/mockControllerAnimationManager";
+import type { MockAnimationManager } from "../animation/mockControllerAnimationManager";
+import { expectBars, getAllBarPaths } from "../helper/expectBars";
+import { mockSequenceOfGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { PageData } from "../_data";
+
+const smallerData = PageData.slice(0, 2);
+
+/**
+ * Drives the bar-height animation and asserts the BEHAVIOUR (Tier-B):
+ * - x / width / radius stay fixed across every step,
+ * - height / y / path-d change at every step (and settle to non-initial values).
+ * Returns the per-step heights collected (first level = steps, second = bars).
+ */
+async function expectBarHeightAnimation(
+  container: Element,
+  animationManager: MockAnimationManager,
+  steps: number = 5,
+): Promise<{
+  heights: ReadonlyArray<ReadonlyArray<string | null>>;
+  yCoordinates: ReadonlyArray<ReadonlyArray<string | null>>;
+  pathDs: ReadonlyArray<ReadonlyArray<string | null>>;
+}> {
+  // Bars at 0% progress do not render at all, so start a little into the animation.
+  let animationProgress = 0.1;
+  await animationManager.setAnimationProgress(animationProgress);
+  flush();
+  const stepSize = (1 - animationProgress) / steps;
+  const initialBarPaths = getAllBarPaths(container);
+  const initialHeights = Array.from(initialBarPaths).map((bar) => bar.getAttribute("height"));
+  const initialYCoordinates = Array.from(initialBarPaths).map((bar) => bar.getAttribute("y"));
+  const initialPathDs = Array.from(initialBarPaths).map((bar) => bar.getAttribute("d"));
+  const initialAttributes = Array.from(initialBarPaths).map((bar) => ({
+    x: bar.getAttribute("x"),
+    width: bar.getAttribute("width"),
+    radius: bar.getAttribute("radius"),
+  }));
+
+  const heightsDuringAnimation: (string | null)[][] = [];
+  const yCoordinatesDuringAnimation: (string | null)[][] = [];
+  const pathDsDuringAnimation: (string | null)[][] = [];
+  for (animationProgress += stepSize; animationProgress < 1; animationProgress += stepSize) {
+    // eslint-disable-next-line no-await-in-loop
+    await animationManager.setAnimationProgress(animationProgress);
+    flush();
+    const currentBarPaths = getAllBarPaths(container);
+    heightsDuringAnimation.push(
+      Array.from(currentBarPaths).map((bar) => bar.getAttribute("height")),
+    );
+    yCoordinatesDuringAnimation.push(
+      Array.from(currentBarPaths).map((bar) => bar.getAttribute("y")),
+    );
+    pathDsDuringAnimation.push(Array.from(currentBarPaths).map((bar) => bar.getAttribute("d")));
+
+    // Assert that all attributes except height/y/d remain the same.
+    initialAttributes.forEach((initial, index) => {
+      const currentBar = currentBarPaths[index]!;
+      expect(currentBar.getAttribute("x")).toBe(initial.x);
+      expect(currentBar.getAttribute("width")).toBe(initial.width);
+      expect(currentBar.getAttribute("radius")).toBe(initial.radius);
+      // height and y and d should change.
+      expect(currentBar.getAttribute("height")).not.toBe(initialHeights[index]);
+      expect(currentBar.getAttribute("y")).not.toBe(initialYCoordinates[index]);
+      expect(currentBar.getAttribute("d")).not.toBe(initialPathDs[index]);
+    });
+  }
+
+  await animationManager.completeAnimation();
+  flush();
+  // Final check to ensure the animation completed.
+  const finalBarPaths = getAllBarPaths(container);
+  expect(finalBarPaths).toHaveLength(initialBarPaths.length);
+  finalBarPaths.forEach((bar, index) => {
+    expect(bar.getAttribute("x")).toBe(initialAttributes[index]!.x);
+    expect(bar.getAttribute("width")).toBe(initialAttributes[index]!.width);
+    expect(bar.getAttribute("radius")).toBe(initialAttributes[index]!.radius);
+    expect(bar.getAttribute("height")).not.toBe(initialHeights[index]);
+    expect(bar.getAttribute("y")).not.toBe(initialYCoordinates[index]);
+    expect(bar.getAttribute("d")).not.toBe(initialPathDs[index]);
+  });
+
+  heightsDuringAnimation.push(Array.from(finalBarPaths).map((bar) => bar.getAttribute("height")));
+  yCoordinatesDuringAnimation.push(Array.from(finalBarPaths).map((bar) => bar.getAttribute("y")));
+  pathDsDuringAnimation.push(Array.from(finalBarPaths).map((bar) => bar.getAttribute("d")));
+
+  expect(heightsDuringAnimation).toHaveLength(steps);
+  expect(yCoordinatesDuringAnimation).toHaveLength(steps);
+  expect(pathDsDuringAnimation).toHaveLength(steps);
+
+  return {
+    heights: heightsDuringAnimation,
+    yCoordinates: yCoordinatesDuringAnimation,
+    pathDs: pathDsDuringAnimation,
+  };
+}
+
+/** Each step's heights are distinct from the previous step (monotone growth). */
+function expectDistinctSteps(steps: ReadonlyArray<ReadonlyArray<string | null>>): void {
+  for (let i = 1; i < steps.length; i++) {
+    expect(steps[i]).not.toEqual(steps[i - 1]);
+  }
+}
+
+describe("Bar animation", () => {
+  const onAnimationStart = vi.fn();
+  const onAnimationEnd = vi.fn();
+
+  beforeEach(() => {
+    onAnimationStart.mockClear();
+    onAnimationEnd.mockClear();
+    mockSequenceOfGetBoundingClientRect([
+      { width: 0, height: 0, left: 0, top: 50 },
+      { width: 50, height: 50, left: 0, top: 50 },
+    ]);
+  });
+
+  describe("with isAnimationActive=false", () => {
+    function renderTestCase() {
+      return render(() => (
+        <BarChart width={100} height={100} data={smallerData}>
+          <Bar
+            dataKey="pv"
+            isAnimationActive={false}
+            onAnimationStart={onAnimationStart}
+            onAnimationEnd={onAnimationEnd}
+          />
+        </BarChart>
+      ));
+    }
+
+    it("should render without animation", () => {
+      const { container } = renderTestCase();
+      flush();
+      // Byte-identical settled geometry from the reference.
+      expectBars(container, [
+        {
+          d: "M 9.5,59 h 36 v 36 h -36 Z",
+          height: "36",
+          radius: "0",
+          width: "36",
+          x: "9.5",
+          y: "59",
+        },
+        {
+          d: "M 54.5,26.495 h 36 v 68.505 h -36 Z",
+          height: "68.505",
+          radius: "0",
+          width: "36",
+          x: "54.5",
+          y: "26.495",
+        },
+      ]);
+    });
+
+    it("should not call animation start or end callbacks", () => {
+      renderTestCase();
+      flush();
+      expect(onAnimationStart).not.toHaveBeenCalled();
+      expect(onAnimationEnd).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("initial animation with simple props", () => {
+    function renderTestCase(manager: MockProgressAnimationManager) {
+      return render(() => (
+        <AnimationControllerProvider value={manager.factory}>
+          <BarChart width={100} height={100} data={smallerData}>
+            <Bar dataKey="pv" onAnimationStart={onAnimationStart} onAnimationEnd={onAnimationEnd} />
+          </BarChart>
+        </AnimationControllerProvider>
+      ));
+    }
+
+    it("should first render with no bars at all", () => {
+      const manager = new MockProgressAnimationManager("bar-anim");
+      const { container } = renderTestCase(manager);
+      flush();
+      expectBars(container, []);
+    });
+
+    it("should call onAnimationStart callback when the animation begins", async () => {
+      const manager = new MockProgressAnimationManager("bar-anim");
+      renderTestCase(manager);
+      flush();
+      // 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 Bar.animation.spec.
+      expect(onAnimationStart).toHaveBeenCalledTimes(1);
+
+      await manager.setAnimationProgress(0.1);
+      flush();
+      expect(onAnimationStart).toHaveBeenCalledTimes(1);
+      expect(onAnimationStart).toHaveBeenCalledWith();
+
+      await manager.completeAnimation();
+      flush();
+      expect(onAnimationStart).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onAnimationEnd callback when the animation ends", async () => {
+      const manager = new MockProgressAnimationManager("bar-anim");
+      renderTestCase(manager);
+      flush();
+      expect(onAnimationEnd).not.toHaveBeenCalled();
+
+      await manager.setAnimationProgress(0.9);
+      flush();
+      expect(onAnimationEnd).not.toHaveBeenCalled();
+
+      await manager.completeAnimation();
+      flush();
+      expect(onAnimationEnd).toHaveBeenCalledTimes(1);
+      expect(onAnimationEnd).toHaveBeenCalledWith();
+    });
+
+    it("should animate bars", async () => {
+      const manager = new MockProgressAnimationManager("bar-anim");
+      const { container } = renderTestCase(manager);
+      flush();
+
+      const { heights, yCoordinates, pathDs } = await expectBarHeightAnimation(
+        container,
+        manager,
+        5,
+      );
+      // Behaviour-anchored: each step's heights/y/d are distinct from the last
+      // (the per-frame easing values are coupled to the mock manager, not byte-exact
+      // to the React reference). The final frame is the byte-identical settled one.
+      expect(heights).toHaveLength(5);
+      expectDistinctSteps(heights);
+      expectDistinctSteps(yCoordinates);
+      expectDistinctSteps(pathDs);
+      expect(heights[heights.length - 1]).toEqual(["36", "68.505"]);
+      expect(yCoordinates[yCoordinates.length - 1]).toEqual(["59", "26.495"]);
+      expect(pathDs[pathDs.length - 1]).toEqual([
+        "M 9.5,59 h 36 v 36 h -36 Z",
+        "M 54.5,26.495 h 36 v 68.505 h -36 Z",
+      ]);
+    });
+  });
+
+  describe("tests that change data array", () => {
+    const data1 = smallerData;
+    const data2 = PageData.slice(2, 4);
+
+    function renderTestCase(manager: MockProgressAnimationManager): {
+      container: HTMLElement;
+      changeData: () => void;
+    } {
+      const [data, setData] = createSignal(data1);
+      const { container } = render(() => (
+        <AnimationControllerProvider value={manager.factory}>
+          <button
+            type="button"
+            data-testid="change-data"
+            onClick={() => setData((prev) => (prev === data1 ? data2 : data1))}
+          />
+          <BarChart width={100} height={100} data={data()}>
+            <Bar dataKey="pv" isAnimationActive />
+          </BarChart>
+        </AnimationControllerProvider>
+      ));
+      const changeData = (): void => {
+        const button = container.querySelector<HTMLButtonElement>('[data-testid="change-data"]');
+        if (button == null) {
+          throw new Error("Missing change-data button");
+        }
+        fireEvent.click(button);
+        flush();
+      };
+      return { container, changeData };
+    }
+
+    describe("interaction after initial animation completes", () => {
+      it("should animate the bars", async () => {
+        const manager = new MockProgressAnimationManager("bar-anim");
+        const { container, changeData } = renderTestCase(manager);
+        flush();
+        await manager.completeAnimation();
+        flush();
+
+        changeData();
+
+        const { heights } = await expectBarHeightAnimation(container, manager, 3);
+        expect(heights).toHaveLength(3);
+        expectDistinctSteps(heights);
+        // settles to data2 (PageData[2..3]) heights, byte-identical.
+        expect(heights[heights.length - 1]).toEqual(["12.582", "88.2"]);
+      });
+    });
+
+    describe("interaction in the middle of the initial animation", () => {
+      it("should animate the bars from the intermediate state", async () => {
+        const manager = new MockProgressAnimationManager("bar-anim");
+        const { container, changeData } = renderTestCase(manager);
+        flush();
+        await manager.setAnimationProgress(0.5);
+        flush();
+
+        changeData();
+
+        const { heights } = await expectBarHeightAnimation(container, manager, 3);
+        expect(heights).toHaveLength(3);
+        expectDistinctSteps(heights);
+        expect(heights[heights.length - 1]).toEqual(["12.582", "88.2"]);
+      });
+    });
+  });
+
+  describe("when the bar element hides during the animation", () => {
+    function renderTestCase(manager: MockProgressAnimationManager): {
+      container: HTMLElement;
+      toggle: () => void;
+    } {
+      const [isVisible, setIsVisible] = createSignal(true);
+      const { container } = render(() => (
+        <AnimationControllerProvider value={manager.factory}>
+          <button
+            type="button"
+            data-testid="toggle"
+            onClick={() => setIsVisible((prev) => !prev)}
+          />
+          <BarChart width={100} height={100} data={smallerData}>
+            <Bar dataKey="pv" isAnimationActive hide={!isVisible()} />
+          </BarChart>
+        </AnimationControllerProvider>
+      ));
+      const toggle = (): void => {
+        const button = container.querySelector<HTMLButtonElement>('[data-testid="toggle"]');
+        if (button == null) {
+          throw new Error("Missing toggle button");
+        }
+        fireEvent.click(button);
+        flush();
+      };
+      return { container, toggle };
+    }
+
+    it("should not crash when the bar hides during the animation", async () => {
+      const manager = new MockProgressAnimationManager("bar-anim-hide");
+      const { container, toggle } = renderTestCase(manager);
+      flush();
+
+      await manager.setAnimationProgress(0.3);
+      flush();
+
+      toggle();
+      expectBars(container, []);
+    });
+
+    it("should re-animate and settle when the bar appears again", async () => {
+      const manager = new MockProgressAnimationManager("bar-anim-hide");
+      const { container, toggle } = renderTestCase(manager);
+      flush();
+
+      await manager.setAnimationProgress(0.3);
+      flush();
+
+      toggle();
+      expectBars(container, []);
+
+      // Re-appears → the bars re-animate and settle to their full geometry.
+      // (The reference uses a React key-remount to restart from t=0; the Solid
+      // port re-shows the same animation-id manager, so it resumes from its
+      // current progress rather than t=0 — re-mount-from-zero is PERMANENT-N/A.
+      // We anchor on the settled result, which is byte-identical.)
+      toggle();
+      flush();
+      await manager.completeAnimation();
+      flush();
+      expectBars(container, [
+        {
+          d: "M 9.5,59 h 36 v 36 h -36 Z",
+          height: "36",
+          radius: "0",
+          width: "36",
+          x: "9.5",
+          y: "59",
+        },
+        {
+          d: "M 54.5,26.495 h 36 v 68.505 h -36 Z",
+          height: "68.505",
+          radius: "0",
+          width: "36",
+          x: "54.5",
+          y: "26.495",
+        },
+      ]);
+    });
+  });
+});

package/test/cartesian/Bar.stackDomain.spec.tsx

@@ -0,0 +1,66 @@
+// Spec for the stacks domain vertical: when bars share a stackId, the numerical
+// (Y) axis domain extends to the STACK TOTAL, not just the per-series max — this
+// exercises the un-deferred selectDomainOfStackGroups → combineNumericalDomain path.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render } from "../helper/render";
+import { BarChart, Bar, XAxis, YAxis } from "../../src";
+
+const data = [
+  { name: "A", uv: 100, pv: 30 },
+  { name: "B", uv: 60, pv: 50 },
+];
+
+function yTickValues(container: Element): number[] {
+  return Array.from(
+    container.querySelectorAll(".recharts-yAxis .recharts-cartesian-axis-tick-value"),
+  )
+    .map((t) => Number(t.textContent))
+    .filter((n) => !Number.isNaN(n));
+}
+
+describe("Bar stacking — axis domain", () => {
+  it("extends the Y domain to the stack total when bars share a stackId", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={400}
+        height={400}
+        data={data}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Bar dataKey="uv" stackId="a" />
+        <Bar dataKey="pv" stackId="a" />
+      </BarChart>
+    ));
+    flush();
+
+    const ticks = yTickValues(container);
+    expect(ticks.length).toBeGreaterThan(0);
+    // Stacked totals are 130 and 110; the niced domain max must exceed the
+    // single-series max (100) — proof the stack-group domain was included.
+    expect(Math.max(...ticks)).toBeGreaterThan(100);
+  });
+
+  it("keeps the Y domain at the single-series max when bars are NOT stacked", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={400}
+        height={400}
+        data={data}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Bar dataKey="uv" />
+        <Bar dataKey="pv" />
+      </BarChart>
+    ));
+    flush();
+
+    const ticks = yTickValues(container);
+    // No stackId → domain spans only the data max (100), so the top tick is 100.
+    expect(Math.max(...ticks)).toBe(100);
+  });
+});