solid-recharts 0.1.0

package/test/chart/AccessibilityScans.spec.tsx

@@ -0,0 +1,286 @@
+// Ported from recharts 3.8.1 test/chart/AccessibilityScans.spec.tsx (commit
+// 7a23854).
+//
+// Harness deviations: React `render` -> Solid `render(() => <…/>)` + `flush()`;
+// @testing-library/react -> the repo's local testing-library at ../helper/render.
+//
+// The reference spec's PRIMARY assertion in every case is
+// `expect((await axe(container, AXE_OPTIONS)).violations).toEqual([])` (axe-core static a11y
+// scan). With `vitest-axe`/`axe-core` now installed, every case runs the real
+// scan, plus the framework-independent secondary assertions (root-SVG
+// `role="application"` / its absence, Scatter point geometry). The previously
+// deferred families (combined tooltip/legend/axes/brush/grid chart, Sankey,
+// Sunburst, Treemap) are ported here.
+//
+// `color-contrast` is DISABLED below: it is empirically `inapplicable` under
+// jsdom (no layout/visibility model → axe cannot determine rendered text or its
+// background, even with the `canvas` package), so it can never produce a verdict
+// here. Contrast (and real geometry) must be validated by a browser-based axe
+// run (Playwright + @axe-core/playwright). Every OTHER axe rule — ARIA validity,
+// roles, accessible names, structure, duplicate ids, etc. — runs for real.
+import { flush } from "solid-js";
+import { describe, expect, test } from "vitest";
+import { axe } from "vitest-axe";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  Brush,
+  CartesianGrid,
+  Funnel,
+  FunnelChart,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  Radar,
+  RadarChart,
+  RadialBar,
+  RadialBarChart,
+  Sankey,
+  Scatter,
+  ScatterChart,
+  SunburstChart,
+  Tooltip,
+  Treemap,
+  XAxis,
+  YAxis,
+} from "../../src";
+import {
+  PageData as data,
+  exampleSankeyData,
+  exampleSunburstData,
+  exampleTreemapData,
+} from "../_data";
+import { expectScatterPoints } from "../helper/expectScatterPoints";
+import { render } from "../helper/render";
+
+const AXE_OPTIONS = { rules: { "color-contrast": { enabled: false } } } as const;
+
+describe("Static scanning for accessibility markup issues", () => {
+  test("Area chart", async () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data}>
+        <Area type="monotone" dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("chart with accessibilityLayer", async () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data} accessibilityLayer>
+        <Area type="monotone" dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("chart with accessibilityLayer=false", async () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data} accessibilityLayer={false}>
+        <Area type="monotone" dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+      </AreaChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).not.toHaveAttribute("role");
+  });
+
+  test("Chart with tooltip, legend, axes, brush, grid, margins", async () => {
+    const { container } = render(() => (
+      <AreaChart
+        width={100}
+        height={50}
+        data={data}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <Area type="monotone" dataKey="uv" stroke="#ff7300" fill="#ff7300" />
+        <Tooltip />
+        <Legend />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <CartesianGrid stroke="#f5f5f5" />
+        <Brush />
+      </AreaChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+  });
+
+  test("Bar chart", async () => {
+    const { container } = render(() => (
+      <BarChart width={100} height={50} data={data}>
+        <Bar dataKey="uv" fill="#ff7300" />
+      </BarChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("Funnel chart", async () => {
+    const { container } = render(() => (
+      <FunnelChart width={500} height={300}>
+        <Funnel dataKey="value" data={data} />
+      </FunnelChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("Line chart", async () => {
+    const { container } = render(() => (
+      <LineChart width={400} height={400} data={data}>
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("Pie chart", async () => {
+    const { container } = render(() => (
+      <PieChart width={800} height={400}>
+        <Pie dataKey="value" data={[data[0]]} cx={200} cy={200} outerRadius={80} fill="#ff7300" />
+      </PieChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("Radar chart", async () => {
+    const { container } = render(() => (
+      <RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} data={data}>
+        <Radar dataKey="value" />
+      </RadarChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("Radial bar chart", async () => {
+    const { container } = render(() => (
+      <RadialBarChart
+        width={500}
+        height={300}
+        cx={150}
+        cy={150}
+        innerRadius={20}
+        outerRadius={140}
+        barSize={10}
+        data={data}
+      >
+        <RadialBar dataKey="uv" isAnimationActive={false} />
+      </RadialBarChart>
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toEqual([]);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("Sankey chart", async () => {
+    const { container } = render(() => (
+      <Sankey width={1000} height={500} data={exampleSankeyData} />
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toHaveLength(0);
+  });
+
+  test("Scatter chart", async () => {
+    const { container } = render(() => (
+      <ScatterChart width={400} height={400}>
+        <XAxis dataKey="uv" name="stature" unit="cm" />
+        <YAxis dataKey="pv" name="weight" unit="kg" />
+        <Scatter line name="A school" data={data} fill="#ff7300" />
+        <Tooltip />
+      </ScatterChart>
+    ));
+    flush();
+    expectScatterPoints(container, [
+      {
+        cx: "92.5",
+        cy: "278.59999999999997",
+        d: "M0,0",
+        height: "9.0270333367641",
+        transform: "translate(92.5, 278.59999999999997)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "147.5",
+        cy: "200.588",
+        d: "M0,0",
+        height: "9.0270333367641",
+        transform: "translate(147.5, 200.588)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "202.5",
+        cy: "314.672",
+        d: "M0,0",
+        height: "9.0270333367641",
+        transform: "translate(202.5, 314.672)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "257.5",
+        cy: "12.200000000000006",
+        d: "M0,0",
+        height: "9.0270333367641",
+        transform: "translate(257.5, 12.200000000000006)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "312.5",
+        cy: "224.31199999999998",
+        d: "M0,0",
+        height: "9.0270333367641",
+        transform: "translate(312.5, 224.31199999999998)",
+        width: "9.0270333367641",
+      },
+      {
+        cx: "367.5",
+        cy: "192.20000000000002",
+        d: "M0,0",
+        height: "9.0270333367641",
+        transform: "translate(367.5, 192.20000000000002)",
+        width: "9.0270333367641",
+      },
+    ]);
+    expect((await axe(container, AXE_OPTIONS)).violations).toHaveLength(0);
+    expect(document.querySelector("svg")).toHaveAttribute("role", "application");
+  });
+
+  test("Sunburst", async () => {
+    const { container } = render(() => (
+      <SunburstChart width={500} height={500} data={exampleSunburstData} />
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toHaveLength(0);
+  });
+
+  test("Treemap", async () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+      />
+    ));
+    flush();
+    expect((await axe(container, AXE_OPTIONS)).violations).toHaveLength(0);
+  });
+});

package/test/chart/AreaChart.spec.tsx

@@ -0,0 +1,409 @@
+// Port of recharts 3.8.1 test/chart/AreaChart.spec.tsx (commit 7a23854).
+//
+// Tier A (byte-identical DOM assertions): simple monotone path, single-dot, no-path
+// on a non-matching dataKey, stacked (4 paths), vertical chart path, dots+labels,
+// empty data, stacked-null-as-0 (connectNulls), plus the layout-context cases
+// (viewBox / clipPathId / width / height). Geometry mirrors the reference setup
+// exactly (mockGetBoundingClientRect 100x100, width=100 height=50, monotone curve).
+//
+// PERMANENT-N/A (not ported): stacked-percentage / stacked-number / stackId-number
+// cases assert via a render-spy on selectors at intermediate render boundaries
+// (recharts <Customized>/spy + render-count); the value-equivalents live in the
+// stacked rendering spec. activeDot ReactElement/function + ranged active dots need
+// Tooltip-hover + fake timers + RANGE areas (range area is a deferred Area feature).
+//
+// Solid deviations: `render(() => …)` + `flush()` (the area registers via an effect
+// and its points compute from the microtask-batched store); `createEffect(compute,
+// effect)` for context spies. Any reactive-graph diagnostic fired during the test
+// fails it via the global guard in test/setup.ts.
+import { beforeEach, describe, expect, it, test, vi } from "vitest";
+import { createEffect, flush } from "solid-js";
+import { render } from "../helper/render";
+import { AreaChart, Area, XAxis, YAxis } from "../../src";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { expectAreaCurve } from "../helper/expectAreaCurve";
+import { useChartHeight, useChartWidth, useViewBox } from "../../src/context/chartLayoutContext";
+import { useClipPathId } from "../../src/container/ClipPathProvider";
+import { PageData } from "../_data";
+
+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 },
+];
+
+describe("<AreaChart />", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  test("Renders 2 path in simple AreaChart", () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data}>
+        <Area
+          type="monotone"
+          dataKey="uv"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-area-area")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-area-curve")).toHaveLength(1);
+
+    expectAreaCurve(container, [
+      {
+        d: "M5,5C11,10,17,15,23,15C29,15,35,15,41,15C47,15,53,25,59,25C65,25,71,17.2,77,17.2C83,17.2,89,21.65,95,26.1",
+      },
+    ]);
+  });
+
+  test("Renders 1 dot when data only have one element", () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data.slice(0, 1)}>
+        <Area
+          type="monotone"
+          dataKey="pv"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-area-area")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-area-curve")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-area-dot")).toHaveLength(1);
+    expectAreaCurve(container, []);
+  });
+
+  test("Renders no path when dataKey does not match the source data", () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data}>
+        <Area
+          type="monotone"
+          dataKey="any"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-area-area")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-area-curve")).toHaveLength(0);
+  });
+
+  test("Renders 4 path in a stacked AreaChart", () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data}>
+        <Area
+          type="monotone"
+          dataKey="uv"
+          stackId="test"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+        <Area
+          type="monotone"
+          dataKey="pv"
+          stackId="test"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-area-area")).toHaveLength(2);
+    expect(container.querySelectorAll(".recharts-area-curve")).toHaveLength(2);
+
+    expectAreaCurve(container, [
+      {
+        d: "M5,43.4C11,43.6,17,43.8,23,43.8C29,43.8,35,43.8,41,43.8C47,43.8,53,44.2,59,44.2C65,44.2,71,43.888,77,43.888C83,43.888,89,44.066,95,44.244",
+      },
+      {
+        d: "M5,33.8C11,29.666,17,25.532,23,25.532C29,25.532,35,38.208,41,38.208C47,38.208,53,5,59,5C65,5,71,28.256,77,28.256C83,28.256,89,26.65,95,25.044",
+      },
+    ]);
+  });
+
+  test("Renders a path in a vertical AreaChart", () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data} layout="vertical">
+        <XAxis type="number" />
+        <YAxis dataKey="name" type="category" />
+        <Area
+          type="monotone"
+          dataKey="uv"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-area-area")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-area-curve")).toHaveLength(1);
+
+    expectAreaCurve(container, [
+      {
+        d: "M95,5C91.25,5.667,87.5,6.333,87.5,7C87.5,7.667,87.5,8.333,87.5,9C87.5,9.667,80,10.333,80,11C80,11.667,85.85,12.333,85.85,13C85.85,13.667,82.513,14.333,79.175,15",
+      },
+    ]);
+  });
+
+  test("Renders dots and labels when dot is set to true", () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={data}>
+        <Area
+          isAnimationActive={false}
+          type="monotone"
+          dot
+          label
+          dataKey="uv"
+          stroke="#ff7300"
+          fill="#ff7300"
+        />
+      </AreaChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-area-dots")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-area-dot")).toHaveLength(6);
+    expect(container.querySelectorAll(".recharts-label-list")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(6);
+  });
+
+  test("Render empty when data is empty", () => {
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={[]}>
+        <Area
+          type="monotone"
+          dot
+          label
+          dataKey="uv"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    ));
+    flush();
+    expect(container.querySelectorAll(".recharts-area-area")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-area-curve")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-area-dots")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-label-list")).toHaveLength(0);
+  });
+
+  test("Renders null points as 0 if stacked and connectNulls is true", () => {
+    const dataWithNullPV = [
+      { name: "Page A", uv: 400, pv: 2400, amt: 2400 },
+      { name: "Page B", uv: 300, amt: 2400 },
+      { name: "Page C", uv: 300, pv: 1398, amt: 2400 },
+    ];
+    const { container } = render(() => (
+      <AreaChart width={100} height={50} data={dataWithNullPV}>
+        <Area
+          stackId="1"
+          connectNulls
+          type="monotone"
+          dataKey="uv"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+        <Area
+          stackId="1"
+          connectNulls
+          type="monotone"
+          dataKey="pv"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+        <Area
+          stackId="1"
+          connectNulls
+          type="monotone"
+          dataKey="amt"
+          stroke="#ff7300"
+          fill="#ff7300"
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    ));
+    flush();
+
+    expectAreaCurve(container, [
+      { d: "M5,42.333C20,42.667,35,43,50,43C65,43,80,43,95,43" },
+      { d: "M5,26.333C20,34.667,35,43,50,43C65,43,80,38.34,95,33.68" },
+      { d: "M5,10.333C20,18.667,35,27,50,27C65,27,80,22.34,95,17.68" },
+    ]);
+  });
+
+  describe("AreaChart layout context", () => {
+    it("should provide viewBox", () => {
+      const spy = vi.fn();
+      const Comp = () => {
+        const vb = useViewBox();
+        createEffect(
+          () => vb(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <AreaChart width={100} height={50} barSize={20}>
+          <Comp />
+        </AreaChart>
+      ));
+      flush();
+      expect(spy).toHaveBeenCalledWith({ x: 5, y: 5, width: 90, height: 40 });
+    });
+
+    it("should provide clipPathId", () => {
+      const spy = vi.fn();
+      const Comp = () => {
+        spy(useClipPathId());
+        return null;
+      };
+      render(() => (
+        <AreaChart width={100} height={50} barSize={20}>
+          <Comp />
+        </AreaChart>
+      ));
+      flush();
+      expect(spy).toHaveBeenCalledWith(expect.stringMatching(/recharts\d+-clip/));
+    });
+
+    it("should provide width", () => {
+      const spy = vi.fn();
+      const Comp = () => {
+        const w = useChartWidth();
+        createEffect(
+          () => w(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <AreaChart width={100} height={50} barSize={20}>
+          <Comp />
+        </AreaChart>
+      ));
+      flush();
+      expect(spy).toHaveBeenCalledWith(100);
+    });
+
+    it("should provide height", () => {
+      const spy = vi.fn();
+      const Comp = () => {
+        const h = useChartHeight();
+        createEffect(
+          () => h(),
+          (v) => spy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <AreaChart width={100} height={50} barSize={20}>
+          <Comp />
+        </AreaChart>
+      ));
+      flush();
+      expect(spy).toHaveBeenCalledWith(50);
+    });
+  });
+
+  // Solid-native rendering checks retained from the original subset port (these
+  // pin the dot rendering / default-no-dots behaviour with the margin-based geometry).
+  it("renders 1 filled area in a simple AreaChart", () => {
+    const { container } = render(() => (
+      <AreaChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <Area dataKey="uv" fill="#ff7300" isAnimationActive={false} />
+      </AreaChart>
+    ));
+    flush();
+
+    const areas = container.querySelectorAll(".recharts-area .recharts-area-area");
+    expect(areas).toHaveLength(1);
+    const area = areas[0];
+    expect(area).toHaveAttribute("class", "recharts-curve recharts-area-area");
+    expect(area).toHaveAttribute("fill", "#ff7300");
+    expect(area).toHaveAttribute(
+      "d",
+      "M20,20L92,110L164,110L236,200L308,129.8L380,209.9L380,380L308,380L236,380L164,380L92,380L20,380Z",
+    );
+  });
+
+  it("renders one dot per point when dot is enabled", () => {
+    const { container } = render(() => (
+      <AreaChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <Area dataKey="uv" fill="#ff7300" dot isAnimationActive={false} />
+      </AreaChart>
+    ));
+    flush();
+
+    const dotsLayer = container.querySelector(".recharts-area-dots");
+    expect(dotsLayer).not.toBeNull();
+    const dots = container.querySelectorAll(".recharts-area-dots .recharts-area-dot");
+    expect(dots).toHaveLength(PageData.length);
+    expect(dots[0]!.getAttribute("cx")).toBe("20");
+    expect(dots[0]!.getAttribute("cy")).toBe("20");
+  });
+
+  it("renders a custom dot via the dot render prop (function form)", () => {
+    const { container } = render(() => (
+      <AreaChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <Area
+          dataKey="uv"
+          fill="#ff7300"
+          isAnimationActive={false}
+          dot={(p) => <rect class="custom-dot" x={p.cx} y={p.cy} width={2} height={2} />}
+        />
+      </AreaChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-area-dots rect.custom-dot")).toHaveLength(
+      PageData.length,
+    );
+  });
+
+  it("renders no dots by default", () => {
+    const { container } = render(() => (
+      <AreaChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <Area dataKey="uv" fill="#ff7300" isAnimationActive={false} />
+      </AreaChart>
+    ));
+    flush();
+
+    expect(container.querySelector(".recharts-area-dot")).toBeNull();
+  });
+});