solid-recharts 0.2.0 → 1.0.0

package/test/util/tooltip/translate.spec.ts

@@ -1,396 +0,0 @@
-import {
-  Dimension2D,
-  getTooltipCSSClassName,
-  getTooltipTranslate,
-  getTooltipTranslateXY,
-  getTransformStyle,
-} from "../../../src/util/tooltip/translate";
-
-const dimensions: ReadonlyArray<Dimension2D> = ["x", "y"];
-
-describe.each(dimensions)("getTooltipTranslateXY dimension %s", (dimension) => {
-  describe("when position is defined", () => {
-    it("should return position", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: {},
-        coordinate: { x: 1, y: 2 },
-        key: dimension,
-        offset: 100,
-        position: { [dimension]: 8 },
-        reverseDirection: {},
-        tooltipDimension: 9,
-        viewBox: {},
-        viewBoxDimension: 4,
-      });
-      expect(result).toBe(8);
-    });
-  });
-
-  describe("when allowEscapeViewBox: true", () => {
-    it("should return number outside of viewBox", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: true },
-        coordinate: { x: 1, y: 2, [dimension]: 150 },
-        key: dimension,
-        offset: 3,
-        position: {},
-        reverseDirection: {},
-        tooltipDimension: 15,
-        viewBox: {},
-        viewBoxDimension: 4,
-      });
-      expect(result).toBe(153);
-    });
-
-    it("should return number even outside of viewBox when reversed", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: true },
-        coordinate: { x: 1, y: 2, [dimension]: 150 },
-        key: dimension,
-        offset: 3,
-        position: {},
-        reverseDirection: { [dimension]: true },
-        tooltipDimension: 15,
-        viewBox: {},
-        viewBoxDimension: 4,
-      });
-      expect(result).toBe(132);
-    });
-
-    it("should return number outside of viewBox even when offset is negative", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: true },
-        coordinate: { x: 1, y: 2, [dimension]: 900 },
-        key: dimension,
-        offset: -35,
-        position: {},
-        reverseDirection: { [dimension]: false },
-        tooltipDimension: 70,
-        viewBox: { [dimension]: 65 },
-        viewBoxDimension: 800,
-      });
-      expect(result).toBe(865);
-    });
-
-    it("should return number even outside of viewBox when reversed", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: true },
-        coordinate: { x: 1, y: 2, [dimension]: 150 },
-        key: dimension,
-        offset: 3,
-        position: {},
-        reverseDirection: { [dimension]: true },
-        tooltipDimension: 15,
-        viewBox: {},
-        viewBoxDimension: 4,
-      });
-      expect(result).toBe(132);
-    });
-  });
-
-  describe("when reverseDirection: true", () => {
-    it("should return viewBox.dimension if it is larger", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: false },
-        coordinate: { x: 1, y: 2, [dimension]: 150 },
-        key: dimension,
-        offset: 3,
-        position: {},
-        reverseDirection: { [dimension]: true },
-        tooltipDimension: 15,
-        viewBox: { [dimension]: 99999 },
-        viewBoxDimension: 4,
-      });
-      expect(result).toBe(99999);
-    });
-
-    it("should return calculated number if viewBox is smaller", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: false },
-        coordinate: { x: 1, y: 2, [dimension]: 150 },
-        key: dimension,
-        offset: 3,
-        position: {},
-        reverseDirection: { [dimension]: true },
-        tooltipDimension: 15,
-        viewBox: { [dimension]: 9 },
-        viewBoxDimension: 4,
-      });
-      expect(result).toBe(132);
-    });
-  });
-
-  describe("when tooltip fits inside viewBox", () => {
-    it("should return calculated translate", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: false },
-        coordinate: { x: 1, y: 2, [dimension]: 150 },
-        key: dimension,
-        offset: 3,
-        position: {},
-        reverseDirection: { [dimension]: false },
-        tooltipDimension: 15,
-        viewBox: { [dimension]: 10 },
-        viewBoxDimension: 400,
-      });
-      expect(result).toBe(153);
-    });
-  });
-
-  describe("when tooltip is outside the viewBox", () => {
-    it("should try to fit translate inside the viewBox", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: false },
-        coordinate: { x: 1, y: 2, [dimension]: 190 },
-        key: dimension,
-        offset: 3,
-        position: {},
-        reverseDirection: { [dimension]: false },
-        tooltipDimension: 15,
-        viewBox: { [dimension]: 9 },
-        viewBoxDimension: 60,
-      });
-      expect(result).toBe(172);
-    });
-  });
-
-  describe("when tooltip has negative offset", () => {
-    it("should try to fit translate inside the viewBox", () => {
-      const result = getTooltipTranslateXY({
-        allowEscapeViewBox: { [dimension]: false },
-        coordinate: { x: 1, y: 2, [dimension]: 900 },
-        key: dimension,
-        offset: -35,
-        position: {},
-        reverseDirection: { [dimension]: false },
-        tooltipDimension: 70,
-        viewBox: { [dimension]: 65 },
-        viewBoxDimension: 800,
-      });
-      expect(result).toBe(830);
-    });
-  });
-});
-
-describe("getTranslateTransform", () => {
-  describe("with translate3d", () => {
-    it("should generate transform string with prefixes", () => {
-      const result = getTransformStyle({
-        translateX: 7,
-        translateY: 18,
-        useTranslate3d: true,
-      });
-      const expected = {
-        transform: "translate3d(7px, 18px, 0)",
-      };
-      expect(result).toEqual(expected);
-    });
-  });
-  describe("without translate3d", () => {
-    it("should generate transform string with prefixes", () => {
-      const result = getTransformStyle({
-        translateX: 7,
-        translateY: 18,
-        useTranslate3d: false,
-      });
-      const expected = {
-        transform: "translate(7px, 18px)",
-      };
-      expect(result).toEqual(expected);
-    });
-  });
-});
-
-describe("getTooltipCSSClassName", () => {
-  it("should return only base class if nothing is defined", () => {
-    const result = getTooltipCSSClassName({
-      coordinate: undefined,
-      translateX: undefined,
-      translateY: undefined,
-    });
-    const expected = "recharts-tooltip-wrapper";
-    expect(result).toEqual(expected);
-  });
-  it("should add `right` if translateX is bigger than coordinate.x", () => {
-    const result = getTooltipCSSClassName({
-      coordinate: { x: 40 },
-      translateX: 85,
-      translateY: undefined,
-    });
-    const expected = "recharts-tooltip-wrapper recharts-tooltip-wrapper-right";
-    expect(result).toEqual(expected);
-  });
-  it("should add `left` if translateX is smaller than coordinate.x", () => {
-    const result = getTooltipCSSClassName({
-      coordinate: { x: 40 },
-      translateX: 15,
-      translateY: undefined,
-    });
-    const expected = "recharts-tooltip-wrapper recharts-tooltip-wrapper-left";
-    expect(result).toEqual(expected);
-  });
-  it("should add `bottom` if translateY is bigger than coordinate.y", () => {
-    const result = getTooltipCSSClassName({
-      coordinate: { y: 40 },
-      translateX: 85,
-      translateY: 94,
-    });
-    const expected = "recharts-tooltip-wrapper recharts-tooltip-wrapper-bottom";
-    expect(result).toEqual(expected);
-  });
-  it("should add `top` if translateY is smaller than coordinate.y", () => {
-    const result = getTooltipCSSClassName({
-      coordinate: { y: 40 },
-      translateX: 15,
-      translateY: 9,
-    });
-    const expected = "recharts-tooltip-wrapper recharts-tooltip-wrapper-top";
-    expect(result).toEqual(expected);
-  });
-});
-
-describe("getTooltipTranslate", () => {
-  it("should hide the tooltip when tooltip box size is negative or zero", () => {
-    const expected = { visibility: "hidden" };
-    expect(
-      getTooltipTranslate({
-        allowEscapeViewBox: {},
-        coordinate: { x: 1, y: 2 },
-        offsetTop: 0,
-        offsetLeft: 0,
-        position: {},
-        reverseDirection: {},
-        tooltipBox: { height: 0, width: 100 },
-        useTranslate3d: false,
-        viewBox: {},
-      }).cssProperties,
-    ).toEqual(expected);
-    expect(
-      getTooltipTranslate({
-        allowEscapeViewBox: {},
-        coordinate: { x: 1, y: 2 },
-        offsetTop: 0,
-        offsetLeft: 0,
-        position: {},
-        reverseDirection: {},
-        tooltipBox: { height: -10, width: 100 },
-        useTranslate3d: false,
-        viewBox: {},
-      }).cssProperties,
-    ).toEqual(expected);
-    expect(
-      getTooltipTranslate({
-        allowEscapeViewBox: {},
-        coordinate: { x: 1, y: 2 },
-        offsetTop: 0,
-        offsetLeft: 0,
-        position: {},
-        reverseDirection: {},
-        tooltipBox: { height: 100, width: 0 },
-        useTranslate3d: false,
-        viewBox: {},
-      }).cssProperties,
-    ).toEqual(expected);
-    expect(
-      getTooltipTranslate({
-        allowEscapeViewBox: {},
-        coordinate: { x: 1, y: 2 },
-        offsetTop: 0,
-        offsetLeft: 0,
-        position: {},
-        reverseDirection: {},
-        tooltipBox: { height: 10, width: -100 },
-        useTranslate3d: false,
-        viewBox: {},
-      }).cssProperties,
-    ).toEqual(expected);
-  });
-
-  it("should hide the tooltip if coordinate is undefined", () => {
-    const expected = { visibility: "hidden" };
-    expect(
-      getTooltipTranslate({
-        allowEscapeViewBox: {},
-        coordinate: undefined,
-        offsetTop: 0,
-        offsetLeft: 0,
-        position: {},
-        reverseDirection: {},
-        tooltipBox: { height: 100, width: 100 },
-        useTranslate3d: false,
-        viewBox: {},
-      }).cssProperties,
-    ).toEqual(expected);
-  });
-
-  it("should compute and prefix the transform based on width and height", () => {
-    const { cssProperties } = getTooltipTranslate({
-      allowEscapeViewBox: {},
-      coordinate: { x: 15, y: 67 },
-      offsetTop: 0,
-      offsetLeft: 0,
-      position: { x: 33, y: 87 },
-      reverseDirection: {},
-      tooltipBox: { height: 90, width: 120 },
-      useTranslate3d: false,
-      viewBox: { height: 400, width: 900 },
-    });
-    const expected = {
-      transform: "translate(33px, 87px)",
-    };
-    expect(cssProperties).toEqual(expected);
-  });
-
-  it("should return CSS classes", () => {
-    const { cssClasses } = getTooltipTranslate({
-      allowEscapeViewBox: {},
-      coordinate: { x: 15, y: 67 },
-      offsetTop: 0,
-      offsetLeft: 0,
-      position: { x: 33, y: 87 },
-      reverseDirection: {},
-      tooltipBox: { height: 90, width: 120 },
-      useTranslate3d: false,
-      viewBox: { height: 400, width: 900 },
-    });
-    const expected =
-      "recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom";
-    expect(cssClasses).toEqual(expected);
-  });
-
-  describe("when offsetTop and offsetLeft are different", () => {
-    it("should apply different offsets to x and y axes", () => {
-      const { cssProperties } = getTooltipTranslate({
-        allowEscapeViewBox: { x: true, y: true },
-        coordinate: { x: 100, y: 100 },
-        offsetTop: 20,
-        offsetLeft: 10,
-        position: {},
-        reverseDirection: {},
-        tooltipBox: { height: 50, width: 100 },
-        useTranslate3d: false,
-        viewBox: { height: 400, width: 400, x: 0, y: 0 },
-      });
-      expect(cssProperties).toEqual({
-        transform: "translate(110px, 120px)",
-      });
-    });
-
-    it("should handle negative offsetTop with positive offsetLeft", () => {
-      const { cssProperties } = getTooltipTranslate({
-        allowEscapeViewBox: { x: true, y: true },
-        coordinate: { x: 100, y: 100 },
-        offsetTop: -15,
-        offsetLeft: 25,
-        position: {},
-        reverseDirection: {},
-        tooltipBox: { height: 50, width: 100 },
-        useTranslate3d: false,
-        viewBox: { height: 400, width: 400, x: 0, y: 0 },
-      });
-      expect(cssProperties).toEqual({
-        transform: "translate(125px, 85px)",
-      });
-    });
-  });
-});

package/test/util/useAnimationId.spec.tsx

@@ -1,59 +0,0 @@
-// Tier-B port of recharts 3.8.1 test/util/useAnimationId.spec.tsx.
-//
-// recharts' hook detects input changes across React re-renders; the Solid port
-// is reactive — `useAnimationId(inputAccessor, prefix)` returns an
-// `Accessor<string>`. So this drives a signal + `flush()` instead of
-// renderHook's `rerender({ input })`. The memo is created inside `createRoot`
-// (it needs an owner), but the signal WRITES happen OUTSIDE the owned scope —
-// writing a signal inside an owned scope throws SIGNAL_WRITE_IN_OWNED_SCOPE.
-// Behavioral expectations are golden-anchored to recharts.
-import { describe, it, expect } from "vitest";
-import { createRoot, createSignal, flush } from "solid-js";
-import { useAnimationId } from "../../src/util/useAnimationId";
-
-describe("useAnimationId", () => {
-  it("should return a unique animation id", () => {
-    const [input] = createSignal<unknown>({ foo: "bar" });
-    const prefix = "test-";
-    const { id, dispose } = createRoot((d) => ({ id: useAnimationId(input, prefix), dispose: d }));
-
-    expect(id()).toBeDefined();
-    expect(id().startsWith(prefix)).toBe(true);
-    dispose();
-  });
-
-  it("should change animation id when input changes", () => {
-    const input1 = { foo: "bar" };
-    const input2 = { foo: "baz" };
-    const prefix = "test-";
-
-    const [input, setInput] = createSignal<unknown>(input1);
-    const { id, dispose } = createRoot((d) => ({ id: useAnimationId(input, prefix), dispose: d }));
-
-    const animationId1 = id();
-
-    setInput(input2);
-    flush();
-
-    const animationId2 = id();
-    expect(animationId1).not.toEqual(animationId2);
-    dispose();
-  });
-
-  it("should not change animation id when input does not change", () => {
-    const input1 = { foo: "bar" };
-    const prefix = "test-";
-
-    const [input, setInput] = createSignal<unknown>(input1);
-    const { id, dispose } = createRoot((d) => ({ id: useAnimationId(input, prefix), dispose: d }));
-
-    const animationId1 = id();
-
-    setInput(input1);
-    flush();
-
-    const animationId2 = id();
-    expect(animationId1).toBe(animationId2);
-    dispose();
-  });
-});

package/test/util/useElementOffset.spec.tsx

@@ -1,173 +0,0 @@
-// Ported from recharts 3.8.1 test/util/useElementOffset.spec.tsx.
-// Harness changes only (Tier A): React Testing Library's `renderHook`/`act` →
-// the local Solid shim; React's `useElementOffset` returns `[value, setter]`,
-// the Solid port returns `[Accessor, setter]`, so the current value is read by
-// calling the accessor (`result[0]()` where React wrote `result.current[0]`);
-// `unmount()` → the Solid renderHook's `cleanup()`. All assertions/expected
-// values are byte-identical to recharts.
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { flush } from "solid-js";
-import { renderHook } from "@solidjs/testing-library";
-import { useElementOffset } from "../../src/util/useElementOffset";
-import { getMockDomRect } from "../helper/mockGetBoundingClientRect";
-
-// Solid updates synchronously; `flush()` drains any pending reactive work so the
-// accessor reflects the latest value, mirroring React Testing Library's `act`.
-const act = (fn: () => void): void => {
-  fn();
-  flush();
-};
-
-describe("useElementOffset", () => {
-  let resizeObserverCallback: ((entries: ResizeObserverEntry[]) => void) | undefined,
-    observeSpy: ReturnType<typeof vi.fn>,
-    disconnectSpy: ReturnType<typeof vi.fn>;
-
-  beforeEach(() => {
-    resizeObserverCallback = undefined;
-    observeSpy = vi.fn();
-    disconnectSpy = vi.fn();
-    vi.stubGlobal(
-      "ResizeObserver",
-      vi.fn(function ResizeObserverMock(cb: (entries: ResizeObserverEntry[]) => void) {
-        resizeObserverCallback = cb;
-        return { observe: observeSpy, unobserve: vi.fn(), disconnect: disconnectSpy };
-      }),
-    );
-  });
-
-  it("should return initial zero values", () => {
-    const { result } = renderHook(() => useElementOffset());
-    const offset = result[0]();
-    expect(offset).toEqual({ height: 0, left: 0, top: 0, width: 0 });
-  });
-
-  it("should measure element on ref callback with a non-null node", () => {
-    const mockRect = getMockDomRect({ width: 100, height: 50, left: 10, top: 20 });
-    const node = document.createElement("div");
-    vi.spyOn(node, "getBoundingClientRect").mockReturnValue(mockRect);
-
-    const { result } = renderHook(() => useElementOffset());
-    act(() => {
-      result[1](node);
-    });
-
-    expect(result[0]()).toEqual({ width: 100, height: 50, left: 10, top: 20 });
-  });
-
-  it("should create a ResizeObserver and observe the node", () => {
-    const node = document.createElement("div");
-    vi.spyOn(node, "getBoundingClientRect").mockReturnValue(
-      getMockDomRect({ width: 100, height: 50 }),
-    );
-
-    const { result } = renderHook(() => useElementOffset());
-    act(() => {
-      result[1](node);
-    });
-
-    expect(observeSpy).toHaveBeenCalledWith(node);
-  });
-
-  it("should update state when ResizeObserver detects a size change", () => {
-    const node = document.createElement("div");
-    vi.spyOn(node, "getBoundingClientRect")
-      .mockReturnValueOnce(getMockDomRect({ width: 100, height: 50 }))
-      .mockReturnValue(getMockDomRect({ width: 100, height: 120 }));
-
-    const { result } = renderHook(() => useElementOffset());
-    act(() => {
-      result[1](node);
-    });
-    expect(result[0]().height).toBe(50);
-
-    act(() => {
-      resizeObserverCallback?.([] as unknown as ResizeObserverEntry[]);
-    });
-    expect(result[0]().height).toBe(120);
-  });
-
-  it("should ignore changes smaller than EPS (1px)", () => {
-    const node = document.createElement("div");
-    vi.spyOn(node, "getBoundingClientRect")
-      .mockReturnValueOnce(getMockDomRect({ width: 100, height: 50 }))
-      .mockReturnValue(getMockDomRect({ width: 100, height: 50.5 }));
-
-    const { result } = renderHook(() => useElementOffset());
-    act(() => {
-      result[1](node);
-    });
-    expect(result[0]().height).toBe(50);
-
-    act(() => {
-      resizeObserverCallback?.([] as unknown as ResizeObserverEntry[]);
-    });
-    // Height change of 0.5 is below EPS=1, should not update
-    expect(result[0]().height).toBe(50);
-  });
-
-  it("should not create a ResizeObserver when node is null", () => {
-    const { result } = renderHook(() => useElementOffset());
-    act(() => {
-      result[1](null);
-    });
-
-    expect(observeSpy).not.toHaveBeenCalled();
-  });
-
-  it("should disconnect the previous ResizeObserver when a new node is attached", () => {
-    const node1 = document.createElement("div");
-    const node2 = document.createElement("div");
-    vi.spyOn(node1, "getBoundingClientRect").mockReturnValue(
-      getMockDomRect({ width: 100, height: 50 }),
-    );
-    vi.spyOn(node2, "getBoundingClientRect").mockReturnValue(
-      getMockDomRect({ width: 200, height: 80 }),
-    );
-
-    const { result } = renderHook(() => useElementOffset());
-    act(() => {
-      result[1](node1);
-    });
-    expect(disconnectSpy).not.toHaveBeenCalled();
-
-    act(() => {
-      result[1](node2);
-    });
-    expect(disconnectSpy).toHaveBeenCalledTimes(1);
-    expect(result[0]()).toEqual({ width: 200, height: 80, left: 0, top: 0 });
-  });
-
-  it("should disconnect the ResizeObserver on unmount", () => {
-    const node = document.createElement("div");
-    vi.spyOn(node, "getBoundingClientRect").mockReturnValue(
-      getMockDomRect({ width: 100, height: 50 }),
-    );
-
-    const { result, cleanup } = renderHook(() => useElementOffset());
-    act(() => {
-      result[1](node);
-    });
-
-    cleanup();
-    expect(disconnectSpy).toHaveBeenCalled();
-  });
-
-  it("should disconnect the previous observer when node is set to null", () => {
-    const node = document.createElement("div");
-    vi.spyOn(node, "getBoundingClientRect").mockReturnValue(
-      getMockDomRect({ width: 100, height: 50 }),
-    );
-
-    const { result } = renderHook(() => useElementOffset());
-    act(() => {
-      result[1](node);
-    });
-    expect(disconnectSpy).not.toHaveBeenCalled();
-
-    act(() => {
-      result[1](null);
-    });
-    expect(disconnectSpy).toHaveBeenCalledTimes(1);
-  });
-});

package/test/util/usePrefersReducedMotion.spec.ts

@@ -1,54 +0,0 @@
-// Ported from recharts 3.8.1 test/util/usePrefersReducedMotion.spec.ts.
-// Harness changes only: renderHook from the local Solid shim; the hook returns
-// an Accessor, so the value is read via `result()` where React wrote
-// `result.current`. Assertions/mocks are otherwise byte-identical.
-import { test } from "vitest";
-import { renderHook } from "@solidjs/testing-library";
-
-import { usePrefersReducedMotion } from "../../src/util/usePrefersReducedMotion";
-import { Global } from "../../src/util/Global";
-
-test("prefers-reduced-motion query is not supported", () => {
-  vi.spyOn(Global, "isSsr", "get").mockReturnValue(false);
-  const { result } = renderHook(() => usePrefersReducedMotion());
-
-  expect(result()).toBe(false);
-});
-
-test("prefers-reduced-motion query is supported and matches", () => {
-  vi.spyOn(Global, "isSsr", "get").mockReturnValue(false);
-  vi.stubGlobal("matchMedia", () => ({
-    matches: true,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-  }));
-
-  const { result } = renderHook(() => usePrefersReducedMotion());
-
-  expect(result()).toBe(true);
-});
-
-test("prefers-reduced-motion query is supported and does not match", () => {
-  vi.spyOn(Global, "isSsr", "get").mockReturnValue(false);
-  vi.stubGlobal("matchMedia", () => ({
-    matches: false,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-  }));
-
-  const { result } = renderHook(() => usePrefersReducedMotion());
-
-  expect(result()).toBe(false);
-});
-
-test("in SSR should return false", () => {
-  vi.spyOn(Global, "isSsr", "get").mockReturnValue(true);
-  vi.stubGlobal("matchMedia", () => ({
-    matches: false,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-  }));
-  const { result } = renderHook(() => usePrefersReducedMotion());
-
-  expect(result()).toBe(false);
-});