solid-recharts 0.1.0

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

@@ -0,0 +1,30 @@
+// Ported from recharts 3.8.1 test/state/selectors/brushSelectors.spec.tsx.
+// The vendored "should return brush height if set" case uses <Customized> to
+// mount a probe inside the chart store; we have no Customized (PERMANENT-N/A —
+// findAllByType/Customized), so it is reproduced via createSelectorTestCase,
+// which renders a Spy child inside the chart store and spies the selector value.
+import { describe, expect } from "vitest";
+import { BarChart, Brush } from "../../../src";
+import { selectBrushHeight } from "../../../src/state/selectors/selectChartOffsetInternal";
+import {
+  shouldReturnFromInitialState,
+  shouldReturnUndefinedOutOfContext,
+} from "../../helper/selectorTestHelpers";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+
+describe("selectBrushHeight", () => {
+  shouldReturnUndefinedOutOfContext(selectBrushHeight);
+  shouldReturnFromInitialState(selectBrushHeight, 0);
+
+  const renderTestCase = createSelectorTestCase((props) => (
+    <BarChart width={100} height={100}>
+      <Brush height={7} />
+      {props.children}
+    </BarChart>
+  ));
+
+  it("should return brush height if set", () => {
+    const { spy } = renderTestCase(selectBrushHeight);
+    expect(spy).toHaveBeenLastCalledWith(7);
+  });
+});

package/test/state/selectors/cartesianAxisSlice.spec.ts

@@ -0,0 +1,96 @@
+// Tier-B port of recharts 3.8.1 test/state/selectors/cartesianAxisSlice.spec.ts
+// (commit 7a23854).
+//
+// Deviation: recharts drives the slice through the Redux API
+// (`configureStore({ reducer: { cartesianAxis } })` + `store.dispatch(addYAxis(...))`
+// + `store.getState().cartesianAxis.yAxis[...]`). Our Solid-native store has no
+// dispatch — actions are called directly (`store.actions.cartesianAxis.addYAxis(...)`)
+// and state is read off `store.state.cartesianAxis`. Expectations are unchanged.
+// Store writes are microtask-batched, so each action is followed by `flush()`.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { createRechartsStore } from "../../../src/state/store";
+import type { YAxisSettings } from "../../../src/state/cartesianAxisSlice";
+
+describe("cartesianAxisSlice", () => {
+  describe("updateYAxisWidth", () => {
+    const yAxis: YAxisSettings = {
+      id: "test-axis",
+      width: "auto",
+      scale: "auto",
+      type: "number",
+      dataKey: undefined,
+      unit: undefined,
+      name: undefined,
+      allowDuplicatedCategory: true,
+      allowDataOverflow: false,
+      reversed: false,
+      includeHidden: false,
+      domain: undefined,
+      allowDecimals: true,
+      tickCount: 5,
+      ticks: undefined,
+      tick: true,
+      interval: "preserveEnd",
+      mirror: false,
+      minTickGap: 5,
+      angle: 0,
+      hide: false,
+      tickFormatter: undefined,
+      niceTicks: "auto",
+      padding: { top: 0, bottom: 0 },
+      orientation: "left",
+    };
+
+    it("should stop updating width after oscillation is detected", () => {
+      const store = createRechartsStore();
+
+      store.actions.cartesianAxis.addYAxis(yAxis);
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe("auto");
+
+      store.actions.cartesianAxis.updateYAxisWidth({ id: "test-axis", width: 50 });
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe(50);
+
+      store.actions.cartesianAxis.updateYAxisWidth({ id: "test-axis", width: 51 });
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe(51);
+
+      store.actions.cartesianAxis.updateYAxisWidth({ id: "test-axis", width: 50 });
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe(50);
+
+      // This is the 4th action. The oscillation should be detected and the update ignored.
+      store.actions.cartesianAxis.updateYAxisWidth({ id: "test-axis", width: 51 });
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe(50);
+    });
+
+    it("should keep updating if the oscillation is larger than 1 pixel because that is likely to be intentional", () => {
+      // https://github.com/recharts/recharts/issues/6424
+      const store = createRechartsStore();
+
+      store.actions.cartesianAxis.addYAxis(yAxis);
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe("auto");
+
+      store.actions.cartesianAxis.updateYAxisWidth({ id: "test-axis", width: 50 });
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe(50);
+
+      store.actions.cartesianAxis.updateYAxisWidth({ id: "test-axis", width: 52 });
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe(52);
+
+      store.actions.cartesianAxis.updateYAxisWidth({ id: "test-axis", width: 50 });
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe(50);
+
+      // This is the 4th action. The oscillation is larger than 1 pixel, so the update should be accepted.
+      store.actions.cartesianAxis.updateYAxisWidth({ id: "test-axis", width: 52 });
+      flush();
+      expect(store.state.cartesianAxis.yAxis["test-axis"]?.width).toBe(52);
+    });
+  });
+});

package/test/state/selectors/combineNiceTicks.spec.ts

@@ -0,0 +1,207 @@
+import { describe, expect, it } from "vitest";
+import {
+  combineNiceTicks,
+  implicitXAxis,
+  RenderableAxisSettings,
+} from "../../../src/state/selectors/axisSelectors";
+
+// Deviation from the reference: our `RenderableAxisSettings` is the narrower
+// `XAxisSettings | YAxisSettings` (polar axes deferred), and the two differ in
+// `orientation`, so spreading `Partial<RenderableAxisSettings>` over the X-axis
+// defaults widens `orientation` past either member. Assert back to the union —
+// the helper always builds an X-axis-shaped object (test file; `as` permitted).
+const createAxisSettings = (partial: Partial<RenderableAxisSettings>): RenderableAxisSettings =>
+  ({
+    ...implicitXAxis,
+    ...partial,
+  }) as RenderableAxisSettings;
+
+describe("combineNiceTicks", () => {
+  it('returns undefined when niceTicks="none"', () => {
+    const result = combineNiceTicks(
+      [0, 100],
+      createAxisSettings({ type: "number", niceTicks: "none" }),
+      "linear",
+    );
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for unsupported scale types", () => {
+    const result = combineNiceTicks(
+      [0, 100],
+      createAxisSettings({ type: "number", niceTicks: "auto" }),
+      "time",
+    );
+    expect(result).toBeUndefined();
+  });
+
+  it("uses adaptive mode for auto + auto domain", () => {
+    const axisDomain: [number, number] = [12, 468];
+    const axisSettings = createAxisSettings({
+      type: "number",
+      niceTicks: "auto",
+      tickCount: 5,
+      allowDecimals: true,
+      domain: ["auto", "auto"],
+    });
+
+    const result = combineNiceTicks(axisDomain, axisSettings, "linear");
+    expect(result).toEqual([0, 150, 300, 450, 600]);
+  });
+
+  it("uses adaptive fixed-domain mode for auto + fixed domain", () => {
+    const axisDomain: [number, number] = [0, 500];
+    const axisSettings = createAxisSettings({
+      type: "number",
+      niceTicks: "auto",
+      tickCount: 7,
+      allowDecimals: false,
+      domain: [0, 500],
+    });
+
+    const result = combineNiceTicks(axisDomain, axisSettings, "linear");
+    expect(result).toEqual([0, 85, 170, 255, 340, 425, 500]);
+  });
+
+  it("returns undefined in auto mode for non-number axis with fixed domain", () => {
+    const axisSettings = createAxisSettings({
+      type: "category",
+      niceTicks: "auto",
+      tickCount: 5,
+      domain: [0, 500],
+    });
+
+    const result = combineNiceTicks([0, 500], axisSettings, "linear");
+    expect(result).toBeUndefined();
+  });
+
+  describe("linear scale", () => {
+    it('uses adaptive algorithm when niceTicks="adaptive"', () => {
+      const axisDomain: [number, number] = [12, 468];
+      const axisSettings = createAxisSettings({
+        type: "number",
+        niceTicks: "adaptive",
+        tickCount: 5,
+        allowDecimals: true,
+        domain: ["auto", "auto"],
+      });
+
+      const result = combineNiceTicks(axisDomain, axisSettings, "linear");
+      expect(result).toEqual([0, 150, 300, 450, 600]);
+    });
+
+    it('uses snap125 algorithm when niceTicks="snap125"', () => {
+      const axisDomain: [number, number] = [12, 468];
+      const axisSettings = createAxisSettings({
+        type: "number",
+        niceTicks: "snap125",
+        tickCount: 5,
+        allowDecimals: true,
+        domain: ["auto", "auto"],
+      });
+
+      const result = combineNiceTicks(axisDomain, axisSettings, "linear");
+      expect(result).toEqual([0, 200, 400, 600, 800]);
+    });
+  });
+
+  describe("log scale", () => {
+    it('returns undefined when niceTicks="auto"', () => {
+      const axisDomain: [number, number] = [1, 215];
+      const axisSettings: RenderableAxisSettings = createAxisSettings({
+        type: "number",
+        niceTicks: "auto",
+        tickCount: 5,
+        allowDecimals: true,
+        domain: undefined,
+      });
+
+      const logResult = combineNiceTicks(axisDomain, axisSettings, "log");
+      expect(logResult).toBeUndefined();
+    });
+
+    it('uses adaptive algorithm when niceTicks="adaptive"', () => {
+      const axisDomain: [number, number] = [1, 215];
+      const axisSettings: RenderableAxisSettings = createAxisSettings({
+        type: "number",
+        niceTicks: "adaptive",
+        tickCount: 5,
+        allowDecimals: true,
+        domain: undefined,
+      });
+
+      const logResult = combineNiceTicks(axisDomain, axisSettings, "log");
+      expect(logResult).toEqual([0, 55, 110, 165, 220]);
+    });
+
+    it('uses snap125 algorithm when niceTicks="snap125"', () => {
+      const axisDomain: [number, number] = [1, 215];
+      const axisSettings: RenderableAxisSettings = createAxisSettings({
+        type: "number",
+        niceTicks: "snap125",
+        tickCount: 5,
+        allowDecimals: true,
+        domain: undefined,
+      });
+
+      const logResult = combineNiceTicks(axisDomain, axisSettings, "log");
+      expect(logResult).toEqual([0, 100, 200, 300, 400]);
+    });
+  });
+
+  describe("symlog scale", () => {
+    it('returns undefined when niceTicks="auto"', () => {
+      const axisDomain: [number, number] = [-834, 356];
+      const axisSettings = createAxisSettings({
+        type: "number",
+        niceTicks: "auto",
+        tickCount: 5,
+        allowDecimals: true,
+        domain: undefined,
+      });
+
+      const symlogResult = combineNiceTicks(axisDomain, axisSettings, "symlog");
+      expect(symlogResult).toBeUndefined();
+    });
+
+    it('uses adaptive algorithm when niceTicks="adaptive"', () => {
+      const axisDomain: [number, number] = [-834, 356];
+      const axisSettings = createAxisSettings({
+        type: "number",
+        niceTicks: "adaptive",
+        tickCount: 5,
+        allowDecimals: true,
+        domain: undefined,
+      });
+
+      const symlogResult = combineNiceTicks(axisDomain, axisSettings, "symlog");
+      expect(symlogResult).toEqual([-1200, -800, -400, +0, 400]);
+    });
+
+    it('uses snap125 algorithm when niceTicks="snap125"', () => {
+      const axisDomain: [number, number] = [-834, 356];
+      const axisSettings = createAxisSettings({
+        type: "number",
+        niceTicks: "snap125",
+        tickCount: 5,
+        allowDecimals: true,
+        domain: undefined,
+      });
+
+      const symlogResult = combineNiceTicks(axisDomain, axisSettings, "symlog");
+      expect(symlogResult).toEqual([-1000, -500, +0, 500, 1000]);
+    });
+  });
+
+  it("returns undefined when tickCount is not set", () => {
+    const axisSettings = createAxisSettings({
+      type: "number",
+      niceTicks: "snap125",
+      tickCount: undefined,
+      domain: ["auto", "auto"],
+    });
+
+    const result = combineNiceTicks([0, 500], axisSettings, "linear");
+    expect(result).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,61 @@
+import { describe, it, expect } from "vitest";
+import { combineActiveTooltipIndex } from "../../../../src/state/selectors/combiners/combineActiveTooltipIndex";
+import type { TooltipInteractionState } from "../../../../src/state/tooltipSlice";
+import type { ChartData } from "../../../../src/state/chartDataSlice";
+import type { CategoricalDomain, NumberDomain } from "../../../../src/util/types";
+
+// Ported from recharts 3.8.1 test/state/selectors/combiners/combineActiveTooltipIndex.spec.ts.
+
+const createInteraction = (index: TooltipInteractionState["index"]): TooltipInteractionState => ({
+  active: true,
+  index,
+  dataKey: undefined,
+  coordinate: undefined,
+  graphicalItemId: undefined,
+});
+
+describe("combineActiveTooltipIndex", () => {
+  it("returns null when the hovered datum falls outside the provided numeric domain", () => {
+    const chartData: ChartData = [{ value: 2 }, { value: 10 }];
+    const tooltipInteraction = createInteraction("1");
+    const domain: NumberDomain = [0, 5];
+
+    const result = combineActiveTooltipIndex(tooltipInteraction, chartData, "value", domain);
+
+    expect(result).toBeNull();
+  });
+
+  it("clamps the index to visible entries and still honors the numeric domain guard", () => {
+    const chartData: ChartData = [{ value: 2 }, { value: 7 }, { value: 15 }];
+    const tooltipInteraction = createInteraction("30");
+    const domain: NumberDomain = [0, 20];
+
+    const result = combineActiveTooltipIndex(tooltipInteraction, chartData, "value", domain);
+
+    expect(result).toBe("2");
+  });
+
+  it("keeps categorical axes interactive because categorical domains are ignored by the guard", () => {
+    const chartData: ChartData = [{ category: "alpha" }];
+    const tooltipInteraction = createInteraction("0");
+    const categoricalDomain: CategoricalDomain = ["alpha", "beta"];
+
+    const result = combineActiveTooltipIndex(
+      tooltipInteraction,
+      chartData,
+      "category",
+      categoricalDomain,
+    );
+
+    expect(result).toBe("0");
+  });
+
+  it("returns the original index when it cannot be coerced into a finite number", () => {
+    const chartData: ChartData = [];
+    const tooltipInteraction = createInteraction("node-3");
+
+    const result = combineActiveTooltipIndex(tooltipInteraction, chartData, undefined, undefined);
+
+    expect(result).toBe("node-3");
+  });
+});

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

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { combineAllBarPositions } from "../../../../src/state/selectors/combiners/combineAllBarPositions";
+import type { SizeList } from "../../../../src/state/selectors/barSelectors";
+
+describe("combineAllBarPositions", () => {
+  it("rounds fractional originalSize instead of truncating (issue #6115)", () => {
+    const sizeList: SizeList = [{ stackId: undefined, dataKeys: ["uv"], barSize: undefined }];
+    const positions = combineAllBarPositions(sizeList, undefined, 0, "10%", 91, 91, undefined);
+    expect(positions).toBeDefined();
+    expect(positions).toHaveLength(1);
+    expect(positions?.[0]?.position.size).toBe(73);
+  });
+
+  it("rounds the centring offset of user-specified barSizes instead of truncating", () => {
+    const sizeList: SizeList = [
+      { stackId: undefined, dataKeys: ["a"], barSize: 20 },
+      { stackId: undefined, dataKeys: ["b"], barSize: 20 },
+    ];
+    const positions = combineAllBarPositions(sizeList, undefined, 0, 0, 91, 91, undefined);
+    expect(positions).toBeDefined();
+    expect(positions).toHaveLength(2);
+    expect(positions?.[0]?.position.offset).toBe(26);
+  });
+
+  it("does not round originalSize when it is <= 1 (preserves sub-pixel bars)", () => {
+    const sizeList: SizeList = Array.from({ length: 20 }, (_, i) => ({
+      stackId: undefined,
+      dataKeys: [`d${i}`],
+      barSize: undefined,
+    }));
+    const positions = combineAllBarPositions(sizeList, undefined, 0, 0, 10, 10, undefined);
+    expect(positions).toBeDefined();
+    expect(positions?.[0]?.position.size).toBeCloseTo(0.5, 5);
+  });
+
+  it("returns undefined for an empty size list", () => {
+    expect(combineAllBarPositions([], undefined, 0, 0, 100, 100, undefined)).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,56 @@
+import { scaleLinear } from "victory-vendor/d3-scale";
+import { describe, expect, it } from "vitest";
+import { assertNotNull } from "../../../helper/assertNotNull";
+import { AxisRange } from "../../../../src/state/selectors/axisSelectors";
+import { combineConfiguredScaleInternal } from "../../../../src/state/selectors/combiners/combineConfiguredScale";
+
+const testDomain: ReadonlyArray<number> = [0, 100];
+const testRange: AxisRange = [0, 500];
+
+describe("combineConfiguredScaleInternal", () => {
+  it("returns undefined when scale is undefined", () => {
+    expect(combineConfiguredScaleInternal(undefined, testDomain, testRange)).toBeUndefined();
+  });
+
+  it('returns a configured scale for a valid short scale name like "linear"', () => {
+    const result = combineConfiguredScaleInternal("linear", testDomain, testRange);
+    assertNotNull(result);
+    expect(result.domain()).toEqual(testDomain);
+    expect(result.range()).toEqual(testRange);
+  });
+
+  it("returns a configured scale for other valid short names", () => {
+    const result = combineConfiguredScaleInternal("log", [1, 100], testRange);
+    assertNotNull(result);
+    expect(result.domain()).toEqual([1, 100]);
+    expect(result.range()).toEqual(testRange);
+  });
+
+  it('returns a configured scale for full d3 scale names like "scaleLinear"', () => {
+    const result = combineConfiguredScaleInternal("scaleLinear", testDomain, testRange);
+    assertNotNull(result);
+    expect(result.domain()).toEqual(testDomain);
+    expect(result.range()).toEqual(testRange);
+  });
+
+  it("returns undefined for a name that resolves to a non-function d3 export (scaleImplicit is a Symbol)", () => {
+    // "implicit" maps to "scaleImplicit" which is a Symbol sentinel, not a scale constructor
+    // @ts-expect-error testing runtime behavior with a scale name that resolves to a non-function export
+    const result = combineConfiguredScaleInternal("implicit", testDomain, testRange);
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for a completely unknown scale name", () => {
+    // @ts-expect-error testing runtime behavior with a made-up scale name
+    const result = combineConfiguredScaleInternal("madeUpScaleName", testDomain, testRange);
+    expect(result).toBeUndefined();
+  });
+
+  it("uses the function scale directly when scale is a function", () => {
+    const fnScale = scaleLinear().copy().domain([0, 50]).range([0, 200]);
+    const result = combineConfiguredScaleInternal(fnScale, testDomain, testRange);
+    assertNotNull(result);
+    expect(result.domain()).toEqual(testDomain);
+    expect(result.range()).toEqual(testRange);
+  });
+});

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

@@ -0,0 +1,123 @@
+import { describe, it, expect } from "vitest";
+import { combineDisplayedStackedData } from "../../../../src/state/selectors/combiners/combineDisplayedStackedData";
+import { ChartDataState } from "../../../../src/state/chartDataSlice";
+import { BaseCartesianAxis } from "../../../../src/state/cartesianAxisSlice";
+import { DefinitelyStackedGraphicalItem } from "../../../../src/state/types/StackedGraphicalItem";
+
+const emptyAxisSettings: BaseCartesianAxis = {
+  type: "number",
+  id: "emptyAxis",
+  domain: [],
+  dataKey: undefined,
+  scale: "sequential",
+  unit: "",
+  name: "",
+  allowDuplicatedCategory: false,
+  allowDataOverflow: false,
+  reversed: false,
+  includeHidden: false,
+};
+
+function createMockBaseCartesianAxis(
+  partialBaseAxis: Partial<BaseCartesianAxis>,
+): BaseCartesianAxis {
+  return {
+    ...emptyAxisSettings,
+    ...partialBaseAxis,
+  };
+}
+
+describe("combineDisplayedStackedData", () => {
+  const emptyChartDataState: ChartDataState = {
+    chartData: [],
+    dataStartIndex: 0,
+    dataEndIndex: 0,
+    computedData: undefined,
+  };
+
+  it("should return empty array when no cartesian items are provided", () => {
+    const result = combineDisplayedStackedData(
+      [],
+      emptyChartDataState,
+      createMockBaseCartesianAxis({ dataKey: undefined }),
+    );
+    expect(result).toEqual([]);
+  });
+
+  it("should stack data points by stack identifier", () => {
+    const cartesianItems: ReadonlyArray<DefinitelyStackedGraphicalItem> = [
+      {
+        data: [
+          { value: 10, name: "a" },
+          { value: 20, name: "b" },
+        ],
+        id: "id1",
+        dataKey: "value",
+        hide: false,
+        stackId: "a",
+        barSize: "",
+      },
+      {
+        data: [
+          { value: 30, name: "a" },
+          { value: 40, name: "b" },
+        ],
+        id: "id2",
+        dataKey: "value",
+        hide: false,
+        stackId: "a",
+        barSize: "",
+      },
+    ];
+
+    const result = combineDisplayedStackedData(
+      cartesianItems,
+      emptyChartDataState,
+      createMockBaseCartesianAxis({ dataKey: "name" }),
+    );
+
+    expect(result).toEqual([
+      { id1: 10, id2: 30 },
+      { id1: 20, id2: 40 },
+    ]);
+  });
+
+  it("should ignore stackIds because another selected down the road handles that", () => {
+    const cartesianItems: ReadonlyArray<DefinitelyStackedGraphicalItem> = [
+      {
+        data: [
+          { value: 10, name: "a" },
+          { value: 20, name: "b" },
+        ],
+        id: "id1",
+        dataKey: "value",
+        hide: false,
+        stackId: "a",
+        barSize: "",
+      },
+      {
+        data: [
+          { value: 30, name: "a" },
+          { value: 40, name: "b" },
+        ],
+        id: "id2",
+        dataKey: "value",
+        hide: false,
+        stackId: "b",
+        barSize: "",
+      },
+    ];
+
+    const result = combineDisplayedStackedData(
+      cartesianItems,
+      emptyChartDataState,
+      createMockBaseCartesianAxis({ dataKey: "name" }),
+    );
+
+    // merged anyway, stackId will be figured out later
+    expect(result).toEqual([
+      { id1: 10, id2: 30 },
+      { id1: 20, id2: 40 },
+    ]);
+  });
+});