solid-recharts 0.2.1 → 1.0.0

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

@@ -1,74 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Line, LineChart, ReferenceLine, getRelativeCoordinate } from "../../../src";
-import { render } from "@solidjs/testing-library";
-
-// Ported from recharts 3.8.1 test/cartesian/ReferenceLine/ReferenceLine.typed.spec.tsx.
-
-type ExampleDataPoint = { value: number; name: string };
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { value: 100, name: "a" },
-  { value: 80, name: "b" },
-];
-
-describe("ReferenceLine with strong typing", () => {
-  describe("with all implicit types", () => {
-    it("should render ReferenceLine with implicit coordinate types", () => {
-      const { container } = render(() => (
-        <LineChart data={data} width={400} height={400}>
-          <Line dataKey="value" />
-          <ReferenceLine x={0} y={100} />
-        </LineChart>
-      ));
-      expect(container.querySelectorAll(".recharts-reference-line-line")).toHaveLength(1);
-    });
-  });
-
-  describe("with explicit ReferenceLine type parameters", () => {
-    it("should allow matching explicit coordinate types", () => {
-      render(() => (
-        <LineChart data={data} width={400} height={400}>
-          <Line dataKey="value" />
-          <ReferenceLine<number, number> x={0} y={100} />
-        </LineChart>
-      ));
-    });
-
-    it("should show errors when explicit coordinate types do not match", () => {
-      render(() => (
-        <LineChart data={data} width={400} height={400}>
-          <Line dataKey="value" />
-          {/* @ts-expect-error TypeScript is correct here - x should be number */}
-          <ReferenceLine<number, number> x="a" y={100} />
-          {/* @ts-expect-error TypeScript is correct here - y should be number */}
-          <ReferenceLine<number, number> x={0} y="a" />
-        </LineChart>
-      ));
-    });
-  });
-});
-
-describe("ReferenceLine event handlers", () => {
-  // Handlers spread onto the rendered <line> are Solid single-arg DOM handlers
-  // (repo convention; see ReferenceLine.spec "events"). The event's currentTarget
-  // is the SVGLineElement, satisfying SVGMousePointer/SVGTouchPointer, so it
-  // feeds getRelativeCoordinate directly — same call shape as the reference.
-  it("should allow calling getRelativeCoordinate with the type provided by Recharts event handler", () => {
-    render(() => (
-      <LineChart width={100} height={100}>
-        <ReferenceLine
-          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)}
-        />
-      </LineChart>
-    ));
-  });
-});

package/test/cartesian/ReferenceLine/getEndPoints.spec.ts

@@ -1,399 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { scaleLinear } from "d3-scale";
-import { getEndPoints, type ReferenceLineSegment } from "../../../src/cartesian/ReferenceLine";
-import type { CartesianViewBoxRequired } from "../../../src/util/types";
-import {
-  type BandPosition,
-  rechartsScaleFactory,
-  type RechartsScale,
-} from "../../../src/util/scale/RechartsScale";
-
-/*
- * Ported from recharts 3.8.1 test/cartesian/ReferenceLine/getEndPoints.spec.tsx.
- * Pure geometry tests; no Solid harness adaptation needed.
- */
-
-describe("getEndPoints", () => {
-  const throwingScale: RechartsScale = {
-    domain() {
-      throw new Error("Should not be called");
-    },
-    range() {
-      throw new Error("Should not be called");
-    },
-    rangeMax() {
-      throw new Error("Should not be called");
-    },
-    rangeMin() {
-      throw new Error("Should not be called");
-    },
-    map() {
-      throw new Error("Should not be called");
-    },
-    isInRange() {
-      throw new Error("Should not be called");
-    },
-  };
-
-  it("should return null if X, Y are not fixed and isSegment is false too", () => {
-    const viewBox: CartesianViewBoxRequired = {
-      y: 10,
-      height: 5,
-      x: 100,
-      width: 100,
-    };
-    const result = getEndPoints(
-      throwingScale,
-      throwingScale,
-      viewBox,
-      undefined,
-      undefined,
-      undefined,
-      {
-        ifOverflow: "discard",
-      },
-    );
-    expect(result).toEqual(null);
-  });
-
-  describe("fixed Y location when out of range", () => {
-    const position = "start";
-    const lineLocationY = 9;
-    const yScale = rechartsScaleFactory<number>(scaleLinear().domain([0, 5]).range([0, 50]));
-
-    it("should return null when set to discard overflow", () => {
-      const viewBox: CartesianViewBoxRequired = {
-        x: 10,
-        width: 5,
-        y: 0,
-        height: 10,
-      };
-      const result = getEndPoints(throwingScale, yScale, viewBox, position, "bottom", "left", {
-        y: lineLocationY,
-        ifOverflow: "discard",
-      });
-      expect(result).toEqual(null);
-    });
-
-    it("should return gibberish when viewBox is empty", () => {
-      // @ts-expect-error typescript is correct here, the function demands a CartesianViewBoxRequired.
-      const viewBox: CartesianViewBoxRequired = {};
-      const result = getEndPoints(throwingScale, yScale, viewBox, position, undefined, "left", {
-        y: lineLocationY,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: undefined, y: 90 },
-        { x: NaN, y: 90 },
-      ];
-      expect(result).toEqual(expected);
-    });
-
-    it('should return coordinates when set to display overflow when orientation is "right"', () => {
-      const viewBox: CartesianViewBoxRequired = {
-        x: 10,
-        width: 5,
-        y: 0,
-        height: 0,
-      };
-      const result = getEndPoints(throwingScale, yScale, viewBox, position, undefined, "right", {
-        y: lineLocationY,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: 15, y: 90 },
-        { x: 10, y: 90 },
-      ];
-      expect(result).toEqual(expected);
-    });
-
-    it('should reverse first and second point if yAxis orientation is "left"', () => {
-      const viewBox: CartesianViewBoxRequired = {
-        x: 10,
-        width: 5,
-        y: 0,
-        height: 0,
-      };
-      const result = getEndPoints(throwingScale, yScale, viewBox, position, undefined, "left", {
-        y: lineLocationY,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: 10, y: 90 },
-        { x: 15, y: 90 },
-      ];
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe("fixed Y location when in range", () => {
-    const position = "start";
-    const lineLocationY = 9;
-    const yScale = rechartsScaleFactory<number>(scaleLinear().domain([0, 15]).range([0, 150]));
-
-    it("should return coordinates when set to discard overflow", () => {
-      const viewBox: CartesianViewBoxRequired = {
-        x: 10,
-        width: 5,
-        y: 0,
-        height: 0,
-      };
-      const result = getEndPoints(throwingScale, yScale, viewBox, position, undefined, "right", {
-        y: lineLocationY,
-        ifOverflow: "discard",
-      });
-      const expected = [
-        { x: 15, y: 90 },
-        { x: 10, y: 90 },
-      ];
-      expect(result).toEqual(expected);
-    });
-
-    it('should return coordinates when set to display overflow when orientation is "right"', () => {
-      const viewBox: CartesianViewBoxRequired = {
-        x: 10,
-        width: 5,
-        y: 0,
-        height: 0,
-      };
-      const result = getEndPoints(throwingScale, yScale, viewBox, position, undefined, "right", {
-        y: lineLocationY,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: 15, y: 90 },
-        { x: 10, y: 90 },
-      ];
-      expect(result).toEqual(expected);
-    });
-
-    it('should reverse first and second point if yAxis orientation is "left"', () => {
-      const viewBox: CartesianViewBoxRequired = {
-        x: 10,
-        width: 5,
-        y: 0,
-        height: 0,
-      };
-      const result = getEndPoints(throwingScale, yScale, viewBox, position, undefined, "left", {
-        y: lineLocationY,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: 10, y: 90 },
-        { x: 15, y: 90 },
-      ];
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe("fixed X location when out of range", () => {
-    const position = "start";
-    const lineLocationX = 9;
-    const xScale = rechartsScaleFactory<number>(scaleLinear().domain([0, 5]).range([0, 50]));
-
-    it("should return null when set to discard overflow", () => {
-      const viewBox: CartesianViewBoxRequired = {
-        y: 0,
-        height: 0,
-        x: 0,
-        width: 0,
-      };
-      const result = getEndPoints(xScale, throwingScale, viewBox, position, "bottom", undefined, {
-        x: lineLocationX,
-        ifOverflow: "discard",
-      });
-      expect(result).toEqual(null);
-    });
-
-    it('should return coordinates when set to display overflow when orientation is "top"', () => {
-      const viewBox: CartesianViewBoxRequired = {
-        y: 10,
-        height: 5,
-        x: 0,
-        width: 0,
-      };
-      const result = getEndPoints(xScale, throwingScale, viewBox, position, "top", undefined, {
-        x: lineLocationX,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: 90, y: 10 },
-        { x: 90, y: 15 },
-      ];
-      expect(result).toEqual(expected);
-    });
-
-    it('should reverse first and second point if xAxis orientation is "top"', () => {
-      const viewBox: CartesianViewBoxRequired = {
-        y: 10,
-        height: 5,
-        x: 0,
-        width: 0,
-      };
-      const result = getEndPoints(xScale, throwingScale, viewBox, position, "top", undefined, {
-        x: lineLocationX,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: 90, y: 10 },
-        { x: 90, y: 15 },
-      ];
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe("fixed X location when in range", () => {
-    const position = "start";
-    const lineLocationX = 9;
-    const xScale = rechartsScaleFactory<number>(scaleLinear().domain([0, 15]).range([0, 150]));
-
-    it("should return coordinates when set to discard overflow", () => {
-      const viewBox: CartesianViewBoxRequired = {
-        y: 10,
-        height: 5,
-        x: 0,
-        width: 0,
-      };
-      const result = getEndPoints(xScale, throwingScale, viewBox, position, "bottom", undefined, {
-        x: lineLocationX,
-        ifOverflow: "discard",
-      });
-      const expected = [
-        { x: 90, y: 15 },
-        { x: 90, y: 10 },
-      ];
-      expect(result).toEqual(expected);
-    });
-
-    it('should return coordinates when set to display overflow when orientation is "top"', () => {
-      const viewBox: CartesianViewBoxRequired = {
-        y: 10,
-        height: 5,
-        x: 0,
-        width: 0,
-      };
-      const result = getEndPoints(xScale, throwingScale, viewBox, position, "top", undefined, {
-        x: lineLocationX,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: 90, y: 10 },
-        { x: 90, y: 15 },
-      ];
-      expect(result).toEqual(expected);
-    });
-
-    it('should reverse first and second point if xAxis orientation is "top"', () => {
-      const viewBox: CartesianViewBoxRequired = {
-        y: 10,
-        height: 5,
-        x: 0,
-        width: 0,
-      };
-      const result = getEndPoints(xScale, throwingScale, viewBox, position, "top", undefined, {
-        x: lineLocationX,
-        ifOverflow: "visible",
-      });
-
-      const expected = [
-        { x: 90, y: 10 },
-        { x: 90, y: 15 },
-      ];
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe("segment", () => {
-    const viewBox: CartesianViewBoxRequired = {
-      y: 10,
-      height: 5,
-      x: 100,
-      width: 100,
-    };
-
-    it("should return null if segment array is empty", () => {
-      const result = getEndPoints(
-        throwingScale,
-        throwingScale,
-        viewBox,
-        undefined,
-        undefined,
-        undefined,
-        {
-          // @ts-expect-error TypeScript is correct here - segment should have two items always
-          segment: [],
-          ifOverflow: "visible",
-        },
-      );
-      expect(result).toEqual(null);
-    });
-
-    it("should pass every segment into scales function", () => {
-      const segment: ReferenceLineSegment = [{ x: 1 }, { x: 2 }];
-      const position: BandPosition = "middle";
-      const scaleX = rechartsScaleFactory<number>(scaleLinear().domain([0, 10]).range([0, 100]));
-      const scaleY = rechartsScaleFactory<number>(scaleLinear().domain([0, 20]).range([0, 100]));
-      const result = getEndPoints(scaleX, scaleY, viewBox, position, undefined, undefined, {
-        segment,
-        ifOverflow: "visible",
-      });
-      expect(result).toEqual([
-        { x: 10, y: 0 },
-        { x: 20, y: 100 },
-      ]);
-    });
-
-    it("should return null if outside of range and overflow = discard", () => {
-      const segment: ReferenceLineSegment = [{ x: 11 }, { x: 21 }];
-      const scaleX = rechartsScaleFactory<number>(scaleLinear().domain([0, 10]).range([0, 100]));
-      const scaleY = rechartsScaleFactory<number>(scaleLinear().domain([0, 20]).range([0, 100]));
-      const result = getEndPoints(scaleX, scaleY, viewBox, undefined, undefined, undefined, {
-        segment,
-        ifOverflow: "discard",
-      });
-      expect(result).toEqual(null);
-    });
-
-    it.each(["hidden", "visible", "extendDomain"] as const)(
-      "should return point if outside of range and overflow = %s",
-      (ifOverflow) => {
-        const segment: ReferenceLineSegment = [{ x: 11 }, { x: 21 }];
-        const scaleX = rechartsScaleFactory<number>(scaleLinear().domain([0, 10]).range([0, 100]));
-        const scaleY = rechartsScaleFactory<number>(scaleLinear().domain([0, 20]).range([0, 100]));
-        const result = getEndPoints(scaleX, scaleY, viewBox, undefined, undefined, undefined, {
-          segment,
-          ifOverflow,
-        });
-        expect(result).toEqual([
-          { x: 110.00000000000001, y: 0 },
-          { x: 210, y: 100 },
-        ]);
-      },
-    );
-
-    it.each(["hidden", "visible", "extendDomain", "discard"] as const)(
-      "should return whatever scales returned if in range and ifOverflow = %s",
-      (ifOverflow) => {
-        const segment: ReferenceLineSegment = [{ x: 1 }, { x: 2 }];
-        const scaleX = rechartsScaleFactory<number>(scaleLinear().domain([0, 10]).range([0, 100]));
-        const scaleY = rechartsScaleFactory<number>(scaleLinear().domain([0, 20]).range([0, 100]));
-        const result = getEndPoints(scaleX, scaleY, viewBox, undefined, undefined, undefined, {
-          segment,
-          ifOverflow,
-        });
-        expect(result).toEqual([
-          { x: 10, y: 0 },
-          { x: 20, y: 100 },
-        ]);
-      },
-    );
-  });
-});

package/test/cartesian/ReferenceLine.render.spec.tsx

@@ -1,134 +0,0 @@
-// Spec for the ReferenceLine vertical: a data-coordinate line mapped to pixels
-// through the cartesian scale spine (selectAxisScale → RechartsScale). Geometry
-// is exact — the scale spine is byte-identical to recharts, so a horizontal line
-// at y=value spans the full plot width at the y the Y scale maps `value` to, and
-// a vertical line at x=category spans the full plot height at that band's x.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { LineChart, Line, XAxis, YAxis, ReferenceLine } from "../../src";
-
-const data = [
-  { name: "A", uv: 10 },
-  { name: "B", uv: 30 },
-  { name: "C", uv: 50 },
-  { name: "D", uv: 70 },
-];
-
-function lineCoords(container: Element) {
-  return Array.from(container.querySelectorAll(".recharts-reference-line-line")).map((l) => ({
-    x1: l.getAttribute("x1"),
-    y1: l.getAttribute("y1"),
-    x2: l.getAttribute("x2"),
-    y2: l.getAttribute("y2"),
-  }));
-}
-
-describe("<ReferenceLine />", () => {
-  it("draws a horizontal line at y=value spanning the full plot width", () => {
-    const { container } = render(() => (
-      <LineChart
-        width={500}
-        height={500}
-        data={data}
-        margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
-      >
-        <XAxis dataKey="name" />
-        <YAxis type="number" domain={[0, 100]} />
-        <Line dataKey="uv" />
-        <ReferenceLine y={50} stroke="#ff0000" />
-      </LineChart>
-    ));
-    flush();
-
-    // viewBox: x=65 (margin.left 5 + Y axis width 60), width=430 (500-5-65);
-    // Y scale [0,100] → range [465, 5], so y=50 maps to 235. Orientation 'left'
-    // reverses the points → [{x:65}, {x:495}].
-    expect(lineCoords(container)).toEqual([{ x1: "65", y1: "235", x2: "495", y2: "235" }]);
-  });
-
-  it("draws a vertical line at x=category spanning the full plot height", () => {
-    const { container } = render(() => (
-      <LineChart
-        width={500}
-        height={500}
-        data={data}
-        margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
-      >
-        <XAxis dataKey="name" />
-        <YAxis type="number" domain={[0, 100]} />
-        <Line dataKey="uv" />
-        <ReferenceLine x="B" stroke="#0000ff" />
-      </LineChart>
-    ));
-    flush();
-
-    const coords = lineCoords(container);
-    expect(coords).toHaveLength(1);
-    // Vertical line: x1 === x2 (one band position), spanning the plot height
-    // (top y=5 .. bottom y=465). Orientation 'bottom' keeps points unreversed.
-    const c = coords[0];
-    expect(c?.x1).toBe(c?.x2);
-    expect(new Set([c?.y1, c?.y2])).toEqual(new Set(["5", "465"]));
-  });
-
-  it("extends the axis domain so an out-of-range line renders when ifOverflow='extendDomain'", () => {
-    // uv max is 70; with a default auto Y domain, y=200 is far out of range.
-    // ifOverflow='extendDomain' grows the numerical domain to include 200, so the
-    // line falls in range and renders (this exercises the un-deferred
-    // selectReferenceElementsDomain → combineNumericalDomain path).
-    const { container } = render(() => (
-      <LineChart width={500} height={500} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis type="number" />
-        <Line dataKey="uv" />
-        <ReferenceLine y={200} ifOverflow="extendDomain" stroke="#ff0000" />
-      </LineChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-reference-line-line")).toHaveLength(1);
-  });
-
-  it("renders nothing when the value overflows the domain and ifOverflow='discard'", () => {
-    const { container } = render(() => (
-      <LineChart width={500} height={500} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis type="number" domain={[0, 100]} />
-        <Line dataKey="uv" />
-        {/* 500 is outside [0,100]; default ifOverflow='discard' drops it */}
-        <ReferenceLine y={500} stroke="#ff0000" />
-      </LineChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-reference-line-line")).toHaveLength(0);
-  });
-
-  it("forwards compound kebab presentation attrs onto the line (allowlist fix)", () => {
-    // Regression: ReferenceLine props are kebab (JSX.LineSVGAttributes). Before the
-    // svgPropertiesAndEvents fix, compound attrs like stroke-dasharray/stroke-width
-    // were dropped by the camelCase-only allowlist; now they forward verbatim.
-    const { container } = render(() => (
-      <LineChart
-        width={500}
-        height={500}
-        data={data}
-        margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
-      >
-        <XAxis dataKey="name" />
-        <YAxis type="number" domain={[0, 100]} />
-        <Line dataKey="uv" />
-        <ReferenceLine y={50} stroke="#ff0000" strokeWidth={3} strokeDasharray="4 2" />
-      </LineChart>
-    ));
-    flush();
-
-    const line = container.querySelector(".recharts-reference-line-line");
-    expect(line).not.toBeNull();
-    expect(line).toHaveAttribute("stroke-width", "3");
-    expect(line).toHaveAttribute("stroke-dasharray", "4 2");
-    // No broken camelCase attribute leaked through.
-    expect(line?.getAttribute("strokeWidth")).toBeNull();
-  });
-});