solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/cartesian/XAxis/XAxis.padding.spec.tsx

@@ -0,0 +1,758 @@
+import { describe, expect, it, vi } from "vitest";
+import { createEffect } from "solid-js";
+import { useAppSelector } from "../../../src/state/hooks";
+import {
+  selectAxisRangeWithReverse,
+  selectTicksOfGraphicalItem,
+} from "../../../src/state/selectors/axisSelectors";
+import { selectBarBandSize } from "../../../src/state/selectors/barSelectors";
+import { selectChartOffsetInternal } from "../../../src/state/selectors/selectChartOffsetInternal";
+import { Bar, BarChart, XAxis, YAxis } from "../../../src";
+import { render } from "@solidjs/testing-library";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
+import { expectBars } from "../../helper/expectBars";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+const data = [
+  { x: 90, y: 90, z: 90 },
+  { x: 100, y: 200, z: 200 },
+  { x: 120, y: 100, z: 260 },
+  { x: 170, y: 300, z: 400 },
+  { x: 140, y: 250, z: 280 },
+  { x: 150, y: 400, z: 500 },
+  { x: 110, y: 280, z: 200 },
+];
+
+describe("XAxis padding", () => {
+  it("Render Bars with gap", () => {
+    const axisDomainSpy = vi.fn();
+    const yAxisRangeSpy = vi.fn();
+    const barTicksSpy = vi.fn();
+    const barBandSizeSpy = vi.fn();
+    const offsetSpy = vi.fn();
+
+    const Comp = (): null => {
+      const yRange = useAppSelector((state) =>
+        selectAxisRangeWithReverse(state, "yAxis", 0, false),
+      );
+      const barTicks = useAppSelector((state) =>
+        selectTicksOfGraphicalItem(state, "xAxis", 0, false),
+      );
+      const bandSize = useAppSelector((state) => selectBarBandSize(state, "my-bar-id", false));
+      const offset = useAppSelector(selectChartOffsetInternal);
+      createEffect(
+        () => yRange(),
+        (v) => yAxisRangeSpy(v),
+      );
+      createEffect(
+        () => barTicks(),
+        (v) => barTicksSpy(v),
+      );
+      createEffect(
+        () => bandSize(),
+        (v) => barBandSizeSpy(v),
+      );
+      createEffect(
+        () => offset(),
+        (v) => offsetSpy(v),
+      );
+      return null;
+    };
+
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <Bar dataKey="y" isAnimationActive={false} id="my-bar-id" />
+        <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} padding="gap" />
+        <YAxis dataKey="y" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+        <Comp />
+      </BarChart>
+    ));
+
+    expect(barBandSizeSpy).toHaveBeenLastCalledWith(25.15625);
+
+    expect(offsetSpy).toHaveBeenLastCalledWith({
+      brushBottom: 35,
+      top: 5,
+      bottom: 35,
+      left: 65,
+      right: 5,
+      width: 230,
+      height: 260,
+    });
+
+    expect(yAxisRangeSpy).toHaveBeenLastCalledWith([265, 5]);
+
+    expect(barTicksSpy).toHaveBeenLastCalledWith([
+      {
+        coordinate: 79.375,
+        index: 0,
+        offset: 0,
+        value: 90,
+      },
+      {
+        coordinate: 104.53125,
+        index: 1,
+        offset: 0,
+        value: 100,
+      },
+      {
+        coordinate: 154.84375,
+        index: 2,
+        offset: 0,
+        value: 120,
+      },
+      {
+        coordinate: 280.625,
+        index: 3,
+        offset: 0,
+        value: 170,
+      },
+      {
+        coordinate: 205.15625,
+        index: 4,
+        offset: 0,
+        value: 140,
+      },
+      {
+        coordinate: 230.3125,
+        index: 5,
+        offset: 0,
+        value: 150,
+      },
+      {
+        coordinate: 129.6875,
+        index: 6,
+        offset: 0,
+        value: 110,
+      },
+    ]);
+
+    expectBars(container, [
+      {
+        d: "M 69.3125,206.5 h 20 v 58.5 h -20 Z",
+        height: "58.5",
+        radius: "0",
+        width: "20",
+        x: "69.3125",
+        y: "206.5",
+      },
+      {
+        d: "M 94.4688,135 h 20 v 130 h -20 Z",
+        height: "130",
+        radius: "0",
+        width: "20",
+        x: "94.4688",
+        y: "135",
+      },
+      {
+        d: "M 144.7813,200 h 20 v 65 h -20 Z",
+        height: "65",
+        radius: "0",
+        width: "20",
+        x: "144.7813",
+        y: "200",
+      },
+      {
+        d: "M 270.5625,70 h 20 v 195 h -20 Z",
+        height: "195",
+        radius: "0",
+        width: "20",
+        x: "270.5625",
+        y: "70",
+      },
+      {
+        d: "M 195.0938,102.5 h 20 v 162.5 h -20 Z",
+        height: "162.5",
+        radius: "0",
+        width: "20",
+        x: "195.0938",
+        y: "102.5",
+      },
+      {
+        d: "M 220.25,5 h 20 v 260 h -20 Z",
+        height: "260",
+        radius: "0",
+        width: "20",
+        x: "220.25",
+        y: "5",
+      },
+      {
+        d: "M 119.625,83 h 20 v 182 h -20 Z",
+        height: "182",
+        radius: "0",
+        width: "20",
+        x: "119.625",
+        y: "83",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 170]);
+    expectXAxisTicks(container, [
+      {
+        textContent: "90",
+        x: "79.375",
+        y: "273",
+      },
+      {
+        textContent: "110",
+        x: "129.6875",
+        y: "273",
+      },
+      {
+        textContent: "130",
+        x: "180",
+        y: "273",
+      },
+      {
+        textContent: "150",
+        x: "230.3125",
+        y: "273",
+      },
+      {
+        textContent: "170",
+        x: "280.625",
+        y: "273",
+      },
+    ]);
+  });
+
+  it("Render Bars with gap in 10000 width chart", () => {
+    const axisDomainSpy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={10000} height={300} data={data}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} padding="gap" />
+        <YAxis dataKey="y" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+      </BarChart>
+    ));
+
+    expectBars(container, [
+      {
+        x: "251.1875",
+        y: "206.5",
+        width: "869",
+        height: "58.5",
+        radius: "0",
+        d: "M 251.1875,206.5 h 869 v 58.5 h -869 Z",
+      },
+      {
+        x: "1337.2813",
+        y: "135",
+        width: "869",
+        height: "130",
+        radius: "0",
+        d: "M 1337.2813,135 h 869 v 130 h -869 Z",
+      },
+      {
+        x: "3509.4688",
+        y: "200",
+        width: "869",
+        height: "65",
+        radius: "0",
+        d: "M 3509.4688,200 h 869 v 65 h -869 Z",
+      },
+      {
+        x: "8939.9375",
+        y: "70",
+        width: "869",
+        height: "195",
+        radius: "0",
+        d: "M 8939.9375,70 h 869 v 195 h -869 Z",
+      },
+      {
+        x: "5681.6563",
+        y: "102.5",
+        width: "869",
+        height: "162.5",
+        radius: "0",
+        d: "M 5681.6563,102.5 h 869 v 162.5 h -869 Z",
+      },
+      {
+        x: "6767.75",
+        y: "5",
+        width: "869",
+        height: "260",
+        radius: "0",
+        d: "M 6767.75,5 h 869 v 260 h -869 Z",
+      },
+      {
+        x: "2423.375",
+        y: "83",
+        width: "869",
+        height: "182",
+        radius: "0",
+        d: "M 2423.375,83 h 869 v 182 h -869 Z",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 170]);
+    expectXAxisTicks(container, [
+      {
+        textContent: "90",
+        x: "685.625",
+        y: "273",
+      },
+      {
+        textContent: "110",
+        x: "2857.8125",
+        y: "273",
+      },
+      {
+        textContent: "130",
+        x: "5030",
+        y: "273",
+      },
+      {
+        textContent: "150",
+        x: "7202.1875",
+        y: "273",
+      },
+      {
+        textContent: "170",
+        x: "9374.375",
+        y: "273",
+      },
+    ]);
+  });
+
+  it("Render Bars with no gap", () => {
+    const axisDomainSpy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} padding="no-gap" />
+        <YAxis dataKey="y" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+      </BarChart>
+    ));
+
+    expectBars(container, [
+      {
+        x: "65.9919",
+        y: "206.5",
+        width: "21",
+        height: "58.5",
+        radius: "0",
+        d: "M 65.9919,206.5 h 21 v 58.5 h -21 Z",
+      },
+      {
+        x: "91.9028",
+        y: "135",
+        width: "21",
+        height: "130",
+        radius: "0",
+        d: "M 91.9028,135 h 21 v 130 h -21 Z",
+      },
+      {
+        x: "143.7247",
+        y: "200",
+        width: "21",
+        height: "65",
+        radius: "0",
+        d: "M 143.7247,200 h 21 v 65 h -21 Z",
+      },
+      {
+        x: "273.2794",
+        y: "70",
+        width: "21",
+        height: "195",
+        radius: "0",
+        d: "M 273.2794,70 h 21 v 195 h -21 Z",
+      },
+      {
+        x: "195.5466",
+        y: "102.5",
+        width: "21",
+        height: "162.5",
+        radius: "0",
+        d: "M 195.5466,102.5 h 21 v 162.5 h -21 Z",
+      },
+      {
+        x: "221.4575",
+        y: "5",
+        width: "21",
+        height: "260",
+        radius: "0",
+        d: "M 221.4575,5 h 21 v 260 h -21 Z",
+      },
+      {
+        x: "117.8138",
+        y: "83",
+        width: "21",
+        height: "182",
+        radius: "0",
+        d: "M 117.8138,83 h 21 v 182 h -21 Z",
+      },
+    ]);
+    expectXAxisTicks(container, [
+      {
+        textContent: "90",
+        x: "76.35625",
+        y: "273",
+      },
+      {
+        textContent: "110",
+        x: "128.17812500000002",
+        y: "273",
+      },
+      {
+        textContent: "130",
+        x: "180",
+        y: "273",
+      },
+      {
+        textContent: "150",
+        x: "231.82187500000003",
+        y: "273",
+      },
+      {
+        textContent: "170",
+        x: "283.64375",
+        y: "273",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 170]);
+  });
+
+  it("Render Bars with custom gap", () => {
+    const axisDomainSpy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <XAxis
+          dataKey="x"
+          type="number"
+          domain={["dataMin", "dataMax"]}
+          padding={{ left: 11, right: 17 }}
+        />
+        <YAxis dataKey="y" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+      </BarChart>
+    ));
+
+    expectBars(container, [
+      {
+        d: "M 65.9,206.5 h 20 v 58.5 h -20 Z",
+        height: "58.5",
+        radius: "0",
+        width: "20",
+        x: "65.9",
+        y: "206.5",
+      },
+      {
+        d: "M 91.15,135 h 20 v 130 h -20 Z",
+        height: "130",
+        radius: "0",
+        width: "20",
+        x: "91.15",
+        y: "135",
+      },
+      {
+        d: "M 141.65,200 h 20 v 65 h -20 Z",
+        height: "65",
+        radius: "0",
+        width: "20",
+        x: "141.65",
+        y: "200",
+      },
+      {
+        d: "M 267.9,70 h 20 v 195 h -20 Z",
+        height: "195",
+        radius: "0",
+        width: "20",
+        x: "267.9",
+        y: "70",
+      },
+      {
+        d: "M 192.15,102.5 h 20 v 162.5 h -20 Z",
+        height: "162.5",
+        radius: "0",
+        width: "20",
+        x: "192.15",
+        y: "102.5",
+      },
+      {
+        d: "M 217.4,5 h 20 v 260 h -20 Z",
+        height: "260",
+        radius: "0",
+        width: "20",
+        x: "217.4",
+        y: "5",
+      },
+      {
+        d: "M 116.4,83 h 20 v 182 h -20 Z",
+        height: "182",
+        radius: "0",
+        width: "20",
+        x: "116.4",
+        y: "83",
+      },
+    ]);
+    expectXAxisTicks(container, [
+      {
+        textContent: "90",
+        x: "76",
+        y: "273",
+      },
+      {
+        textContent: "110",
+        x: "126.5",
+        y: "273",
+      },
+      {
+        textContent: "130",
+        x: "177",
+        y: "273",
+      },
+      {
+        textContent: "150",
+        x: "227.5",
+        y: "273",
+      },
+      {
+        textContent: "170",
+        x: "278",
+        y: "273",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 170]);
+  });
+
+  it("Render Bars with padding on the left", () => {
+    const axisDomainSpy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} padding={{ left: 19 }} />
+        <YAxis dataKey="y" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+      </BarChart>
+    ));
+
+    expectBars(container, [
+      {
+        d: "M 73.45,206.5 h 21 v 58.5 h -21 Z",
+        height: "58.5",
+        radius: "0",
+        width: "21",
+        x: "73.45",
+        y: "206.5",
+      },
+      {
+        d: "M 99.825,135 h 21 v 130 h -21 Z",
+        height: "130",
+        radius: "0",
+        width: "21",
+        x: "99.825",
+        y: "135",
+      },
+      {
+        d: "M 152.575,200 h 21 v 65 h -21 Z",
+        height: "65",
+        radius: "0",
+        width: "21",
+        x: "152.575",
+        y: "200",
+      },
+      {
+        d: "M 284.45,70 h 21 v 195 h -21 Z",
+        height: "195",
+        radius: "0",
+        width: "21",
+        x: "284.45",
+        y: "70",
+      },
+      {
+        d: "M 205.325,102.5 h 21 v 162.5 h -21 Z",
+        height: "162.5",
+        radius: "0",
+        width: "21",
+        x: "205.325",
+        y: "102.5",
+      },
+      {
+        d: "M 231.7,5 h 21 v 260 h -21 Z",
+        height: "260",
+        radius: "0",
+        width: "21",
+        x: "231.7",
+        y: "5",
+      },
+      {
+        d: "M 126.2,83 h 21 v 182 h -21 Z",
+        height: "182",
+        radius: "0",
+        width: "21",
+        x: "126.2",
+        y: "83",
+      },
+    ]);
+    expectXAxisTicks(container, [
+      {
+        textContent: "90",
+        x: "84",
+        y: "273",
+      },
+      {
+        textContent: "110",
+        x: "136.75",
+        y: "273",
+      },
+      {
+        textContent: "130",
+        x: "189.5",
+        y: "273",
+      },
+      {
+        textContent: "150",
+        x: "242.25",
+        y: "273",
+      },
+      {
+        textContent: "170",
+        x: "295",
+        y: "273",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 170]);
+  });
+
+  it("Render Bars with padding on the right", () => {
+    const axisDomainSpy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} padding={{ right: 23 }} />
+        <YAxis dataKey="y" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+      </BarChart>
+    ));
+
+    expectBars(container, [
+      {
+        x: "54.65",
+        y: "206.5",
+        width: "21",
+        height: "58.5",
+        radius: "0",
+        d: "M 54.65,206.5 h 21 v 58.5 h -21 Z",
+      },
+      {
+        x: "80.525",
+        y: "135",
+        width: "21",
+        height: "130",
+        radius: "0",
+        d: "M 80.525,135 h 21 v 130 h -21 Z",
+      },
+      {
+        x: "132.275",
+        y: "200",
+        width: "21",
+        height: "65",
+        radius: "0",
+        d: "M 132.275,200 h 21 v 65 h -21 Z",
+      },
+      {
+        x: "261.65",
+        y: "70",
+        width: "21",
+        height: "195",
+        radius: "0",
+        d: "M 261.65,70 h 21 v 195 h -21 Z",
+      },
+      {
+        x: "184.025",
+        y: "102.5",
+        width: "21",
+        height: "162.5",
+        radius: "0",
+        d: "M 184.025,102.5 h 21 v 162.5 h -21 Z",
+      },
+      {
+        x: "209.9",
+        y: "5",
+        width: "21",
+        height: "260",
+        radius: "0",
+        d: "M 209.9,5 h 21 v 260 h -21 Z",
+      },
+      {
+        x: "106.4",
+        y: "83",
+        width: "21",
+        height: "182",
+        radius: "0",
+        d: "M 106.4,83 h 21 v 182 h -21 Z",
+      },
+    ]);
+    expectXAxisTicks(container, [
+      {
+        textContent: "90",
+        x: "65",
+        y: "273",
+      },
+      {
+        textContent: "110",
+        x: "116.75",
+        y: "273",
+      },
+      {
+        textContent: "130",
+        x: "168.5",
+        y: "273",
+      },
+      {
+        textContent: "150",
+        x: "220.25",
+        y: "273",
+      },
+      {
+        textContent: "170",
+        x: "272",
+        y: "273",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 170]);
+  });
+
+  describe.each(["gap", "no-gap", { left: 3, right: 5 }] as const)("padding: %s", (padding) => {
+    /* The tickCount is only a suggestion; if the domain is too small, it will render fewer ticks than requested but will try to keep them nice */
+    it.each([
+      { providedTickCount: 3, expectedTickCount: 3 },
+      { providedTickCount: 5, expectedTickCount: 5 },
+      { providedTickCount: 7, expectedTickCount: 7 },
+      { providedTickCount: 11, expectedTickCount: 11 },
+      { providedTickCount: 13, expectedTickCount: 13 },
+      { providedTickCount: 17, expectedTickCount: 17 },
+      { providedTickCount: 19, expectedTickCount: 17 },
+      { providedTickCount: 29, expectedTickCount: 28 },
+    ])(
+      "renders $expectedTickCount ticks when tickCount=$providedTickCount",
+      ({ providedTickCount, expectedTickCount }) => {
+        const spy = vi.fn();
+        const { container } = render(() => (
+          <BarChart width={100000} height={300} data={data}>
+            <Bar dataKey="y" isAnimationActive={false} />
+            <XAxis
+              dataKey="x"
+              type="number"
+              domain={["dataMin", "dataMax"]}
+              padding={padding}
+              tickCount={providedTickCount}
+            />
+            <YAxis dataKey="y" />
+            <ExpectAxisDomain assert={spy} axisType="xAxis" />
+          </BarChart>
+        ));
+
+        expectLastCalledWith(spy, [90, 170]);
+        const allTicks = container.querySelectorAll(
+          ".recharts-xAxis .recharts-cartesian-axis-tick-value",
+        );
+        expect(allTicks).toHaveLength(expectedTickCount);
+      },
+    );
+  });
+});