solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/util/ChartUtils/truncateByDomain.spec.ts

@@ -0,0 +1,70 @@
+import type { SeriesPoint } from "d3-shape";
+import { truncateByDomain } from "../../../src/util/ChartUtils";
+
+function createMockSeriesPoint(val: [number, number]): SeriesPoint<Record<number, number>> {
+  // @ts-expect-error just can't make ts happy with custom properties on an array can I
+  const seriesPoint: SeriesPoint<Record<number, number>> = [...val];
+  seriesPoint.data = val;
+  return seriesPoint;
+}
+
+describe("truncateByDomain", () => {
+  test.each([{ domain: [] }, { domain: [1] }, { domain: ["", ""] }])(
+    "should return value without change if domain is %o",
+    ({ domain }) => {
+      const value = createMockSeriesPoint([1, 2]);
+      const result = truncateByDomain(value, domain as never);
+      expect(result).toBe(value);
+      expect(result).toEqual(createMockSeriesPoint([1, 2]));
+    },
+  );
+
+  it("should return value if it fits the domain", () => {
+    const value = createMockSeriesPoint([10, 20]);
+    const domain = [0, 30];
+    const result = truncateByDomain(value, domain);
+    expect(result).toEqual([10, 20]);
+  });
+
+  it("should return value if it same as the domain", () => {
+    const value = createMockSeriesPoint([10, 20]);
+    const domain = [10, 20];
+    const result = truncateByDomain(value, domain);
+    expect(result).toEqual([10, 20]);
+  });
+
+  it("should truncate when value overflows from both ends", () => {
+    const value = createMockSeriesPoint([0, 30]);
+    const domain = [10, 20];
+    const result = truncateByDomain(value, domain);
+    expect(result).toEqual([10, 20]);
+  });
+
+  it("should truncate when value is larger than domain", () => {
+    const value = createMockSeriesPoint([100, 300]);
+    const domain = [10, 20];
+    const result = truncateByDomain(value, domain);
+    expect(result).toEqual([20, 20]);
+  });
+
+  it("should truncate when value is smaller than domain", () => {
+    const value = createMockSeriesPoint([10, 20]);
+    const domain = [100, 200];
+    const result = truncateByDomain(value, domain);
+    expect(result).toEqual([100, 100]);
+  });
+
+  it("should not change value if domain has NaN in it", () => {
+    const value = createMockSeriesPoint([0, 30]);
+    const domain = [NaN, NaN];
+    const result = truncateByDomain(value, domain);
+    expect(result).toEqual(createMockSeriesPoint([0, 30]));
+  });
+
+  it("should return domain if value has NaN in it", () => {
+    const value = createMockSeriesPoint([NaN, NaN]);
+    const domain = [10, 20];
+    const result = truncateByDomain(value, domain);
+    expect(result).toEqual([10, 20]);
+  });
+});

package/test/util/DataUtils.spec.ts

@@ -0,0 +1,385 @@
+// Ported from recharts 3.8.1 test/util/DataUtils.spec.ts (only the import path changed).
+import {
+  getPercentValue,
+  hasDuplicate,
+  mathSign,
+  isPercent,
+  isNumber,
+  isNumOrStr,
+  getLinearRegression,
+  findEntryInArray,
+  uniqueId,
+  isNullish,
+  upperFirst,
+  isNan,
+  interpolate,
+  isNotNil,
+  noop,
+} from "../../src/util/DataUtils";
+
+/**
+ * @noteNeverCasting added casting to avoid ts error and to be able to test wrong error provided at runtime
+ */
+
+describe("mathSign", () => {
+  it("(0)", () => {
+    expect(mathSign(0)).toBe(0);
+  });
+
+  it("(-0)", () => {
+    expect(mathSign(-0)).toBe(0);
+  });
+
+  it("(100)", () => {
+    expect(mathSign(100)).toBe(1);
+  });
+
+  it("(-100)", () => {
+    expect(mathSign(-100)).toBe(-1);
+  });
+});
+
+describe("is functions", () => {
+  interface IsFunctionTestDefinition<F extends (value: any) => any> {
+    value: Parameters<F>[0];
+    result: ReturnType<F>;
+  }
+
+  describe("isPercent", () => {
+    const tests: IsFunctionTestDefinition<typeof isPercent>[] = [
+      { value: "0%", result: true },
+      { value: "10%", result: true },
+      { value: "0", result: false },
+      { value: "", result: false },
+      { value: "%", result: false },
+      { value: "%%", result: false },
+      { value: "0%%", result: false },
+    ];
+
+    test.each(tests)("should return $result with input $value", ({ value, result }) => {
+      expect(isPercent(value)).toBe(result);
+    });
+  });
+
+  describe("isNumber", () => {
+    const tests: IsFunctionTestDefinition<typeof isNumber>[] = [
+      { value: 0, result: true },
+      { value: "0", result: false },
+      { value: {}, result: false },
+      { value: [], result: false },
+    ];
+
+    test.each(tests)("should return $result with input $value", ({ value, result }) => {
+      expect(isNumber(value)).toBe(result);
+    });
+
+    it("should allow type refinement", () => {
+      const arr: unknown[] = ["a", 1, false, NaN];
+      // @ts-expect-error typescript should highlight this - invalid assignment
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const invalid: number[] = arr;
+      const result: number[] = arr.filter(isNumber);
+      expect(result).toEqual([1]);
+    });
+  });
+
+  describe("isNumOrStr", () => {
+    const tests: IsFunctionTestDefinition<typeof isNumOrStr>[] = [
+      { value: 0, result: true },
+      { value: "0", result: true },
+      { value: {}, result: false },
+      { value: [], result: false },
+    ];
+
+    test.each(tests)("should return $result with input $value", ({ value, result }) => {
+      expect(isNumOrStr(value)).toBe(result);
+    });
+  });
+});
+
+describe("uniqueId", () => {
+  test("should return unique ID independent of prefix", () => {
+    expect(uniqueId()).toEqual("1");
+    expect(uniqueId(undefined)).toEqual("2");
+    expect(uniqueId("")).toEqual("3");
+    expect(uniqueId("myprefix")).toEqual("myprefix4");
+    expect(uniqueId()).toEqual("5");
+  });
+});
+
+describe("getPercentValue", () => {
+  it('getPercentValue("25%", 1) should return 0.25 ', () => {
+    expect(getPercentValue("25%", 1)).toBe(0.25);
+  });
+  it('getPercentValue("25%", "a") should return 0 ', () => {
+    /** @see noteNeverCasting */
+    expect(getPercentValue("25%", "a" as never)).toBe(0);
+  });
+  it("getPercentValue(1)) should return 1", () => {
+    /** @see noteNeverCasting */
+    expect(getPercentValue(1, undefined as never)).toBe(1);
+  });
+  it('getPercentValue("120%", 100)) should return 120', () => {
+    expect(getPercentValue("120%", 100)).toBe(120);
+  });
+
+  it('getPercentValue("120%", 100, 0, true)) should return 100', () => {
+    expect(getPercentValue("120%", 100, 0, true)).toBe(100);
+  });
+
+  it("should return defaultValue if percent is neither number not string", () => {
+    /** @see noteNeverCasting */
+    expect(getPercentValue(false as never, 0, 5)).toEqual(5);
+  });
+});
+
+describe("hasDuplicate", () => {
+  it("of an object should return false when input value is not an array", () => {
+    /** @see noteNeverCasting */
+    expect(hasDuplicate({} as never)).toBe(false);
+  });
+
+  it("of [12, 12] should return true", () => {
+    expect(hasDuplicate([12, 12])).toBe(true);
+  });
+
+  it('["12", 12] should return true due to implicit cast', () => {
+    expect(hasDuplicate(["12", 12])).toBe(true);
+  });
+
+  it("[1, 12] should return false", () => {
+    expect(hasDuplicate([1, 12])).toBe(false);
+  });
+});
+
+describe("interpolate", () => {
+  it("should return a number when called with two numbers", () => {
+    expect(interpolate(10, 20, 0.5)).toBe(15);
+    expect(interpolate(10, 20, 0)).toBe(10);
+    expect(interpolate(10, 20, 1)).toBe(20);
+    expect(interpolate(10, 20, 0.25)).toBe(12.5);
+    expect(interpolate(10, 20, 0.75)).toBe(17.5);
+    expect(interpolate(10, 20, 0.1)).toBe(11);
+    expect(interpolate(20, 620, 0.8)).toBe(500);
+  });
+
+  it("should return second number if the first is null", () => {
+    expect(interpolate(null, 20, 0.5)).toBe(20);
+    expect(interpolate(null, 20, 0.3)).toBe(20);
+    expect(interpolate(null, 20, 0.9)).toBe(20);
+  });
+
+  it("should return second number if the first is undefined", () => {
+    expect(interpolate(undefined, 20, 0.5)).toBe(20);
+    expect(interpolate(undefined, 20, 0.3)).toBe(20);
+    expect(interpolate(undefined, 20, 0.9)).toBe(20);
+  });
+
+  it("should return null if second number is null", () => {
+    expect(interpolate(10, null, 0.5)).toBeNull();
+    expect(interpolate(null, null, 0.5)).toBeNull();
+  });
+
+  it("should return undefined if second number is undefined", () => {
+    expect(interpolate(10, undefined, 0.5)).toBeUndefined();
+    expect(interpolate(undefined, undefined, 0.5)).toBeUndefined();
+  });
+});
+
+describe("findEntryInArray", () => {
+  const dataList = [
+    { name: "a", address: { street: "somewhere" } },
+    { name: "b", address: { street: "over" } },
+    { name: "c", address: { street: "here" } },
+  ];
+
+  it("should work with string key", () => {
+    expect(findEntryInArray(dataList, "name", "a")).toStrictEqual(dataList[0]);
+  });
+  it("should work with string keypath", () => {
+    expect(findEntryInArray(dataList, "address.street", "over")).toStrictEqual(dataList[1]);
+  });
+  it("should work with simple function", () => {
+    expect(findEntryInArray(dataList, (v) => v.address.street, "here")).toStrictEqual(dataList[2]);
+  });
+
+  it("should return undefined if first argument is null or undefined or empty array", () => {
+    /** @see noteNeverCasting */
+    expect(findEntryInArray(null as never, 0, "0")).toEqual(undefined);
+    /** @see noteNeverCasting */
+    expect(findEntryInArray(undefined as never, 0, "0")).toEqual(undefined);
+    expect(findEntryInArray([], 0, "0")).toEqual(undefined);
+  });
+});
+
+describe("getLinearRegression", () => {
+  it("should throw an error when null is supplied", () => {
+    expect(() => getLinearRegression(null as never)).toThrowError();
+  });
+
+  it("should return nonsense object when an empty array is supplied", () => {
+    /** @see noteNeverCasting */
+    expect(getLinearRegression([] as never)).toEqual({
+      a: 0,
+      b: NaN,
+      xmax: -Infinity,
+      xmin: Infinity,
+    });
+  });
+  it("should return a linear progression with supplied data", () => {
+    const data: Parameters<typeof getLinearRegression>[0] = [
+      { cx: 100, cy: 200 },
+      { cx: 120, cy: 100 },
+      { cx: 170, cy: 300 },
+      { cx: 140, cy: 250 },
+      { cx: 150, cy: 400 },
+      { cx: 110, cy: 280 },
+    ];
+
+    expect(getLinearRegression(data)).toStrictEqual({
+      a: 2.110047846889952,
+      b: -22.822966507177018,
+      xmax: 170,
+      xmin: 100,
+    });
+  });
+
+  it("should return a linear progression without cx or cy in data", () => {
+    const data: Parameters<typeof getLinearRegression>[0] = [
+      { cx: 100 },
+      { cx: 120, cy: 100 },
+      { cx: 170, cy: 300 },
+      { cy: 250 },
+      { cx: 150 },
+      { cx: 110, cy: 280 },
+    ];
+
+    expect(getLinearRegression(data)).toStrictEqual({
+      a: -0.39752144899904673,
+      b: 198.0648236415634,
+      xmax: 170,
+      xmin: 0,
+    });
+  });
+
+  it("should return a linear progression with only cy", () => {
+    const data: Parameters<typeof getLinearRegression>[0] = [
+      { cy: 100 },
+      { cy: 100 },
+      { cy: 300 },
+      { cy: 250 },
+      { cy: 150 },
+      { cy: 280 },
+    ];
+
+    expect(getLinearRegression(data)).toStrictEqual({
+      a: 0,
+      b: 196.66666666666666,
+      xmax: 0,
+      xmin: 0,
+    });
+  });
+});
+
+describe("isNullish", () => {
+  it("should return true when value is null", () => {
+    expect(isNullish(null)).toBe(true);
+  });
+
+  it("should return true when value is undefined", () => {
+    expect(isNullish(undefined)).toBe(true);
+  });
+
+  it("should return false when value is not null or undefined", () => {
+    expect(isNullish(0)).toBe(false);
+    expect(isNullish("")).toBe(false);
+    expect(isNullish("0")).toBe(false);
+  });
+});
+
+describe("isNotNil", () => {
+  it("should return false when value is null", () => {
+    expect(isNotNil(null)).toBe(false);
+  });
+
+  it("should return false when value is undefined", () => {
+    expect(isNotNil(undefined)).toBe(false);
+  });
+
+  it("should return true when value is not null or undefined", () => {
+    expect(isNotNil(0)).toBe(true);
+    expect(isNotNil("")).toBe(true);
+    expect(isNotNil("0")).toBe(true);
+    expect(isNotNil(false)).toBe(true);
+    expect(isNotNil({})).toBe(true);
+    expect(isNotNil([])).toBe(true);
+  });
+
+  it("should allow type refinement", () => {
+    const arr: (number | undefined)[] = [1, undefined, 3];
+    const result: number[] = arr.filter(isNotNil);
+    expect(result).toEqual([1, 3]);
+  });
+});
+
+describe("noop", () => {
+  it("should return undefined", () => {
+    expect(noop()).toBe(undefined);
+  });
+
+  it("should be callable without errors", () => {
+    expect(() => noop()).not.toThrow();
+  });
+
+  it("should be usable as a placeholder callback", () => {
+    const callback: () => void = noop;
+    expect(() => callback()).not.toThrow();
+    expect(callback()).toBe(undefined);
+  });
+});
+
+describe("upperFirst", () => {
+  it("should return null when value is null", () => {
+    // @ts-expect-error typescript is correct here, but we are testing runtime behavior with invalid input
+    expect(upperFirst(null)).toBe(null);
+  });
+
+  it("should return undefined when value is undefined", () => {
+    // @ts-expect-error typescript is correct here, but we are testing runtime behavior with invalid input
+    expect(upperFirst(undefined)).toBe(undefined);
+  });
+
+  it("should return empty string when value is empty string", () => {
+    expect(upperFirst("")).toBe("");
+  });
+
+  it("should return the string with the first letter uppercased", () => {
+    expect(upperFirst("hello")).toBe("Hello");
+  });
+});
+
+describe("isNan", () => {
+  it("should return true when value is NaN", () => {
+    expect(isNan(NaN)).toBe(true);
+  });
+
+  it("should return false when value is undefined", () => {
+    expect(isNan(undefined)).toBe(false);
+  });
+
+  it("should return false when value is null", () => {
+    expect(isNan(null)).toBe(false);
+  });
+
+  it("should return false when value is empty string", () => {
+    expect(isNan("")).toBe(false);
+  });
+
+  it('should return false when value is "0"', () => {
+    expect(isNan("0")).toBe(false);
+  });
+
+  it("should return false when value is a number", () => {
+    expect(isNan(1)).toBe(false);
+  });
+});

package/test/util/DomUtils.spec.tsx

@@ -0,0 +1,117 @@
+// Ported from recharts 3.8.1 test/util/DomUtils.spec.tsx.
+// Harness changes only: render from the local Solid shim (thunk), no React
+// import. Assertions are byte-identical to recharts.
+import { render } from "@solidjs/testing-library";
+import {
+  getStringSize,
+  clearStringCache,
+  getStringCacheStats,
+  configureTextMeasurement,
+  getTextMeasurementConfig,
+} from "../../src/util/DOMUtils";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+
+describe("DOMUtils", () => {
+  beforeEach(() => {
+    configureTextMeasurement({
+      cacheSize: 2000,
+      enableCache: true,
+    });
+    clearStringCache();
+  });
+
+  test("getStringSize() returns 0", () => {
+    // @ts-expect-error typescript is correct here, but we are testing runtime behavior with invalid input
+    expect(getStringSize(undefined)).toEqual({ width: 0, height: 0 });
+  });
+
+  test("getStringSize() with value returns mocked getBoundingClientRect values", () => {
+    render(() => <span id="recharts_measurement_span">test</span>);
+    mockGetBoundingClientRect({
+      x: 200,
+      y: 100,
+      width: 25,
+      height: 17,
+      top: 10,
+      right: 10,
+      bottom: 10,
+      left: 10,
+    });
+
+    expect(getStringSize("test")).toEqual({
+      width: 25,
+      height: 17,
+    });
+  });
+
+  test("cache should store and retrieve values correctly", () => {
+    render(() => <span id="recharts_measurement_span">test</span>);
+    mockGetBoundingClientRect({
+      width: 25,
+      height: 17,
+    });
+
+    const result1 = getStringSize("test", { fontSize: "14px" });
+    expect(result1).toEqual({ width: 25, height: 17 });
+    expect(getStringCacheStats().size).toBe(1);
+
+    const result2 = getStringSize("test", { fontSize: "14px" });
+    expect(result2).toEqual({ width: 25, height: 17 });
+    expect(getStringCacheStats().size).toBe(1);
+  });
+
+  test("clearStringCache should clear the cache", () => {
+    render(() => <span id="recharts_measurement_span">test</span>);
+    mockGetBoundingClientRect({
+      width: 25,
+      height: 17,
+    });
+
+    getStringSize("test");
+    expect(getStringCacheStats().size).toBe(1);
+
+    clearStringCache();
+    expect(getStringCacheStats().size).toBe(0);
+  });
+
+  test("cache should handle different styles separately", () => {
+    render(() => <span id="recharts_measurement_span">test</span>);
+    mockGetBoundingClientRect({
+      width: 25,
+      height: 17,
+    });
+
+    getStringSize("test", { fontSize: "14px" });
+    getStringSize("test", { fontSize: "16px" });
+
+    expect(getStringCacheStats().size).toBe(2);
+  });
+
+  test("configureTextMeasurement should update configuration", () => {
+    const newConfig = {
+      cacheSize: 1000,
+      enableCache: false,
+    };
+
+    configureTextMeasurement(newConfig);
+    const config = getTextMeasurementConfig();
+
+    expect(config.cacheSize).toBe(1000);
+    expect(config.enableCache).toBe(false);
+  });
+
+  test("should not cache when caching is disabled", () => {
+    configureTextMeasurement({ enableCache: false });
+
+    render(() => <span id="recharts_measurement_span">test</span>);
+    mockGetBoundingClientRect({
+      width: 25,
+      height: 17,
+    });
+
+    getStringSize("test");
+    getStringSize("test");
+
+    expect(getStringCacheStats().size).toBe(0);
+  });
+});

package/test/util/FunnelUtils.spec.tsx

@@ -0,0 +1,70 @@
+// Ported from recharts 3.8.1 test/util/FunnelUtils.spec.tsx (commit 7a23854).
+//
+// <FunnelTrapezoid> renders the funnel shape through the shared <Shape> helper:
+// when `isActive` is true the wrapping <g> carries `recharts-active-shape`.
+// `render(<svg>...)` from React → Solid's `render(() => <svg>...)`. The Solid
+// <Shape>/<Layer> emits `<g class="recharts-layer recharts-active-shape">`, so
+// `toHaveClass('recharts-active-shape')` (substring-class match) still holds.
+import { describe, expect, it } from "vitest";
+import { render } from "@solidjs/testing-library";
+import { FunnelTrapezoid, type FunnelTrapezoidProps } from "../../src/util/FunnelUtils";
+import type { Coordinate, TrapezoidViewBox } from "../../src/util/types";
+
+describe("funnelUtils", () => {
+  const mockTooltipPosition: Coordinate = { x: 10, y: 10 };
+
+  const viewBox: TrapezoidViewBox = {
+    x: 0,
+    y: 0,
+    upperWidth: 0,
+    lowerWidth: 0,
+    width: 0,
+    height: 0,
+  };
+  const mockProps: FunnelTrapezoidProps = {
+    width: 100,
+    upperWidth: 80,
+    lowerWidth: 60,
+    x: 11,
+    y: 11,
+    isActive: false,
+    tooltipPosition: mockTooltipPosition,
+    height: 0,
+    name: "",
+    option: undefined,
+    labelViewBox: viewBox,
+    parentViewBox: viewBox,
+    val: 1,
+    tooltipPayload: [],
+  };
+
+  it("<FunnelTrapezoid /> returns a trapezoid shape with no options", () => {
+    const { container } = render(() => (
+      <svg width={100} height={100}>
+        <FunnelTrapezoid {...mockProps} isActive={Boolean(true)} />
+      </svg>
+    ));
+    expect(container.querySelector("g")).toHaveClass("recharts-active-shape");
+  });
+
+  it("<FunnelTrapezoid /> returns a trapezoid shape with x & y from options", () => {
+    const { container } = render(() => (
+      <svg width={100} height={100}>
+        <FunnelTrapezoid
+          {...mockProps}
+          width={100}
+          tooltipPosition={mockTooltipPosition}
+          option={{ x: 10, y: 10 }}
+          isActive
+          height={100}
+          x={0}
+          y={0}
+          upperWidth={0}
+          lowerWidth={0}
+          name="my name"
+        />
+      </svg>
+    ));
+    expect(container.querySelector("g")).toHaveClass("recharts-active-shape");
+  });
+});

package/test/util/Global.spec.ts

@@ -0,0 +1,11 @@
+import { Global } from "../../src/util/Global";
+
+describe("Global util", () => {
+  it("is an object", () => {
+    expect(typeof Global).toEqual("object");
+  });
+
+  it("has property isSsr", () => {
+    expect(Global.isSsr).toEqual(false);
+  });
+});