solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/util/cursor/getCursorPoints.spec.ts

@@ -0,0 +1,136 @@
+import { vi } from "vitest";
+
+import { RADIAN } from "../../../src/util/PolarUtils";
+import { getCursorPoints } from "../../../src/util/cursor/getCursorPoints";
+import { ChartOffsetInternal, Coordinate, PolarCoordinate } from "../../../src/util/types";
+import { getRadialCursorPoints } from "../../../src/util/cursor/getRadialCursorPoints";
+import { emptyOffset, makeChartOffset } from "../../helper/offsetHelpers";
+
+vi.mock("../../../src/util/cursor/getRadialCursorPoints");
+
+const spy = vi.mocked(getRadialCursorPoints);
+
+const polarCoordinate: PolarCoordinate = {
+  clockWise: false,
+  endAngle: 0,
+  radius: 0,
+  startAngle: 0,
+  cx: 18,
+  cy: 99,
+  innerRadius: 7,
+  outerRadius: 9,
+  angle: RADIAN / 4,
+  x: 0,
+  y: 0,
+};
+
+describe("getCursorPoints", () => {
+  describe("horizontal layout", () => {
+    it("should return coordinates based on X dimension", () => {
+      const activeCoordinate: Coordinate = {
+        x: 18,
+        y: 0,
+      };
+      const offset: ChartOffsetInternal = makeChartOffset({
+        top: 12,
+        height: 10,
+      });
+      const result = getCursorPoints("horizontal", activeCoordinate, offset);
+      const expected: [Coordinate, Coordinate] = [
+        {
+          x: 18,
+          y: 12,
+        },
+        {
+          x: 18,
+          y: 22,
+        },
+      ];
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe("vertical layout", () => {
+    it("should return coordinates based on Y dimension", () => {
+      const activeCoordinate: Coordinate = {
+        x: 18,
+        y: 99,
+      };
+      const offset: ChartOffsetInternal = makeChartOffset({
+        left: 42,
+        width: 60,
+      });
+      const result = getCursorPoints("vertical", activeCoordinate, offset);
+      const expected: [Coordinate, Coordinate] = [
+        {
+          x: 42,
+          y: 99,
+        },
+        {
+          x: 102,
+          y: 99,
+        },
+      ];
+      expect(result).toEqual(expected);
+    });
+  });
+  describe("centric layout", () => {
+    it("should return undefined if cx or cy is not defined", () => {
+      const activeCoordinate: Coordinate = {
+        x: 1,
+        y: 1,
+      };
+      const offset: ChartOffsetInternal = makeChartOffset({});
+      const result = getCursorPoints("centric", activeCoordinate, offset);
+      expect(result).toEqual(undefined);
+    });
+    it("should return cartesian coordinates", () => {
+      const result = getCursorPoints("centric", polarCoordinate, emptyOffset);
+      const expected: [Coordinate, Coordinate] = [
+        {
+          x: 24.999999979701798,
+          y: 98.99946691951588,
+        },
+        {
+          x: 26.999999973902312,
+          y: 98.99931461080614,
+        },
+      ];
+      expect(result).toEqual(expected);
+    });
+    it("should ignore offset", () => {
+      const fullOffset: ChartOffsetInternal = {
+        bottom: 87,
+        brushBottom: 23,
+        height: 35,
+        left: 1,
+        right: 9,
+        top: 43,
+        width: 4573,
+      };
+      const resultWithoutOffset = getCursorPoints("centric", polarCoordinate, emptyOffset);
+      const resultWithOffset = getCursorPoints("centric", polarCoordinate, fullOffset);
+
+      expect(resultWithoutOffset).toEqual(resultWithOffset);
+    });
+  });
+  describe("radial layout", () => {
+    it("should return undefineds if cx or cy is not defined", () => {
+      const activeCoordinate: Coordinate = {
+        x: 1,
+        y: 1,
+      };
+      const result = getCursorPoints("radial", activeCoordinate, emptyOffset);
+      expect(result).toEqual(undefined);
+    });
+    it("should call getRadialCursorPoints", () => {
+      const offset: ChartOffsetInternal = makeChartOffset({
+        left: 42,
+        width: 60,
+      });
+      getCursorPoints("radial", polarCoordinate, offset);
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith(polarCoordinate);
+    });
+  });
+});

package/test/util/cursor/getCursorRectangle.spec.ts

@@ -0,0 +1,50 @@
+import { CursorRectangle, getCursorRectangle } from "../../../src/util/cursor/getCursorRectangle";
+import { ChartCoordinate, ChartOffsetInternal, LayoutType } from "../../../src/util/types";
+import { makeChartOffset } from "../../helper/offsetHelpers";
+
+const activeCoordinate: ChartCoordinate = {
+  x: 100,
+  y: 170,
+};
+const offset: ChartOffsetInternal = makeChartOffset({
+  left: 10,
+  top: 80,
+  width: 13,
+  height: 17,
+});
+
+const tooltipAxisBandSize = 256;
+
+describe("getCursorRectangle", () => {
+  describe("horizontal layout", () => {
+    it("should return rectangle props", () => {
+      const layout = "horizontal";
+      const result = getCursorRectangle(layout, activeCoordinate, offset, tooltipAxisBandSize);
+      const expected: CursorRectangle = {
+        stroke: "none",
+        fill: "#ccc",
+        x: -28,
+        y: 80.5,
+        width: 256,
+        height: 16,
+      };
+      expect(result).toEqual(expected);
+    });
+  });
+
+  const otherLayouts: ReadonlyArray<LayoutType> = ["vertical", "centric", "radial"];
+  describe.each(otherLayouts)("%s layout", (layout: LayoutType) => {
+    it("should return rectangle props", () => {
+      const result = getCursorRectangle(layout, activeCoordinate, offset, tooltipAxisBandSize);
+      const expected: CursorRectangle = {
+        stroke: "none",
+        fill: "#ccc",
+        x: 10.5,
+        y: 42,
+        width: 12,
+        height: 256,
+      };
+      expect(result).toEqual(expected);
+    });
+  });
+});

package/test/util/cursor/getRadialCursorPoints.spec.ts

@@ -0,0 +1,36 @@
+import {
+  RadialCursorPoints,
+  getRadialCursorPoints,
+} from "../../../src/util/cursor/getRadialCursorPoints";
+import { PolarCoordinate } from "../../../src/util/types";
+
+describe("getRadialCursorPoints", () => {
+  it("should add startPoint and endPoint to activeCoordinate", () => {
+    const activeCoordinate: PolarCoordinate = {
+      angle: 0,
+      clockWise: false,
+      innerRadius: 0,
+      outerRadius: 0,
+      x: 0,
+      y: 0,
+      cx: 10,
+      cy: 15,
+      radius: 5,
+      startAngle: 30,
+      endAngle: 60,
+    };
+    const result = getRadialCursorPoints(activeCoordinate);
+    const expected: RadialCursorPoints = {
+      points: [
+        { x: 14.330127018922195, y: 12.5 },
+        { x: 12.5, y: 10.669872981077807 },
+      ],
+      cx: 10,
+      cy: 15,
+      radius: 5,
+      startAngle: 30,
+      endAngle: 60,
+    };
+    expect(result).toEqual(expected);
+  });
+});

package/test/util/errorValue.spec.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from "vitest";
+import { getErrorDomainByDataKey } from "../../src/state/selectors/axisSelectors";
+import type { ErrorBarsSettings } from "../../src/state/errorBarSlice";
+
+// Ported from recharts 3.8.1 test/util/errorValue.spec.ts.
+
+describe("getErrorDomainByDataKey", () => {
+  describe.each([null, undefined])("when entry = %s", (entry) => {
+    it("should return empty array when errorBar.dataKey is string", () => {
+      const errorBars: ReadonlyArray<ErrorBarsSettings> = [{ dataKey: "uv", direction: "x" }];
+      expect(getErrorDomainByDataKey(entry, 1, errorBars)).toEqual([]);
+    });
+
+    it(`should return empty array even when errorBars.dataKey returns a number anyway;
+              this behaviour is inherited from getValueByDataKey and is not technically required here but here we are`, () => {
+      const errorBars: ReadonlyArray<ErrorBarsSettings> = [{ dataKey: () => 7, direction: "x" }];
+      expect(getErrorDomainByDataKey(entry, 1, errorBars)).toEqual([]);
+    });
+  });
+
+  it("should return empty array when errorBars is empty", () => {
+    expect(getErrorDomainByDataKey(1, 1, [])).toEqual([]);
+  });
+
+  it.each([null, undefined])(
+    "should return empty array when errorBars.dataKey is %s",
+    (dataKey) => {
+      // @ts-expect-error typescript is correct here, but we are testing runtime behavior with invalid input
+      const errorBars: ReadonlyArray<ErrorBarsSettings> = [{ dataKey, direction: "x" }];
+      expect(getErrorDomainByDataKey(1, 1, errorBars)).toEqual([]);
+    },
+  );
+
+  it("should return all ErrorValues in a single array when the errorBar.dataKey results in a number", () => {
+    const entry = {
+      val: 2,
+      errX: 3,
+      errY: 7,
+    };
+    const errorBars: ReadonlyArray<ErrorBarsSettings> = [
+      { dataKey: "errX", direction: "x" },
+      { dataKey: "errY", direction: "y" },
+    ];
+    expect(getErrorDomainByDataKey(entry, 2, errorBars)).toEqual([-1, 5, -5, 9]);
+  });
+
+  it("should return array of all errors when the errorBar.dataKey results in an array", () => {
+    const entry = {
+      val: 2,
+      errX: [3, 7],
+      errY: [11, 13],
+    };
+    const errorBars: ReadonlyArray<ErrorBarsSettings> = [
+      { dataKey: "errX", direction: "x" },
+      { dataKey: "errY", direction: "y" },
+    ];
+    expect(getErrorDomainByDataKey(entry, 2, errorBars)).toEqual([-1, 9, -9, 15]);
+  });
+
+  it("should return empty array if errorBars are undefined", () => {
+    const entry = {
+      val: 2,
+      errX: [3, 7],
+      errY: [11, 13],
+    };
+    const errorBars: ReadonlyArray<ErrorBarsSettings> | undefined = undefined;
+    expect(getErrorDomainByDataKey(entry, 2, errorBars)).toEqual([]);
+  });
+});

package/test/util/getEveryNth.spec.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { getEveryNth } from "../../src/util/getEveryNth";
+
+/*
+ * Original unit spec for this port's `src/util/getEveryNth.ts` (recharts exercises
+ * it only through TickUtils). Pins the documented contract: n < 1 → empty array,
+ * n === 1 → the input array as-is, otherwise every nth element starting at index 0.
+ */
+
+describe("getEveryNth", () => {
+  it("returns an empty array for n < 1", () => {
+    expect(getEveryNth([1, 2, 3], 0)).toEqual([]);
+    expect(getEveryNth([1, 2, 3], -2)).toEqual([]);
+  });
+
+  it("returns the input array unchanged for n === 1", () => {
+    const arr = [1, 2, 3];
+    expect(getEveryNth(arr, 1)).toBe(arr);
+  });
+
+  it("returns every nth element starting from index 0", () => {
+    expect(getEveryNth(["a", "b", "c", "d", "e"], 2)).toEqual(["a", "c", "e"]);
+    expect(getEveryNth(["a", "b", "c", "d", "e", "f"], 3)).toEqual(["a", "d"]);
+  });
+
+  it("returns only the first element when n is greater than the length", () => {
+    expect(getEveryNth([1, 2, 3], 10)).toEqual([1]);
+  });
+
+  it("returns an empty array when the input is empty", () => {
+    expect(getEveryNth([], 3)).toEqual([]);
+  });
+
+  it("does not mutate the input array", () => {
+    const arr = [1, 2, 3, 4];
+    getEveryNth(arr, 2);
+    expect(arr).toEqual([1, 2, 3, 4]);
+  });
+});

package/test/util/getRadiusAndStrokeWidthFromDot.spec.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { getRadiusAndStrokeWidthFromDot } from "../../src/util/getRadiusAndStrokeWidthFromDot";
+
+/*
+ * Original unit spec for this port's `src/util/getRadiusAndStrokeWidthFromDot.ts`
+ * (recharts exercises it only through Line/Area rendering). Pins the documented
+ * contract: defaults are r=3, strokeWidth=2; a non-object dot (boolean/function)
+ * or a missing / NaN / negative value falls back to the matching default; a valid
+ * object dot returns its `r` / `strokeWidth`.
+ */
+
+describe("getRadiusAndStrokeWidthFromDot", () => {
+  it("returns the defaults for a boolean dot", () => {
+    expect(getRadiusAndStrokeWidthFromDot(true)).toEqual({ r: 3, strokeWidth: 2 });
+    expect(getRadiusAndStrokeWidthFromDot(false)).toEqual({ r: 3, strokeWidth: 2 });
+  });
+
+  it("returns the defaults for a function dot", () => {
+    expect(getRadiusAndStrokeWidthFromDot(() => null as never)).toEqual({ r: 3, strokeWidth: 2 });
+  });
+
+  it("returns the defaults for an empty object dot", () => {
+    expect(getRadiusAndStrokeWidthFromDot({})).toEqual({ r: 3, strokeWidth: 2 });
+  });
+
+  it("reads r and strokeWidth from an object dot", () => {
+    expect(getRadiusAndStrokeWidthFromDot({ r: 5, strokeWidth: 4 })).toEqual({
+      r: 5,
+      strokeWidth: 4,
+    });
+  });
+
+  it("falls back to the default for a missing value but keeps the provided one", () => {
+    expect(getRadiusAndStrokeWidthFromDot({ r: 7 })).toEqual({ r: 7, strokeWidth: 2 });
+    expect(getRadiusAndStrokeWidthFromDot({ strokeWidth: 6 })).toEqual({ r: 3, strokeWidth: 6 });
+  });
+
+  it("falls back to the default for negative values", () => {
+    expect(getRadiusAndStrokeWidthFromDot({ r: -1, strokeWidth: -5 })).toEqual({
+      r: 3,
+      strokeWidth: 2,
+    });
+  });
+
+  it("accepts zero as a valid value", () => {
+    expect(getRadiusAndStrokeWidthFromDot({ r: 0, strokeWidth: 0 })).toEqual({
+      r: 0,
+      strokeWidth: 0,
+    });
+  });
+});

package/test/util/getRelativeCoordinate.spec.ts

@@ -0,0 +1,250 @@
+import { describe, it, expect } from "vitest";
+import { getRelativeCoordinate } from "../../src/util/getRelativeCoordinate";
+import { getMockDomRect } from "../helper/mockGetBoundingClientRect";
+import {
+  RelativePointer,
+  HTMLMousePointer,
+  SVGMousePointer,
+  HTMLTouchPointer,
+  SVGTouchPointer,
+} from "../../src/util/types";
+
+describe("getRelativeCoordinate", () => {
+  describe("with HTML elements", () => {
+    it("should return chart coordinates relative to the top-left corner of the chart", () => {
+      const event: HTMLMousePointer = {
+        clientX: 100,
+        clientY: 100,
+        currentTarget: {
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 100, height: 100 }),
+          offsetWidth: 100,
+          offsetHeight: 100,
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      const expected: RelativePointer = {
+        relativeX: 50,
+        relativeY: 50,
+      };
+
+      expect(actual).toEqual(expected);
+    });
+
+    it("should return chart coordinates relative to the top-left corner of the chart with scale", () => {
+      const event: HTMLMousePointer = {
+        /*
+         * clientX and clientY are the mouse position relative to the viewport, including scroll.
+         * These ignore scale on whatever is being hovered over,
+         * so while we hover over the same position relative to the viewport,
+         * the chart below has moved because it's now scaled 2x.
+         */
+        clientX: 100,
+        clientY: 100,
+        currentTarget: {
+          /*
+           * As one zooms in and out, the rect.width and rect.height will change,
+           * but the offsetWidth and offsetHeight will remain the same.
+           *
+           * So this mock target represents a chart that's been scaled by 2x.
+           */
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 200, height: 200 }),
+          offsetWidth: 100,
+          offsetHeight: 100,
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      const expected: RelativePointer = {
+        /*
+         * Since we hover over the same position relative to the viewport,
+         * but the chart is now twice as big, the chart coordinates should be half.
+         */
+        relativeX: 25,
+        relativeY: 25,
+      };
+
+      expect(actual).toEqual(expected);
+    });
+
+    it("should handle zero offsetWidth/offsetHeight gracefully", () => {
+      const event: HTMLMousePointer = {
+        clientX: 100,
+        clientY: 100,
+        currentTarget: {
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 100, height: 100 }),
+          offsetWidth: 0,
+          offsetHeight: 0,
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      // When offsetWidth/offsetHeight is 0, scale defaults to 1
+      const expected: RelativePointer = {
+        relativeX: 50,
+        relativeY: 50,
+      };
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe("with SVG elements", () => {
+    it("should return chart coordinates relative to the top-left corner of the SVG", () => {
+      const event: SVGMousePointer = {
+        clientX: 100,
+        clientY: 100,
+        currentTarget: {
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 100, height: 100 }),
+          getBBox: () => getMockDomRect({ x: 0, y: 0, width: 100, height: 100 }),
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      const expected: RelativePointer = {
+        relativeX: 50,
+        relativeY: 50,
+      };
+
+      expect(actual).toEqual(expected);
+    });
+
+    it("should return chart coordinates with SVG scale (CSS transform)", () => {
+      const event: SVGMousePointer = {
+        clientX: 100,
+        clientY: 100,
+        currentTarget: {
+          /*
+           * The bounding client rect represents the visual size on screen (affected by CSS transform).
+           * getBBox returns the intrinsic SVG coordinate space size (not affected by CSS transform).
+           */
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 200, height: 200 }),
+          getBBox: () => getMockDomRect({ x: 0, y: 0, width: 100, height: 100 }),
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      const expected: RelativePointer = {
+        // SVG is scaled 2x, so coordinates should be halved
+        relativeX: 25,
+        relativeY: 25,
+      };
+
+      expect(actual).toEqual(expected);
+    });
+
+    it("should handle zero getBBox width/height gracefully", () => {
+      const event: SVGMousePointer = {
+        clientX: 100,
+        clientY: 100,
+        currentTarget: {
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 100, height: 100 }),
+          getBBox: () => getMockDomRect({ x: 0, y: 0, width: 0, height: 0 }),
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      // When getBBox returns 0, scale defaults to 1
+      const expected: RelativePointer = {
+        relativeX: 50,
+        relativeY: 50,
+      };
+
+      expect(actual).toEqual(expected);
+    });
+
+    it("should handle non-uniform SVG scaling", () => {
+      const event: SVGMousePointer = {
+        clientX: 100,
+        clientY: 100,
+        currentTarget: {
+          // SVG is scaled 2x horizontally, 4x vertically
+          getBoundingClientRect: () => getMockDomRect({ left: 0, top: 0, width: 200, height: 400 }),
+          getBBox: () => getMockDomRect({ x: 0, y: 0, width: 100, height: 100 }),
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      const expected: RelativePointer = {
+        relativeX: 50, // 100 / 2
+        relativeY: 25, // 100 / 4
+      };
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe("with Touch events", () => {
+    it("should return array of coordinates for single touch on HTML element", () => {
+      const event: HTMLTouchPointer = {
+        touches: [{ clientX: 100, clientY: 100 }],
+        currentTarget: {
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 100, height: 100 }),
+          offsetWidth: 100,
+          offsetHeight: 100,
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      const expected: RelativePointer[] = [
+        {
+          relativeX: 50,
+          relativeY: 50,
+        },
+      ];
+
+      expect(actual).toEqual(expected);
+    });
+
+    it("should return array of coordinates for multiple touches on HTML element", () => {
+      const event: HTMLTouchPointer = {
+        touches: [
+          { clientX: 100, clientY: 100 },
+          { clientX: 150, clientY: 150 },
+        ],
+        currentTarget: {
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 100, height: 100 }),
+          offsetWidth: 100,
+          offsetHeight: 100,
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      const expected: RelativePointer[] = [
+        { relativeX: 50, relativeY: 50 },
+        { relativeX: 100, relativeY: 100 },
+      ];
+
+      expect(actual).toEqual(expected);
+    });
+
+    it("should return array of coordinates for touch on SVG element", () => {
+      const event: SVGTouchPointer = {
+        touches: [{ clientX: 100, clientY: 100 }],
+        currentTarget: {
+          getBoundingClientRect: () =>
+            getMockDomRect({ left: 50, top: 50, width: 100, height: 100 }),
+          getBBox: () => getMockDomRect({ x: 0, y: 0, width: 100, height: 100 }),
+        },
+      };
+      const actual = getRelativeCoordinate(event);
+
+      const expected: RelativePointer[] = [
+        {
+          relativeX: 50,
+          relativeY: 50,
+        },
+      ];
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});

package/test/util/getSliced.spec.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from "vitest";
+import { getSliced } from "../../src/util/getSliced";
+
+/*
+ * Original unit spec for this port's `src/util/getSliced.ts`. recharts has no
+ * dedicated test (it is exercised indirectly via combineTooltipPayload /
+ * getDomainOfStackGroups); these assertions pin the documented contract:
+ * non-array input is returned unchanged, a [0, 0] window is treated as "no slice"
+ * (full array), and otherwise the result is `arr.slice(startIndex, endIndex + 1)`
+ * (inclusive end).
+ */
+
+describe("getSliced", () => {
+  it("returns a non-array input unchanged", () => {
+    const notArray = { length: 3 } as never;
+    expect(getSliced(notArray, 1, 2)).toBe(notArray);
+  });
+
+  it("returns the full array when startIndex + endIndex === 0", () => {
+    const arr = [1, 2, 3, 4, 5];
+    expect(getSliced(arr, 0, 0)).toBe(arr);
+  });
+
+  it("slices inclusively of endIndex", () => {
+    const arr = [1, 2, 3, 4, 5];
+    expect(getSliced(arr, 1, 3)).toEqual([2, 3, 4]);
+  });
+
+  it("includes the first element when startIndex is 0 and endIndex is non-zero", () => {
+    const arr = ["a", "b", "c", "d"];
+    expect(getSliced(arr, 0, 2)).toEqual(["a", "b", "c"]);
+  });
+
+  it("returns a new array (does not mutate the input)", () => {
+    const arr = [1, 2, 3, 4, 5];
+    const result = getSliced(arr, 1, 3);
+    expect(result).not.toBe(arr);
+    expect(arr).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it("clamps to the array bounds when endIndex exceeds the length", () => {
+    const arr = [1, 2, 3];
+    expect(getSliced(arr, 1, 10)).toEqual([2, 3]);
+  });
+});