solid-recharts 0.2.0 → 1.0.0

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

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

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

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

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

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

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

@@ -1,68 +0,0 @@
-// 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 "@solidjs/testing-library";
-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

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