solid-recharts 0.2.0 → 1.0.0

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

@@ -1,136 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,250 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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]);
-  });
-});