solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,396 @@
+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

@@ -0,0 +1,59 @@
+// 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

@@ -0,0 +1,173 @@
+// 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

@@ -0,0 +1,54 @@
+// 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);
+});