solid-recharts 0.1.0

package/test/shape/__snapshots__/Rectangle.spec.tsx.snap

@@ -0,0 +1,117 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Rectangle /> > Should render 1 rectangle in simple Rectangle when radius is [ 5, 10, 8, 15 ] 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-rectangle"
+      d="M50,55A 5,5,0,0,1,55,50L 120,50A 10,10,0,0,1,
+        130,60L 130,142A 8,8,0,0,1,
+        122,150L 65,150A 15,15,0,0,1,
+        50,135Z"
+      fill="#ff7300"
+      height="100"
+      width="80"
+      x="50"
+      y="50"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Rectangle /> > Should render 1 rectangle in simple Rectangle when radius is 5 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-rectangle"
+      d="M 50,55
+            A 5,5,0,0,1,55,50
+            L 125,50
+            A 5,5,0,0,1,130,55
+            L 130,145
+            A 5,5,0,0,1,125,150
+            L 55,150
+            A 5,5,0,0,1,50,145 Z"
+      fill="#ff7300"
+      height="100"
+      radius="5"
+      width="80"
+      x="50"
+      y="50"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Rectangle /> > Should render 4 arc when height < 0 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-rectangle"
+      d="M 50,195
+            A 5,5,0,0,0,55,200
+            L 125,200
+            A 5,5,0,0,0,130,195
+            L 130,105
+            A 5,5,0,0,0,125,100
+            L 55,100
+            A 5,5,0,0,0,50,105 Z"
+      fill="#ff7300"
+      height="-100"
+      radius="5"
+      width="80"
+      x="50"
+      y="200"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Rectangle /> > Shouldn't render any path when x, y, width or height is not a number 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+  </svg>
+</div>
+`;
+
+exports[`<Rectangle /> > Shouldn't render anything when height === 0 || width === 0 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+  </svg>
+</div>
+`;

package/test/shape/__snapshots__/Sector.spec.tsx.snap

@@ -0,0 +1,71 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Sector /> > Don't render any sector when props is invalid 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="500"
+    viewBox="0 0 500 500"
+    width="500"
+  >
+    <title />
+    <desc />
+  </svg>
+</div>
+`;
+
+exports[`<Sector /> > Render 1 sector in simple Sector 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="500"
+    viewBox="0 0 500 500"
+    width="500"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-sector"
+      cx="200"
+      cy="300"
+      d="M 400,300
+    A 200,200,0,
+    0,0,
+    200,100
+  L 200,150
+            A 150,150,0,
+            0,1,
+            350,300 Z"
+      fill="#ff7902"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Sector /> > Render 1 sector when cornerRadius > 0 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="500"
+    viewBox="0 0 500 500"
+    width="500"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-sector"
+      cx="200"
+      cy="300"
+      d="M 389.7367,300
+    A10,10,0,0,0,399.7228,289.4737
+    A200,200,0,0,0,210.5263,100.2772
+    A10,10,0,0,0,200,110.2633
+  L200,140.3128
+      A10,10,0,0,0,209.375,150.2933
+      A150,150,0,0,1,349.7067,290.625
+      A10,10,0,0,0,359.6872,300Z"
+      fill="#ff7902"
+    />
+  </svg>
+</div>
+`;

package/test/shape/__snapshots__/Trapezoid.spec.tsx.snap

@@ -0,0 +1,64 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Trapezoid /> > Don't render any Trapezoid when props are invalid 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="500"
+    viewBox="0 0 500 500"
+    width="500"
+  >
+    <title />
+    <desc />
+  </svg>
+</div>
+`;
+
+exports[`<Trapezoid /> > Render 1 Trapezoid in simple Trapezoid 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="500"
+    viewBox="0 0 500 500"
+    width="500"
+  >
+    <title />
+    <desc />
+    <g>
+      <path
+        class="recharts-trapezoid"
+        d="M 300,100L 400,100L 350,150L 350,150L 300,100 Z"
+        fill="#f00"
+        height="50"
+        x="300"
+        y="100"
+      />
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`<Trapezoid /> > Render 1 Trapezoid with animation in simple Trapezoid 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="500"
+    viewBox="0 0 500 500"
+    width="500"
+  >
+    <title />
+    <desc />
+    <g>
+      <path
+        class="recharts-trapezoid"
+        d="M 300,100L 400,100L 350,150L 350,150L 300,100 Z"
+        fill="#f00"
+        height="50"
+        style="stroke-dasharray: 0px 1px;"
+        x="300"
+        y="100"
+      />
+    </g>
+  </svg>
+</div>
+`;

package/test/state/chartDataSlice.spec.ts

@@ -0,0 +1,53 @@
+// Tier B port of recharts 3.8.1 test/state/chartDataSlice.spec.ts.
+//
+// The recharts spec tests the Redux contract — `chartDataReducer(state, action)`
+// and the `setChartData(payload)` action creator. The Solid-native port has no
+// reducer/action-object, so this is re-expressed against the slice's store +
+// action functions. The EXPECTED VALUES are golden-anchored to recharts (same
+// start/end indices, same clearing behavior). Identity assertions (`toBe` on the
+// stored array) become structural (`toEqual`): a Solid store proxies nested
+// values, so the stored array is a reactive proxy, not the original reference.
+import { describe, it, expect } from "vitest";
+import { flush } from "solid-js";
+import { createChartDataSlice } from "../../src/state/chartDataSlice";
+
+describe("chartDataSlice", () => {
+  it("should start with undefined chartData", () => {
+    const { state } = createChartDataSlice();
+    expect(state.chartData).toBeUndefined();
+    expect(state.dataStartIndex).toBe(0);
+    expect(state.dataEndIndex).toBe(0);
+  });
+
+  it("should set chartData array with start and end index", () => {
+    const chartData = [{ value: 1 }, { value: 2 }, { value: 3 }];
+    const { state, actions } = createChartDataSlice();
+    actions.setChartData(chartData);
+    flush();
+    expect(state.chartData).toEqual(chartData);
+    expect(state.dataStartIndex).toBe(0);
+    expect(state.dataEndIndex).toBe(2);
+  });
+
+  it("should set empty array with start and end index", () => {
+    const chartData: never[] = [];
+    const { state, actions } = createChartDataSlice();
+    actions.setChartData(chartData);
+    flush();
+    expect(state.chartData).toEqual(chartData);
+    expect(state.dataStartIndex).toBe(0);
+    expect(state.dataEndIndex).toBe(0);
+  });
+
+  it("should clear the state when set undefined", () => {
+    const chartData = [{ value: 1 }, { value: 2 }, { value: 3 }];
+    const { state, actions } = createChartDataSlice();
+    actions.setChartData(chartData);
+    flush();
+    actions.setChartData(undefined);
+    flush();
+    expect(state.chartData).toBeUndefined();
+    expect(state.dataStartIndex).toBe(0);
+    expect(state.dataEndIndex).toBe(0);
+  });
+});

package/test/state/externalEventsMiddleware.spec.ts

@@ -0,0 +1,178 @@
+import { flush } from "solid-js";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { CategoricalChartFunc } from "../../src/chart/types";
+import { dispatchExternalEvent } from "../../src/state/externalEventsMiddleware";
+import { createRechartsStore } from "../../src/state/store";
+
+function createMockEvent(type: string): MouseEvent {
+  const event = new MouseEvent(type);
+  Object.defineProperty(event, "currentTarget", {
+    configurable: true,
+    value: document.createElement("div"),
+  });
+  return event;
+}
+
+describe("externalEventsMiddleware", () => {
+  let store: ReturnType<typeof createRechartsStore>;
+  let mockHandler: ReturnType<typeof vi.fn<CategoricalChartFunc<MouseEvent>>>;
+  let mockEvent: MouseEvent;
+
+  beforeEach(() => {
+    store = createRechartsStore();
+    mockHandler = vi.fn<CategoricalChartFunc<MouseEvent>>();
+    mockEvent = createMockEvent("mousemove");
+    vi.clearAllTimers();
+  });
+
+  it("should not call handler when handler is undefined", () => {
+    dispatchExternalEvent(store, {
+      reactEvent: mockEvent,
+      handler: undefined,
+    });
+
+    flush();
+    vi.runAllTimers();
+
+    expect(mockHandler).not.toHaveBeenCalled();
+  });
+
+  it("should call handler with state and event after requestAnimationFrame triggers", () => {
+    dispatchExternalEvent(store, {
+      reactEvent: mockEvent,
+      handler: mockHandler,
+    });
+
+    expect(mockHandler).toHaveBeenCalledTimes(0);
+    expect(vi.getTimerCount()).toBeGreaterThan(0);
+
+    flush();
+    vi.runAllTimers();
+
+    expect(vi.getTimerCount()).toBe(0);
+    expect(mockHandler).toHaveBeenCalledTimes(1);
+    expect(mockHandler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        activeCoordinate: undefined,
+        activeDataKey: undefined,
+        activeIndex: null,
+        activeLabel: undefined,
+        activeTooltipIndex: null,
+        isTooltipActive: false,
+      }),
+      expect.objectContaining({
+        type: mockEvent.type,
+      }),
+    );
+  });
+
+  it("should not need to persist the event for Solid users", () => {
+    dispatchExternalEvent(store, {
+      reactEvent: mockEvent,
+      handler: mockHandler,
+    });
+
+    expect(mockHandler).toHaveBeenCalledTimes(0);
+    expect(vi.getTimerCount()).toBeGreaterThan(0);
+  });
+
+  it("should cancel previous animation frame when dispatched multiple times with same event type", () => {
+    const firstEvent = createMockEvent("touchmove");
+    const secondEvent = createMockEvent("touchmove");
+
+    dispatchExternalEvent(store, {
+      reactEvent: firstEvent,
+      handler: mockHandler,
+    });
+
+    dispatchExternalEvent(store, {
+      reactEvent: secondEvent,
+      handler: mockHandler,
+    });
+
+    flush();
+    vi.runAllTimers();
+
+    expect(mockHandler).toHaveBeenCalledTimes(1);
+  });
+
+  it("should NOT cancel animation frames for different event types", () => {
+    const touchEvent = createMockEvent("touchmove");
+    const mouseMoveEvent = createMockEvent("mousemove");
+    const handler1 = vi.fn<CategoricalChartFunc<MouseEvent>>();
+    const handler2 = vi.fn<CategoricalChartFunc<MouseEvent>>();
+
+    dispatchExternalEvent(store, {
+      reactEvent: touchEvent,
+      handler: handler1,
+    });
+
+    dispatchExternalEvent(store, {
+      reactEvent: mouseMoveEvent,
+      handler: handler2,
+    });
+
+    flush();
+    vi.runAllTimers();
+
+    expect(handler1).toHaveBeenCalledTimes(1);
+    expect(handler2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should handle multiple handlers with different events", () => {
+    const handler1 = vi.fn<CategoricalChartFunc<MouseEvent>>();
+    const handler2 = vi.fn<CategoricalChartFunc<MouseEvent>>();
+    const event1 = createMockEvent("touchmove");
+    const event2 = createMockEvent("mousemove");
+
+    dispatchExternalEvent(store, {
+      reactEvent: event1,
+      handler: handler1,
+    });
+
+    dispatchExternalEvent(store, {
+      reactEvent: event2,
+      handler: handler2,
+    });
+
+    flush();
+    vi.runAllTimers();
+
+    expect(handler1).toHaveBeenCalledTimes(1);
+    expect(handler2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should have access to currentTarget in the async handler even if it is nullified on the original event", () => {
+    let currentTarget: HTMLElement | null = document.createElement("div");
+    const spy = vi.fn();
+    const eventWithCurrentTarget = new MouseEvent("mousemove");
+    Object.defineProperty(eventWithCurrentTarget, "currentTarget", {
+      configurable: true,
+      get() {
+        return currentTarget;
+      },
+    });
+    Object.defineProperty(eventWithCurrentTarget, "preventDefault", {
+      configurable: true,
+      value: spy,
+    });
+
+    dispatchExternalEvent(store, {
+      reactEvent: eventWithCurrentTarget,
+      handler: mockHandler,
+    });
+
+    currentTarget = null;
+
+    flush();
+    vi.runAllTimers();
+
+    expect(mockHandler).toHaveBeenCalledTimes(1);
+    const eventPassedToHandler = mockHandler.mock.calls[0]?.[1];
+    expect(eventPassedToHandler?.currentTarget).not.toBeNull();
+    expect(eventPassedToHandler?.currentTarget).toBeInstanceOf(HTMLDivElement);
+    expect(spy).toHaveBeenCalledTimes(0);
+    eventPassedToHandler?.preventDefault();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

package/test/state/graphicalItemsSlice.spec.ts

@@ -0,0 +1,92 @@
+// Tier-B port of recharts 3.8.1 test/state/graphicalItemsSlice.spec.ts (commit 7a23854).
+//
+// Deviation: recharts drives the slice through the Redux API
+// (`store.dispatch(addCartesianGraphicalItem(item))` + `store.getState()`). Our
+// Solid-native store has no dispatch — actions are called directly
+// (`store.actions.graphicalItems.addCartesianGraphicalItem(item)`) and state is
+// read via selectors against `store.state`. Expectations are unchanged.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { createRechartsStore } from "../../src/state/store";
+import { PageData } from "../_data";
+import { selectUnfilteredCartesianItems } from "../../src/state/selectors/axisSelectors";
+import { BarSettings } from "../../src/state/types/BarSettings";
+import { LineSettings } from "../../src/state/types/LineSettings";
+import { AreaSettings } from "../../src/state/types/AreaSettings";
+
+describe("graphicalItemsSlice", () => {
+  const item1: BarSettings = {
+    maxBarSize: 0,
+    minPointSize: 0,
+    id: "my-bar",
+    isPanorama: false,
+    type: "bar",
+    stackId: undefined,
+    dataKey: undefined,
+    data: PageData,
+    xAxisId: "x",
+    yAxisId: "y",
+    zAxisId: 0,
+    hide: false,
+    barSize: undefined,
+    hasCustomShape: false,
+  };
+
+  const item2: LineSettings = {
+    id: "my-line",
+    isPanorama: false,
+    type: "line",
+    dataKey: undefined,
+    data: PageData,
+    xAxisId: "x",
+    yAxisId: "y",
+    zAxisId: 0,
+    hide: false,
+  };
+
+  const item3: AreaSettings = {
+    baseValue: undefined,
+    connectNulls: false,
+    id: "my-area",
+    isPanorama: false,
+    type: "area",
+    stackId: undefined,
+    dataKey: "a",
+    data: PageData,
+    xAxisId: "x",
+    yAxisId: "y",
+    zAxisId: 0,
+    hide: false,
+    barSize: undefined,
+  };
+
+  it("should add and remove graphical items from state", () => {
+    const store = createRechartsStore();
+    expect(selectUnfilteredCartesianItems(store.state)).toHaveLength(0);
+
+    store.actions.graphicalItems.addCartesianGraphicalItem(item1);
+    flush();
+    expect(selectUnfilteredCartesianItems(store.state)).toEqual([item1]);
+
+    store.actions.graphicalItems.removeCartesianGraphicalItem(item1);
+    flush();
+    expect(selectUnfilteredCartesianItems(store.state)).toHaveLength(0);
+  });
+
+  it("should replace graphical items in state and keep the order", () => {
+    const store = createRechartsStore();
+    expect(selectUnfilteredCartesianItems(store.state)).toHaveLength(0);
+
+    store.actions.graphicalItems.addCartesianGraphicalItem(item1);
+    store.actions.graphicalItems.addCartesianGraphicalItem(item2);
+    flush();
+    expect(selectUnfilteredCartesianItems(store.state)).toEqual([item1, item2]);
+
+    // Replace item1 with item3
+    store.actions.graphicalItems.replaceCartesianGraphicalItem({ prev: item1, next: item3 });
+    flush();
+
+    // item3 is now in place of item1, and item2 remains on the second position
+    expect(selectUnfilteredCartesianItems(store.state)).toEqual([item3, item2]);
+  });
+});

package/test/state/hooks.spec.tsx

@@ -0,0 +1,68 @@
+// Tier B port of recharts 3.8.1 test/state/hooks.spec.tsx.
+//
+// The recharts spec tests the react-redux binding and Redux store mechanics:
+// `useAppSelector` via useSyncExternalStore, `useAppDispatch`/`dispatch(action)`,
+// re-render-on-dispatch, and `store.subscribe(spy)`. None of that exists in the
+// Solid-native rewrite (no Redux store, no dispatch, no re-render). This spec is
+// re-expressed against the equivalent Solid-native contract, preserving the
+// behavioral guarantees recharts cared about:
+//   - outside a chart, `useAppSelector` yields `undefined` and never throws;
+//   - inside the provider, it yields the live state;
+//   - it updates reactively when an action mutates the store;
+//   - the store's actions are reachable inside the provider.
+// The provider is supplied via renderHook's `wrapper`; reactive reads are
+// asserted after `flush()` (Solid batches writes on microtasks).
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { renderHook } from "../helper/render";
+import { useAppSelector, useAppStore } from "../../src/state/hooks";
+import { RechartsStoreProvider } from "../../src/state/RechartsStoreProvider";
+
+describe("useAppSelector", () => {
+  it("should return undefined when used outside of the store context", () => {
+    const { result } = renderHook(() => useAppSelector((s) => s));
+    expect(result()).toBeUndefined();
+  });
+
+  it("should not throw an error when used outside of the store context", () => {
+    expect(() => renderHook(() => useAppSelector((s) => s))).not.toThrow();
+  });
+
+  it("should return state when inside the store provider", () => {
+    const { result } = renderHook(() => useAppSelector((s) => s), {
+      wrapper: RechartsStoreProvider,
+    });
+    expect(result()).not.toBeUndefined();
+  });
+
+  it("should update after an action changes the state", () => {
+    const { result } = renderHook(
+      () => {
+        const store = useAppStore();
+        const chartData = useAppSelector((s) => s.chartData.chartData);
+        return { store, chartData };
+      },
+      { wrapper: RechartsStoreProvider },
+    );
+
+    expect(result.chartData()).toBeUndefined();
+
+    result.store?.actions.chartData.setChartData([]);
+    flush();
+
+    expect(result.chartData()).toEqual([]);
+  });
+});
+
+describe("useAppStore", () => {
+  it("should return undefined and not throw when used outside the store context", () => {
+    const { result } = renderHook(() => useAppStore());
+    expect(result).toBeUndefined();
+  });
+
+  it("should expose slice actions when inside the store provider", () => {
+    const { result } = renderHook(() => useAppStore(), { wrapper: RechartsStoreProvider });
+    expect(result).not.toBeUndefined();
+    expect(typeof result?.actions.chartData.setChartData).toBe("function");
+  });
+});

package/test/state/legendSlice.spec.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { flush } from "solid-js";
+import { createRechartsStore } from "../../src/state/store";
+import type { LegendPayloadEntry } from "../../src/state/legendSlice";
+
+/*
+ * Ported from recharts 3.8.1 test/state/legendSlice.spec.ts, adapted to the
+ * Solid-native store (store.state / store.actions, flush(); no Redux dispatch) and
+ * this port's legend-payload shape deviation: recharts stores a flat
+ * `ReadonlyArray<LegendPayload>` and matches for removal by object reference; this
+ * port stores `ReadonlyArray<LegendPayloadEntry>` (each entry has a stable `id`
+ * holding its items) and matches for removal by `id`. The add/remove behaviour
+ * recharts cares about is preserved.
+ */
+
+describe("legendSlice", () => {
+  it("should add and remove legend payload from state", () => {
+    const store = createRechartsStore();
+    expect(store.state.legend.payload).toHaveLength(0);
+
+    const entry1: LegendPayloadEntry = { id: "a", items: [{ dataKey: "key", value: "value" }] };
+    const entry2: LegendPayloadEntry = { id: "b", items: [{ dataKey: "key", value: "value" }] };
+
+    store.actions.legend.addLegendPayload(entry1);
+    flush();
+    expect(store.state.legend.payload).toHaveLength(1);
+
+    store.actions.legend.addLegendPayload(entry2);
+    flush();
+    expect(store.state.legend.payload).toHaveLength(2);
+
+    store.actions.legend.removeLegendPayload(entry1);
+    flush();
+    expect(store.state.legend.payload).toHaveLength(1);
+
+    store.actions.legend.removeLegendPayload(entry2);
+    flush();
+    expect(store.state.legend.payload).toHaveLength(0);
+
+    store.actions.legend.removeLegendPayload(entry1);
+    flush();
+    expect(store.state.legend.payload).toHaveLength(0);
+  });
+});