solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/getEquidistantTicks.spec.ts

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

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

@@ -1,89 +0,0 @@
-// 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");
-  });
-});