solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/state/selectors/combiners/combineRealScaleType.spec.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import { scaleLog } from "d3-scale";
+import { BaseCartesianAxis } from "../../../../src/state/cartesianAxisSlice";
+import { combineRealScaleType } from "../../../../src/state/selectors/combiners/combineRealScaleType";
+
+const baseAxis: BaseCartesianAxis = {
+  id: 0,
+  scale: "auto",
+  type: "number",
+  dataKey: undefined,
+  unit: undefined,
+  name: undefined,
+  allowDuplicatedCategory: true,
+  allowDataOverflow: false,
+  reversed: false,
+  includeHidden: false,
+  domain: undefined,
+};
+
+const createAxis = (partial: Partial<BaseCartesianAxis>): BaseCartesianAxis => ({
+  ...baseAxis,
+  ...partial,
+});
+
+describe("combineRealScaleType", () => {
+  it("returns undefined when axis config is missing", () => {
+    expect(combineRealScaleType(undefined, false, "LineChart")).toBeUndefined();
+  });
+
+  it("returns point for auto + category in LineChart/AreaChart", () => {
+    const axis = createAxis({ scale: "auto", type: "category" });
+    expect(combineRealScaleType(axis, false, "LineChart")).toBe("point");
+    expect(combineRealScaleType(axis, false, "AreaChart")).toBe("point");
+  });
+
+  it("returns point for auto + category in ComposedChart without bars, but band with bars", () => {
+    const axis = createAxis({ scale: "auto", type: "category" });
+    expect(combineRealScaleType(axis, false, "ComposedChart")).toBe("point");
+    expect(combineRealScaleType(axis, true, "ComposedChart")).toBe("band");
+  });
+
+  it("returns band for auto + category in non-line-like charts", () => {
+    const axis = createAxis({ scale: "auto", type: "category" });
+    expect(combineRealScaleType(axis, true, "BarChart")).toBe("band");
+  });
+
+  it("returns linear for auto + number axes", () => {
+    const axis = createAxis({ scale: "auto", type: "number" });
+    expect(combineRealScaleType(axis, false, "LineChart")).toBe("linear");
+  });
+
+  it("returns short names for log and symlog scales", () => {
+    const axis = createAxis({ type: "number" });
+    expect(combineRealScaleType({ ...axis, scale: "log" }, false, "LineChart")).toBe("log");
+    expect(combineRealScaleType({ ...axis, scale: "symlog" }, false, "LineChart")).toBe("symlog");
+  });
+
+  it("returns supported short scale names as-is", () => {
+    const axis = createAxis({ type: "number" });
+    expect(combineRealScaleType({ ...axis, scale: "linear" }, false, "LineChart")).toBe("linear");
+    expect(combineRealScaleType({ ...axis, scale: "point" }, false, "LineChart")).toBe("point");
+  });
+
+  it("falls back to point for already-prefixed names like scaleLog", () => {
+    // @ts-expect-error TypeScript is doing its job and preventing us from passing an invalid scale, but we want to test the runtime behavior in this case
+    const axis = createAxis({ type: "number", scale: "scaleLog" });
+    expect(combineRealScaleType(axis, false, "LineChart")).toBe("point");
+  });
+
+  it("falls back to point for unknown string scales", () => {
+    // @ts-expect-error typescript is doing its job and preventing us from passing an invalid scale, but we want to test the runtime behavior in this case
+    const axis = createAxis({ type: "number", scale: "madeUpScaleName" });
+    expect(combineRealScaleType(axis, false, "LineChart")).toBe("point");
+  });
+
+  it("returns undefined for function scales", () => {
+    const axis = createAxis({ type: "number", scale: scaleLog() });
+    expect(combineRealScaleType(axis, false, "LineChart")).toBeUndefined();
+  });
+});

package/test/state/selectors/containerSelectors.spec.tsx

@@ -0,0 +1,168 @@
+// Ported from recharts 3.8.1 test/state/selectors/containerSelectors.spec.tsx
+// (commit 7a23854). Solid deviations: rerender assertions are driven by signals.
+import { createSignal, flush } from "solid-js";
+import { afterEach, describe, expect, it } from "vitest";
+import { BarChart, ComposedChart } from "../../../src";
+import { createRechartsStore } from "../../../src/state/store";
+import {
+  selectChartHeight,
+  selectChartWidth,
+  selectContainerScale,
+  selectMargin,
+} from "../../../src/state/selectors/containerSelectors";
+import {
+  shouldReturnFromInitialState,
+  shouldReturnUndefinedOutOfContext,
+} from "../../helper/selectorTestHelpers";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import {
+  mockHTMLElementProperty,
+  restoreHTMLElementProperties,
+} from "../../helper/mockHTMLElementProperty";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+afterEach(() => {
+  restoreHTMLElementProperties();
+});
+
+describe("selectContainerScale", () => {
+  shouldReturnUndefinedOutOfContext(selectContainerScale);
+  shouldReturnFromInitialState(selectContainerScale, 1);
+
+  it("should return 1 in an initial state", () => {
+    const store = createRechartsStore();
+    expect(selectContainerScale(store.state)).toBe(1);
+  });
+
+  it("should return scale after it was set using an action", () => {
+    const store = createRechartsStore();
+    store.actions.layout.setScale(1.25);
+    flush();
+    expect(selectContainerScale(store.state)).toBe(1.25);
+  });
+
+  it("should return scale as the ratio of DOMRect / offsetWidth", () => {
+    mockGetBoundingClientRect(
+      {
+        x: 1,
+        y: 2,
+        width: 3,
+        height: 4,
+      },
+      false,
+    );
+    mockHTMLElementProperty("offsetWidth", 5);
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={5} height={6}>
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(selectContainerScale);
+    expectLastCalledWith(spy, 3 / 5);
+  });
+
+  it("should return scale: 1 in jsdom because jsdom returns zeroes everywhere", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={5} height={6}>
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(selectContainerScale);
+    expectLastCalledWith(spy, 1);
+  });
+});
+
+describe("selectMargin", () => {
+  shouldReturnUndefinedOutOfContext(selectMargin);
+  shouldReturnFromInitialState(selectMargin, {
+    top: 5,
+    right: 5,
+    bottom: 5,
+    left: 5,
+  });
+
+  it("should return margin from root chart props, and update it when props change", () => {
+    const [margin, setMargin] = createSignal({
+      top: 10,
+      right: 10,
+      bottom: 10,
+      left: 10,
+    });
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart margin={margin()} width={500} height={300}>
+        {props.children}
+      </BarChart>
+    ));
+    const { spy, rerenderSameComponent } = renderTestCase(selectMargin);
+    expectLastCalledWith(spy, {
+      top: 10,
+      right: 10,
+      bottom: 10,
+      left: 10,
+    });
+
+    setMargin({ top: 20, right: 20, bottom: 20, left: 20 });
+    rerenderSameComponent();
+    expectLastCalledWith(spy, {
+      top: 20,
+      right: 20,
+      bottom: 20,
+      left: 20,
+    });
+  });
+});
+
+describe("selectChartWidth", () => {
+  shouldReturnUndefinedOutOfContext(selectChartWidth);
+  shouldReturnFromInitialState(selectChartWidth, 0);
+
+  it("should return width when set from action", () => {
+    const store = createRechartsStore();
+    store.actions.layout.setChartSize({ width: 500, height: 300 });
+    flush();
+    expect(selectChartWidth(store.state)).toBe(500);
+  });
+
+  it("should return width from root chart props, and update it when props change", () => {
+    const [size, setSize] = createSignal({ width: 500, height: 300 });
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={size().width} height={size().height}>
+        {props.children}
+      </BarChart>
+    ));
+    const { spy, rerenderSameComponent } = renderTestCase(selectChartWidth);
+    expectLastCalledWith(spy, 500);
+
+    setSize({ width: 600, height: 400 });
+    rerenderSameComponent();
+    expectLastCalledWith(spy, 600);
+  });
+});
+
+describe("selectChartHeight", () => {
+  shouldReturnUndefinedOutOfContext(selectChartHeight);
+  shouldReturnFromInitialState(selectChartHeight, 0);
+
+  it("should return height when set from action", () => {
+    const store = createRechartsStore();
+    store.actions.layout.setChartSize({ width: 500, height: 300 });
+    flush();
+    expect(selectChartHeight(store.state)).toBe(300);
+  });
+
+  it("should return height from root chart props, and update it when props change", () => {
+    const [size, setSize] = createSignal({ width: 500, height: 300 });
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={size().width} height={size().height}>
+        {props.children}
+      </BarChart>
+    ));
+    const { spy, rerenderSameComponent } = renderTestCase(selectChartHeight);
+    expectLastCalledWith(spy, 300);
+
+    setSize({ width: 600, height: 400 });
+    rerenderSameComponent();
+    expectLastCalledWith(spy, 400);
+  });
+});

package/test/state/selectors/dataSelectors.spec.tsx

@@ -0,0 +1,136 @@
+import { createEffect, flush } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import { Area, BarChart, Brush, ComposedChart, Line, Scatter } from "../../../src";
+import { selectChartDataWithIndexes } from "../../../src/state/selectors/dataSelectors";
+import type { ChartDataState } from "../../../src/state/chartDataSlice";
+import { PageData, pageData } from "../../_data";
+import {
+  shouldReturnFromInitialState,
+  shouldReturnUndefinedOutOfContext,
+  useAppSelectorWithStableTest,
+} from "../../helper/selectorTestHelpers";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+import { render } from "@solidjs/testing-library";
+
+// Ported from recharts 3.8.1 test/state/selectors/dataSelectors.spec.tsx.
+
+describe("selectChartDataWithIndexes", () => {
+  shouldReturnUndefinedOutOfContext(selectChartDataWithIndexes);
+  shouldReturnFromInitialState(selectChartDataWithIndexes, {
+    chartData: undefined,
+    dataEndIndex: 0,
+    dataStartIndex: 0,
+    computedData: undefined,
+  });
+
+  it("should return undefined in an empty chart", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const tooltipData = useAppSelectorWithStableTest(selectChartDataWithIndexes);
+      createEffect(
+        () => tooltipData(),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    render(() => (
+      <BarChart width={100} height={100}>
+        <Comp />
+      </BarChart>
+    ));
+    flush();
+    const expected: ChartDataState = {
+      chartData: undefined,
+      dataEndIndex: 0,
+      dataStartIndex: 0,
+      computedData: undefined,
+    };
+    expect(spy).toHaveBeenCalledTimes(1);
+    expectLastCalledWith(spy, expected);
+  });
+
+  it("should return none of the data defined on graphical items", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const tooltipData = useAppSelectorWithStableTest(selectChartDataWithIndexes);
+      createEffect(
+        () => tooltipData(),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    const data1 = [{ x: 1 }, { x: 2 }, { x: 3 }];
+    const data2 = [{ x: 10 }, { x: 20 }, { x: 30 }];
+    render(() => (
+      <ComposedChart data={PageData} width={100} height={100}>
+        <Area dataKey="x" data={data1} />
+        <Area dataKey="x" data={data2} />
+        <Line data={[4, 5, 6]} />
+        <Line data={[40, 50, 60]} />
+        <Scatter data={[7, 8, 9]} />
+        <Scatter data={[70, 80, 90]} />
+        <Comp />
+      </ComposedChart>
+    ));
+    flush();
+    const expected: ChartDataState = {
+      chartData: PageData,
+      dataStartIndex: 0,
+      dataEndIndex: 5,
+      computedData: undefined,
+    };
+    expectLastCalledWith(spy, expected);
+  });
+
+  it("should return all data defined on the root chart element, and set default endIndex based on the data length", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const tooltipData = useAppSelectorWithStableTest(selectChartDataWithIndexes);
+      createEffect(
+        () => tooltipData(),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    render(() => (
+      <BarChart data={PageData} width={100} height={100}>
+        <Comp />
+      </BarChart>
+    ));
+    flush();
+    expect(pageData.length).toBeGreaterThan(1);
+    const expected: ChartDataState = {
+      chartData: PageData,
+      dataEndIndex: PageData.length - 1,
+      dataStartIndex: 0,
+      computedData: undefined,
+    };
+    expectLastCalledWith(spy, expected);
+  });
+
+  it("should return indexes from Brush element", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const tooltipData = useAppSelectorWithStableTest(selectChartDataWithIndexes);
+      createEffect(
+        () => tooltipData(),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    render(() => (
+      <BarChart data={PageData} width={100} height={100}>
+        <Brush startIndex={3} endIndex={4} />
+        <Comp />
+      </BarChart>
+    ));
+    flush();
+    const expected: ChartDataState = {
+      chartData: PageData,
+      dataEndIndex: 4,
+      dataStartIndex: 3,
+      computedData: undefined,
+    };
+    expectLastCalledWith(spy, expected);
+  });
+});

package/test/state/selectors/legendSelectors.spec.tsx

@@ -0,0 +1,113 @@
+import { createEffect, flush } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import { BarChart, Legend, type LegendPayload } from "../../../src";
+import type { LegendSettings } from "../../../src/state/legendSlice";
+import {
+  selectLegendPayload,
+  selectLegendSettings,
+  selectLegendSize,
+} from "../../../src/state/selectors/legendSelectors";
+import type { Size } from "../../../src/util/types";
+import {
+  shouldReturnFromInitialState,
+  shouldReturnUndefinedOutOfContext,
+  useAppSelectorWithStableTest,
+} from "../../helper/selectorTestHelpers";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { render } from "@solidjs/testing-library";
+
+// Ported from recharts 3.8.1 test/state/selectors/legendSelectors.spec.tsx.
+
+describe("selectLegendSettings", () => {
+  shouldReturnUndefinedOutOfContext(selectLegendSettings);
+  shouldReturnFromInitialState(selectLegendSettings, {
+    layout: "horizontal",
+    align: "center",
+    verticalAlign: "bottom",
+    itemSorter: "value",
+  });
+
+  it("should return Legend settings", () => {
+    const legendSettingsSpy = vi.fn();
+    const Comp = (): null => {
+      const legend = useAppSelectorWithStableTest(selectLegendSettings);
+      createEffect(
+        () => legend(),
+        (value) => legendSettingsSpy(value),
+      );
+      return null;
+    };
+    mockGetBoundingClientRect({ width: 17, height: 71 });
+    render(() => (
+      <BarChart width={100} height={100}>
+        <Legend align="left" layout="vertical" verticalAlign="top" />
+        <Comp />
+      </BarChart>
+    ));
+    flush();
+    const expected: LegendSettings = {
+      align: "left",
+      layout: "vertical",
+      verticalAlign: "top",
+      itemSorter: "value",
+    };
+    expect(legendSettingsSpy).toHaveBeenLastCalledWith(expected);
+  });
+});
+
+describe("selectLegendSize", () => {
+  shouldReturnUndefinedOutOfContext(selectLegendSize);
+  shouldReturnFromInitialState(selectLegendSize, {
+    width: 0,
+    height: 0,
+  });
+
+  it("should return Legend size", () => {
+    const legendSettingsSpy = vi.fn();
+    const Comp = (): null => {
+      const legend = useAppSelectorWithStableTest(selectLegendSize);
+      createEffect(
+        () => legend(),
+        (value) => legendSettingsSpy(value),
+      );
+      return null;
+    };
+    mockGetBoundingClientRect({ width: 17, height: 71 });
+    render(() => (
+      <BarChart width={100} height={100}>
+        <Legend align="left" layout="vertical" verticalAlign="top" />
+        <Comp />
+      </BarChart>
+    ));
+    flush();
+    const expected: Size = { width: 17, height: 71 };
+    expect(legendSettingsSpy).toHaveBeenLastCalledWith(expected);
+  });
+});
+
+describe("selectLegendPayload", () => {
+  shouldReturnUndefinedOutOfContext(selectLegendPayload);
+  shouldReturnFromInitialState(selectLegendPayload, []);
+
+  it("should return Legend payload", () => {
+    const legendPayloadSpy = vi.fn();
+    const Comp = (): null => {
+      const legend = useAppSelectorWithStableTest(selectLegendPayload);
+      createEffect(
+        () => legend(),
+        (value) => legendPayloadSpy(value),
+      );
+      return null;
+    };
+    mockGetBoundingClientRect({ width: 17, height: 71 });
+    render(() => (
+      <BarChart width={100} height={100}>
+        <Legend align="left" layout="vertical" verticalAlign="top" />
+        <Comp />
+      </BarChart>
+    ));
+    flush();
+    const expected: ReadonlyArray<LegendPayload> = [];
+    expect(legendPayloadSpy).toHaveBeenLastCalledWith(expected);
+  });
+});

package/test/state/selectors/lineSelectors.spec.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import type { RechartsRootState } from "../../../src/state/store";
+import {
+  shouldReturnFromInitialState,
+  shouldReturnUndefinedOutOfContext,
+} from "../../helper/selectorTestHelpers";
+import { selectLinePoints } from "../../../src/state/selectors/lineSelectors";
+import { CartesianGrid, Line, LineChart, Tooltip, XAxis } from "../../../src";
+import { PageData } from "../../_data";
+import type { LinePointItem } from "../../../src/cartesian/Line";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+
+/*
+ * Ported from recharts 3.8.1 test/state/selectors/lineSelectors.spec.tsx.
+ * The recharts render tests drive React `useState`/`act` button clicks and assert
+ * exact render COUNTS + reselect `toBe` stability — both N/A in the Solid rewrite.
+ * Ported instead: the pure value assertions, and the golden POINT GEOMETRY for a
+ * simple Line chart (the assertion that actually pins recharts' layout math).
+ */
+
+describe("selectLinePoints", () => {
+  const selector = (state: RechartsRootState) => selectLinePoints(state, 0, 0, false, "my-line-id");
+
+  shouldReturnUndefinedOutOfContext(selector);
+  shouldReturnFromInitialState(selector, undefined);
+
+  it("should compute the line points geometry in a simple Line chart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={400} height={400} data={PageData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <Line dataKey="uv" id="my-line-id" />
+        <Tooltip />
+        {props.children}
+      </LineChart>
+    ));
+
+    const expectedLines: ReadonlyArray<LinePointItem> = [
+      { payload: { amt: 2400, name: "Page A", pv: 2400, uv: 400 }, value: 400, x: 5, y: 5 },
+      { payload: { amt: 2400, name: "Page B", pv: 4567, uv: 300 }, value: 300, x: 83, y: 95 },
+      { payload: { amt: 2400, name: "Page C", pv: 1398, uv: 300 }, value: 300, x: 161, y: 95 },
+      { payload: { amt: 2400, name: "Page D", pv: 9800, uv: 200 }, value: 200, x: 239, y: 185 },
+      {
+        payload: { amt: 2400, name: "Page E", pv: 3908, uv: 278 },
+        value: 278,
+        x: 317,
+        y: 114.80000000000001,
+      },
+      {
+        payload: { amt: 2400, name: "Page F", pv: 4800, uv: 189 },
+        value: 189,
+        x: 395,
+        y: 194.90000000000003,
+      },
+    ];
+
+    const { spy } = renderTestCase(selector);
+    expect(spy).toHaveBeenLastCalledWith(expectedLines);
+  });
+});

package/test/state/selectors/pieSelectors.spec.tsx

@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import type { RechartsRootState } from "../../../src/state/store";
+import { selectPieSectors } from "../../../src/state/selectors/pieSelectors";
+import { Pie, PieChart } from "../../../src";
+import {
+  shouldReturnFromInitialState,
+  shouldReturnUndefinedOutOfContext,
+} from "../../helper/selectorTestHelpers";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { assertNotNull } from "../../helper/assertNotNull";
+
+/*
+ * Ported from recharts 3.8.1 test/state/selectors/pieSelectors.spec.tsx.
+ * Omitted:
+ *  - the big "after interaction" golden test (depends on the storybook `pageData`
+ *    dataset + a React useState button + render-count assertions — N/A here).
+ *  - the "should include custom data properties in PieSectorDataItem" test. That
+ *    asserts recharts spreads the raw data entry onto each sector (so `customProp`/
+ *    `extraField` appear at the sector top level). This port DELIBERATELY does not
+ *    spread the data entry onto the sector (see Pie.tsx header: the
+ *    `@ts-expect-error`-laden unknown-data spreads are replaced with typed
+ *    coercion — the data stays in `sector.payload`), and adds a Solid `class`
+ *    field. So that exact-shape assertion targets an intentional deviation.
+ * Ported: the pure value assertions and the issue #1698 zero-value paddingAngle
+ * regression (a behavioural, not shape, assertion).
+ */
+
+describe("selectPieSectors", () => {
+  const selector = (state: RechartsRootState) => selectPieSectors(state, "pie-id", []);
+
+  shouldReturnUndefinedOutOfContext(selector);
+  shouldReturnFromInitialState(selector, undefined);
+});
+
+describe("selectPieSectors paddingAngle", () => {
+  describe("when data contains zero-value items and paddingAngle is set", () => {
+    // https://github.com/recharts/recharts/issues/1698
+    // Zero-value sectors should not consume paddingAngle, which would create a double gap
+    const renderZeroValueTestCase = createSelectorTestCase((props) => (
+      <PieChart width={400} height={400}>
+        <Pie
+          dataKey="value"
+          data={[
+            { name: "A", value: 400 },
+            { name: "B", value: 300 },
+            { name: "C", value: 0 },
+            { name: "D", value: 200 },
+          ]}
+          cx={200}
+          cy={200}
+          outerRadius={80}
+          paddingAngle={5}
+          id="pie-id"
+        />
+        {props.children}
+      </PieChart>
+    ));
+
+    it("should set paddingAngle to 0 for zero-value sectors", () => {
+      const { spy } = renderZeroValueTestCase((state) => selectPieSectors(state, "pie-id", []));
+      const sectors = spy.mock.lastCall?.[0];
+      assertNotNull(sectors);
+      expect(sectors).toHaveLength(4);
+      // Non-zero sectors have paddingAngle = 5
+      expect(sectors[0].paddingAngle).toBe(5);
+      expect(sectors[1].paddingAngle).toBe(5);
+      // Zero-value sector must have paddingAngle = 0, not 5
+      expect(sectors[2].paddingAngle).toBe(0);
+      expect(sectors[3].paddingAngle).toBe(5);
+    });
+  });
+});