solid-recharts 0.1.0

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

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { Pie, PieChart } from "../../src";
+import { render } from "../helper/render";
+
+// Ported from recharts 3.8.1 test/chart/PieChart.typed.spec.tsx.
+
+type ExampleDataPoint = { value: number; name: string };
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+];
+
+describe("PieChart with strong typing", () => {
+  it("should allow implicit chart typing", () => {
+    render(() => (
+      <PieChart data={data} width={400} height={400}>
+        <Pie data={data} dataKey="value" isAnimationActive={false} />
+      </PieChart>
+    ));
+  });
+
+  it("should allow explicit chart typing", () => {
+    render(() => (
+      <PieChart<ExampleDataPoint> data={data} width={400} height={400}>
+        <Pie data={data} dataKey="value" isAnimationActive={false} />
+      </PieChart>
+    ));
+  });
+
+  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
+      <PieChart<ExampleDataPoint> data={{ wrong: 1 }} width={400} height={400}>
+        <Pie data={data} dataKey="value" isAnimationActive={false} />
+      </PieChart>
+    );
+    expect(invalidChart).toBeDefined();
+  });
+});

package/test/chart/RadarChart.spec.tsx

@@ -0,0 +1,530 @@
+// Ported from recharts 3.8.1 test/chart/RadarChart.spec.tsx (commit 7a23854).
+//
+// The reference `expectRadarPolygons` helper is not part of the ported test/helper
+// set, so the polygon `d`/fill/fillOpacity assertions are inlined here. `flush()`
+// is needed because Radar registers via an effect and points compute from the store.
+//
+// Reference cases that use `rerender` to change a CHART-LEVEL prop (innerRadius /
+// outerRadius / clockWise / startAngle "does nothing") are ported via a reactive
+// signal driving that prop — the assertion (unchanged geometry) is identical.
+//
+// PERMANENT-N/A: the `Customized`-component-based "Renders polygon with
+// implicit/default axes" cases (no Customized in the port) — the selector
+// assertions they make are already covered by the createSelectorTestCase cases here.
+import { createEffect, createSignal, flush } from "solid-js";
+import { describe, expect, it, test, vi } from "vitest";
+import { exampleRadarData } from "../_data";
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from "../../src";
+import { render, fireEvent } from "../helper/render";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+import { expectLastCalledWithScale } from "../helper/expectScale";
+import { selectRealScaleType } from "../../src/state/selectors/axisSelectors";
+import {
+  selectAngleAxis,
+  selectMaxRadius,
+  selectOuterRadius,
+  selectPolarOptions,
+  selectRadiusAxisRangeWithReversed,
+} from "../../src/state/selectors/polarAxisSelectors";
+import { selectPolarAxisScale } from "../../src/state/selectors/polarScaleSelectors";
+import { useChartHeight, useChartWidth, useViewBox } from "../../src/context/chartLayoutContext";
+
+type ExpectedRadarPolygon = {
+  d: string | null;
+  fill: string | null;
+  fillOpacity: string | null;
+};
+
+function expectRadarPolygons(
+  container: Element,
+  expected: ReadonlyArray<ExpectedRadarPolygon>,
+): void {
+  const polygons = container.querySelectorAll(".recharts-radar-polygon path");
+  const actual = Array.from(polygons).map((p) => ({
+    d: p.getAttribute("d"),
+    fill: p.getAttribute("fill"),
+    fillOpacity: p.getAttribute("fill-opacity"),
+  }));
+  expect(actual).toEqual(expected);
+}
+
+describe("<RadarChart />", () => {
+  describe("with implicit axes", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <RadarChart
+        cx={100}
+        cy={150}
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar dataKey="value" />
+        {props.children}
+      </RadarChart>
+    ));
+
+    it("should select angle settings", () => {
+      const { spy } = renderTestCase((state) => selectAngleAxis(state, 0));
+      expectLastCalledWith(spy, {
+        allowDataOverflow: false,
+        allowDecimals: false,
+        allowDuplicatedCategory: false,
+        dataKey: undefined,
+        domain: undefined,
+        id: 0,
+        includeHidden: false,
+        name: undefined,
+        reversed: false,
+        niceTicks: "auto",
+        scale: "auto",
+        tick: true,
+        tickCount: undefined,
+        ticks: undefined,
+        type: "category",
+        unit: undefined,
+      });
+    });
+
+    it("should select angle axis scale", () => {
+      const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
+      expectLastCalledWithScale(spy, { domain: [0, 1, 2, 3, 4, 5, 6, 7], range: [-270, 90] });
+    });
+
+    it("should select angle axis scale type", () => {
+      const { spy } = renderTestCase((state) => selectRealScaleType(state, "angleAxis", 0));
+      expectLastCalledWith(spy, "band");
+    });
+
+    it("should select max radius", () => {
+      const { spy } = renderTestCase(selectMaxRadius);
+      expectLastCalledWith(spy, 245);
+    });
+
+    it("should select polar options", () => {
+      const { spy } = renderTestCase(selectPolarOptions);
+      expectLastCalledWith(spy, {
+        cx: 100,
+        cy: 150,
+        endAngle: -270,
+        innerRadius: 0,
+        outerRadius: 150,
+        startAngle: 90,
+      });
+    });
+
+    it("should select outer radius", () => {
+      const { spy } = renderTestCase(selectOuterRadius);
+      expectLastCalledWith(spy, 150);
+    });
+
+    it("should select radius axis range", () => {
+      const { spy } = renderTestCase((state) => selectRadiusAxisRangeWithReversed(state, 0));
+      expectLastCalledWith(spy, [0, 150]);
+    });
+
+    it("should select radius axis scale", () => {
+      const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "radiusAxis", 0));
+      expectLastCalledWithScale(spy, { domain: [0, 1000], range: [0, 150] });
+    });
+
+    it("should select radius axis scale type", () => {
+      const { spy } = renderTestCase((state) => selectRealScaleType(state, "radiusAxis", 0));
+      expectLastCalledWith(spy, "linear");
+    });
+
+    it("should render polygon", () => {
+      const { container } = render(() => (
+        <RadarChart
+          cx={100}
+          cy={150}
+          outerRadius={150}
+          width={600}
+          height={500}
+          data={exampleRadarData}
+        >
+          <Radar dataKey="value" />
+        </RadarChart>
+      ));
+      flush();
+      expectRadarPolygons(container, [
+        {
+          d: "M100,150L100,150L100,150L100,150L100,150L100,150L100,150L100,150L100,150Z",
+          fill: null,
+          fillOpacity: null,
+        },
+      ]);
+    });
+  });
+
+  test("innerRadius prop does not do anything", () => {
+    const [innerRadius, setInnerRadius] = createSignal(10);
+    const expectedPolygons: ReadonlyArray<ExpectedRadarPolygon> = [
+      {
+        d: "M300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250Z",
+        fill: null,
+        fillOpacity: null,
+      },
+    ];
+    const { container } = render(() => (
+      <RadarChart innerRadius={innerRadius()} width={600} height={500} data={exampleRadarData}>
+        <Radar dataKey="value" />
+      </RadarChart>
+    ));
+    flush();
+    expectRadarPolygons(container, expectedPolygons);
+
+    setInnerRadius(20);
+    flush();
+    expectRadarPolygons(container, expectedPolygons);
+  });
+
+  test("outerRadius prop does not do anything", () => {
+    const [outerRadius, setOuterRadius] = createSignal(10);
+    const expectedPolygons: ReadonlyArray<ExpectedRadarPolygon> = [
+      {
+        d: "M300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250Z",
+        fill: null,
+        fillOpacity: null,
+      },
+    ];
+    const { container } = render(() => (
+      <RadarChart outerRadius={outerRadius()} width={600} height={500} data={exampleRadarData}>
+        <Radar dataKey="value" />
+      </RadarChart>
+    ));
+    flush();
+    expectRadarPolygons(container, expectedPolygons);
+
+    setOuterRadius(20);
+    flush();
+    expectRadarPolygons(container, expectedPolygons);
+  });
+
+  test("startAngle and endAngle props do not do anything", () => {
+    const [angles, setAngles] = createSignal({ startAngle: 20, endAngle: 70 });
+    const { container } = render(() => (
+      <RadarChart
+        startAngle={angles().startAngle}
+        endAngle={angles().endAngle}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar dataKey="value" />
+      </RadarChart>
+    ));
+    flush();
+    expectRadarPolygons(container, [
+      {
+        d: "M300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250Z",
+        fill: null,
+        fillOpacity: null,
+      },
+    ]);
+
+    setAngles({ startAngle: 90, endAngle: 270 });
+    flush();
+    expectRadarPolygons(container, [
+      {
+        d: "M300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250Z",
+        fill: null,
+        fillOpacity: null,
+      },
+    ]);
+  });
+
+  test("renders multiple polygons with different dataKeys", () => {
+    const { container } = render(() => (
+      <RadarChart
+        cx={300}
+        cy={250}
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar dataKey="value" fill="green" fillOpacity={0.3} />
+        <Radar dataKey="half" fill="blue" fillOpacity={0.6} />
+      </RadarChart>
+    ));
+    flush();
+    expectRadarPolygons(container, [
+      {
+        d: "M300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250Z",
+        fill: "green",
+        fillOpacity: "0.3",
+      },
+      {
+        d: "M300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250Z",
+        fill: "blue",
+        fillOpacity: "0.6",
+      },
+    ]);
+  });
+
+  it("should move the polygons when cx and cy are percent string", () => {
+    const { container } = render(() => (
+      <RadarChart
+        cx="10%"
+        cy="90%"
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar dataKey="value" fill="green" fillOpacity={0.3} />
+        <Radar dataKey="half" fill="blue" fillOpacity={0.6} />
+      </RadarChart>
+    ));
+    flush();
+    expectRadarPolygons(container, [
+      {
+        d: "M60,450L60,450L60,450L60,450L60,450L60,450L60,450L60,450L60,450Z",
+        fill: "green",
+        fillOpacity: "0.3",
+      },
+      {
+        d: "M60,450L60,450L60,450L60,450L60,450L60,450L60,450L60,450L60,450Z",
+        fill: "blue",
+        fillOpacity: "0.6",
+      },
+    ]);
+  });
+
+  it("should place the polygons in the middle by default when cx and cy are undefined", () => {
+    const { container } = render(() => (
+      <RadarChart outerRadius={150} width={600} height={500} data={exampleRadarData}>
+        <Radar dataKey="value" fill="green" fillOpacity={0.3} />
+        <Radar dataKey="half" fill="blue" fillOpacity={0.6} />
+      </RadarChart>
+    ));
+    flush();
+    expectRadarPolygons(container, [
+      {
+        d: "M300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250Z",
+        fill: "green",
+        fillOpacity: "0.3",
+      },
+      {
+        d: "M300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250L300,250Z",
+        fill: "blue",
+        fillOpacity: "0.6",
+      },
+    ]);
+  });
+
+  it("should move polygons when cx and cy and outerRadius are updated", () => {
+    const [pos, setPos] = createSignal({ cx: 100, cy: 120, outerRadius: 150 });
+    const { container } = render(() => (
+      <RadarChart
+        cx={pos().cx}
+        cy={pos().cy}
+        outerRadius={pos().outerRadius}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar dataKey="value" fill="green" fillOpacity={0.3} />
+        <Radar dataKey="half" fill="blue" fillOpacity={0.6} />
+      </RadarChart>
+    ));
+    flush();
+    expectRadarPolygons(container, [
+      {
+        d: "M100,120L100,120L100,120L100,120L100,120L100,120L100,120L100,120L100,120Z",
+        fill: "green",
+        fillOpacity: "0.3",
+      },
+      {
+        d: "M100,120L100,120L100,120L100,120L100,120L100,120L100,120L100,120L100,120Z",
+        fill: "blue",
+        fillOpacity: "0.6",
+      },
+    ]);
+
+    setPos({ cx: 200, cy: 230, outerRadius: 100 });
+    flush();
+    expectRadarPolygons(container, [
+      {
+        d: "M200,230L200,230L200,230L200,230L200,230L200,230L200,230L200,230L200,230Z",
+        fill: "green",
+        fillOpacity: "0.3",
+      },
+      {
+        d: "M200,230L200,230L200,230L200,230L200,230L200,230L200,230L200,230L200,230Z",
+        fill: "blue",
+        fillOpacity: "0.6",
+      },
+    ]);
+  });
+
+  test("Render 8 dots when dot=true", () => {
+    const { container } = render(() => (
+      <RadarChart
+        cx={300}
+        cy={250}
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar isAnimationActive={false} dot dataKey="value" />
+      </RadarChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-radar-dot")).toHaveLength(8);
+  });
+
+  test("Render 8 labels when label=true", () => {
+    const { container } = render(() => (
+      <RadarChart
+        cx={300}
+        cy={250}
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar isAnimationActive={false} label dataKey="value" />
+      </RadarChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(8);
+  });
+
+  test("Render 1 PolarGrid 1 PolarAngleAxis and 1 PolarRadiusAxis in simple Radar", () => {
+    const { container } = render(() => (
+      <RadarChart
+        cx={300}
+        cy={250}
+        startAngle={45}
+        innerRadius={20}
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar dataKey="value" fill="#9597E4" fillOpacity={0.6} stroke="#8889DD" strokeWidth={3} />
+        <PolarGrid />
+        <PolarAngleAxis />
+        <PolarRadiusAxis orientation="middle" angle={67.5} />
+      </RadarChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-polar-grid")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-polar-angle-axis")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-polar-radius-axis")).toHaveLength(1);
+  });
+
+  test("Render 8 angle grid angle line, 8 angle axis ticks, and 5 radius axis ticks", () => {
+    const { container } = render(() => (
+      <RadarChart
+        cx={300}
+        cy={250}
+        startAngle={45}
+        innerRadius={20}
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar dataKey="value" fill="#9597E4" fillOpacity={0.6} stroke="#8889DD" strokeWidth={3} />
+        <PolarGrid />
+        <PolarAngleAxis />
+        <PolarRadiusAxis orientation="middle" angle={67.5} />
+      </RadarChart>
+    ));
+    flush();
+    expect(
+      container.querySelectorAll(".recharts-polar-grid .recharts-polar-grid-angle line"),
+    ).toHaveLength(8);
+    expect(
+      container.querySelectorAll(".recharts-polar-angle-axis .recharts-polar-angle-axis-tick"),
+    ).toHaveLength(8);
+    expect(
+      container.querySelectorAll(".recharts-polar-radius-axis .recharts-polar-radius-axis-tick"),
+    ).toHaveLength(5);
+  });
+
+  test("click on Sector should invoke onClick callback", () => {
+    const onClick = vi.fn();
+    const { container } = render(() => (
+      <RadarChart
+        cx={300}
+        cy={250}
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={exampleRadarData}
+      >
+        <Radar dataKey="value" onClick={onClick} />
+      </RadarChart>
+    ));
+    flush();
+    const radar = container.querySelector(".recharts-polygon");
+    expect(radar).not.toBeNull();
+    fireEvent.click(radar!);
+    expect(onClick).toBeCalled();
+  });
+
+  describe("RadarChart layout context", () => {
+    it("should provide viewBox", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        const viewBox = useViewBox();
+        createEffect(
+          () => viewBox(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <RadarChart width={100} height={50} barSize={20}>
+          <Comp />
+        </RadarChart>
+      ));
+      flush();
+      expect(spy).toHaveBeenLastCalledWith({ height: 40, width: 90, x: 5, y: 5 });
+    });
+
+    it("should provide chart width", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        const width = useChartWidth();
+        createEffect(
+          () => width(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <RadarChart width={100} height={50} barSize={20}>
+          <Comp />
+        </RadarChart>
+      ));
+      flush();
+      expect(spy).toHaveBeenLastCalledWith(100);
+    });
+
+    it("should provide chart height", () => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        const height = useChartHeight();
+        createEffect(
+          () => height(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <RadarChart width={100} height={50} barSize={20}>
+          <Comp />
+        </RadarChart>
+      ));
+      flush();
+      expect(spy).toHaveBeenLastCalledWith(50);
+    });
+  });
+});

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

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { Radar, RadarChart } from "../../src";
+import { render } from "../helper/render";
+
+// Ported from recharts 3.8.1 test/chart/RadarChart.typed.spec.tsx.
+
+type ExampleDataPoint = { value: number; name: string };
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+];
+
+describe("RadarChart with strong typing", () => {
+  it("should allow implicit chart typing", () => {
+    render(() => (
+      <RadarChart data={data} width={400} height={400}>
+        <Radar dataKey="value" isAnimationActive={false} />
+      </RadarChart>
+    ));
+  });
+
+  it("should allow explicit chart typing", () => {
+    render(() => (
+      <RadarChart<ExampleDataPoint> data={data} width={400} height={400}>
+        <Radar dataKey="value" isAnimationActive={false} />
+      </RadarChart>
+    ));
+  });
+
+  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
+      <RadarChart<ExampleDataPoint> data={{ wrong: 1 }} width={400} height={400}>
+        <Radar dataKey="value" isAnimationActive={false} />
+      </RadarChart>
+    );
+    expect(invalidChart).toBeDefined();
+  });
+});

package/test/chart/RadialBarChart.5966.spec.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { PolarAngleAxis, RadialBar, RadialBarChart } from "../../src";
+import { PageData } from "../_data";
+import { selectRadiusAxisTicks } from "../../src/state/selectors/radialBarSelectors";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+
+/*
+ * Ported from recharts 3.8.1 test/chart/RadialBarChart.5966.spec.tsx (bug #5966):
+ * innerRadius === outerRadius leaves nowhere to render → empty chart, no ticks.
+ */
+
+describe("RadialBarChart reproducing bug #5966", () => {
+  const renderTestCase = createSelectorTestCase((props) => (
+    <RadialBarChart
+      width={500}
+      height={500}
+      data={PageData}
+      startAngle={235}
+      endAngle={-55}
+      // The innerRadius is the same as outerRadius, the chart has nowhere to render. This should be an empty chart!
+      innerRadius="80%"
+      barSize={20}
+      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+    >
+      <PolarAngleAxis domain={[0, 100]} tick={false} />
+      <RadialBar
+        dataKey="uv"
+        cornerRadius={20}
+        fill="red"
+        background={{ fill: "lightgray" }}
+        animationDuration={20}
+        minPointSize={50}
+      />
+      {props.children}
+    </RadialBarChart>
+  ));
+
+  it("should not render RadialBar", () => {
+    const { container } = renderTestCase();
+    expect(container.querySelector(".recharts-radial-bar")).not.toBeInTheDocument();
+  });
+
+  it("should not select any radius axis ticks", () => {
+    const { spy } = renderTestCase((state) => selectRadiusAxisTicks(state, 0));
+    expectLastCalledWith(spy, undefined);
+  });
+});