solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/chart/BarChart.typed.spec.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { Bar, BarChart, LineChart, PieChart } from "../../src";
+import { render } from "@solidjs/testing-library";
+
+// Ported from recharts 3.8.1 test/chart/BarChart.typed.spec.tsx.
+
+type ExampleDataPoint = { value: number; name: string };
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+];
+
+describe("BarChart types", () => {
+  it("should accept cursor prop on BarChart", () => {
+    const { container } = render(() => (
+      <BarChart width={400} height={300} data={data} cursor="pointer">
+        <Bar dataKey="value" />
+      </BarChart>
+    ));
+    expect(container.querySelector(".recharts-surface")).toHaveAttribute("cursor", "pointer");
+  });
+
+  it("should accept cursor prop on LineChart", () => {
+    const { container } = render(() => (
+      <LineChart width={400} height={300} data={data} cursor="crosshair" />
+    ));
+    expect(container.querySelector(".recharts-surface")).toHaveAttribute("cursor", "crosshair");
+  });
+
+  it("should accept cursor prop on PieChart", () => {
+    const { container } = render(() => <PieChart width={400} height={300} cursor="default" />);
+    expect(container.querySelector(".recharts-surface")).toHaveAttribute("cursor", "default");
+  });
+
+  it("should allow implicit chart typing", () => {
+    render(() => (
+      <BarChart data={data} width={400} height={400}>
+        <Bar dataKey="value" isAnimationActive={false} />
+      </BarChart>
+    ));
+  });
+
+  it("should allow explicit chart typing", () => {
+    render(() => (
+      <BarChart<ExampleDataPoint> data={data} width={400} height={400}>
+        <Bar dataKey="value" isAnimationActive={false} />
+      </BarChart>
+    ));
+  });
+
+  it("should show error when chart data shape does not match explicit generic type", () => {
+    const invalidChart = (
+      // @ts-expect-error TypeScript is correct here - chart data does not match explicit generic type
+      <BarChart<ExampleDataPoint> data={{ wrong: 1 }} width={400} height={400}>
+        <Bar dataKey="value" isAnimationActive={false} />
+      </BarChart>
+    );
+    expect(invalidChart).toBeDefined();
+  });
+});

package/test/chart/CategoricalChart.spec.tsx

@@ -0,0 +1,255 @@
+// Ported from recharts 3.8.1 test/chart/CategoricalChart.spec.tsx.
+//
+// Harness adaptations: React render -> Solid `render(() => <…/>)`; @testing-library/react
+// fireEvent/act -> the repo's `fireEvent` + `flush()` from solid-js (the external
+// mouse handlers are NOT throttled by default, so they dispatch synchronously —
+// recharts' `act(() => vi.runOnlyPendingTimers())` drains throttled events; here a
+// `flush()` settles the Solid graph). `rechartsTestRender` -> the repo's `render`.
+import type { JSX } from "@solidjs/web";
+import { flush } from "solid-js";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import {
+  Area,
+  AreaChart,
+  ComposedChart,
+  Funnel,
+  FunnelChart,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  Radar,
+  RadarChart,
+  RadialBar,
+  RadialBarChart,
+  Scatter,
+  ScatterChart,
+  XAxis,
+  YAxis,
+} from "../../src";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { assertNotNull } from "../helper/assertNotNull";
+import { fireEvent, render } from "@solidjs/testing-library";
+
+type WrapperProps = {
+  onClick: () => void;
+  onDoubleClick: () => void;
+  onContextMenu: () => void;
+};
+
+const data = [
+  { name: "Page A", uv: 400, pv: 2400, amt: 2400 },
+  { name: "Page B", uv: 300, pv: 4567, amt: 2400 },
+  { name: "Page C", uv: 300, pv: 1398, amt: 2400 },
+  { name: "Page D", uv: 200, pv: 9800, amt: 2400 },
+  { name: "Page E", uv: 278, pv: 3908, amt: 2400 },
+  { name: "Page F", uv: 189, pv: 4800, amt: 2400 },
+];
+
+const funnelData1 = [
+  { value: 100, name: "展现" },
+  { value: 80, name: "点击" },
+  { value: 50, name: "访问" },
+  { value: 40, name: "咨询" },
+  { value: 26, name: "订单" },
+];
+
+const funnelData2 = [
+  { value: 60, name: "展现" },
+  { value: 50, name: "点击" },
+  { value: 30, name: "访问" },
+  { value: 20, name: "咨询" },
+  { value: 6, name: "订单" },
+];
+
+const commonChartProps = {
+  data,
+  width: 300,
+  height: 300,
+};
+
+type CategoricalChartTestCase = {
+  name: string;
+  Wrapper: (props: WrapperProps) => JSX.Element;
+};
+
+const AreaChartTestCase: CategoricalChartTestCase = {
+  name: "AreaChart",
+  Wrapper: (props) => (
+    <AreaChart
+      {...commonChartProps}
+      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
+      onDoubleClick={props.onDoubleClick}
+    >
+      <Area type="monotone" dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+    </AreaChart>
+  ),
+};
+
+const ComposedChartTestCase: CategoricalChartTestCase = {
+  name: "ComposedChart",
+  Wrapper: (props) => (
+    <ComposedChart
+      {...commonChartProps}
+      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
+      onDoubleClick={props.onDoubleClick}
+    >
+      <Area type="monotone" dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+      <Line type="monotone" dataKey="uv" stroke="#00EE00" />
+    </ComposedChart>
+  ),
+};
+
+const FunnelChartTestCase: CategoricalChartTestCase = {
+  name: "FunnelChart",
+  Wrapper: (props) => (
+    <FunnelChart
+      {...commonChartProps}
+      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
+      onDoubleClick={props.onDoubleClick}
+    >
+      <Funnel dataKey="uv" data={funnelData1} />
+      <Funnel dataKey="uv" data={funnelData2} />
+    </FunnelChart>
+  ),
+};
+
+const LineChartTestCase: CategoricalChartTestCase = {
+  name: "LineChart",
+  Wrapper: (props) => (
+    <LineChart
+      {...commonChartProps}
+      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
+      onDoubleClick={props.onDoubleClick}
+    >
+      <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+    </LineChart>
+  ),
+};
+
+const PieChartTestCase: CategoricalChartTestCase = {
+  name: "PieChart",
+  Wrapper: (props) => (
+    <PieChart
+      width={300}
+      height={300}
+      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
+      onDoubleClick={props.onDoubleClick}
+    >
+      <Pie
+        dataKey="uv"
+        isAnimationActive
+        data={data}
+        cx={200}
+        cy={200}
+        outerRadius={80}
+        fill="#ff7300"
+      />
+    </PieChart>
+  ),
+};
+
+const RadarChartTestCase: CategoricalChartTestCase = {
+  name: "RadarChart",
+  Wrapper: (props) => (
+    <RadarChart
+      {...commonChartProps}
+      cx={300}
+      cy={250}
+      outerRadius={150}
+      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
+      onDoubleClick={props.onDoubleClick}
+    >
+      <Radar isAnimationActive={false} dataKey="uv" />
+    </RadarChart>
+  ),
+};
+
+const RadialBarChartTestCase: CategoricalChartTestCase = {
+  name: "RadialBarChart",
+  Wrapper: (props) => (
+    <RadialBarChart
+      {...commonChartProps}
+      cx={150}
+      cy={150}
+      innerRadius={20}
+      outerRadius={140}
+      barSize={10}
+      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
+      onDoubleClick={props.onDoubleClick}
+    >
+      <RadialBar dataKey="uv" isAnimationActive={false} />
+    </RadialBarChart>
+  ),
+};
+
+const ScatterChartTestCase: CategoricalChartTestCase = {
+  name: "ScatterChart",
+  Wrapper: (props) => (
+    <ScatterChart
+      width={400}
+      height={400}
+      onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
+      onDoubleClick={props.onDoubleClick}
+      margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+    >
+      <XAxis dataKey="uv" name="stature" unit="cm" />
+      <YAxis dataKey="pv" name="weight" unit="kg" />
+      <Scatter line name="A school" data={data} fill="#ff7300" />
+    </ScatterChart>
+  ),
+};
+
+const testCases = [
+  AreaChartTestCase,
+  ComposedChartTestCase,
+  FunnelChartTestCase,
+  LineChartTestCase,
+  PieChartTestCase,
+  RadarChartTestCase,
+  RadialBarChartTestCase,
+  ScatterChartTestCase,
+];
+
+describe("CategoricalChart", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ height: 50, width: 50 });
+  });
+
+  describe.each(testCases)("$name", ({ Wrapper }) => {
+    test("should call corresponding callback on mouse events", () => {
+      const handleClickMock = vi.fn();
+      handleClickMock.mockName("handleClickMock");
+      const handleDoubleClickMock = vi.fn();
+      const handleContextMenuMock = vi.fn();
+
+      const { container } = render(() => (
+        <Wrapper
+          onClick={handleClickMock}
+          onDoubleClick={handleDoubleClickMock}
+          onContextMenu={handleContextMenuMock}
+        />
+      ));
+
+      const surface = container.querySelector(".recharts-wrapper");
+      assertNotNull(surface);
+      fireEvent.click(surface);
+      fireEvent.doubleClick(surface);
+      fireEvent.contextMenu(surface);
+
+      flush();
+
+      expect(handleClickMock).toHaveBeenCalledWith(expect.any(Object), expect.any(Object));
+      expect(handleDoubleClickMock).toHaveBeenCalledWith(expect.any(Object), expect.any(Object));
+      expect(handleContextMenuMock).toHaveBeenCalledWith(expect.any(Object), expect.any(Object));
+    });
+  });
+});

package/test/chart/ComposedChart.spec.tsx

@@ -0,0 +1,199 @@
+import { describe, it, test, expect, vi } from "vitest";
+import { createEffect, flush } from "solid-js";
+import { fireEvent, render } from "@solidjs/testing-library";
+import {
+  Area,
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "../../src";
+import { assertNotNull } from "../helper/assertNotNull";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { useChartHeight, useChartWidth, useViewBox } from "../../src/context/chartLayoutContext";
+import { useClipPathId } from "../../src/container/ClipPathProvider";
+
+/*
+ * Ported from recharts 3.8.1 test/chart/ComposedChart.spec.tsx. Solid adaptations:
+ * render(() => …); layout-context spies read the accessor via createEffect (a sync
+ * body read warns STRICT_READ); flush()/vi.runAllTimers() replace act+pending timers;
+ * toHaveBeenCalledTimes dropped (Solid's fine-grained reactivity differs).
+ */
+
+describe("<ComposedChart />", () => {
+  const data = [
+    { name: "Page A", uv: 590, pv: 800, amt: 1400 },
+    { name: "Page B", uv: 868, pv: 967, amt: 1506 },
+    { name: "Page C", uv: 1397, pv: 1098, amt: 989 },
+    { name: "Page D", uv: 1480, pv: 1200, amt: 1228 },
+    { name: "Page E", uv: 1520, pv: 1108, amt: 1100 },
+    { name: "Page F", uv: 1400, pv: 680, amt: 1700 },
+  ];
+
+  test("Render 1 line, 1 area, 1bar in the ComposedChart", () => {
+    const { container } = render(() => (
+      <ComposedChart
+        width={800}
+        height={400}
+        data={data}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <CartesianGrid stroke="#f5f5f5" />
+        <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
+        <Bar dataKey="pv" barSize={20} fill="#413ea0" />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+      </ComposedChart>
+    ));
+
+    expect(container.querySelectorAll(".recharts-line .recharts-line-curve")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-bar")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-area .recharts-area-area")).toHaveLength(1);
+  });
+
+  test("Render 1 bar, 1 dot when data has only one element", () => {
+    const singleData = [data[0]];
+    const { container } = render(() => (
+      <ComposedChart
+        width={800}
+        height={400}
+        data={singleData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis dataKey="pv" orientation="left" yAxisId="left" />
+        <YAxis dataKey="uv" orientation="right" yAxisId="right" />
+        <CartesianGrid stroke="#f5f5f5" />
+        <Bar dataKey="pv" barSize={20} fill="#413ea0" yAxisId="left" />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId="right" />
+      </ComposedChart>
+    ));
+    // The Solid port's JavascriptAnimate emits bar rectangles on the first
+    // (faked) animation frame; advance it (chart props unchanged from recharts).
+    vi.runAllTimers();
+    flush();
+    expect(container.querySelectorAll(".recharts-line-dot")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-bar .recharts-bar-rectangle")).toHaveLength(1);
+  });
+
+  test("MouseEnter ComposedChart should show tooltip, active dot, and cursor", () => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+
+    const { container } = render(() => (
+      <ComposedChart
+        width={800}
+        height={400}
+        data={data}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Legend />
+        <Tooltip />
+        <CartesianGrid stroke="#f5f5f5" />
+        <Area
+          isAnimationActive={false}
+          type="monotone"
+          dataKey="amt"
+          fill="#8884d8"
+          stroke="#8884d8"
+        />
+        <Bar isAnimationActive={false} dataKey="pv" barSize={20} fill="#413ea0" />
+        <Line isAnimationActive={false} type="monotone" dataKey="uv" stroke="#ff7300" />
+      </ComposedChart>
+    ));
+
+    const chart = container.querySelector(".recharts-wrapper");
+    assertNotNull(chart);
+    fireEvent.mouseMove(chart, { clientX: 200, clientY: 100 });
+    fireEvent.mouseEnter(chart, { clientX: 200, clientY: 100 });
+    flush();
+    vi.runAllTimers();
+    flush();
+
+    expect(container.querySelectorAll(".recharts-tooltip-cursor")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-active-dot")).toHaveLength(2);
+  });
+
+  describe("ComposedChart layout context", () => {
+    it("should provide viewBox", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        const viewBox = useViewBox();
+        createEffect(
+          () => viewBox(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <ComposedChart width={100} height={50} barSize={20}>
+          <Comp />
+        </ComposedChart>
+      ));
+
+      expect(spy).toHaveBeenCalledWith({ height: 40, width: 90, x: 5, y: 5 });
+    });
+
+    it("should provide clipPathId", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        createEffect(
+          () => useClipPathId(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <ComposedChart width={100} height={50} barSize={20}>
+          <Comp />
+        </ComposedChart>
+      ));
+
+      expect(spy).toHaveBeenCalledWith(expect.stringMatching(/recharts\d+-clip/));
+    });
+
+    it("should provide width", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        const width = useChartWidth();
+        createEffect(
+          () => width(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <ComposedChart width={100} height={50} barSize={20}>
+          <Comp />
+        </ComposedChart>
+      ));
+
+      expect(spy).toHaveBeenCalledWith(100);
+    });
+
+    it("should provide height", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        const height = useChartHeight();
+        createEffect(
+          () => height(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <ComposedChart width={100} height={50} barSize={20}>
+          <Comp />
+        </ComposedChart>
+      ));
+
+      expect(spy).toHaveBeenCalledWith(50);
+    });
+  });
+});

package/test/chart/ComposedChart.typed.spec.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { ComposedChart, Line } from "../../src";
+import { render } from "@solidjs/testing-library";
+
+// Ported from recharts 3.8.1 test/chart/ComposedChart.typed.spec.tsx.
+
+type ExampleDataPoint = { value: number; name: string };
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+];
+
+describe("ComposedChart with strong typing", () => {
+  it("should allow implicit chart typing", () => {
+    render(() => (
+      <ComposedChart data={data} width={400} height={400}>
+        <Line dataKey="value" isAnimationActive={false} />
+      </ComposedChart>
+    ));
+  });
+
+  it("should allow explicit chart typing", () => {
+    render(() => (
+      <ComposedChart<ExampleDataPoint> data={data} width={400} height={400}>
+        <Line dataKey="value" isAnimationActive={false} />
+      </ComposedChart>
+    ));
+  });
+
+  it("should show error when chart data shape does not match explicit generic type", () => {
+    const invalidChart = (
+      // @ts-expect-error TypeScript is correct here - chart data does not match explicit generic type
+      <ComposedChart<ExampleDataPoint> data={{ wrong: 1 }} width={400} height={400}>
+        <Line dataKey="value" isAnimationActive={false} />
+      </ComposedChart>
+    );
+    expect(invalidChart).toBeDefined();
+  });
+});