solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/state/throttling.spec.ts

@@ -0,0 +1,200 @@
+// Ported from recharts 3.8.1 test/state/throttling.spec.ts (commit 7a23854).
+// Adapted: Redux dispatch → store.actions + dispatchMouseMove / dispatchKeyDown /
+// dispatchExternalEvent; React act() → Solid flush().
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { flush } from "solid-js";
+import type { HTMLMousePointer } from "../../src/util/types";
+import { createRechartsStore } from "../../src/state/store";
+import { dispatchMouseMove } from "../../src/state/mouseEventsMiddleware";
+import { dispatchKeyDown } from "../../src/state/keyboardEventsMiddleware";
+import { dispatchExternalEvent } from "../../src/state/externalEventsMiddleware";
+import { getMockDomRect } from "../helper/mockGetBoundingClientRect";
+
+function createMockMousePointer(x: number, y: number): HTMLMousePointer {
+  return {
+    clientX: x,
+    clientY: y,
+    currentTarget: {
+      getBoundingClientRect: () => getMockDomRect({ width: 500, height: 300 }),
+      offsetWidth: 500,
+      offsetHeight: 300,
+    },
+  };
+}
+
+describe("Throttling Middleware", () => {
+  let store: ReturnType<typeof createRechartsStore>;
+
+  beforeEach(() => {
+    store = createRechartsStore();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useFakeTimers({
+      toFake: ["requestAnimationFrame", "cancelAnimationFrame"],
+    });
+  });
+
+  describe("mouseMoveMiddleware", () => {
+    it("should use RAF by default", () => {
+      store.actions.eventSettings.setEventSettings({
+        throttleDelay: "raf",
+        throttledEvents: "all",
+      });
+      flush();
+      const move1 = createMockMousePointer(50, 50);
+
+      dispatchMouseMove(store, move1);
+      expect(vi.getTimerCount()).toBe(1);
+
+      flush();
+      vi.runAllTimers();
+      expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it("should use setTimeout when throttleDelay is a number", () => {
+      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
+      flush();
+      const move1 = createMockMousePointer(50, 50);
+
+      dispatchMouseMove(store, move1);
+      expect(vi.getTimerCount()).toBe(1);
+
+      flush();
+      vi.advanceTimersByTime(50);
+      expect(vi.getTimerCount()).toBe(1);
+
+      flush();
+      vi.advanceTimersByTime(50);
+      expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it("should run synchronously when throttledEvents does not include mousemove", () => {
+      store.actions.eventSettings.setEventSettings({
+        throttleDelay: "raf",
+        throttledEvents: ["click"],
+      });
+      flush();
+      const move1 = createMockMousePointer(50, 50);
+
+      dispatchMouseMove(store, move1);
+      expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it("should run synchronously when throttledEvents is empty", () => {
+      store.actions.eventSettings.setEventSettings({ throttleDelay: "raf", throttledEvents: [] });
+      flush();
+      const move1 = createMockMousePointer(50, 50);
+
+      dispatchMouseMove(store, move1);
+      expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it("should throttle mousemove events (not debounce) when throttleDelay is a number", () => {
+      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
+      flush();
+      const move1 = createMockMousePointer(50, 50);
+      const move2 = createMockMousePointer(60, 60);
+
+      dispatchMouseMove(store, move1);
+      expect(vi.getTimerCount()).toBe(1);
+
+      flush();
+      vi.advanceTimersByTime(50);
+      dispatchMouseMove(store, move2);
+      expect(vi.getTimerCount()).toBe(1);
+
+      flush();
+      vi.advanceTimersByTime(60);
+      expect(vi.getTimerCount()).toBe(0);
+    });
+  });
+
+  describe("keyboardEventsMiddleware", () => {
+    it("should throttle keydown events (not debounce) when throttleDelay is a number", () => {
+      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
+      flush();
+
+      dispatchKeyDown(store, "ArrowRight");
+      expect(vi.getTimerCount()).toBe(1);
+
+      flush();
+      vi.advanceTimersByTime(50);
+      dispatchKeyDown(store, "ArrowRight");
+      expect(vi.getTimerCount()).toBe(1);
+
+      flush();
+      vi.advanceTimersByTime(60);
+      expect(vi.getTimerCount()).toBe(0);
+    });
+  });
+
+  describe("externalEventsMiddleware", () => {
+    const mockHandler = vi.fn();
+    const mockEvent = {
+      type: "click",
+      currentTarget: document.createElement("div"),
+    };
+
+    beforeEach(() => {
+      mockHandler.mockClear();
+    });
+
+    it("should execute first event immediately (leading edge) when throttleDelay is a number", () => {
+      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
+      flush();
+
+      dispatchExternalEvent(store, {
+        reactEvent: mockEvent,
+        handler: mockHandler,
+      });
+
+      expect(mockHandler).toHaveBeenCalledTimes(1);
+      expect(vi.getTimerCount()).toBe(1);
+
+      flush();
+      vi.runAllTimers();
+      expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it("should throttle click event (leading + trailing) when configured", () => {
+      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
+      flush();
+
+      dispatchExternalEvent(store, {
+        reactEvent: mockEvent,
+        handler: mockHandler,
+      });
+      expect(mockHandler).toHaveBeenCalledTimes(1);
+
+      dispatchExternalEvent(store, {
+        reactEvent: mockEvent,
+        handler: mockHandler,
+      });
+      expect(mockHandler).toHaveBeenCalledTimes(1);
+
+      flush();
+      vi.advanceTimersByTime(110);
+      expect(mockHandler).toHaveBeenCalledTimes(2);
+      expect(vi.getTimerCount()).toBe(0);
+    });
+
+    it("should NOT throttle click event when not in allowlist", () => {
+      store.actions.eventSettings.setEventSettings({
+        throttleDelay: 100,
+        throttledEvents: ["mousemove"],
+      });
+      flush();
+
+      dispatchExternalEvent(store, {
+        reactEvent: mockEvent,
+        handler: mockHandler,
+      });
+
+      expect(vi.getTimerCount()).toBe(0);
+      expect(mockHandler).toHaveBeenCalled();
+    });
+  });
+});

package/test/state/zIndexSlice.spec.ts

@@ -0,0 +1,85 @@
+// Solid-recharts spec (no recharts counterpart): regression tests for the
+// zIndex slice's per-store isolation. The slice once shallow-copied
+// `initialZIndexState.zIndexMap`, so every chart store wrapped the SAME
+// module-level ZIndexEntry objects — one chart registering its portal <g>
+// overwrote every other chart's portal element and graphical items portal'd
+// into a different chart's svg (bars rendered inside a sibling pie chart).
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { createRechartsStore } from "../../src/state/store";
+import { initialZIndexState } from "../../src/state/zIndexSlice";
+import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
+import { selectZIndexPortalElement } from "../../src/zIndex/zIndexSelectors";
+import { assertNotNull } from "../helper/assertNotNull";
+
+describe("zIndexSlice", () => {
+  it("keeps portal element registrations isolated between two stores", () => {
+    const storeA = createRechartsStore();
+    const storeB = createRechartsStore();
+    const elementA = document.createElement("g");
+    const elementB = document.createElement("g");
+
+    storeA.actions.zIndex.registerZIndexPortalElement({
+      zIndex: DefaultZIndexes.bar,
+      element: elementA,
+      isPanorama: false,
+    });
+    flush();
+    storeB.actions.zIndex.registerZIndexPortalElement({
+      zIndex: DefaultZIndexes.bar,
+      element: elementB,
+      isPanorama: false,
+    });
+    flush();
+
+    // Pre-fix, B's registration overwrote the shared default entry, so A
+    // resolved B's element here.
+    expect(selectZIndexPortalElement(storeA.state, DefaultZIndexes.bar, false)).toBe(elementA);
+    expect(selectZIndexPortalElement(storeB.state, DefaultZIndexes.bar, false)).toBe(elementB);
+  });
+
+  it("does not mutate the module-level initial state when registering", () => {
+    const store = createRechartsStore();
+    const element = document.createElement("g");
+
+    store.actions.zIndex.registerZIndexPortalElement({
+      zIndex: DefaultZIndexes.bar,
+      element,
+      isPanorama: false,
+    });
+    flush();
+
+    const initialEntry = initialZIndexState.zIndexMap[DefaultZIndexes.bar];
+    assertNotNull(initialEntry);
+    expect(initialEntry.element).toBeUndefined();
+    expect(initialEntry.consumers).toBe(0);
+  });
+
+  it("unregistering an element in one store leaves the other store's element intact", () => {
+    const storeA = createRechartsStore();
+    const storeB = createRechartsStore();
+    const elementA = document.createElement("g");
+    const elementB = document.createElement("g");
+
+    storeA.actions.zIndex.registerZIndexPortalElement({
+      zIndex: DefaultZIndexes.bar,
+      element: elementA,
+      isPanorama: false,
+    });
+    storeB.actions.zIndex.registerZIndexPortalElement({
+      zIndex: DefaultZIndexes.bar,
+      element: elementB,
+      isPanorama: false,
+    });
+    flush();
+
+    storeB.actions.zIndex.unregisterZIndexPortalElement({
+      zIndex: DefaultZIndexes.bar,
+      isPanorama: false,
+    });
+    flush();
+
+    expect(selectZIndexPortalElement(storeA.state, DefaultZIndexes.bar, false)).toBe(elementA);
+    expect(selectZIndexPortalElement(storeB.state, DefaultZIndexes.bar, false)).toBeUndefined();
+  });
+});

package/test/synchronisation/useChartSynchronisation.spec.tsx

@@ -0,0 +1,225 @@
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from "vitest";
+
+import { BarChart, Bar, Tooltip, XAxis } from "../../src";
+import { PageData } from "../_data";
+import { selectSyncId } from "../../src/state/selectors/rootPropsSelectors";
+import {
+  TOOLTIP_SYNC_EVENT,
+  syncEventCenter,
+  type TooltipSyncListener,
+} from "../../src/synchronisation/syncRegistry";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { hideTooltip, showTooltip } from "../component/Tooltip/tooltipTestHelpers";
+import { barChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+
+/*
+ * Ported from recharts 3.8.1 test/synchronisation/useChartSynchronisation.spec.tsx.
+ *
+ * Solid adaptations:
+ *  - recharts emits over the mitt `eventCenter`; the Solid port emits over
+ *    `syncEventCenter` (src/synchronisation/syncRegistry.ts), which mirrors mitt's
+ *    `on`/`off`/`emit` surface. The spy subscribes there.
+ *  - recharts' payload is a Redux `setSyncInteraction(payload)` action object;
+ *    in the Solid port `setSyncInteraction` is a void store mutator, so the
+ *    registry carries the *plain* TooltipSyncState payload — the spy asserts that
+ *    object directly (it's identical to recharts' `action.payload`).
+ *  - State settles with Solid `flush()` (inside the test helpers) rather than
+ *    fake timers / Redux autobatch.
+ */
+
+describe("useTooltipChartSynchronisation", () => {
+  let eventSpy: Mock;
+  let listener: TooltipSyncListener;
+
+  beforeEach(() => {
+    eventSpy = vi.fn();
+    listener = (syncId, payload, emitter) => eventSpy(syncId, payload, emitter);
+    syncEventCenter.on(TOOLTIP_SYNC_EVENT, listener);
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  afterEach(() => {
+    syncEventCenter.off(TOOLTIP_SYNC_EVENT, listener);
+  });
+
+  describe("when syncId is set and Tooltip is present", () => {
+    const viewBox = {
+      height: 390,
+      width: 790,
+      x: 5,
+      y: 5,
+    };
+
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={800} height={400} data={PageData} syncId="my-sync-id">
+        <Bar dataKey="uv" />
+        <Tooltip />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should select syncId from the state", () => {
+      const { spy } = renderTestCase(selectSyncId);
+      expectLastCalledWith(spy, "my-sync-id");
+    });
+
+    it("should send one sync event on the initial render", () => {
+      renderTestCase();
+      expect(eventSpy).toHaveBeenCalledTimes(1);
+      expect(eventSpy).toHaveBeenLastCalledWith(
+        "my-sync-id",
+        {
+          active: false,
+          coordinate: undefined,
+          dataKey: undefined,
+          index: null,
+          label: undefined,
+          sourceViewBox: viewBox,
+          graphicalItemId: undefined,
+        },
+        expect.any(Symbol),
+      );
+    });
+
+    it("should send a sync event after mouse move, and another after mouse leave", () => {
+      const { container } = renderTestCase();
+      eventSpy.mockClear();
+      showTooltip(container, barChartMouseHoverTooltipSelector);
+      expect(eventSpy).toHaveBeenCalledTimes(1);
+      expect(eventSpy).toHaveBeenLastCalledWith(
+        "my-sync-id",
+        {
+          active: true,
+          coordinate: {
+            x: 202.5,
+            y: 200,
+          },
+          dataKey: undefined,
+          index: "1",
+          label: "1",
+          sourceViewBox: viewBox,
+          graphicalItemId: undefined,
+        },
+        expect.any(Symbol),
+      );
+
+      hideTooltip(container, barChartMouseHoverTooltipSelector);
+      expect(eventSpy).toHaveBeenCalledTimes(2);
+      expect(eventSpy).toHaveBeenLastCalledWith(
+        "my-sync-id",
+        {
+          active: false,
+          coordinate: {
+            x: 202.5,
+            y: 200,
+          },
+          dataKey: undefined,
+          index: null,
+          label: undefined,
+          sourceViewBox: viewBox,
+          graphicalItemId: undefined,
+        },
+        expect.any(Symbol),
+      );
+    });
+  });
+
+  describe("with XAxis and dataKey", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={800} height={400} data={PageData} syncId="my-sync-id">
+        <Bar dataKey="uv" />
+        <XAxis dataKey="name" />
+        <Tooltip />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should send the XAxis label as activeLabel", () => {
+      const { container } = renderTestCase();
+      eventSpy.mockClear();
+      showTooltip(container, barChartMouseHoverTooltipSelector);
+      expect(eventSpy).toHaveBeenCalledTimes(1);
+      expect(eventSpy).toHaveBeenLastCalledWith(
+        "my-sync-id",
+        {
+          active: true,
+          coordinate: {
+            x: 202.5,
+            y: 200,
+          },
+          dataKey: undefined,
+          index: "1",
+          label: "Page B",
+          sourceViewBox: {
+            height: 360,
+            width: 790,
+            x: 5,
+            y: 5,
+          },
+          graphicalItemId: undefined,
+        },
+        expect.any(Symbol),
+      );
+    });
+  });
+
+  describe("when syncId is set but Tooltip is not present", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={800} height={400} data={PageData} syncId="my-sync-id">
+        <Bar dataKey="uv" />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should select syncId from the state", () => {
+      const { spy } = renderTestCase(selectSyncId);
+      expectLastCalledWith(spy, "my-sync-id");
+    });
+
+    it("should not send any sync events", () => {
+      renderTestCase();
+      expect(eventSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("when syncId is not set and Tooltip is not present", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={800} height={400} data={PageData}>
+        <Bar dataKey="uv" />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should select syncId from the state", () => {
+      const { spy } = renderTestCase(selectSyncId);
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("should not send any sync events", () => {
+      renderTestCase();
+      expect(eventSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("when syncId is not set but Tooltip is present", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={800} height={400} data={PageData}>
+        <Bar dataKey="uv" />
+        <Tooltip />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should select syncId from the state", () => {
+      const { spy } = renderTestCase(selectSyncId);
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("should not send any sync events", () => {
+      renderTestCase();
+      expect(eventSpy).not.toHaveBeenCalled();
+    });
+  });
+});

package/test/util/BarUtils.spec.ts

@@ -0,0 +1,39 @@
+import { describe, test, expect, vi } from "vitest";
+import { minPointSizeCallback } from "../../src/util/BarUtils";
+
+// Ported from recharts 3.8.1 test/util/BarUtils.spec.tsx.
+
+describe("BarUtils", () => {
+  describe("minPointSizeCallback", () => {
+    test("should return a number if number is passed", () => {
+      const minPointSize = minPointSizeCallback(5)(1, 0);
+      expect(minPointSize).toEqual(5);
+    });
+
+    test("should return a number if a function is passed that returns a number", () => {
+      const spy = vi.fn().mockReturnValue(10);
+      const minPointSize = minPointSizeCallback(spy)(200, 0);
+      expect(spy).toHaveBeenCalledWith(200, 0);
+      expect(minPointSize).toEqual(10);
+    });
+
+    test("should return a number if a function is passed that takes null and returns a number", () => {
+      const spy = vi.fn().mockReturnValue(10);
+      const minPointSize = minPointSizeCallback(spy)(null, 0);
+      expect(spy).toHaveBeenCalledWith(null, 0);
+      expect(minPointSize).toEqual(10);
+    });
+
+    test("should return a number if a function is passed that takes undefined and returns a number", () => {
+      const spy = vi.fn().mockReturnValue(10);
+      const minPointSize = minPointSizeCallback(spy)(undefined, 0);
+      expect(spy).toHaveBeenCalledWith(undefined, 0);
+      expect(minPointSize).toEqual(10);
+    });
+
+    test("should throw an invariant when any other datatype is passed as value", () => {
+      const spy = vi.fn().mockReturnValue(10);
+      expect(() => minPointSizeCallback(spy, 1)("100", 0)).toThrow();
+    });
+  });
+});