solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/Area.stacked.render.spec.tsx

@@ -1,69 +0,0 @@
-// Proves stacked Area RENDERING: two Areas sharing a stackId draw stacked fills —
-// series 2's lower edge (its baseLine) rides on series 1's upper edge (its points).
-// Unlike Bar (scalar baseLine), a stacked Area gets a PER-POINT baseLine array, so
-// the proof is that series-2's baseLine y-values equal series-1's point y-values.
-// `isAnimationActive={false}` so the fill is at final geometry (jsdom resolves
-// "auto" to active, which would clip the path mid-reveal). `flush()` because areas
-// register via effects and points compute from the store.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { AreaChart, Area } from "../../src";
-
-const data = [
-  { name: "A", uv: 100, pv: 200 },
-  { name: "B", uv: 150, pv: 120 },
-];
-
-// d3.area emits the fill as `M x,y L … Z`: the top line forward (one point per
-// datum) followed by the baseLine back (reversed). Returns the coordinate pairs.
-function coordsOf(area: Element): Array<[number, number]> {
-  const d = area.getAttribute("d") ?? "";
-  const nums = d.match(/-?\d+(?:\.\d+)?/g)?.map(Number) ?? [];
-  const pairs: Array<[number, number]> = [];
-  for (let i = 0; i + 1 < nums.length; i += 2) {
-    pairs.push([nums[i]!, nums[i + 1]!]);
-  }
-  return pairs;
-}
-
-describe("stacked <Area /> rendering", () => {
-  it("stacks series 2 on top of series 1 (shared stackId)", () => {
-    const { container } = render(() => (
-      <AreaChart
-        width={400}
-        height={400}
-        data={data}
-        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
-      >
-        <Area dataKey="uv" stackId="a" fill="#8884d8" isAnimationActive={false} />
-        <Area dataKey="pv" stackId="a" fill="#82ca9d" isAnimationActive={false} />
-      </AreaChart>
-    ));
-    flush();
-
-    const areas = container.querySelectorAll(".recharts-area .recharts-area-area");
-    expect(areas).toHaveLength(2);
-
-    const s1 = coordsOf(areas[0]!);
-    const s2 = coordsOf(areas[1]!);
-    // Two data points → 4 coords each (top forward x2, baseLine back x2).
-    expect(s1).toHaveLength(2 * data.length);
-    expect(s2).toHaveLength(2 * data.length);
-
-    const n = data.length;
-    // Forward halves are the upper edges (series points); the backward halves are
-    // the baseLines, in reverse order.
-    const s1Top = s1.slice(0, n);
-    const s2Base = s2.slice(n).reverse();
-
-    // Series-2's baseLine meets series-1's top, point for point.
-    for (let i = 0; i < n; i++) {
-      expect(s2Base[i]![0]).toBeCloseTo(s1Top[i]![0], 4); // same x
-      expect(s2Base[i]![1]).toBeCloseTo(s1Top[i]![1], 4); // same y (stacked)
-    }
-
-    // Sanity: series 2 sits ABOVE series 1 (smaller y = higher on screen).
-    expect(s2[0]![1]).toBeLessThan(s1Top[0]![1]);
-  });
-});

package/test/cartesian/Area.typed.spec.tsx

@@ -1,209 +0,0 @@
-// Ported from recharts 3.8.1 test/cartesian/Area.typed.spec.tsx (commit 7a23854).
-//
-// A .typed spec: correctness is enforced by `tsc --noEmit` (the package tsconfig
-// includes test/). Cases that "should allow X" merely compile + render; cases
-// that "should NOT allow X" sit a `// @ts-expect-error` on the line Solid rejects.
-//
-// SOLID PROVENANCE / DEVIATIONS from the React reference:
-//   - Solid's `<Area>` is NOT generic: it is `Area = (props: AreaProps)` with
-//     `dataKey?: DataKey<unknown>`. So:
-//       * A function dataKey's parameter is `unknown`, and accessing any property
-//         on it (`entry.name`, `entry.value`, `entry.foo`) is a genuine tsc error
-//         in Solid — the OPPOSITE of the reference, where the loose `any`-ish form
-//         lets every function dataKey compile. These are ported with @ts-expect-error.
-//       * Putting `data` on the Area does NOT connect to the dataKey type (Solid
-//         keeps `DataKey<unknown>`), so a mismatched STRING dataKey ("foo") does
-//         not error — the reference's @ts-expect-error there would be unused, so
-//         those cases are ported as "allow".
-//       * The whole `with explicit Area type parameters` block (`<Area<...>>`) is a
-//         React-ism: Solid's Area takes 0 type arguments, so every case there fails
-//         to compile. Left unported (see `blocked`).
-//   - Event handlers in Solid are single-arg DOM handlers (`(e) => ...`), not the
-//     recharts props-first `(data, e) => ...` 2-arg form. Ported to the single-arg
-//     shape; `getRelativeCoordinate(e)` still accepts the (SVG) event.
-import { describe, it } from "vitest";
-import { Area, AreaChart, getRelativeCoordinate } from "../../src";
-import { render } from "@solidjs/testing-library";
-import { expectAreaCurve, type ExpectedArea } from "../helper/expectAreaCurve";
-
-type ExampleDataPoint = {
-  x: number;
-  y: number;
-  value: number;
-  name: string;
-};
-
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { x: 10, y: 50, value: 100, name: "a" },
-  { x: 50, y: 50, value: 100, name: "b" },
-  { x: 90, y: 50, value: 100, name: "c" },
-  { x: 130, y: 50, value: 100, name: "d" },
-  { x: 170, y: 50, value: 100, name: "e" },
-];
-const expectedAreas: ReadonlyArray<ExpectedArea> = [{ d: "M5,5L102.5,5L200,5L297.5,5L395,5" }];
-
-describe("Area with strong typing", () => {
-  describe("with all implicit types", () => {
-    /*
-     * All test cases in this block are previous behavior:
-     * - no explicit type parameters
-     * - minimal type safety
-     * - it is important that this behavior continues to work for backward compatibility
-     */
-    it("should render Area with correct data and correct dataKey", () => {
-      const { container } = render(() => (
-        <AreaChart data={data} width={400} height={400}>
-          <Area dataKey="value" isAnimationActive={false} />
-        </AreaChart>
-      ));
-      expectAreaCurve(container, expectedAreas);
-    });
-
-    it("should allow using incorrect type dataKey", () => {
-      /*
-       * TypeScript can't connect the dataKey type to the AreaChart data type,
-       * so this is not an error at compile time.
-       */
-      const { container } = render(() => (
-        <AreaChart data={data} width={400} height={400}>
-          <Area dataKey="name" isAnimationActive={false} />
-        </AreaChart>
-      ));
-      // the chart does not render - which is what we would like TypeScript to warn about (but it can't)
-      expectAreaCurve(container, []);
-    });
-
-    it("should allow using non-existent dataKey", () => {
-      const { container } = render(() => (
-        <AreaChart data={data} width={400} height={400}>
-          <Area dataKey="foo" isAnimationActive={false} />
-        </AreaChart>
-      ));
-      // the chart does not render - which is what we would like TypeScript to warn about (but it can't)
-      expectAreaCurve(container, []);
-    });
-
-    it("should error when using dataKey function that returns wrong value", () => {
-      /*
-       * SOLID DEVIATION: the function dataKey parameter is `unknown`, so accessing
-       * `entry.name` is a genuine tsc error here (the reference allows it).
-       */
-      const { container } = render(() => (
-        <AreaChart data={data} width={400} height={400}>
-          {/* @ts-expect-error Solid types the dataKey function arg as `unknown` */}
-          <Area dataKey={(entry) => entry.name} isAnimationActive={false} />
-        </AreaChart>
-      ));
-      // the chart does not render - which is what TypeScript warns about
-      expectAreaCurve(container, []);
-    });
-
-    it("should error when using dataKey function that accesses non-existent property", () => {
-      /*
-       * SOLID DEVIATION: the function dataKey parameter is `unknown`, so accessing
-       * `entry.foo` is a genuine tsc error here (the reference allows it).
-       */
-      const { container } = render(() => (
-        <AreaChart data={data} width={400} height={400}>
-          {/* @ts-expect-error Solid types the dataKey function arg as `unknown` */}
-          <Area dataKey={(entry) => entry.foo} isAnimationActive={false} />
-        </AreaChart>
-      ));
-      // the chart does not render - which is what TypeScript warns about
-      expectAreaCurve(container, []);
-    });
-
-    it("should allow when Area data is matching Area dataKey as string", () => {
-      const { container } = render(() => (
-        <AreaChart width={400} height={400}>
-          <Area data={data} dataKey="value" isAnimationActive={false} />
-        </AreaChart>
-      ));
-      // works fine - no compile errors, and the chart renders correctly
-      expectAreaCurve(container, expectedAreas);
-    });
-
-    it("should error when Area data is matching Area dataKey as function", () => {
-      /*
-       * SOLID DEVIATION: putting `data` on the Area does NOT narrow the dataKey
-       * function arg (Area keeps `DataKey<unknown>`), so `entry.value` is a tsc
-       * error here — the reference allows this.
-       */
-      const { container } = render(() => (
-        <AreaChart width={400} height={400}>
-          {/* @ts-expect-error Solid types the dataKey function arg as `unknown` */}
-          <Area data={data} dataKey={(entry) => entry.value} isAnimationActive={false} />
-        </AreaChart>
-      ));
-      // The directive above suppresses the type error, so at runtime the function
-      // dataKey runs and returns `entry.value` — the chart renders.
-      expectAreaCurve(container, expectedAreas);
-    });
-
-    it("should allow when Area data is not matching Area dataKey as string", () => {
-      /*
-       * SOLID DEVIATION: a mismatched STRING dataKey does not error (Area is not
-       * generic over its data), so the reference's @ts-expect-error would be
-       * unused — ported as "allow".
-       */
-      const { container } = render(() => (
-        <AreaChart width={400} height={400}>
-          <Area data={data} dataKey="foo" isAnimationActive={false} />
-        </AreaChart>
-      ));
-      // the chart does not render
-      expectAreaCurve(container, []);
-    });
-  });
-});
-
-describe("event handlers", () => {
-  it("should allow calling getRelativeCoordinate with the type provided by the Solid event handler", () => {
-    /*
-     * SOLID DEVIATION: handlers are single-arg DOM handlers `(e) => ...`, not the
-     * recharts props-first `(data, e) => ...` 2-arg form. The (SVG) event arg is
-     * accepted by getRelativeCoordinate.
-     */
-    render(() => (
-      <AreaChart width={100} height={100}>
-        <Area
-          dataKey="foo"
-          isAnimationActive={false}
-          onClick={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onMouseDown={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onMouseUp={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onMouseMove={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onMouseLeave={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onMouseOver={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onMouseOut={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onMouseEnter={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onTouchStart={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onTouchMove={(e) => {
-            getRelativeCoordinate(e);
-          }}
-          onTouchEnd={(e) => {
-            getRelativeCoordinate(e);
-          }}
-        />
-      </AreaChart>
-    ));
-  });
-});

package/test/cartesian/Axis.integration.spec.tsx

@@ -1,158 +0,0 @@
-// Axis-integration specs: exercise the XAxis/YAxis ↔ graphical-item spine
-// end-to-end — domain computed from data, nice-tick generation, explicit ticks,
-// tickCount/allowDecimals, allowDataOverflow, reversed, multiple axes, hide.
-//
-// These assert tick VALUES / counts / ordering (the offset-independent integration
-// facts). Exact pixel coordinates are intentionally NOT asserted: the port's plot
-// offset is still margin-only (axis-size subtraction is a separate vertical), so
-// coords would diverge from recharts for reasons unrelated to axis logic.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { LineChart, Line, XAxis, YAxis } from "../../src";
-
-function tickTexts(container: Element, axis: ".recharts-xAxis" | ".recharts-yAxis"): string[] {
-  return [...container.querySelectorAll(`${axis} .recharts-cartesian-axis-tick-value`)].map(
-    (n) => n.textContent ?? "",
-  );
-}
-
-function tickYs(container: Element): number[] {
-  return [...container.querySelectorAll(".recharts-yAxis .recharts-cartesian-axis-tick-value")].map(
-    (n) => Number(n.getAttribute("y")),
-  );
-}
-
-const numericData = [
-  { name: "A", uv: 0 },
-  { name: "B", uv: 100 },
-  { name: "C", uv: 200 },
-  { name: "D", uv: 300 },
-  { name: "E", uv: 400 },
-];
-
-const margin = { top: 20, right: 20, bottom: 20, left: 20 };
-
-describe("axis integration", () => {
-  it("computes a numeric Y domain from data and generates nice ticks", () => {
-    const { container } = render(() => (
-      <LineChart width={400} height={400} data={numericData} margin={margin}>
-        <YAxis />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-    flush();
-    expect(tickTexts(container, ".recharts-yAxis")).toEqual(["0", "100", "200", "300", "400"]);
-  });
-
-  it("renders a category tick per row on a category axis", () => {
-    const { container } = render(() => (
-      <LineChart width={400} height={400} data={numericData} margin={margin}>
-        <XAxis dataKey="name" />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-    flush();
-    expect(tickTexts(container, ".recharts-xAxis")).toEqual(["A", "B", "C", "D", "E"]);
-  });
-
-  it("uses explicit ticks verbatim, bypassing generation", () => {
-    const { container } = render(() => (
-      <LineChart width={400} height={400} data={numericData} margin={margin}>
-        <YAxis type="number" ticks={[0, 400, 800, 1200]} />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-    flush();
-    expect(tickTexts(container, ".recharts-yAxis")).toEqual(["0", "400", "800", "1200"]);
-  });
-
-  it("honors an explicit domain with allowDataOverflow", () => {
-    const { container } = render(() => (
-      <LineChart width={400} height={400} data={numericData} margin={margin}>
-        <YAxis domain={[0, 1000]} allowDataOverflow />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-    flush();
-    expect(tickTexts(container, ".recharts-yAxis")).toEqual(["0", "250", "500", "750", "1000"]);
-  });
-
-  it("produces integer-only ticks with allowDecimals=false + tickCount", () => {
-    const decimalData = [
-      { name: "A", pv: 24 },
-      { name: "B", pv: 45.67 },
-      { name: "C", pv: 13.98 },
-      { name: "D", pv: 98 },
-    ];
-    const { container } = render(() => (
-      <LineChart width={500} height={300} data={decimalData} margin={margin}>
-        <YAxis domain={["dataMin", "dataMax"]} tickCount={3} allowDecimals={false} />
-        <Line dataKey="pv" />
-      </LineChart>
-    ));
-    flush();
-    // Integer nice-ticks over [13.98, 98] — byte-identical to recharts' output.
-    expect(tickTexts(container, ".recharts-yAxis")).toEqual(["14", "59", "98"]);
-  });
-
-  it("inverts the tick order when reversed (same values, flipped positions)", () => {
-    const normal = render(() => (
-      <LineChart width={400} height={400} data={numericData} margin={margin}>
-        <YAxis />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-    flush();
-    const reversed = render(() => (
-      <LineChart width={400} height={400} data={numericData} margin={margin}>
-        <YAxis reversed />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-    flush();
-
-    // Same tick values either way.
-    expect(tickTexts(reversed.container, ".recharts-yAxis")).toEqual(
-      tickTexts(normal.container, ".recharts-yAxis"),
-    );
-    // Normal Y goes high→low pixel as value rises (0 at bottom); reversed flips it.
-    const normalYs = tickYs(normal.container);
-    const reversedYs = tickYs(reversed.container);
-    expect(normalYs[0]).toBeGreaterThan(normalYs[normalYs.length - 1]!);
-    expect(reversedYs[0]).toBeLessThan(reversedYs[reversedYs.length - 1]!);
-  });
-
-  it("supports multiple Y axes addressed by yAxisId", () => {
-    const multiData = [
-      { name: "A", uv: 100, pv: 5000 },
-      { name: "B", uv: 200, pv: 8000 },
-    ];
-    const { container } = render(() => (
-      <LineChart width={500} height={400} data={multiData} margin={margin}>
-        <YAxis yAxisId="left" />
-        <YAxis yAxisId="right" orientation="right" />
-        <Line dataKey="uv" yAxisId="left" />
-        <Line dataKey="pv" yAxisId="right" />
-      </LineChart>
-    ));
-    flush();
-    // Two distinct axis layers, each with its own (non-empty) tick set.
-    expect(container.querySelectorAll(".recharts-yAxis").length).toBe(2);
-    const allYTicks = container.querySelectorAll(
-      ".recharts-yAxis .recharts-cartesian-axis-tick-value",
-    );
-    expect(allYTicks.length).toBeGreaterThan(5);
-  });
-
-  it("renders no ticks for a hidden axis", () => {
-    const { container } = render(() => (
-      <LineChart width={400} height={400} data={numericData} margin={margin}>
-        <YAxis hide />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-    flush();
-    expect(tickTexts(container, ".recharts-yAxis")).toEqual([]);
-  });
-});