solid-recharts 0.2.1 → 1.0.0

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

@@ -1,336 +0,0 @@
-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 "@solidjs/testing-library";
-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

@@ -1,266 +0,0 @@
-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 "@solidjs/testing-library";
-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",
-      },
-    ]);
-  });
-});