solid-recharts 0.2.1 → 1.0.0

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

@@ -1,78 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Pie, PieChart } 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("Pie with strong typing", () => {
-  describe("with all implicit types", () => {
-    it("should render Pie with correct data and correct dataKey", () => {
-      const { container } = render(() => (
-        <PieChart width={400} height={400}>
-          <Pie data={data} dataKey="value" isAnimationActive={false} />
-        </PieChart>
-      ));
-      expect(container.querySelectorAll(".recharts-sector")).toHaveLength(data.length);
-    });
-
-    it("should allow incorrect or non-existent dataKeys in implicit mode", () => {
-      render(() => (
-        <PieChart width={400} height={400}>
-          <Pie data={data} dataKey="name" isAnimationActive={false} />
-          <Pie data={data} dataKey="foo" isAnimationActive={false} />
-        </PieChart>
-      ));
-    });
-  });
-
-  describe("with explicit Pie type parameters", () => {
-    it("should allow correct dataKey when typed explicitly", () => {
-      render(() => (
-        <PieChart width={400} height={400}>
-          <Pie<ExampleDataPoint> data={data} dataKey="value" isAnimationActive={false} />
-          <Pie<ExampleDataPoint>
-            data={data}
-            dataKey={(entry: ExampleDataPoint) => entry.value}
-            isAnimationActive={false}
-          />
-        </PieChart>
-      ));
-    });
-
-    it("should show errors when dataKey does not match explicit typing", () => {
-      render(() => (
-        <PieChart width={400} height={400}>
-          {/* @ts-expect-error TypeScript is correct here - the dataKey does not match and this should be an error */}
-          <Pie<ExampleDataPoint, number> data={data} dataKey="name" isAnimationActive={false} />
-          <Pie<ExampleDataPoint, number>
-            data={data}
-            /* @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}
-          />
-        </PieChart>
-      ));
-    });
-  });
-});
-
-/*
- * PERMANENT-N/A — vendored `Pie event handlers > getRelativeCoordinate` case.
- * It asserts the handler `event` type is accepted by `getRelativeCoordinate`.
- * In recharts the handler `e` is a React SyntheticEvent whose `currentTarget` is
- * non-null (matching getRelativeCoordinate's `MousePointer`/`TouchPointer`). The
- * Solid port wires native DOM events, whose `currentTarget` is `EventTarget | null`
- * and so is NOT assignable to those pointer types without an unsafe cast (forbidden
- * in src). The event models differ, so there is no faithful Solid equivalent.
- */

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

@@ -1,529 +0,0 @@
-// Subset port of recharts 3.9.0 test/polar/Pie/Pie.animation.spec.tsx. Proves the
-// wired Pie ENTER animation on the NEW v3.9 engine (AnimatedItems +
-// AnimationController): sectors grow from a collapsed (zero-sweep) state at t=0 to
-// their byte-identical final geometry at t=1, driven deterministically by the
-// MockControllerAnimationManager (injected via AnimationControllerProvider). Pie's
-// default isAnimationActive is "auto" (≈ active).
-//
-// v3.9 GOTCHA: the new JavascriptAnimation state machine calls onAnimationStart
-// SYNCHRONOUSLY in its constructor (on first render), not lazily when the first
-// frame ticks — so `onAnimationStart` is already called once right after render
-// (matching recharts 3.9 Pie.animation.spec).
-import { describe, expect, it, vi } from "vitest";
-import { createSignal, flush, Show } from "solid-js";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { PieChart, Pie } from "../../src";
-import { expectPieSectors } from "../helper/expectPieSectors";
-import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
-import { MockControllerAnimationManager as MockProgressAnimationManager } from "../animation/mockControllerAnimationManager";
-import { expectAnimatedPieAngles } from "../helper/expectAnimatedPieAngles";
-import { expectAnimatedPiePaths } from "../helper/expectAnimatedPiePaths";
-import { PageData } from "../_data";
-
-const smallerData = PageData.slice(0, 3);
-
-const SECTOR_SELECTOR = ".recharts-pie-sector path.recharts-sector";
-
-// Same golden as PieChart.spec (cx 255 = props 250 + margin-left 5).
-const pageDataSectorPaths = [
-  "M 455,255 A 200,200,0, 0,0, 267.6184,55.3985 L 255,255 Z",
-  "M 267.6184,55.3985 A 200,200,0, 0,0, 79.7896,158.5566 L 255,255 Z",
-  "M 79.7896,158.5566 A 200,200,0, 0,0, 93.1078,372.4347 L 255,255 Z",
-  "M 93.1078,372.4347 A 200,200,0, 0,0, 217.3458,451.4234 L 255,255 Z",
-  "M 217.3458,451.4234 A 200,200,0, 0,0, 406.3627,385.7261 L 255,255 Z",
-  "M 406.3627,385.7261 A 200,200,0, 0,0, 455,255.0003 L 255,255 Z",
-];
-
-function trim(s: string | null): string {
-  return (s ?? "").replace(/\s+/g, " ").trim();
-}
-
-describe("Pie animation", () => {
-  it("grows the sectors from collapsed (t=0) to the final geometry (t=1)", async () => {
-    const manager = new MockProgressAnimationManager("pie-anim");
-    const { container } = render(() => (
-      <AnimationControllerProvider value={manager.factory}>
-        <PieChart width={500} height={500}>
-          <Pie cx={250} cy={250} innerRadius={0} outerRadius={200} data={PageData} dataKey="uv" />
-        </PieChart>
-      </AnimationControllerProvider>
-    ));
-    flush();
-
-    // t=0: every sector has zero sweep (start === end) → no sector path renders.
-    expect(container.querySelectorAll(SECTOR_SELECTOR)).toHaveLength(0);
-
-    // Drive to completion → t=1 → full, byte-identical sectors.
-    await manager.completeAnimation();
-    flush();
-
-    const sectors = container.querySelectorAll(SECTOR_SELECTOR);
-    expect(sectors).toHaveLength(PageData.length);
-    expect([...sectors].map((s) => trim(s.getAttribute("d")))).toEqual(pageDataSectorPaths);
-  });
-
-  it("renders the final frame immediately when isAnimationActive is false", () => {
-    const { container } = render(() => (
-      <PieChart width={500} height={500}>
-        <Pie
-          isAnimationActive={false}
-          cx={250}
-          cy={250}
-          innerRadius={0}
-          outerRadius={200}
-          data={PageData}
-          dataKey="uv"
-        />
-      </PieChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(SECTOR_SELECTOR)).toHaveLength(PageData.length);
-  });
-
-  describe("with isAnimationActive=false", () => {
-    it("should render sectors without animation and not call the animation callbacks", () => {
-      const onAnimationStart = vi.fn();
-      const onAnimationEnd = vi.fn();
-      const { container } = render(() => (
-        <PieChart width={100} height={100}>
-          <Pie
-            data={smallerData}
-            dataKey="amt"
-            isAnimationActive={false}
-            onAnimationStart={onAnimationStart}
-            onAnimationEnd={onAnimationEnd}
-          />
-        </PieChart>
-      ));
-      flush();
-
-      expect(container.querySelectorAll(SECTOR_SELECTOR)).toHaveLength(smallerData.length);
-      expect(onAnimationStart).not.toHaveBeenCalled();
-      expect(onAnimationEnd).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("initial animation callbacks", () => {
-    it("should call onAnimationStart when the animation begins and onAnimationEnd when it ends", async () => {
-      const onAnimationStart = vi.fn();
-      const onAnimationEnd = vi.fn();
-      const manager = new MockProgressAnimationManager("pie-cb");
-      render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <PieChart width={100} height={100}>
-            <Pie
-              data={smallerData}
-              dataKey="amt"
-              isAnimationActive
-              onAnimationStart={onAnimationStart}
-              onAnimationEnd={onAnimationEnd}
-            />
-          </PieChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      // v3.9 engine: JavascriptAnimation calls onAnimationStart synchronously in its
-      // constructor (on render), so it has already fired once here.
-      expect(onAnimationStart).toHaveBeenCalledTimes(1);
-      expect(onAnimationEnd).not.toHaveBeenCalled();
-
-      await manager.setAnimationProgress(0.1);
-      flush();
-      expect(onAnimationStart).toHaveBeenCalledTimes(1);
-      expect(onAnimationEnd).not.toHaveBeenCalled();
-
-      await manager.completeAnimation();
-      flush();
-      expect(onAnimationStart).toHaveBeenCalledTimes(1);
-      expect(onAnimationEnd).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("initial animation with simple props", () => {
-    function renderTestCase(): {
-      container: Element;
-      animationManager: MockProgressAnimationManager;
-    } {
-      const manager = new MockProgressAnimationManager("pie-angles");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <PieChart width={100} height={100}>
-            <Pie data={smallerData} dataKey="amt" isAnimationActive />
-          </PieChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      return { container, animationManager: manager };
-    }
-
-    it("should render sectors with animation", async () => {
-      const { container, animationManager } = renderTestCase();
-
-      const pathDs = await expectAnimatedPiePaths(container, animationManager, 5);
-      expect(pathDs).toEqual([
-        [
-          "M 86,50 A 36,36,0, 0,0, 69.7423,19.8961 L 50,50 Z",
-          "M 69.7423,19.8961 A 36,36,0, 0,0, 35.6532,16.9823 L 50,50 Z",
-          "M 35.6532,16.9823 A 36,36,0, 0,0, 14.5223,43.8902 L 50,50 Z",
-        ],
-        [
-          "M 86,50 A 36,36,0, 0,0, 49.2784,14.0072 L 50,50 Z",
-          "M 49.2784,14.0072 A 36,36,0, 0,0, 14.0289,51.443 L 50,50 Z",
-          "M 14.0289,51.443 A 36,36,0, 0,0, 52.1638,85.9349 L 50,50 Z",
-        ],
-        [
-          "M 86,50 A 36,36,0, 0,0, 38.1402,16.0096 L 50,50 Z",
-          "M 38.1402,16.0096 A 36,36,0, 0,0, 21.8141,72.3955 L 50,50 Z",
-          "M 21.8141,72.3955 A 36,36,0, 0,0, 80.4308,69.2345 L 50,50 Z",
-        ],
-        [
-          "M 86,50 A 36,36,0, 0,0, 33.2853,18.1156 L 50,50 Z",
-          "M 33.2853,18.1156 A 36,36,0, 0,0, 29.5212,79.6078 L 50,50 Z",
-          "M 29.5212,79.6078 A 36,36,0, 0,0, 85.7312,54.3908 L 50,50 Z",
-        ],
-        [
-          "M 86,50 A 36,36,0, 0,0, 32,18.8231 L 50,50 Z",
-          "M 32,18.8231 A 36,36,0, 0,0, 32,81.1769 L 50,50 Z",
-          "M 32,81.1769 A 36,36,0, 0,0, 86,50 L 50,50 Z",
-        ],
-      ]);
-    });
-
-    it("should render sectors with animated angles", async () => {
-      const { container, animationManager } = renderTestCase();
-
-      const angles = await expectAnimatedPieAngles(container, animationManager, 4);
-      expect(angles).toEqual([
-        [
-          { endAngle: 67.2973, startAngle: 0 },
-          { endAngle: 134.5946, startAngle: 67.2973 },
-          { endAngle: 201.8918, startAngle: 134.5946 },
-        ],
-        [
-          { endAngle: 101.7302, startAngle: 0 },
-          { endAngle: 203.4603, startAngle: 101.7302 },
-          { endAngle: 305.1906, startAngle: 203.4603 },
-        ],
-        [
-          { endAngle: 116.2289, startAngle: 0 },
-          { endAngle: 232.4579, startAngle: 116.2289 },
-          { endAngle: 348.6866, startAngle: 232.4579 },
-        ],
-        [
-          { endAngle: 120, startAngle: 0 },
-          { endAngle: 240, startAngle: 120 },
-          { endAngle: 0, startAngle: 240 },
-        ],
-      ]);
-    });
-  });
-
-  describe("when changing dataKey prop", () => {
-    function renderTestCase(): {
-      container: Element;
-      animationManager: MockProgressAnimationManager;
-      changeDataKey: () => void;
-    } {
-      const manager = new MockProgressAnimationManager("pie-datakey");
-      const [dataKey, setDataKey] = createSignal("amt");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <PieChart width={100} height={100}>
-            <Pie data={smallerData} dataKey={dataKey()} isAnimationActive />
-          </PieChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      const changeDataKey = (): void => {
-        setDataKey((prev) => (prev === "amt" ? "pv" : "amt"));
-        flush();
-      };
-      return { container, animationManager: manager, changeDataKey };
-    }
-
-    describe("interaction after initial animation completes", () => {
-      it("should animate the pie sector angles", async () => {
-        const { container, animationManager, changeDataKey } = renderTestCase();
-        // Run the initial ('amt') animation to completion, then switch dataKey.
-        await animationManager.completeAnimation();
-        flush();
-        changeDataKey();
-
-        const angles = await expectAnimatedPieAngles(container, animationManager, 3);
-        expect(angles).toEqual([
-          [
-            { endAngle: 108.593, startAngle: 0 },
-            { endAngle: 280.8398, startAngle: 108.593 },
-            { endAngle: 0, startAngle: 280.8398 },
-          ],
-          [
-            { endAngle: 104.2775, startAngle: 0 },
-            { endAngle: 296.2907, startAngle: 104.2775 },
-            { endAngle: 0, startAngle: 296.2907 },
-          ],
-          [
-            { endAngle: 103.2874, startAngle: 0 },
-            { endAngle: 299.835, startAngle: 103.2874 },
-            { endAngle: 0, startAngle: 299.835 },
-          ],
-        ]);
-      });
-    });
-
-    describe("interaction in the middle of the initial animation", () => {
-      it("should animate the pie sector angles from the intermediate state", async () => {
-        const { container, animationManager, changeDataKey } = renderTestCase();
-        // Let the initial animation run half way, then switch dataKey.
-        await animationManager.setAnimationProgress(0.5);
-        flush();
-        changeDataKey();
-
-        const angles = await expectAnimatedPieAngles(container, animationManager, 3);
-        expect(angles).toEqual([
-          // The Pie is 337/360 rendered when the dataKey changes, and it continues from there
-          [
-            { endAngle: 101.0656, startAngle: 0 },
-            { endAngle: 265.785, startAngle: 101.0656 },
-            { endAngle: 337.4176, startAngle: 265.785 },
-          ],
-          [
-            { endAngle: 102.8729, startAngle: 0 },
-            { endAngle: 293.4815, startAngle: 102.8729 },
-            { endAngle: 355.7862, startAngle: 293.4815 },
-          ],
-          [
-            { endAngle: 103.2874, startAngle: 0 },
-            { endAngle: 299.835, startAngle: 103.2874 },
-            { endAngle: 0, startAngle: 299.835 },
-          ],
-        ]);
-      });
-    });
-  });
-
-  describe("when the Pie has a key prop to force re-animation", () => {
-    // Solid has no `key` prop; a keyed <Show> remounts the <Pie> when the dataKey
-    // changes, the port equivalent of upstream's `key={dataKey}` remount.
-    function renderTestCase(): {
-      container: Element;
-      animationManager: MockProgressAnimationManager;
-      changeDataKey: () => void;
-    } {
-      const manager = new MockProgressAnimationManager("pie-key");
-      const [dataKey, setDataKey] = createSignal("amt");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <PieChart width={100} height={100}>
-            <Show when={dataKey()} keyed>
-              {(key) => <Pie data={smallerData} dataKey={key} isAnimationActive />}
-            </Show>
-          </PieChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      const changeDataKey = (): void => {
-        setDataKey((prev) => (prev === "amt" ? "pv" : "amt"));
-        flush();
-      };
-      return { container, animationManager: manager, changeDataKey };
-    }
-
-    it("should re-run the initial animation from the beginning", async () => {
-      const { container, animationManager, changeDataKey } = renderTestCase();
-      await animationManager.completeAnimation();
-      flush();
-      changeDataKey();
-
-      // A remount re-runs the ENTER animation, so it starts collapsed (no sectors).
-      expectPieSectors(container, []);
-
-      const angles = await expectAnimatedPieAngles(container, animationManager, 3);
-      expect(angles).toEqual([
-        [
-          { endAngle: 70.4979, startAngle: 0 },
-          { endAngle: 204.6496, startAngle: 70.4979 },
-          { endAngle: 245.7145, startAngle: 204.6496 },
-        ],
-        [
-          { endAngle: 97.1692, startAngle: 0 },
-          { endAngle: 282.0742, startAngle: 97.1692 },
-          { endAngle: 338.6753, startAngle: 282.0742 },
-        ],
-        [
-          { endAngle: 103.2874, startAngle: 0 },
-          { endAngle: 299.835, startAngle: 103.2874 },
-          { endAngle: 0, startAngle: 299.835 },
-        ],
-      ]);
-    });
-  });
-
-  describe("tests that change data array", () => {
-    const data1 = smallerData.slice(0, 2);
-    const data2 = smallerData;
-
-    function renderTestCase(): {
-      container: Element;
-      animationManager: MockProgressAnimationManager;
-      changeData: () => void;
-    } {
-      const manager = new MockProgressAnimationManager("pie-data");
-      const [data, setData] = createSignal(data1);
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <PieChart width={100} height={100}>
-            <Pie data={data()} dataKey="amt" isAnimationActive />
-          </PieChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      const changeData = (): void => {
-        setData((prev) => (prev === data1 ? data2 : data1));
-        flush();
-      };
-      return { container, animationManager: manager, changeData };
-    }
-
-    describe("interaction after initial animation completes", () => {
-      it("should animate from 2 to 3 sectors", async () => {
-        const { container, animationManager, changeData } = renderTestCase();
-        await animationManager.completeAnimation();
-        flush();
-        changeData();
-
-        const angles = await expectAnimatedPieAngles(container, animationManager, 3);
-        expect(angles).toEqual([
-          [
-            { endAngle: 139.0477, startAngle: 0 },
-            { endAngle: 278.0953, startAngle: 139.0477 },
-            { endAngle: 0.0002, startAngle: 278.0953 },
-          ],
-          [
-            { endAngle: 123.5542, startAngle: 0 },
-            { endAngle: 247.1082, startAngle: 123.5542 },
-            { endAngle: 0, startAngle: 247.1082 },
-          ],
-          [
-            { endAngle: 120, startAngle: 0 },
-            { endAngle: 240, startAngle: 120 },
-            { endAngle: 0, startAngle: 240 },
-          ],
-        ]);
-      });
-    });
-
-    describe("interaction in the middle of the initial animation", () => {
-      it("should animate from 2 to 3 sectors from the intermediate state", async () => {
-        const { container, animationManager, changeData } = renderTestCase();
-        await animationManager.setAnimationProgress(0.5);
-        flush();
-        changeData();
-
-        const angles = await expectAnimatedPieAngles(container, animationManager, 3);
-        expect(angles).toEqual([
-          [
-            { endAngle: 127.7564, startAngle: 0 },
-            { endAngle: 255.5128, startAngle: 127.7564 },
-            { endAngle: 337.4176, startAngle: 255.5128 },
-          ],
-          [
-            { endAngle: 121.4473, startAngle: 0 },
-            { endAngle: 242.8946, startAngle: 121.4473 },
-            { endAngle: 355.7864, startAngle: 242.8946 },
-          ],
-          [
-            { endAngle: 120, startAngle: 0 },
-            { endAngle: 240, startAngle: 120 },
-            { endAngle: 0, startAngle: 240 },
-          ],
-        ]);
-      });
-    });
-  });
-
-  describe("when the pie element hides during the animation", () => {
-    // Upstream drives visibility through an in-tree <button> (createSelectorTestCase +
-    // button.click). We mirror that exactly: the toggle MUST come from a click inside
-    // the render root's reactive owner, not a bare setSignal from test scope — the
-    // re-appearing Pie REMOUNTS <AnimatedItems>, which creates fresh effects, and those
-    // would be ownerless (NO_OWNER_EFFECT) if the write came from the test body.
-    function renderTestCase(): {
-      container: Element;
-      animationManager: MockProgressAnimationManager;
-      toggleVisibility: () => void;
-    } {
-      const manager = new MockProgressAnimationManager("pie-hide");
-      const [isVisible, setIsVisible] = createSignal(true);
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <button
-            type="button"
-            data-testid="toggle"
-            onClick={() => setIsVisible((prev) => !prev)}
-          />
-          <PieChart width={100} height={100}>
-            <Pie data={smallerData} dataKey="amt" isAnimationActive hide={!isVisible()} />
-          </PieChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      const button = container.querySelector<HTMLButtonElement>('[data-testid="toggle"]');
-      if (button == null) {
-        throw new Error("Missing toggle button");
-      }
-      const toggleVisibility = (): void => {
-        fireEvent.click(button);
-        flush();
-      };
-      return { container, animationManager: manager, toggleVisibility };
-    }
-
-    it("should not crash when the pie hides during the animation", async () => {
-      const { container, animationManager, toggleVisibility } = renderTestCase();
-
-      await animationManager.setAnimationProgress(0.3);
-      flush();
-      toggleVisibility();
-
-      expectPieSectors(container, []);
-    });
-
-    it("should restart the animation from the beginning when the pie appears again", async () => {
-      const { container, animationManager, toggleVisibility } = renderTestCase();
-
-      await animationManager.setAnimationProgress(0.3);
-      flush();
-      toggleVisibility();
-
-      expectPieSectors(container, []);
-
-      toggleVisibility();
-
-      // On re-appear the ENTER animation restarts from a collapsed state (empty
-      // sectors at t=0), NOT resuming the mid-progress frame it was at when hidden.
-      // recharts parity: PieImpl drops previousSectorsRef.current while hidden.
-      expectPieSectors(container, []);
-
-      const angles = await expectAnimatedPieAngles(container, animationManager, 3);
-      expect(angles).toEqual([
-        [
-          { endAngle: 81.9049, startAngle: 0 },
-          { endAngle: 163.8098, startAngle: 81.9049 },
-          { endAngle: 245.7147, startAngle: 163.8098 },
-        ],
-        [
-          { endAngle: 112.8918, startAngle: 0 },
-          { endAngle: 225.7836, startAngle: 112.8918 },
-          { endAngle: 338.6755, startAngle: 225.7836 },
-        ],
-        [
-          { endAngle: 120, startAngle: 0 },
-          { endAngle: 240, startAngle: 120 },
-          { endAngle: 0, startAngle: 240 },
-        ],
-      ]);
-    });
-  });
-});