solid-recharts 0.2.0 → 1.0.0

package/test/component/Cell.render.spec.tsx

@@ -1,155 +0,0 @@
-// Proves the CellReader port: <Cell> children supply per-element presentation
-// overrides (fill / stroke / class) to Bar, Pie, and RadialBar. The Solid port
-// can't introspect children element-types like React's findAllByType — instead
-// each <Cell> registers its props during synchronous child resolution
-// (collectCells). `isAnimationActive={false}` so shapes are at final geometry,
-// and `flush()` because the items register via effects and compute from the store.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import {
-  BarChart,
-  Bar,
-  PieChart,
-  Pie,
-  RadialBarChart,
-  RadialBar,
-  ScatterChart,
-  Scatter,
-  XAxis,
-  YAxis,
-  Cell,
-} from "../../src";
-
-const data = [
-  { name: "A", value: 100 },
-  { name: "B", value: 200 },
-  { name: "C", value: 300 },
-];
-
-describe("<Cell /> presentation overrides", () => {
-  it("colors each Bar rectangle from its matching Cell", () => {
-    const colors = ["#111111", "#222222", "#333333"];
-    const { container } = render(() => (
-      <BarChart width={400} height={400} data={data}>
-        <Bar dataKey="value" fill="#888888" isAnimationActive={false}>
-          {data.map((_entry, i) => (
-            <Cell fill={colors[i]} />
-          ))}
-        </Bar>
-      </BarChart>
-    ));
-    flush();
-
-    const rects = [
-      ...container.querySelectorAll(
-        ".recharts-bar .recharts-bar-rectangle path.recharts-rectangle",
-      ),
-    ];
-    expect(rects).toHaveLength(data.length);
-    rects.forEach((r, i) => {
-      expect(r).toHaveAttribute("fill", colors[i]!);
-    });
-  });
-
-  it("falls back to the Bar fill when a Cell omits it", () => {
-    const { container } = render(() => (
-      <BarChart width={400} height={400} data={data}>
-        <Bar dataKey="value" fill="#888888" isAnimationActive={false}>
-          {data.map((_entry, i) => (
-            <Cell stroke={i === 0 ? "#ff0000" : undefined} />
-          ))}
-        </Bar>
-      </BarChart>
-    ));
-    flush();
-
-    const rects = [
-      ...container.querySelectorAll(
-        ".recharts-bar .recharts-bar-rectangle path.recharts-rectangle",
-      ),
-    ];
-    // No Cell sets fill → all keep the Bar's fill.
-    rects.forEach((r) => expect(r).toHaveAttribute("fill", "#888888"));
-    // Only the first Cell sets a stroke.
-    expect(rects[0]).toHaveAttribute("stroke", "#ff0000");
-  });
-
-  it("colors each Pie sector from its matching Cell", () => {
-    const colors = ["#aa0000", "#00bb00", "#0000cc"];
-    const { container } = render(() => (
-      <PieChart width={400} height={400}>
-        <Pie
-          dataKey="value"
-          data={data}
-          cx={200}
-          cy={200}
-          outerRadius={80}
-          isAnimationActive={false}
-        >
-          {data.map((_entry, i) => (
-            <Cell fill={colors[i]} />
-          ))}
-        </Pie>
-      </PieChart>
-    ));
-    flush();
-
-    const sectors = [...container.querySelectorAll(".recharts-pie-sector .recharts-sector")];
-    expect(sectors).toHaveLength(data.length);
-    sectors.forEach((s, i) => {
-      expect(s).toHaveAttribute("fill", colors[i]!);
-    });
-  });
-
-  it("applies a Cell className to each RadialBar sector", () => {
-    const { container } = render(() => (
-      <RadialBarChart
-        width={500}
-        height={300}
-        cx={150}
-        cy={150}
-        innerRadius={20}
-        outerRadius={140}
-        barSize={10}
-        data={data}
-      >
-        <RadialBar dataKey="value" isAnimationActive={false}>
-          {data.map(() => (
-            <Cell class="unit-test-class" />
-          ))}
-        </RadialBar>
-      </RadialBarChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".unit-test-class")).toHaveLength(data.length);
-  });
-
-  it("colors each Scatter symbol from its matching Cell", () => {
-    const scatterData = [
-      { x: 100, y: 200 },
-      { x: 120, y: 100 },
-      { x: 170, y: 300 },
-    ];
-    const colors = ["#aa0000", "#00bb00", "#0000cc"];
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis type="number" dataKey="x" />
-        <YAxis type="number" dataKey="y" />
-        <Scatter data={scatterData} fill="#888888" isAnimationActive={false}>
-          {scatterData.map((_entry, i) => (
-            <Cell fill={colors[i]} />
-          ))}
-        </Scatter>
-      </ScatterChart>
-    ));
-    flush();
-
-    const paths = [...container.querySelectorAll(".recharts-scatter-symbol path")];
-    expect(paths).toHaveLength(scatterData.length);
-    paths.forEach((p, i) => {
-      expect(p).toHaveAttribute("fill", colors[i]!);
-    });
-  });
-});

package/test/component/Cell.spec.tsx

@@ -1,12 +0,0 @@
-// Ported from recharts 3.8.1 test/component/Cell.spec.tsx.
-// Harness changes only: render from the local Solid shim, no React import,
-// render takes a thunk. The assertion is byte-identical to recharts.
-import { render } from "@solidjs/testing-library";
-import { Cell } from "../../src";
-
-describe("<Cell />", () => {
-  it("Render empty dom", () => {
-    const { container } = render(() => <Cell />);
-    expect(container).toBeEmptyDOMElement();
-  });
-});

package/test/component/Cursor.spec.tsx

@@ -1,186 +0,0 @@
-// Ported from recharts 3.8.1 test/component/Cursor.spec.tsx (commit 7a23854).
-//
-// Harness adaptations: React render → Solid render(() => …); standalone renders
-// pass `zIndex={0}` to opt out of the default z-index portal (exactly as the
-// reference spec does — no portal targets exist outside a real chart surface).
-// PERMANENT-N/A: the two
-// "should render a custom cursor" cases pass `cursor={<MyCustomCursor/>}` (a React
-// element relying on isValidElement/cloneElement) — `CursorDefinition` in the
-// Solid port is `boolean | Record<string, unknown>`, with no element form.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import {
-  Cursor,
-  CursorInternal,
-  type CursorConnectedProps,
-  type CursorProps,
-} from "../../src/component/Cursor";
-import { Line, LineChart, Tooltip } from "../../src";
-import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
-import { PageData } from "../_data";
-import { showTooltip } from "./Tooltip/tooltipTestHelpers";
-import { lineChartMouseHoverTooltipSelector } from "./Tooltip/tooltipMouseHoverSelectors";
-import { assertNotNull } from "../helper/assertNotNull";
-import type { RechartsRootState } from "../../src/state/store";
-import { RechartsStoreProvider } from "../../src/state/RechartsStoreProvider";
-import { arrayTooltipSearcher } from "../../src/state/optionsSlice";
-import { produceState } from "../helper/produceState";
-import { emptyOffset } from "../helper/offsetHelpers";
-import type { TooltipPayload } from "../../src/state/tooltipSlice";
-
-const defaultProps: CursorProps = {
-  cursor: true,
-  tooltipEventType: "axis",
-  coordinate: undefined,
-  payload: [],
-  index: "0",
-};
-
-const baseCoord = { x: 0, y: 0 };
-
-const connectedProps: CursorConnectedProps = {
-  chartName: "",
-  layout: "vertical",
-  offset: emptyOffset,
-  tooltipAxisBandSize: 0,
-  ...defaultProps,
-};
-
-const preloadedState: Partial<RechartsRootState> = {
-  options: {
-    chartName: "",
-    tooltipPayloadSearcher: arrayTooltipSearcher,
-    eventEmitter: undefined,
-    defaultTooltipEventType: "axis",
-  },
-};
-
-const preloadedRadialState: Partial<RechartsRootState> = produceState((draft) => {
-  draft.layout.layoutType = "radial";
-  draft.layout.margin = { top: 11, right: 22, bottom: 33, left: 4 };
-  draft.tooltip.itemInteraction.hover.active = true;
-});
-
-describe("Cursor", () => {
-  describe("Internal component", () => {
-    it("should render rectangle cursor for bar chart", () => {
-      const props: CursorConnectedProps = {
-        ...connectedProps,
-        layout: "horizontal",
-        tooltipAxisBandSize: 1,
-        chartName: "BarChart",
-        offset: emptyOffset,
-        coordinate: baseCoord,
-      };
-      const { container } = render(() => (
-        <svg width={100} height={100}>
-          <CursorInternal {...props} zIndex={0} />
-        </svg>
-      ));
-      const cursor = container.querySelector(".recharts-rectangle");
-      assertNotNull(cursor);
-      expect(cursor).toBeVisible();
-    });
-
-    it("should render sector cursor for radial layout charts", () => {
-      const coordinate = { endAngle: 2, radius: 1, startAngle: 1, x: 0, y: 0 };
-      const props: CursorConnectedProps = {
-        ...connectedProps,
-        chartName: "",
-        offset: emptyOffset,
-        tooltipAxisBandSize: 0,
-        layout: "radial",
-        coordinate,
-      };
-      const { container } = render(() => (
-        <svg width={100} height={100}>
-          <CursorInternal {...props} coordinate={coordinate} zIndex={0} />
-        </svg>
-      ));
-      const cursor = container.querySelector(".recharts-sector");
-      assertNotNull(cursor);
-      expect(cursor).toBeVisible();
-    });
-  });
-
-  describe("Connected component", () => {
-    it("should render curve cursor by default", () => {
-      const { container } = render(() => (
-        <RechartsStoreProvider preloadedState={preloadedState}>
-          <svg width={100} height={100}>
-            <Cursor {...defaultProps} coordinate={baseCoord} zIndex={0} />
-          </svg>
-        </RechartsStoreProvider>
-      ));
-      const cursor = container.querySelector(".recharts-curve");
-      assertNotNull(cursor);
-      expect(cursor).toBeVisible();
-    });
-
-    it("should render cross cursor for scatter chart", () => {
-      const preloadedScatterState: Partial<RechartsRootState> = produceState((draft) => {
-        draft.options.chartName = "ScatterChart";
-        draft.options.tooltipPayloadSearcher = arrayTooltipSearcher;
-        draft.tooltip.itemInteraction.hover.active = true;
-      });
-      const { container } = render(() => (
-        <RechartsStoreProvider preloadedState={preloadedScatterState}>
-          <svg width={100} height={100}>
-            <Cursor {...defaultProps} coordinate={baseCoord} zIndex={0} />
-          </svg>
-        </RechartsStoreProvider>
-      ));
-      const cursor = container.querySelector(".recharts-cross");
-      assertNotNull(cursor);
-      expect(cursor).toBeVisible();
-    });
-
-    it("should render sector cursor for radial layout charts", () => {
-      const coordinate = { endAngle: 2, radius: 1, startAngle: 1, x: 0, y: 0 };
-      const payload: TooltipPayload = [{ value: "test", name: "test", graphicalItemId: "foo" }];
-      const { container } = render(() => (
-        <RechartsStoreProvider preloadedState={preloadedRadialState}>
-          <svg width={100} height={100}>
-            <Cursor {...defaultProps} coordinate={coordinate} payload={payload} zIndex={0} />
-          </svg>
-        </RechartsStoreProvider>
-      ));
-      const cursor = container.querySelector(".recharts-sector");
-      assertNotNull(cursor);
-      expect(cursor).toBeVisible();
-    });
-  });
-
-  describe("zIndex", () => {
-    it("should portal the line cursor at DefaultZIndexes.cursorLine by default in a chart", () => {
-      const { container } = render(() => (
-        <LineChart width={400} height={400} data={PageData}>
-          <Line dataKey="uv" isAnimationActive={false} />
-          <Tooltip />
-        </LineChart>
-      ));
-      showTooltip(container, lineChartMouseHoverTooltipSelector);
-
-      const portal = container.querySelector(
-        `.recharts-zIndex-layer_${DefaultZIndexes.cursorLine}`,
-      );
-      assertNotNull(portal);
-      expect(portal.querySelector(".recharts-tooltip-cursor")).not.toBeNull();
-    });
-
-    it("should portal the cursor into the requested z-index portal when zIndex is set", () => {
-      const { container } = render(() => (
-        <LineChart width={400} height={400} data={PageData}>
-          <Line dataKey="uv" isAnimationActive={false} />
-          <Cursor {...defaultProps} coordinate={{ x: 100, y: 100 }} zIndex={1234} />
-        </LineChart>
-      ));
-      flush();
-
-      const portal = container.querySelector(".recharts-zIndex-layer_1234");
-      assertNotNull(portal);
-      expect(portal.querySelector(".recharts-tooltip-cursor")).not.toBeNull();
-    });
-  });
-});

package/test/component/DefaultTooltipContent.spec.tsx

@@ -1,102 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render } from "@solidjs/testing-library";
-import {
-  DefaultTooltipContent,
-  type Props as DefaultTooltipContentProps,
-} from "../../src/component/DefaultTooltipContent";
-
-describe("DefaultTooltipContent", () => {
-  const mockProps: DefaultTooltipContentProps = {
-    accessibilityLayer: true,
-    contentStyle: {},
-    itemStyle: {},
-    labelStyle: {},
-    separator: " : ",
-    label: 2,
-    payload: [
-      {
-        stroke: "#3182bd",
-        fill: "#3182bd",
-        dataKey: "uv",
-        name: "uv",
-        color: "#3182bd",
-        value: 200,
-        graphicalItemId: "recharts-area-0",
-      },
-    ],
-    itemSorter: (d) => d.name,
-    labelFormatter: () => "mock labelFormatter",
-  };
-
-  it("renders without crashing, finds div with default class attr", () => {
-    const { container } = render(() => <DefaultTooltipContent {...mockProps} />);
-    expect(container.querySelectorAll("div.recharts-default-tooltip")).toHaveLength(1);
-  });
-
-  it("does not render any name or value when tooltip formatter returns null", () => {
-    const mockPropsWithFormatter: DefaultTooltipContentProps = {
-      ...mockProps,
-      formatter: () => null,
-    };
-    const { container } = render(() => <DefaultTooltipContent {...mockPropsWithFormatter} />);
-    const tooltip = container.querySelectorAll("div.recharts-default-tooltip");
-    expect(tooltip).toHaveLength(1);
-
-    expect(tooltip[0]).toHaveTextContent("mock labelFormatter");
-  });
-
-  it("renders the value returned by the formatter as a recharts tooltip item", () => {
-    const mockPropsWithFormatter: DefaultTooltipContentProps = {
-      ...mockProps,
-      formatter: () => "SOME VALUE",
-    };
-    const { container } = render(() => <DefaultTooltipContent {...mockPropsWithFormatter} />);
-    const tooltip = container.querySelectorAll("div.recharts-default-tooltip");
-    expect(tooltip).toHaveLength(1);
-
-    expect(tooltip[0]).toHaveTextContent("mock labelFormatteruv : SOME VALUE");
-  });
-
-  it("renders the name and value returned by the formatter as a recharts tooltip item", () => {
-    const mockPropsWithFormatter: DefaultTooltipContentProps = {
-      ...mockProps,
-      formatter: () => ["SOME VALUE", "SOME NAME"],
-    };
-    const { container } = render(() => <DefaultTooltipContent {...mockPropsWithFormatter} />);
-    const tooltip = container.querySelectorAll("div.recharts-default-tooltip");
-    expect(tooltip).toHaveLength(1);
-
-    expect(tooltip[0]).toHaveTextContent("mock labelFormatterSOME NAME : SOME VALUE");
-  });
-
-  it("renders without crashing when payload contains null or undefined entries", () => {
-    const mockPropsWithSparsePayload: DefaultTooltipContentProps = {
-      ...mockProps,
-      payload: [
-        {
-          stroke: "#3182bd",
-          fill: "#3182bd",
-          dataKey: "uv",
-          name: "A",
-          color: "#3182bd",
-          value: 10,
-          graphicalItemId: "recharts-area-0",
-        },
-        undefined,
-        null,
-        {
-          stroke: "#3182bd",
-          fill: "#3182bd",
-          dataKey: "uv",
-          name: "B",
-          color: "#3182bd",
-          value: 20,
-          graphicalItemId: "recharts-area-1",
-        },
-      ] as unknown as DefaultTooltipContentProps["payload"],
-    };
-    const { container } = render(() => <DefaultTooltipContent {...mockPropsWithSparsePayload} />);
-    const tooltipItems = container.querySelectorAll("li.recharts-tooltip-item");
-    expect(tooltipItems.length).toBe(2);
-  });
-});

package/test/component/Label.render.spec.tsx

@@ -1,63 +0,0 @@
-// Spec for the Label + LabelList vertical: the implicit `label` prop now renders
-// real <Text> labels for reference elements (via CartesianLabelFromLabelProp) and
-// per-data-point labels for graphical items (via LabelList + its context).
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { BarChart, Bar, LineChart, Line, XAxis, YAxis, ReferenceLine } from "../../src";
-
-const data = [
-  { name: "A", uv: 10 },
-  { name: "B", uv: 30 },
-  { name: "C", uv: 50 },
-];
-
-describe("Label / LabelList", () => {
-  it("renders a ReferenceLine's string label as a .recharts-label", () => {
-    const { container } = render(() => (
-      <LineChart width={400} height={300} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis type="number" domain={[0, 100]} />
-        <Line dataKey="uv" />
-        <ReferenceLine y={50} label="threshold" />
-      </LineChart>
-    ));
-    flush();
-
-    const labels = container.querySelectorAll(".recharts-label");
-    expect(labels).toHaveLength(1);
-    expect(labels[0]?.textContent).toContain("threshold");
-  });
-
-  it("renders one LabelList label per bar from the bar's value", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={400}
-        height={300}
-        data={data}
-        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
-      >
-        <Bar isAnimationActive={false} dataKey="uv" label />
-      </BarChart>
-    ));
-    flush();
-
-    const list = container.querySelector(".recharts-bar .recharts-label-list");
-    expect(list).not.toBeNull();
-    const labels = container.querySelectorAll(".recharts-label-list .recharts-label");
-    expect(labels).toHaveLength(data.length);
-    // Default accessor pulls the bar's value: 10, 30, 50.
-    expect([...labels].map((l) => l.textContent)).toEqual(["10", "30", "50"]);
-  });
-
-  it("renders nothing for label={false}", () => {
-    const { container } = render(() => (
-      <BarChart width={400} height={300} data={data}>
-        <Bar dataKey="uv" label={false} />
-      </BarChart>
-    ));
-    flush();
-
-    expect(container.querySelector(".recharts-label-list")).toBeNull();
-  });
-});