solid-recharts 0.2.0 → 1.0.0

package/test/zIndex/componentZIndex.spec.tsx

@@ -1,255 +0,0 @@
-// Solid-recharts spec: components expose a `zIndex` prop wired to the chart's
-// z-index portal system (ZIndexLayer). A custom zIndex relocates the element into
-// a dedicated `.recharts-zIndex-layer_<n>` portal. recharts supports these props
-// but does not unit-test them on these components.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import {
-  Area,
-  AreaChart,
-  ErrorBar,
-  Line,
-  LineChart,
-  Pie,
-  PieChart,
-  PolarGrid,
-  Radar,
-  RadarChart,
-  RadialBar,
-  RadialBarChart,
-  ReferenceArea,
-  ReferenceDot,
-  ReferenceLine,
-  Scatter,
-  ScatterChart,
-  XAxis,
-  YAxis,
-} from "../../src";
-import { render } from "@solidjs/testing-library";
-
-const data = [
-  { name: "a", uv: 100 },
-  { name: "b", uv: 200 },
-  { name: "c", uv: 300 },
-];
-
-const radarData = [
-  { subject: "Math", v: 120 },
-  { subject: "Eng", v: 98 },
-  { subject: "Hist", v: 86 },
-];
-
-function portalContains(container: Element, zIndex: number, childSelector: string): boolean {
-  const portal = container.querySelector(`.recharts-zIndex-layer_${zIndex}`);
-  return portal != null && portal.querySelector(childSelector) != null;
-}
-
-describe("component zIndex prop", () => {
-  it("ReferenceLine relocates into the requested z-index portal", () => {
-    const { container } = render(() => (
-      <LineChart width={300} height={300} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Line dataKey="uv" />
-        <ReferenceLine y={150} zIndex={1201} />
-      </LineChart>
-    ));
-    flush();
-    expect(portalContains(container, 1201, ".recharts-reference-line")).toBe(true);
-  });
-
-  it("ReferenceDot relocates into the requested z-index portal", () => {
-    const { container } = render(() => (
-      <LineChart width={300} height={300} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Line dataKey="uv" />
-        <ReferenceDot x="b" y={200} r={6} zIndex={1202} />
-      </LineChart>
-    ));
-    flush();
-    expect(portalContains(container, 1202, ".recharts-reference-dot")).toBe(true);
-  });
-
-  it("ReferenceArea relocates into the requested z-index portal", () => {
-    const { container } = render(() => (
-      <LineChart width={300} height={300} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Line dataKey="uv" />
-        <ReferenceArea x1="a" x2="c" y1={0} y2={300} zIndex={1203} />
-      </LineChart>
-    ));
-    flush();
-    expect(portalContains(container, 1203, ".recharts-reference-area")).toBe(true);
-  });
-
-  it("ErrorBar relocates into the requested z-index portal", () => {
-    const errData = [
-      { name: "a", uv: 100, err: 10 },
-      { name: "b", uv: 200, err: 20 },
-      { name: "c", uv: 300, err: 30 },
-    ];
-    const { container } = render(() => (
-      <LineChart width={300} height={300} data={errData}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Line dataKey="uv">
-          <ErrorBar dataKey="err" zIndex={1205} />
-        </Line>
-      </LineChart>
-    ));
-    flush();
-    expect(portalContains(container, 1205, ".recharts-errorBar")).toBe(true);
-  });
-
-  it("XAxis relocates into the requested z-index portal", () => {
-    const { container } = render(() => (
-      <LineChart width={300} height={300} data={data}>
-        <XAxis dataKey="name" zIndex={1206} />
-        <YAxis />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-    flush();
-    expect(portalContains(container, 1206, ".recharts-xAxis")).toBe(true);
-  });
-
-  it("PolarGrid relocates into the requested z-index portal", () => {
-    const { container } = render(() => (
-      <RadarChart width={300} height={300} data={radarData}>
-        <PolarGrid zIndex={1204} />
-        <Radar dataKey="v" />
-      </RadarChart>
-    ));
-    flush();
-    expect(portalContains(container, 1204, ".recharts-polar-grid")).toBe(true);
-  });
-});
-
-// The graphical items (Line/Area/Scatter/Pie/Radar/RadialBar) each wrap their whole
-// item Layer in <ZIndexLayer> with a non-zero DEFAULT (areas:100, bars:300, lines:400,
-// scatters:600 — Pie/Radar reuse area, RadialBar reuses bar), so a user `zIndex`
-// relayers the entire item into its portal (recharts parity). These assert both the
-// default portal placement AND a custom `zIndex` relocation.
-describe("graphical item zIndex relayering", () => {
-  it("Line renders in its default (400) portal and relocates on a custom zIndex", () => {
-    const { container: dflt } = render(() => (
-      <LineChart width={300} height={300} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Line dataKey="uv" isAnimationActive={false} />
-      </LineChart>
-    ));
-    flush();
-    expect(portalContains(dflt, 400, ".recharts-line")).toBe(true);
-
-    const { container } = render(() => (
-      <LineChart width={300} height={300} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Line dataKey="uv" zIndex={1210} isAnimationActive={false} />
-      </LineChart>
-    ));
-    flush();
-    expect(portalContains(container, 1210, ".recharts-line")).toBe(true);
-  });
-
-  it("Area renders in its default (100) portal and relocates on a custom zIndex", () => {
-    const { container: dflt } = render(() => (
-      <AreaChart width={300} height={300} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Area dataKey="uv" isAnimationActive={false} />
-      </AreaChart>
-    ));
-    flush();
-    expect(portalContains(dflt, 100, ".recharts-area")).toBe(true);
-
-    const { container } = render(() => (
-      <AreaChart width={300} height={300} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Area dataKey="uv" zIndex={1211} isAnimationActive={false} />
-      </AreaChart>
-    ));
-    flush();
-    expect(portalContains(container, 1211, ".recharts-area")).toBe(true);
-  });
-
-  it("Scatter renders in its default (600) portal and relocates on a custom zIndex", () => {
-    const { container: dflt } = render(() => (
-      <ScatterChart width={300} height={300}>
-        <XAxis dataKey="name" />
-        <YAxis dataKey="uv" />
-        <Scatter data={data} dataKey="uv" isAnimationActive={false} />
-      </ScatterChart>
-    ));
-    flush();
-    expect(portalContains(dflt, 600, ".recharts-scatter")).toBe(true);
-
-    const { container } = render(() => (
-      <ScatterChart width={300} height={300}>
-        <XAxis dataKey="name" />
-        <YAxis dataKey="uv" />
-        <Scatter data={data} dataKey="uv" zIndex={1212} isAnimationActive={false} />
-      </ScatterChart>
-    ));
-    flush();
-    expect(portalContains(container, 1212, ".recharts-scatter")).toBe(true);
-  });
-
-  it("Pie renders in its default (100) portal and relocates on a custom zIndex", () => {
-    const { container: dflt } = render(() => (
-      <PieChart width={300} height={300}>
-        <Pie data={data} dataKey="uv" isAnimationActive={false} />
-      </PieChart>
-    ));
-    flush();
-    expect(portalContains(dflt, 100, ".recharts-pie")).toBe(true);
-
-    const { container } = render(() => (
-      <PieChart width={300} height={300}>
-        <Pie data={data} dataKey="uv" zIndex={1213} isAnimationActive={false} />
-      </PieChart>
-    ));
-    flush();
-    expect(portalContains(container, 1213, ".recharts-pie")).toBe(true);
-  });
-
-  it("Radar renders in its default (100) portal and relocates on a custom zIndex", () => {
-    const { container: dflt } = render(() => (
-      <RadarChart width={300} height={300} data={radarData}>
-        <Radar dataKey="v" isAnimationActive={false} />
-      </RadarChart>
-    ));
-    flush();
-    expect(portalContains(dflt, 100, ".recharts-radar")).toBe(true);
-
-    const { container } = render(() => (
-      <RadarChart width={300} height={300} data={radarData}>
-        <Radar dataKey="v" zIndex={1214} isAnimationActive={false} />
-      </RadarChart>
-    ));
-    flush();
-    expect(portalContains(container, 1214, ".recharts-radar")).toBe(true);
-  });
-
-  it("RadialBar renders in its default (300) portal and relocates on a custom zIndex", () => {
-    const { container: dflt } = render(() => (
-      <RadialBarChart width={300} height={300} data={data}>
-        <RadialBar dataKey="uv" isAnimationActive={false} />
-      </RadialBarChart>
-    ));
-    flush();
-    expect(portalContains(dflt, 300, ".recharts-radial-bar-sectors")).toBe(true);
-
-    const { container } = render(() => (
-      <RadialBarChart width={300} height={300} data={data}>
-        <RadialBar dataKey="uv" zIndex={1215} isAnimationActive={false} />
-      </RadialBarChart>
-    ));
-    flush();
-    expect(portalContains(container, 1215, ".recharts-radial-bar-sectors")).toBe(true);
-  });
-});

package/test/zIndex/getZIndexFromUnknown.spec.ts

@@ -1,51 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
-import { getZIndexFromUnknown } from "../../src/zIndex/getZIndexFromUnknown";
-
-describe("getZIndexFromUnknown", () => {
-  it.each([undefined, null, true, false, "invalid", 42, { fill: "#000" }] as const)(
-    "should return default zIndex when input is %p",
-    (input) => {
-      const randomNumber = Math.floor(Math.random() * 1000);
-      const result = getZIndexFromUnknown(input, randomNumber);
-      expect(result).toBe(randomNumber);
-    },
-  );
-
-  it("should return custom zIndex for object with numeric zIndex", () => {
-    const customZIndex = 999;
-    const result = getZIndexFromUnknown({ fill: "#000", zIndex: customZIndex }, 100);
-    expect(result).toBe(customZIndex);
-  });
-
-  it("should return custom zIndex of 0 when explicitly set", () => {
-    const randomNumber = Math.floor(Math.random() * 1000);
-    const result = getZIndexFromUnknown({ zIndex: randomNumber }, 100);
-    expect(result).toBe(randomNumber);
-  });
-
-  it.each([
-    "100",
-    null,
-    undefined,
-    NaN,
-    Infinity,
-    -Infinity,
-    () => {},
-    [],
-    Symbol.for("100"),
-  ] as const)("should return default zIndex for input={zIndex: %s}", (zIndex) => {
-    const randomNumber = Math.floor(Math.random() * 1000);
-    const result = getZIndexFromUnknown({ zIndex }, randomNumber);
-    expect(result).toBe(randomNumber);
-  });
-
-  it.each([0, -0, -100, 5000, 123.456, Math.PI, DefaultZIndexes.barBackground] as const)(
-    "should handle edge case zIndex values: %p",
-    (zIndex) => {
-      const randomNumber = Math.floor(Math.random() * 1000);
-      const result = getZIndexFromUnknown({ zIndex }, randomNumber);
-      expect(result).toBe(zIndex);
-    },
-  );
-});

package/test/zIndex/multiChartZIndexIsolation.spec.tsx

@@ -1,90 +0,0 @@
-// Solid-recharts spec (no recharts counterpart): regression tests for cross-chart
-// z-index portal isolation. Two bugs once compounded here:
-//  1. zIndexSlice shallow-copied the module-level initial map, so every chart
-//     store shared the same ZIndexEntry objects — the last chart to register a
-//     portal <g> hijacked every other chart's portal target.
-//  2. ZIndexLayer parented its <Portal> to the component owner without disposing
-//     it when the keyed target changed, so content ALSO stayed in the stale
-//     target — bar rectangles rendered duplicated inside a sibling pie chart.
-import { describe, expect, it } from "vitest";
-import { createSignal, flush, Show } from "solid-js";
-import { Bar, BarChart, Pie, PieChart } from "../../src";
-import { assertNotNull } from "../helper/assertNotNull";
-import { render } from "@solidjs/testing-library";
-
-const barData = [
-  { name: "a", uv: 100 },
-  { name: "b", uv: 200 },
-  { name: "c", uv: 300 },
-];
-
-const pieData = [
-  { name: "x", value: 40 },
-  { name: "y", value: 30 },
-  { name: "z", value: 30 },
-];
-
-describe("multi-chart zIndex portal isolation", () => {
-  it("keeps bar layers in their own chart when two charts mount together", () => {
-    const { container } = render(() => (
-      <>
-        <BarChart width={300} height={300} data={barData}>
-          <Bar dataKey="uv" isAnimationActive={false} />
-        </BarChart>
-        <PieChart width={300} height={300}>
-          <Pie data={pieData} dataKey="value" isAnimationActive={false} />
-        </PieChart>
-      </>
-    ));
-    flush();
-
-    const surfaces = container.querySelectorAll("svg.recharts-surface");
-    expect(surfaces).toHaveLength(2);
-    const [barSvg, pieSvg] = Array.from(surfaces);
-    assertNotNull(barSvg);
-    assertNotNull(pieSvg);
-
-    expect(barSvg.querySelectorAll(".recharts-bar")).toHaveLength(1);
-    expect(barSvg.querySelectorAll(".recharts-sector")).toHaveLength(0);
-    expect(pieSvg.querySelectorAll(".recharts-bar")).toHaveLength(0);
-    expect(pieSvg.querySelectorAll(".recharts-sector").length).toBeGreaterThan(0);
-
-    // No duplicated bar layer anywhere (a stale, undisposed portal would leave
-    // a second copy behind).
-    expect(document.querySelectorAll(".recharts-bar")).toHaveLength(1);
-  });
-
-  it("keeps bar layers in their own chart when a second chart mounts later", () => {
-    const [showPie, setShowPie] = createSignal(false);
-    const { container } = render(() => (
-      <>
-        <BarChart width={300} height={300} data={barData}>
-          <Bar dataKey="uv" isAnimationActive={false} />
-        </BarChart>
-        <Show when={showPie()}>
-          <PieChart width={300} height={300}>
-            <Pie data={pieData} dataKey="value" isAnimationActive={false} />
-          </PieChart>
-        </Show>
-      </>
-    ));
-    flush();
-    expect(container.querySelectorAll("svg.recharts-surface")).toHaveLength(1);
-
-    // Mounting the pie later used to overwrite the bar chart's registered portal
-    // element (shared slice state) and re-portal the bars into the pie's svg.
-    setShowPie(true);
-    flush();
-
-    const surfaces = container.querySelectorAll("svg.recharts-surface");
-    expect(surfaces).toHaveLength(2);
-    const [barSvg, pieSvg] = Array.from(surfaces);
-    assertNotNull(barSvg);
-    assertNotNull(pieSvg);
-
-    expect(barSvg.querySelectorAll(".recharts-bar")).toHaveLength(1);
-    expect(pieSvg.querySelectorAll(".recharts-bar")).toHaveLength(0);
-    expect(pieSvg.querySelectorAll(".recharts-sector").length).toBeGreaterThan(0);
-    expect(document.querySelectorAll(".recharts-bar")).toHaveLength(1);
-  });
-});

package/test/zIndex/zIndexSelectors.spec.ts

@@ -1,172 +0,0 @@
-import { flush } from "solid-js";
-import { describe, it, expect } from "vitest";
-import { createRechartsStore } from "../../src/state/store";
-import {
-  selectZIndexPortalElement,
-  selectAllRegisteredZIndexes,
-} from "../../src/zIndex/zIndexSelectors";
-
-describe("zIndexSelectors", () => {
-  describe("selectZIndexPortalElement", () => {
-    it("should select zIndex portal elements correctly", () => {
-      const store = createRechartsStore();
-
-      expect(selectZIndexPortalElement(store.state, 1, false)).toBeUndefined();
-      expect(selectZIndexPortalElement(store.state, -1, false)).toBeUndefined();
-
-      const element1 = document.createElement("div");
-      const element2 = document.createElement("div");
-      store.actions.zIndex.registerZIndexPortalElement({
-        zIndex: 1,
-        element: element1,
-        isPanorama: false,
-      });
-      store.actions.zIndex.registerZIndexPortalElement({
-        zIndex: -1,
-        element: element2,
-        isPanorama: false,
-      });
-      flush();
-
-      expect(selectZIndexPortalElement(store.state, 1, false)).toBe(element1);
-      expect(selectZIndexPortalElement(store.state, -1, false)).toBe(element2);
-
-      store.actions.zIndex.unregisterZIndexPortalElement({ zIndex: 1, isPanorama: false });
-      flush();
-      expect(selectZIndexPortalElement(store.state, 1, false)).toBeUndefined();
-      expect(selectZIndexPortalElement(store.state, -1, false)).toBe(element2);
-    });
-
-    it("should return undefined for undefined zIndex", () => {
-      const store = createRechartsStore();
-      expect(selectZIndexPortalElement(store.state, undefined, true)).toBeUndefined();
-      expect(selectZIndexPortalElement(store.state, undefined, false)).toBeUndefined();
-    });
-
-    it("should differentiate between panorama and main chart", () => {
-      const store = createRechartsStore();
-
-      const mainElement = document.createElement("div");
-      const panoramaElement = document.createElement("div");
-      store.actions.zIndex.registerZIndexPortalElement({
-        zIndex: 10,
-        element: mainElement,
-        isPanorama: false,
-      });
-      store.actions.zIndex.registerZIndexPortalElement({
-        zIndex: 10,
-        element: panoramaElement,
-        isPanorama: true,
-      });
-      flush();
-
-      expect(selectZIndexPortalElement(store.state, 10, false)).toBe(mainElement);
-      expect(selectZIndexPortalElement(store.state, 10, true)).toBe(panoramaElement);
-    });
-  });
-
-  describe("selectAllRegisteredZIndexes", () => {
-    it("should select all registered zIndexes correctly", () => {
-      const store = createRechartsStore();
-
-      expect(selectAllRegisteredZIndexes(store.state)).toEqual([
-        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-
-      store.actions.zIndex.registerZIndexPortal({ zIndex: 2 });
-      store.actions.zIndex.registerZIndexPortal({ zIndex: -3 });
-      store.actions.zIndex.registerZIndexPortal({ zIndex: 1 });
-
-      expect(selectAllRegisteredZIndexes(store.state)).toEqual([
-        -100, -50, -3, 1, 2, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-
-      store.actions.zIndex.unregisterZIndexPortal({ zIndex: 1 });
-      expect(selectAllRegisteredZIndexes(store.state)).toEqual([
-        -100, -50, -3, 2, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-
-      store.actions.zIndex.unregisterZIndexPortal({ zIndex: -3 });
-      store.actions.zIndex.unregisterZIndexPortal({ zIndex: 2 });
-      expect(selectAllRegisteredZIndexes(store.state)).toEqual([
-        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-    });
-
-    it("should memoize results based on array contents", () => {
-      const store = createRechartsStore();
-
-      store.actions.zIndex.registerZIndexPortal({ zIndex: 5 });
-      store.actions.zIndex.registerZIndexPortal({ zIndex: 10 });
-
-      const firstSelection = selectAllRegisteredZIndexes(store.state);
-      const secondSelection = selectAllRegisteredZIndexes(store.state);
-
-      expect(firstSelection).toBe(secondSelection);
-
-      store.actions.zIndex.registerZIndexPortal({ zIndex: 15 });
-
-      const thirdSelection = selectAllRegisteredZIndexes(store.state);
-      expect(thirdSelection).not.toBe(firstSelection);
-      expect(thirdSelection).toEqual([
-        -100, -50, 5, 10, 15, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-
-      const element1 = document.createElement("div");
-      const element2 = document.createElement("div");
-      store.actions.zIndex.registerZIndexPortalElement({
-        zIndex: 5,
-        element: element1,
-        isPanorama: false,
-      });
-      store.actions.zIndex.registerZIndexPortalElement({
-        zIndex: 5,
-        element: element2,
-        isPanorama: true,
-      });
-      const fourthSelection = selectAllRegisteredZIndexes(store.state);
-      expect(fourthSelection).toBe(thirdSelection);
-    });
-
-    it("should not duplicate zIndex when registered multiple times", () => {
-      const store = createRechartsStore();
-
-      store.actions.zIndex.registerZIndexPortal({ zIndex: 50 });
-      const firstSelection = selectAllRegisteredZIndexes(store.state);
-      expect(firstSelection).toEqual([
-        -100, -50, 50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-
-      store.actions.zIndex.registerZIndexPortal({ zIndex: 50 });
-      const secondSelection = selectAllRegisteredZIndexes(store.state);
-      expect(secondSelection).toEqual([
-        -100, -50, 50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-      expect(secondSelection).toBe(firstSelection);
-    });
-
-    it("should not affect zIndex list when only registering/unregistering portal element", () => {
-      const store = createRechartsStore();
-
-      const initialSelection = selectAllRegisteredZIndexes(store.state);
-      expect(initialSelection).toEqual([
-        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-
-      const element = document.createElement("div");
-      store.actions.zIndex.registerZIndexPortalElement({ zIndex: 100, element, isPanorama: false });
-      const afterRegister = selectAllRegisteredZIndexes(store.state);
-      expect(afterRegister).toEqual([
-        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-      expect(afterRegister).toBe(initialSelection);
-
-      store.actions.zIndex.unregisterZIndexPortalElement({ zIndex: 100, isPanorama: false });
-      const afterUnregister = selectAllRegisteredZIndexes(store.state);
-      expect(afterUnregister).toEqual([
-        -100, -50, 100, 200, 300, 400, 500, 600, 1000, 1100, 1200, 2000,
-      ]);
-      expect(afterUnregister).toBe(initialSelection);
-    });
-  });
-});

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    // recharts specs rely on vitest globals (we run with `globals: true`) and a
-    // few sources read `process.env`; match the reference tsconfig's ambient
-    // types. Scoped to this package so app/dev and the testing-library package
-    // keep the lean base `types`.
-    "types": ["@testing-library/jest-dom", "node", "vitest/globals"]
-  },
-  "include": ["src", "test"]
-}