solid-recharts 0.2.1 → 1.0.0

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

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

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

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

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

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

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