solid-recharts 0.1.0

package/test/shape/Symbols.typed.spec.tsx

@@ -0,0 +1,24 @@
+import { describe, it } from "vitest";
+import { Symbols, getRelativeCoordinate } from "../../src";
+
+// Ported from recharts 3.8.1 test/shape/Symbols.typed.spec.tsx.
+
+describe("Symbols types", () => {
+  it("should allow calling getRelativeCoordinate with the type provided by Recharts event handler", () => {
+    return (
+      <Symbols
+        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)}
+      />
+    );
+  });
+});

package/test/shape/Trapezoid.spec.tsx

@@ -0,0 +1,50 @@
+// Ported from recharts 3.8.1 test/shape/Trapezoid.spec.tsx.
+// Harness changes only: render from the local Solid shim (thunk), no React
+// import. The 'with animation' case snapshot matches the reference byte-for-byte
+// (the update-animation path renders the t=0 frame with the "0px 1px" dash).
+import { render } from "../helper/render";
+import { Surface, Trapezoid } from "../../src";
+
+describe("<Trapezoid />", () => {
+  test("Render 1 Trapezoid in simple Trapezoid", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <Trapezoid fill="#f00" x={300} y={100} upperWidth={100} lowerWidth={0} height={50} />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-trapezoid")).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test("Render 1 Trapezoid with animation in simple Trapezoid", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <Trapezoid
+          fill="#f00"
+          x={300}
+          y={100}
+          upperWidth={100}
+          lowerWidth={0}
+          height={50}
+          isUpdateAnimationActive
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-trapezoid")).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test("Don't render any Trapezoid when props are invalid", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <Trapezoid fill="#f00" x={300} y={100} upperWidth={0} lowerWidth={0} height={50} />
+        <Trapezoid fill="#f00" x={300} y={100} upperWidth={100} lowerWidth={0} height={0} />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-trapezoid")).toHaveLength(0);
+    expect(container).toMatchSnapshot();
+  });
+});

package/test/shape/Trapezoid.typed.spec.tsx

@@ -0,0 +1,24 @@
+import { describe, it } from "vitest";
+import { Trapezoid, getRelativeCoordinate } from "../../src";
+
+// Ported from recharts 3.8.1 test/shape/Trapezoid.typed.spec.tsx.
+
+describe("Trapezoid types", () => {
+  it("should allow calling getRelativeCoordinate with the type provided by Recharts event handler", () => {
+    return (
+      <Trapezoid
+        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)}
+      />
+    );
+  });
+});

package/test/shape/__snapshots__/Cross.spec.tsx.snap

@@ -0,0 +1,62 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Cross /> > Don't render any path when props is invalid 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    
+  </svg>
+</div>
+`;
+
+exports[`<Cross /> > Render 1 path in Cross 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-cross"
+      d="M150,50v200M50,180h200"
+      fill="none"
+      height="200"
+      stroke="#000"
+      width="200"
+      x="150"
+      y="180"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Cross /> > Renders path with default values when no props are provided 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-cross"
+      d="M0,0v0M0,0h0"
+      height="0"
+      width="0"
+      x="0"
+      y="0"
+    />
+  </svg>
+</div>
+`;

package/test/shape/__snapshots__/Curve.spec.tsx.snap

@@ -0,0 +1,460 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Curve /> > all points defined > Not render when points is empty 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > all points defined > renders 1 area 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L40,10L55,40L70,10L70,100L55,400L40,100L25,400L10,100Z"
+      fill="none"
+      stroke="#000"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > all points defined > renders 1 curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L40,10L55,40L70,10"
+      fill="none"
+      stroke="#000"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > all points defined > renders 1 horizontal layout area 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L40,10L55,40L70,10L70,0L55,0L40,0L25,0L10,0Z"
+      fill="none"
+      stroke="#000"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > all points defined > renders 1 vertical layout area 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L40,10L55,40L70,10L70,0L55,0L40,0L25,0L10,0Z"
+      fill="none"
+      stroke="#000"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > all points defined > renders a path when path prop is passed 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10 L20,20 C30,30 40,40 50,50"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > connectNulls > renders a broken line when connectNulls is false and points have nulls 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40M55,40L70,10"
+      fill="none"
+      stroke="#000"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > connectNulls > renders a single connected line when connectNulls is true and points have nulls 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L55,40L70,10"
+      fill="none"
+      stroke="#000"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > connectNulls > should not throw when connectNulls is true and baseLine has nulls 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M1,1L1,10Z"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Curve /> > connectNulls > should render a broken area when connectNulls is false and baseLine has nulls 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M1,1L1,10ZM3,3L3,30Z"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a basis curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L12.5,15C15,20,20,30,25,30C30,30,35,20,40,20C45,20,50,30,55,30C60,30,65,20,67.5,15L70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a basisClosed curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M25,30C30,30,35,20,40,20C45,20,50,30,55,30C60,30,65,20,57.5,15C50,10,30,10,22.5,15C15,20,20,30,25,30"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a basisOpen curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M25,30C30,30,35,20,40,20C45,20,50,30,55,30"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a bumpX curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10C17.5,10,17.5,40,25,40C32.5,40,32.5,10,40,10C47.5,10,47.5,40,55,40C62.5,40,62.5,10,70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a bumpY curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10C10,25,25,25,25,40C25,25,40,25,40,10C40,25,55,25,55,40C55,25,70,25,70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a curve when type is a custom function 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L40,10L55,40L70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a linear curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L40,10L55,40L70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a linear curve as fallback for invalid type 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L40,10L55,40L70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a linearClosed curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,40L40,10L55,40L70,10Z"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a monotoneX curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10C15,25,20,40,25,40C30,40,35,10,40,10C45,10,50,40,55,40C60,40,65,25,70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a monotoneY curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10C17.5,20,25,30,25,40C25,30,40,20,40,10C40,20,55,30,55,40C55,30,62.5,20,70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a natural curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10C15,27.143,20,44.286,25,40C30,35.714,35,10,40,10C45,10,50,35.714,55,40C60,44.286,65,27.143,70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a step curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L17.5,10L17.5,40L32.5,40L32.5,10L47.5,10L47.5,40L62.5,40L62.5,10L70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a stepAfter curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L25,10L25,40L40,40L40,10L55,10L55,40L70,40L70,10"
+    />
+  </svg>
+</div>
+`;
+
+exports[`type prop > renders a stepBefore curve 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-curve"
+      d="M10,10L10,40L25,40L25,10L40,10L40,40L55,40L55,10L70,10"
+    />
+  </svg>
+</div>
+`;

package/test/shape/__snapshots__/Polygon.spec.tsx.snap

@@ -0,0 +1,58 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Polygon /> > Render 1 path in simple Polygon 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-polygon"
+      d="M100,300L300,300L200,50L100,300Z"
+      fill="#ff7300"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Polygon /> > Render 1 path in simple Polygon when connectNulls is true 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-polygon"
+      d="M100,300L300,300L200,50L400,300L600,300L500,50L100,300Z"
+      fill="#ff7300"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<Polygon /> > Render multi paths in simple Polygon when connectNulls is false 1`] = `
+<div>
+  <svg
+    class="recharts-surface"
+    height="400"
+    viewBox="0 0 400 400"
+    width="400"
+  >
+    <title />
+    <desc />
+    <path
+      class="recharts-polygon"
+      d="M100,300L300,300L200,50M400,300L600,300L500,50L100,300"
+      fill="none"
+    />
+  </svg>
+</div>
+`;