solid-recharts 0.1.0

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

@@ -0,0 +1,336 @@
+import { describe, expect, it, vi } from "vitest";
+import { createEffect } from "solid-js";
+import { useAppSelector } from "../../../src/state/hooks";
+import { Bar, BarChart, XAxis, YAxis } from "../../../src";
+import { render } from "../../helper/render";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
+import { expectBars } from "../../helper/expectBars";
+import { selectChartDataWithIndexes } from "../../../src/state/selectors/dataSelectors";
+import { selectTicksOfGraphicalItem } from "../../../src/state/selectors/axisSelectors";
+import {
+  selectAllBarPositions,
+  selectBarBandSize,
+  selectBarCartesianAxisSize,
+  selectBarSizeList,
+} from "../../../src/state/selectors/barSelectors";
+import { assertNotNull } from "../../helper/assertNotNull";
+
+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 barSize", () => {
+  it("Render Bars with gap when there are duplicate values in the data", () => {
+    const axisDomainSpy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <Bar dataKey="x" isAnimationActive={false} />
+        <XAxis dataKey="y" type="number" domain={["dataMin", "dataMax"]} padding="gap" />
+        <YAxis dataKey="x" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+      </BarChart>
+    ));
+
+    expectBars(container, [
+      {
+        x: "65.8377",
+        y: "135",
+        width: "6",
+        height: "130",
+        radius: "0",
+        d: "M 65.8377,135 h 6 v 130 h -6 Z",
+      },
+      {
+        x: "144.8179",
+        y: "120.5556",
+        width: "6",
+        height: "144.4444",
+        radius: "0",
+        d: "M 144.8179,120.5556 h 6 v 144.4444 h -6 Z",
+      },
+      {
+        x: "73.0177",
+        y: "91.6667",
+        width: "6",
+        height: "173.3333",
+        radius: "0",
+        d: "M 73.0177,91.6667 h 6 v 173.3333 h -6 Z",
+      },
+      {
+        x: "216.6181",
+        y: "19.4444",
+        width: "6",
+        height: "245.5556",
+        radius: "0",
+        d: "M 216.6181,19.4444 h 6 v 245.5556 h -6 Z",
+      },
+      {
+        x: "180.718",
+        y: "62.7778",
+        width: "6",
+        height: "202.2222",
+        radius: "0",
+        d: "M 180.718,62.7778 h 6 v 202.2222 h -6 Z",
+      },
+      {
+        x: "288.4183",
+        y: "48.3333",
+        width: "6",
+        height: "216.6667",
+        radius: "0",
+        d: "M 288.4183,48.3333 h 6 v 216.6667 h -6 Z",
+      },
+      {
+        x: "202.2581",
+        y: "106.1111",
+        width: "6",
+        height: "158.8889",
+        radius: "0",
+        d: "M 202.2581,106.1111 h 6 v 158.8889 h -6 Z",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 400]);
+    expectXAxisTicks(container, [
+      { textContent: "90", x: "68.70967741935483", y: "273" },
+      { textContent: "170", x: "126.14984391259105", y: "273" },
+      { textContent: "250", x: "183.59001040582726", y: "273" },
+      { textContent: "330", x: "241.0301768990635", y: "273" },
+      { textContent: "400", x: "291.2903225806452", y: "273" },
+    ]);
+  });
+
+  it("Render Bars for a single data point with barSize=50%", () => {
+    const axisDomainSpy = vi.fn();
+    const chartDataSpy = vi.fn();
+    const yAxisTicksSpy = vi.fn();
+    const barBandSizeSpy = vi.fn();
+    const barPositionsSpy = vi.fn();
+    const barSizeListSpy = vi.fn();
+    const totalAxisSizeSpy = vi.fn();
+
+    const Comp = (): null => {
+      const chartData = useAppSelector(selectChartDataWithIndexes);
+      const yTicks = useAppSelector((state) =>
+        selectTicksOfGraphicalItem(state, "yAxis", 0, false),
+      );
+      const bandSize = useAppSelector((state) => selectBarBandSize(state, "my-bar-id", false));
+      const positions = useAppSelector((state) => selectAllBarPositions(state, "my-bar-id", false));
+      const sizeList = useAppSelector((state) => selectBarSizeList(state, "my-bar-id", false));
+      const totalAxisSize = useAppSelector((state) =>
+        selectBarCartesianAxisSize(state, "my-bar-id"),
+      );
+      createEffect(
+        () => chartData(),
+        (v) => chartDataSpy(v),
+      );
+      createEffect(
+        () => yTicks(),
+        (v) => yAxisTicksSpy(v),
+      );
+      createEffect(
+        () => bandSize(),
+        (v) => barBandSizeSpy(v),
+      );
+      createEffect(
+        () => positions(),
+        (v) => barPositionsSpy(v),
+      );
+      createEffect(
+        () => sizeList(),
+        (v) => barSizeListSpy(v),
+      );
+      createEffect(
+        () => totalAxisSize(),
+        (v) => totalAxisSizeSpy(v),
+      );
+      return null;
+    };
+
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data.slice(0, 1)} barSize="50%">
+        <Bar dataKey="y" isAnimationActive={false} id="my-bar-id" />
+        <XAxis dataKey="x" type="number" domain={[50, 150]} />
+        <YAxis dataKey="y" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+        <Comp />
+      </BarChart>
+    ));
+
+    expect(totalAxisSizeSpy).toHaveBeenLastCalledWith(230);
+
+    expect(barSizeListSpy).toHaveBeenLastCalledWith([
+      {
+        barSize: 115,
+        dataKeys: ["y"],
+        stackId: undefined,
+      },
+    ]);
+
+    expect(yAxisTicksSpy).toHaveBeenLastCalledWith([
+      {
+        index: 0,
+        coordinate: 265,
+        offset: 0,
+        value: 0,
+      },
+      {
+        index: 1,
+        coordinate: 213,
+        offset: 0,
+        value: 20,
+      },
+      {
+        index: 2,
+        coordinate: 161,
+        offset: 0,
+        value: 40,
+      },
+      {
+        index: 3,
+        coordinate: 109,
+        offset: 0,
+        value: 60,
+      },
+      {
+        index: 4,
+        coordinate: 56.999999999999986,
+        offset: 0,
+        value: 80,
+      },
+      {
+        index: 5,
+        coordinate: 5,
+        offset: 0,
+        value: 100,
+      },
+    ]);
+
+    expect(barBandSizeSpy).toHaveBeenLastCalledWith(0);
+
+    expect(barPositionsSpy).toHaveBeenLastCalledWith([
+      {
+        dataKeys: ["y"],
+        position: {
+          offset: -57,
+          size: 115,
+        },
+        stackId: undefined,
+      },
+    ]);
+
+    expect(chartDataSpy).toHaveBeenLastCalledWith({
+      chartData: [
+        {
+          x: 90,
+          y: 90,
+          z: 90,
+        },
+      ],
+      computedData: undefined,
+      dataEndIndex: 0,
+      dataStartIndex: 0,
+    });
+
+    expectBars(container, [
+      {
+        d: "M 100,31 h 115 v 234 h -115 Z",
+        height: "234",
+        radius: "0",
+        width: "115",
+        x: "100",
+        y: "31",
+      },
+    ]);
+    expectXAxisTicks(container, [
+      {
+        textContent: "50",
+        x: "65",
+        y: "273",
+      },
+      {
+        textContent: "75",
+        x: "122.5",
+        y: "273",
+      },
+      {
+        textContent: "100",
+        x: "180",
+        y: "273",
+      },
+      {
+        textContent: "125",
+        x: "237.5",
+        y: "273",
+      },
+      {
+        textContent: "150",
+        x: "295",
+        y: "273",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([50, 150]);
+  });
+
+  it("Render Bars for a single data point with barSize=20% and no-gap", () => {
+    const axisDomainSpy = vi.fn();
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data.slice(0, 1)} barSize="20%">
+        <Bar dataKey="y" isAnimationActive={false} />
+        <XAxis dataKey="x" type="number" domain={[100, 150]} padding="no-gap" />
+        <YAxis dataKey="y" />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+      </BarChart>
+    ));
+
+    const bar = container.querySelector(".recharts-rectangle");
+    assertNotNull(bar);
+    expect(bar).toBeInTheDocument();
+    expect(bar.getAttribute("x")).toEqual("42");
+    expect(bar.getAttribute("width")).toEqual("46");
+    expectBars(container, [
+      {
+        d: "M 42,31 h 46 v 234 h -46 Z",
+        height: "234",
+        radius: "0",
+        width: "46",
+        x: "42",
+        y: "31",
+      },
+    ]);
+    expectXAxisTicks(container, [
+      {
+        textContent: "90",
+        x: "65",
+        y: "273",
+      },
+      {
+        textContent: "105",
+        x: "122.5",
+        y: "273",
+      },
+      {
+        textContent: "120",
+        x: "180",
+        y: "273",
+      },
+      {
+        textContent: "135",
+        x: "237.5",
+        y: "273",
+      },
+      {
+        textContent: "150",
+        x: "295",
+        y: "273",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([90, 150]);
+  });
+});

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

@@ -0,0 +1,266 @@
+import { describe, expect, it, vi } from "vitest";
+import { createEffect } from "solid-js";
+import { useAppSelector } from "../../../src/state/hooks";
+import { selectTicksOfAxis } from "../../../src/state/selectors/axisSelectors";
+import { BarChart, Brush, XAxis } from "../../../src";
+import { render } from "../../helper/render";
+import { expectXAxisTicks } from "../../helper/expectAxisTicks";
+import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
+
+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("brush and startIndex + endIndex", () => {
+  it("should hide ticks when Brush renders with startIndex and endIndex", () => {
+    const axisDomainSpy = vi.fn();
+    const ticksSpy = vi.fn();
+    const Comp = (): null => {
+      const ticks = useAppSelector((state) => selectTicksOfAxis(state, "xAxis", 0, false));
+      createEffect(
+        () => ticks(),
+        (v) => ticksSpy(v),
+      );
+      return null;
+    };
+    const { container } = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <XAxis dataKey="x" type="category" />
+        <Brush startIndex={1} endIndex={4} />
+        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
+        <Comp />
+      </BarChart>
+    ));
+    expectXAxisTicks(container, [
+      {
+        textContent: "100",
+        x: "41.25",
+        y: "233",
+      },
+      {
+        textContent: "120",
+        x: "113.75",
+        y: "233",
+      },
+      {
+        textContent: "170",
+        x: "186.25",
+        y: "233",
+      },
+      {
+        textContent: "140",
+        x: "258.75",
+        y: "233",
+      },
+    ]);
+    expect(axisDomainSpy).toHaveBeenLastCalledWith([100, 120, 170, 140]);
+    expect(ticksSpy).toHaveBeenLastCalledWith([
+      {
+        coordinate: 41.25,
+        index: 0,
+        offset: 36.25,
+        value: 100,
+      },
+      {
+        coordinate: 113.75,
+        index: 1,
+        offset: 36.25,
+        value: 120,
+      },
+      {
+        coordinate: 186.25,
+        index: 2,
+        offset: 36.25,
+        value: 170,
+      },
+      {
+        coordinate: 258.75,
+        index: 3,
+        offset: 36.25,
+        value: 140,
+      },
+    ]);
+  });
+
+  it("should hide ticks when Brush travellers move", () => {
+    // recharts rerenders this chart to ADD startIndex/endIndex to the Brush; the Solid
+    // port uses two static renders (unmount between) to avoid the dynamic-remount artifact.
+    const axisDomainSpyA = vi.fn();
+    const ticksSpyA = vi.fn();
+    const CompA = (): null => {
+      const ticks = useAppSelector((state) => selectTicksOfAxis(state, "xAxis", 0, false));
+      createEffect(
+        () => ticks(),
+        (v) => ticksSpyA(v),
+      );
+      return null;
+    };
+    const first = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <XAxis dataKey="x" type="category" />
+        <Brush />
+        <ExpectAxisDomain assert={axisDomainSpyA} axisType="xAxis" />
+        <CompA />
+      </BarChart>
+    ));
+    expectXAxisTicks(first.container, [
+      {
+        textContent: "90",
+        x: "25.714285714285715",
+        y: "233",
+      },
+      {
+        textContent: "100",
+        x: "67.14285714285714",
+        y: "233",
+      },
+      {
+        textContent: "120",
+        x: "108.57142857142858",
+        y: "233",
+      },
+      {
+        textContent: "170",
+        x: "150",
+        y: "233",
+      },
+      {
+        textContent: "140",
+        x: "191.42857142857144",
+        y: "233",
+      },
+      {
+        textContent: "150",
+        x: "232.8571428571429",
+        y: "233",
+      },
+      {
+        textContent: "110",
+        x: "274.2857142857143",
+        y: "233",
+      },
+    ]);
+    expect(axisDomainSpyA).toHaveBeenLastCalledWith([90, 100, 120, 170, 140, 150, 110]);
+    expect(ticksSpyA).toHaveBeenLastCalledWith([
+      {
+        coordinate: 25.714285714285715,
+        index: 0,
+        offset: 20.714285714285715,
+        value: 90,
+      },
+      {
+        coordinate: 67.14285714285714,
+        index: 1,
+        offset: 20.714285714285715,
+        value: 100,
+      },
+      {
+        coordinate: 108.57142857142858,
+        index: 2,
+        offset: 20.714285714285715,
+        value: 120,
+      },
+      {
+        coordinate: 150,
+        index: 3,
+        offset: 20.714285714285715,
+        value: 170,
+      },
+      {
+        coordinate: 191.42857142857144,
+        index: 4,
+        offset: 20.714285714285715,
+        value: 140,
+      },
+      {
+        coordinate: 232.8571428571429,
+        index: 5,
+        offset: 20.714285714285715,
+        value: 150,
+      },
+      {
+        coordinate: 274.2857142857143,
+        index: 6,
+        offset: 20.714285714285715,
+        value: 110,
+      },
+    ]);
+    first.unmount();
+
+    const axisDomainSpyB = vi.fn();
+    const ticksSpyB = vi.fn();
+    const CompB = (): null => {
+      const ticks = useAppSelector((state) => selectTicksOfAxis(state, "xAxis", 0, false));
+      createEffect(
+        () => ticks(),
+        (v) => ticksSpyB(v),
+      );
+      return null;
+    };
+    const second = render(() => (
+      <BarChart width={300} height={300} data={data}>
+        <XAxis dataKey="x" type="category" />
+        <Brush startIndex={1} endIndex={4} />
+        <ExpectAxisDomain assert={axisDomainSpyB} axisType="xAxis" />
+        <CompB />
+      </BarChart>
+    ));
+
+    expect(axisDomainSpyB).toHaveBeenLastCalledWith([100, 120, 170, 140]);
+    expect(ticksSpyB).toHaveBeenLastCalledWith([
+      {
+        coordinate: 41.25,
+        index: 0,
+        offset: 36.25,
+        value: 100,
+      },
+      {
+        coordinate: 113.75,
+        index: 1,
+        offset: 36.25,
+        value: 120,
+      },
+      {
+        coordinate: 186.25,
+        index: 2,
+        offset: 36.25,
+        value: 170,
+      },
+      {
+        coordinate: 258.75,
+        index: 3,
+        offset: 36.25,
+        value: 140,
+      },
+    ]);
+
+    expectXAxisTicks(second.container, [
+      {
+        textContent: "100",
+        x: "41.25",
+        y: "233",
+      },
+      {
+        textContent: "120",
+        x: "113.75",
+        y: "233",
+      },
+      {
+        textContent: "170",
+        x: "186.25",
+        y: "233",
+      },
+      {
+        textContent: "140",
+        x: "258.75",
+        y: "233",
+      },
+    ]);
+  });
+});