solid-recharts 1.0.0 → 2.0.0-beta.1

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/createCollectionActions.spec.ts

@@ -0,0 +1,87 @@
+// Unit spec for the keyed-collection array algebra (src/state/createCollectionActions.ts).
+// No upstream counterpart — upstream inlines this per slice via immer; this pins
+// the shared contract the array slices (graphicalItems, referenceElements, legend,
+// tooltip) delegate to. The helper is pure over its read/write closures, so this
+// exercises it against a plain array cell — the interface is the test surface, and
+// the "new reference on every write" assertions are the ADR-0002 immutability
+// contract the reference-equality selector caches depend on.
+import { describe, expect, it } from "vitest";
+import { createCollectionActions } from "../../src/state/createCollectionActions";
+
+type Item = { id: string; v: number };
+
+function harness(initial: ReadonlyArray<Item> = []) {
+  let arr: ReadonlyArray<Item> = initial;
+  const actions = createCollectionActions<Item>(
+    (updater) => {
+      const next = updater(arr);
+      if (next !== arr) {
+        arr = next;
+      }
+    },
+    (it) => it.id,
+  );
+  return { actions, get: () => arr };
+}
+
+describe("createCollectionActions", () => {
+  it("add appends and produces a new array reference", () => {
+    const { actions, get } = harness();
+    const before = get();
+    actions.add({ id: "a", v: 1 });
+    expect(get()).toEqual([{ id: "a", v: 1 }]);
+    expect(get()).not.toBe(before);
+  });
+
+  it("replace swaps the matching element by key (new reference), keeping others and order", () => {
+    const { actions, get } = harness([
+      { id: "a", v: 1 },
+      { id: "b", v: 2 },
+    ]);
+    const before = get();
+    actions.replace({ prev: { id: "a", v: 1 }, next: { id: "a", v: 99 } });
+    expect(get()).toEqual([
+      { id: "a", v: 99 },
+      { id: "b", v: 2 },
+    ]);
+    expect(get()).not.toBe(before);
+  });
+
+  it("replace is a no-op (same reference) when the key is absent", () => {
+    const { actions, get } = harness([{ id: "a", v: 1 }]);
+    const before = get();
+    actions.replace({ prev: { id: "zzz", v: 0 }, next: { id: "zzz", v: 1 } });
+    expect(get()).toBe(before);
+  });
+
+  it("remove filters by key, new reference", () => {
+    const { actions, get } = harness([
+      { id: "a", v: 1 },
+      { id: "b", v: 2 },
+    ]);
+    const before = get();
+    actions.remove({ id: "a", v: 1 });
+    expect(get()).toEqual([{ id: "b", v: 2 }]);
+    expect(get()).not.toBe(before);
+  });
+
+  it("matches by keyOf, not object identity (nested key supported)", () => {
+    type Nested = { settings: { gid: string }; label: string };
+    let arr: ReadonlyArray<Nested> = [{ settings: { gid: "g1" }, label: "old" }];
+    const actions = createCollectionActions<Nested>(
+      (updater) => {
+        const next = updater(arr);
+        if (next !== arr) {
+          arr = next;
+        }
+      },
+      (n) => n.settings.gid,
+    );
+    // A different object carrying the SAME nested key still matches.
+    actions.replace({
+      prev: { settings: { gid: "g1" }, label: "whatever" },
+      next: { settings: { gid: "g1" }, label: "new" },
+    });
+    expect(arr).toEqual([{ settings: { gid: "g1" }, label: "new" }]);
+  });
+});

package/test/state/createSelector.spec.ts

@@ -0,0 +1,158 @@
+// Unit spec for the hand-rolled reselect-lite (ADR-0002). No upstream
+// counterpart to port — upstream gets this contract from reselect itself; this
+// spec pins the same contract for our implementation.
+import { describe, expect, it, vi } from "vitest";
+import { createMemo, createStore, flush } from "solid-js";
+import { renderHook } from "@solidjs/testing-library";
+import { createSelector } from "../../src/state/createSelector";
+
+type TestState = {
+  axis: { domain: readonly number[] };
+  data: { points: readonly number[] };
+  unrelated: { counter: number };
+};
+
+const makeState = (): TestState => ({
+  axis: { domain: [0, 1] },
+  data: { points: [1, 2, 3] },
+  unrelated: { counter: 0 },
+});
+
+describe("createSelector", () => {
+  it("shares one combiner run across repeated calls with the same state and args", () => {
+    const combiner = vi.fn((points: readonly number[], axisId: string) => ({
+      axisId,
+      total: points.reduce((a, b) => a + b, 0),
+    }));
+    const selector = createSelector(
+      [(s: TestState) => s.data.points, (_s: TestState, axisId: string) => axisId],
+      combiner,
+    );
+
+    const state = makeState();
+    const first = selector(state, "x");
+    const second = selector(state, "x");
+
+    expect(combiner).toHaveBeenCalledTimes(1);
+    expect(second).toBe(first);
+  });
+
+  it("keeps separate cache nodes per argument combination (SameValueZero keys)", () => {
+    const combiner = vi.fn((points: readonly number[], axisId: string | number) => ({
+      axisId,
+      count: points.length,
+    }));
+    const selector = createSelector(
+      [(s: TestState) => s.data.points, (_s: TestState, axisId: string | number) => axisId],
+      combiner,
+    );
+
+    const state = makeState();
+    const zeroNumber = selector(state, 0);
+    const zeroString = selector(state, "0");
+
+    // `0` and `"0"` are distinct axis ids — distinct nodes.
+    expect(combiner).toHaveBeenCalledTimes(2);
+    expect(selector(state, 0)).toBe(zeroNumber);
+    expect(selector(state, "0")).toBe(zeroString);
+    expect(combiner).toHaveBeenCalledTimes(2);
+  });
+
+  it("isolates caches per store: alternating stores never thrash each other", () => {
+    const combiner = vi.fn((points: readonly number[]) => points.length);
+    const selector = createSelector([(s: TestState) => s.data.points], combiner);
+
+    const a = makeState();
+    const b = makeState();
+    selector(a);
+    selector(b);
+    selector(a);
+    selector(b);
+
+    expect(combiner).toHaveBeenCalledTimes(2);
+  });
+
+  it("recomputes when an input reference changes, and only then", () => {
+    const combiner = vi.fn((domain: readonly number[]) => [...domain]);
+    const selector = createSelector([(s: TestState) => s.axis.domain], combiner);
+
+    const state = makeState();
+    const first = selector(state);
+    expect(combiner).toHaveBeenCalledTimes(1);
+
+    // Unrelated branch replaced: input reference unchanged → cache hit.
+    state.unrelated = { counter: 1 };
+    expect(selector(state)).toBe(first);
+    expect(combiner).toHaveBeenCalledTimes(1);
+
+    // Input path replaced (slice immutability contract) → recompute.
+    state.axis = { domain: [0, 2] };
+    const second = selector(state);
+    expect(combiner).toHaveBeenCalledTimes(2);
+    expect(second).toEqual([0, 2]);
+    expect(second).not.toBe(first);
+  });
+
+  it("resultEqualityCheck preserves the previous reference on value-equal recomputes", () => {
+    const combiner = vi.fn((points: readonly number[]) => points.map((p) => p * 2));
+    const selector = createSelector([(s: TestState) => s.data.points], combiner, {
+      resultEqualityCheck: (prev, next) =>
+        prev.length === next.length && prev.every((v, i) => v === next[i]),
+    });
+
+    const state = makeState();
+    const first = selector(state);
+
+    // New input reference, same values → combiner runs, previous reference survives.
+    state.data = { points: [1, 2, 3] };
+    expect(selector(state)).toBe(first);
+    expect(combiner).toHaveBeenCalledTimes(2);
+
+    // And the value-equal result is cached: the next call is a pure cache hit.
+    expect(selector(state)).toBe(first);
+    expect(combiner).toHaveBeenCalledTimes(2);
+
+    // Genuinely different values → new reference.
+    state.data = { points: [4, 5] };
+    expect(selector(state)).toEqual([8, 10]);
+    expect(selector(state)).not.toBe(first);
+  });
+
+  it("propagates reactively through input reads, including after cache hits", () => {
+    const [state, setState] = createStore<TestState>(makeState());
+    const combiner = vi.fn((domain: readonly number[]) => domain[1]);
+    const selector = createSelector([(s: TestState) => s.axis.domain], combiner);
+
+    const { result: upper } = renderHook(() => createMemo(() => selector(state)));
+    flush();
+    expect(upper()).toBe(1);
+
+    // A cache-hit evaluation in between must not drop the input subscription.
+    expect(selector(state)).toBe(1);
+
+    setState((s) => {
+      s.axis = { domain: [0, 5] };
+    });
+    flush();
+    expect(upper()).toBe(5);
+    expect(combiner).toHaveBeenCalledTimes(2);
+  });
+
+  it("runs the combiner untracked: state read only inside a combiner does not subscribe", () => {
+    const [state, setState] = createStore<TestState>(makeState());
+    // Contract violation on purpose: the combiner reads state directly.
+    const impure = createSelector([(s: TestState) => s.axis.domain], () => state.unrelated.counter);
+
+    const { result } = renderHook(() => createMemo(() => impure(state)));
+    flush();
+    expect(result()).toBe(0);
+
+    setState((s) => {
+      s.unrelated = { counter: 7 };
+    });
+    flush();
+    // No input reference changed and the combiner's read was untracked:
+    // the memo must NOT have re-run. This documents the purity contract.
+    expect(result()).toBe(0);
+  });
+});