solid-recharts 0.2.0 → 1.0.0

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

@@ -1,60 +0,0 @@
-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

@@ -1,255 +0,0 @@
-// 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

@@ -1,199 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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();
-  });
-});