solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/cartesian/getEquidistantTicks.spec.ts

@@ -0,0 +1,88 @@
+import {
+  getEquidistantTicks,
+  getEquidistantPreserveEndTicks,
+} from "../../src/cartesian/getEquidistantTicks";
+import { CartesianTickItem, TickItem } from "../../src/util/types";
+
+describe("getEquidistantTicks", () => {
+  const getTickSize = (tick: CartesianTickItem) => {
+    return tick.value as number;
+  };
+
+  it("should return empty array if no ticks are passed", () => {
+    const result = getEquidistantTicks(1, { start: 0, end: 100 }, getTickSize, [], 0);
+    expect(result).toEqual([]);
+  });
+
+  test.each([
+    {
+      ticksThatFit: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      resultingTicks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    },
+    { ticksThatFit: [0, 1, 2, 3, 4, 5, 6, 7, 8], resultingTicks: [0, 2, 4, 6, 8] },
+    { ticksThatFit: [0, 1, 2, 3, 4, 5, 6, 7], resultingTicks: [0, 5] },
+    { ticksThatFit: [0, 1, 2, 3, 4, 5, 6], resultingTicks: [0, 5] },
+    { ticksThatFit: [0, 1, 2, 3, 4, 5], resultingTicks: [0, 5] },
+    { ticksThatFit: [0, 1, 2, 3, 4], resultingTicks: [0] },
+    { ticksThatFit: [0, 1, 2, 3], resultingTicks: [0] },
+    { ticksThatFit: [0, 1, 2], resultingTicks: [0] },
+    { ticksThatFit: [0, 1], resultingTicks: [0] },
+    { ticksThatFit: [0], resultingTicks: [0] },
+    { ticksThatFit: [1, 2, 3, 4, 5, 6, 7, 8, 9], resultingTicks: [0] },
+  ])(
+    "Show only every n-th tick that fits, but always show the first.",
+    ({ ticksThatFit, resultingTicks }) => {
+      const ticks: Array<TickItem> = [];
+      for (let index = 0; index < 10; index++) {
+        ticks.push({
+          value: ticksThatFit.includes(index) ? 10 : 1000,
+          coordinate: index * 50,
+          index,
+          offset: 0,
+        });
+      }
+      const result = getEquidistantTicks(1, { start: 0, end: 10 * 50 }, getTickSize, ticks, 0);
+      expect(result).toEqual(resultingTicks.map((index) => ticks[index]));
+    },
+  );
+});
+
+describe("getEquidistantPreserveEndTicks", () => {
+  const getTickSize = (tick: CartesianTickItem) => {
+    return tick.value as number;
+  };
+
+  it("should return empty array if no ticks are passed", () => {
+    const result = getEquidistantPreserveEndTicks(1, { start: 0, end: 100 }, getTickSize, [], 0);
+    expect(result).toEqual([]);
+  });
+
+  it("should skip ticks to satisfy minTickGap while preserving the end tick", () => {
+    // Create 5 ticks at coordinates: 0, 10, 20, 30, 40.
+    const ticks: ReadonlyArray<CartesianTickItem> = [
+      { value: "A", coordinate: 0, offset: 0 },
+      { value: "B", coordinate: 10, offset: 0 },
+      { value: "C", coordinate: 20, offset: 0 },
+      { value: "D", coordinate: 30, offset: 0 },
+      { value: "E", coordinate: 40, offset: 0 },
+    ].map((t, i) => ({ ...t, index: i }));
+
+    // The ticks are 10px wide.
+    const getTickSizeStatic = () => 10;
+
+    // The ticks are 10px apart. We set minTickGap to 8px.
+    // This forces the algorithm to skip every other tick (Step Size 2) to avoid overlap.
+    // Since we anchor at the end (Index 4), we expect indices 4, 2, 0.
+
+    const result = getEquidistantPreserveEndTicks(
+      1,
+      { start: 0, end: 100 },
+      getTickSizeStatic,
+      ticks,
+      8, // minTickGap
+    );
+
+    // We expect indices 0, 2, 4 (Values A, C, E)
+    expect(result.map((t) => t.value)).toEqual(["A", "C", "E"]);
+  });
+});

package/test/cartesian/getTicks.spec.ts

@@ -0,0 +1,378 @@
+import { vi } from "vitest";
+import { getTicks, GetTicksInput } from "../../src/cartesian/getTicks";
+import { CartesianTickItem, TickItem } from "../../src/util/types";
+
+const EXAMPLE_INPUT: GetTicksInput = {
+  tickFormatter: undefined,
+  unit: "",
+  angle: undefined,
+  interval: "preserveStart" as const,
+  minTickGap: 5,
+  orientation: "bottom" as const,
+  tick: true,
+  ticks: [
+    { value: "10", coordinate: 50, index: 0, offset: 0 },
+    { value: "1000", coordinate: 100, index: 1, offset: 0 },
+    { value: "20", coordinate: 150, index: 2, offset: 0 },
+    { value: "40", coordinate: 200, index: 3, offset: 0 },
+    { value: "90", coordinate: 250, index: 4, offset: 0 },
+    { value: "A", coordinate: 300, index: 5, offset: 0 },
+  ],
+  viewBox: { x: 0, y: 0, width: 500, height: 500 },
+};
+
+vi.mock("../../src/util/DOMUtils", () => ({
+  // We mock string size measurement, because getStringSize else returns 0 in these tests.
+  getStringSize: vi.fn((text: string) => ({ width: text.length, height: 12 })),
+}));
+
+// These tests have been generated by merely documenting existing behaviour.
+// They will be used to verify that any refactoring does not break the existing behaviour.
+describe("getTicks", () => {
+  describe("ticks are always shown if there is space", () => {
+    test("preserveEnd", () => {
+      const input: GetTicksInput = { ...EXAMPLE_INPUT, interval: "preserveEnd" as const };
+
+      const result = getTicks(input);
+
+      expect(result).toEqual([
+        { value: "10", coordinate: 50, tickCoord: 50, isShow: true, index: 0, offset: 0 },
+        { value: "1000", coordinate: 100, tickCoord: 100, isShow: true, index: 1, offset: 0 },
+        { value: "20", coordinate: 150, tickCoord: 150, isShow: true, index: 2, offset: 0 },
+        { value: "40", coordinate: 200, tickCoord: 200, isShow: true, index: 3, offset: 0 },
+        { value: "90", coordinate: 250, tickCoord: 250, isShow: true, index: 4, offset: 0 },
+        { value: "A", coordinate: 300, tickCoord: 300, isShow: true, index: 5, offset: 0 },
+      ]);
+    });
+
+    test("preserveStart", () => {
+      const input = { ...EXAMPLE_INPUT, interval: "preserveStart" as const };
+
+      const result = getTicks(input);
+
+      expect(result).toEqual([
+        { value: "10", coordinate: 50, tickCoord: 50, isShow: true, index: 0, offset: 0 },
+        { value: "1000", coordinate: 100, tickCoord: 100, isShow: true, index: 1, offset: 0 },
+        { value: "20", coordinate: 150, tickCoord: 150, isShow: true, index: 2, offset: 0 },
+        { value: "40", coordinate: 200, tickCoord: 200, isShow: true, index: 3, offset: 0 },
+        { value: "90", coordinate: 250, tickCoord: 250, isShow: true, index: 4, offset: 0 },
+        { value: "A", coordinate: 300, tickCoord: 300, isShow: true, index: 5, offset: 0 },
+      ]);
+    });
+  });
+
+  describe("ticks are shown if there is space when displayed at an angle", () => {
+    test("preserveEnd", () => {
+      const ticks: ReadonlyArray<TickItem> = [
+        { value: "100_000_000_000_000", coordinate: 50, index: 0, offset: 0 },
+        { value: "200_000_000_000_000", coordinate: 70, index: 1, offset: 0 },
+        { value: "300_000_000_000_000", coordinate: 90, index: 2, offset: 0 },
+        { value: "400_000_000_000_000", coordinate: 110, index: 3, offset: 0 },
+        { value: "500_000_000_000_000", coordinate: 130, index: 4, offset: 0 },
+        { value: "600_000_000_000_000", coordinate: 150, index: 5, offset: 0 },
+      ];
+      const input = { ...EXAMPLE_INPUT, ticks, interval: "preserveEnd" as const };
+
+      // Only 3 ticks are shown
+      expect(getTicks(input)).toEqual([
+        {
+          value: "200_000_000_000_000",
+          coordinate: 70,
+          tickCoord: 70,
+          isShow: true,
+          index: 1,
+          offset: 0,
+        },
+        {
+          value: "400_000_000_000_000",
+          coordinate: 110,
+          tickCoord: 110,
+          isShow: true,
+          index: 3,
+          offset: 0,
+        },
+        {
+          value: "600_000_000_000_000",
+          coordinate: 150,
+          tickCoord: 150,
+          isShow: true,
+          index: 5,
+          offset: 0,
+        },
+      ]);
+
+      const angledInput = { ...input, angle: 60 };
+
+      // But at an angle we can fit all ticks
+      expect(getTicks(angledInput)).toEqual([
+        {
+          value: "100_000_000_000_000",
+          coordinate: 50,
+          tickCoord: 50,
+          isShow: true,
+          index: 0,
+          offset: 0,
+        },
+        {
+          value: "200_000_000_000_000",
+          coordinate: 70,
+          tickCoord: 70,
+          isShow: true,
+          index: 1,
+          offset: 0,
+        },
+        {
+          value: "300_000_000_000_000",
+          coordinate: 90,
+          tickCoord: 90,
+          isShow: true,
+          index: 2,
+          offset: 0,
+        },
+        {
+          value: "400_000_000_000_000",
+          coordinate: 110,
+          tickCoord: 110,
+          isShow: true,
+          index: 3,
+          offset: 0,
+        },
+        {
+          value: "500_000_000_000_000",
+          coordinate: 130,
+          tickCoord: 130,
+          isShow: true,
+          index: 4,
+          offset: 0,
+        },
+        {
+          value: "600_000_000_000_000",
+          coordinate: 150,
+          tickCoord: 150,
+          isShow: true,
+          index: 5,
+          offset: 0,
+        },
+      ]);
+    });
+
+    test("preserveStart", () => {
+      const ticks: ReadonlyArray<TickItem> = [
+        { value: "100_000_000_000_000", coordinate: 50, index: 0, offset: 0 },
+        { value: "200_000_000_000_000", coordinate: 70, index: 1, offset: 0 },
+        { value: "300_000_000_000_000", coordinate: 90, index: 2, offset: 0 },
+        { value: "400_000_000_000_000", coordinate: 110, index: 3, offset: 0 },
+        { value: "500_000_000_000_000", coordinate: 130, index: 4, offset: 0 },
+        { value: "600_000_000_000_000", coordinate: 150, index: 5, offset: 0 },
+      ];
+      const input = { ...EXAMPLE_INPUT, ticks, interval: "preserveStart" as const };
+
+      // Only 3 ticks are shown
+      expect(getTicks(input)).toEqual([
+        {
+          value: "100_000_000_000_000",
+          coordinate: 50,
+          tickCoord: 50,
+          isShow: true,
+          index: 0,
+          offset: 0,
+        },
+        {
+          value: "300_000_000_000_000",
+          coordinate: 90,
+          tickCoord: 90,
+          isShow: true,
+          index: 2,
+          offset: 0,
+        },
+        {
+          value: "500_000_000_000_000",
+          coordinate: 130,
+          tickCoord: 130,
+          isShow: true,
+          index: 4,
+          offset: 0,
+        },
+      ]);
+
+      const angledInput = { ...input, angle: 60 };
+
+      // But at an angle we can fit all ticks
+      expect(getTicks(angledInput)).toEqual([
+        {
+          value: "100_000_000_000_000",
+          coordinate: 50,
+          tickCoord: 50,
+          isShow: true,
+          index: 0,
+          offset: 0,
+        },
+        {
+          value: "200_000_000_000_000",
+          coordinate: 70,
+          tickCoord: 70,
+          isShow: true,
+          index: 1,
+          offset: 0,
+        },
+        {
+          value: "300_000_000_000_000",
+          coordinate: 90,
+          tickCoord: 90,
+          isShow: true,
+          index: 2,
+          offset: 0,
+        },
+        {
+          value: "400_000_000_000_000",
+          coordinate: 110,
+          tickCoord: 110,
+          isShow: true,
+          index: 3,
+          offset: 0,
+        },
+        {
+          value: "500_000_000_000_000",
+          coordinate: 130,
+          tickCoord: 130,
+          isShow: true,
+          index: 4,
+          offset: 0,
+        },
+        {
+          value: "600_000_000_000_000",
+          coordinate: 150,
+          tickCoord: 150,
+          isShow: true,
+          index: 5,
+          offset: 0,
+        },
+      ]);
+    });
+  });
+
+  describe("The interval is respected", () => {
+    const viewBoxWithSmallWidth = { x: 0, y: 0, width: 30, height: 500 };
+
+    test.each([
+      [
+        (EXAMPLE_INPUT.ticks?.length ?? 0) + 1,
+        [{ coordinate: 50, value: "10", index: 0, offset: 0 }],
+      ],
+      [
+        2,
+        [
+          { coordinate: 50, value: "10", index: 0, offset: 0 },
+          { coordinate: 200, value: "40", index: 3, offset: 0 },
+        ],
+      ],
+      [
+        1,
+        [
+          { coordinate: 50, value: "10", index: 0, offset: 0 },
+          { coordinate: 150, value: "20", index: 2, offset: 0 },
+          { coordinate: 250, value: "90", index: 4, offset: 0 },
+        ],
+      ],
+      [
+        0,
+        [
+          { coordinate: 50, value: "10", index: 0, offset: 0 },
+          { coordinate: 100, value: "1000", index: 1, offset: 0 },
+          { coordinate: 150, value: "20", index: 2, offset: 0 },
+          { coordinate: 200, value: "40", index: 3, offset: 0 },
+          { coordinate: 250, value: "90", index: 4, offset: 0 },
+          { coordinate: 300, value: "A", index: 5, offset: 0 },
+        ],
+      ],
+      [
+        "preserveStartEnd" as const,
+        [
+          {
+            coordinate: 300,
+            isShow: true,
+            tickCoord: 29.5,
+            value: "A",
+            index: 5,
+            offset: 0,
+          },
+        ],
+      ],
+      ["preserveStart" as const, []],
+      [
+        "preserveEnd" as const,
+        [
+          {
+            coordinate: 300,
+            isShow: true,
+            tickCoord: 29.5,
+            value: "A",
+            index: 5,
+            offset: 0,
+          },
+        ],
+      ],
+      ["equidistantPreserveStart" as const, [{ coordinate: 50, value: "10", index: 0, offset: 0 }]],
+      [-1, []],
+      [
+        undefined,
+        [{ coordinate: 300, isShow: true, tickCoord: 29.5, value: "A", index: 5, offset: 0 }],
+      ],
+    ])(`interval %s works`, (interval, expectedResult) => {
+      const input = {
+        ...EXAMPLE_INPUT,
+        interval,
+        viewBox: viewBoxWithSmallWidth,
+      };
+
+      const result = getTicks(input);
+
+      expect(result).toEqual(expectedResult);
+    });
+  });
+
+  describe("Equidistant ticks are shown depending on label width and space between ticks", () => {
+    test.each([
+      // With enough space, all ticks are shown.
+      [["11111111111111", "2", "3", "4"], 20, ["11111111111111", "2", "3", "4"]],
+      [["1", "22222222222222", "3", "4"], 20, ["1", "22222222222222", "3", "4"]],
+      [["1", "2", "33333333333333", "4"], 20, ["1", "2", "33333333333333", "4"]],
+      [["1", "2", "3", "44444444444444"], 20, ["1", "2", "3", "44444444444444"]],
+
+      // If not enough space is available we show only every nTH.
+      [["11111111111111", "2", "3", "4"], 5, ["11111111111111", "4"]], // every 3rd
+      [["1", "22222222222222", "3", "4"], 5, ["1", "3"]], // every 2nd
+      [["1", "2", "33333333333333", "4"], 5, ["1", "4"]], // every 3rd
+      [["1", "2", "3", "44444444444444"], 5, ["1", "3"]], // every 2nd
+
+      // If not enough space is available at all, we only show the first tick.
+      [["11111111111111", "2", "3", "4"], 1, ["11111111111111"]],
+      [["1", "22222222222222", "3", "4"], 1, ["1"]],
+      [["1", "2", "33333333333333", "4"], 1, ["1"]],
+      [["1", "2", "3", "44444444444444"], 1, ["1"]],
+    ])(
+      `equidistantPreserveStart spaces nicely for %s and tick step of %s`,
+      (tickValues, tickWidthStep, expectedResult) => {
+        const ticks: ReadonlyArray<TickItem> = tickValues.map(
+          (value, index): TickItem => ({
+            value,
+            coordinate: tickWidthStep * (index + 1),
+            index,
+            offset: 0,
+          }),
+        );
+        const input = {
+          ...EXAMPLE_INPUT,
+          interval: "equidistantPreserveStart" as const,
+          ticks,
+        };
+
+        const resultingTickValues = (getTicks(input) as CartesianTickItem[]).map(
+          (tick) => tick.value,
+        );
+
+        expect(resultingTickValues).toEqual(expectedResult);
+      },
+    );
+  });
+});

package/test/cartesian/miscFeatureGaps.spec.tsx

@@ -0,0 +1,89 @@
+// Solid-recharts spec for smaller audit gaps: PolarGrid background fill,
+// CartesianGrid object-form horizontal/vertical, and chart-level role/tabIndex
+// passthrough onto the root <svg>.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  PolarGrid,
+  Radar,
+  RadarChart,
+  XAxis,
+  YAxis,
+} from "../../src";
+import { render } from "@solidjs/testing-library";
+
+const data = [
+  { name: "a", uv: 100 },
+  { name: "b", uv: 200 },
+  { name: "c", uv: 300 },
+];
+const radarData = [
+  { subject: "Math", v: 120 },
+  { subject: "Eng", v: 98 },
+  { subject: "Hist", v: 86 },
+];
+
+describe("PolarGrid background fill", () => {
+  it("renders a filled outer ring when fill is set", () => {
+    const { container } = render(() => (
+      <RadarChart width={300} height={300} data={radarData}>
+        <PolarGrid gridType="circle" fill="#abcdef" fillOpacity={0.3} />
+        <Radar dataKey="v" />
+      </RadarChart>
+    ));
+    flush();
+    const filled = Array.from(
+      container.querySelectorAll(".recharts-polar-grid-concentric circle"),
+    ).filter((c) => c.getAttribute("fill") === "#abcdef");
+    expect(filled.length).toBe(1);
+    expect(filled[0]?.getAttribute("fill-opacity")).toBe("0.3");
+  });
+
+  it("renders no filled ring by default", () => {
+    const { container } = render(() => (
+      <RadarChart width={300} height={300} data={radarData}>
+        <PolarGrid gridType="circle" />
+        <Radar dataKey="v" />
+      </RadarChart>
+    ));
+    flush();
+    const filled = Array.from(
+      container.querySelectorAll(".recharts-polar-grid-concentric circle"),
+    ).filter((c) => c.getAttribute("fill") !== "none");
+    expect(filled.length).toBe(0);
+  });
+});
+
+describe("CartesianGrid object-form horizontal/vertical", () => {
+  it("spreads object-form svg props onto the grid lines", () => {
+    const { container } = render(() => (
+      <LineChart width={300} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <CartesianGrid horizontal={{ strokeWidth: 4 }} vertical={false} />
+        <Line dataKey="uv" />
+      </LineChart>
+    ));
+    flush();
+    const hLines = container.querySelectorAll(".recharts-cartesian-grid-horizontal line");
+    expect(hLines.length).toBeGreaterThan(0);
+    hLines.forEach((l) => expect(l.getAttribute("stroke-width")).toBe("4"));
+  });
+});
+
+describe("chart role / tabIndex passthrough", () => {
+  it("applies role and tabIndex to the root svg", () => {
+    const { container } = render(() => (
+      <LineChart width={300} height={300} data={data} role="img" tabIndex={5}>
+        <Line dataKey="uv" />
+      </LineChart>
+    ));
+    flush();
+    const svg = container.querySelector("svg.recharts-surface");
+    expect(svg?.getAttribute("role")).toBe("img");
+    expect(svg?.getAttribute("tabindex")).toBe("5");
+  });
+});