solid-recharts 0.1.0

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

@@ -0,0 +1,69 @@
+// 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 "../helper/render";
+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

@@ -0,0 +1,209 @@
+// 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 "../helper/render";
+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

@@ -0,0 +1,158 @@
+// 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 "../helper/render";
+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([]);
+  });
+});