solid-recharts 0.2.0 → 1.0.0

package/test/chart/AccessibilityScans.spec.tsx

@@ -1,286 +0,0 @@
-// Ported from recharts 3.8.1 test/chart/AccessibilityScans.spec.tsx (commit
-// 7a23854).
-//
-// Harness deviations: React `render` -> Solid `render(() => <…/>)` + `flush()`;
-// @testing-library/react -> @solidjs/testing-library.
-//
-// 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 "@solidjs/testing-library";
-
-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

@@ -1,409 +0,0 @@
-// 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 "@solidjs/testing-library";
-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();
-  });
-});