solid-recharts 0.1.0

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

@@ -0,0 +1,155 @@
+// 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 "../helper/render";
+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

@@ -0,0 +1,12 @@
+// 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 "../helper/render";
+import { Cell } from "../../src";
+
+describe("<Cell />", () => {
+  it("Render empty dom", () => {
+    const { container } = render(() => <Cell />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/test/component/Cursor.spec.tsx

@@ -0,0 +1,186 @@
+// 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 "../helper/render";
+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

@@ -0,0 +1,102 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../helper/render";
+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

@@ -0,0 +1,63 @@
+// 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 "../helper/render";
+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();
+  });
+});