solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/util/ChartUtils/ChartUtils.spec.ts

@@ -0,0 +1,491 @@
+import { scaleBand, scaleLinear, scalePoint } from "d3-scale";
+import {
+  type AxisPropsNeededForTicksGenerator,
+  getBandSizeOfAxis,
+  getDomainOfStackGroups,
+  getTooltipNameProp,
+  getTicksOfAxis,
+  getValueByDataKey,
+  isCategoricalAxis,
+  MAX_VALUE_REG,
+  MIN_VALUE_REG,
+} from "../../../src/util/ChartUtils";
+import type { AxisType, DataKey, LayoutType, TickItem } from "../../../src/util/types";
+import type { BaseAxisWithScale } from "../../../src/state/selectors/axisSelectors";
+import { calculateActiveTickIndex } from "../../../src/util/getActiveCoordinate";
+import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
+import { rechartsScaleFactory } from "../../../src/util/scale/RechartsScale";
+import type { CustomScaleDefinition } from "../../../src/util/scale/CustomScaleDefinition";
+
+/*
+ * Ported from recharts 3.8.1 test/util/ChartUtils.spec.tsx.
+ */
+
+describe("getTicksForAxis", () => {
+  const Y_AXIS_EXAMPLE: AxisPropsNeededForTicksGenerator = {
+    scale: rechartsScaleFactory<number>(scaleLinear()),
+    tickCount: 5,
+    type: "number",
+    axisType: "yAxis",
+    isCategorical: false,
+    niceTicks: [0, 400, 800, 1200, 1600],
+    realScaleType: "linear",
+  };
+
+  it("Returns null for null", () => {
+    expect(getTicksOfAxis(undefined)).toBeNull();
+  });
+
+  it(`Ticks without a valid coordinate are filtered out,
+  such as with a PointScale and an active Brush, filtering the domain.`, () => {
+    const stringScalePoint: CustomScaleDefinition<string> = scalePoint()
+      .domain(["13", "14", "15", "16", "17"])
+      .range([5, 866]);
+    const XAxisWithActiveBrush: AxisPropsNeededForTicksGenerator = {
+      scale: rechartsScaleFactory(stringScalePoint),
+      ticks: ["12", "13", "14", "15", "16", "17", "18", "19"],
+      tickCount: 5,
+      type: "category",
+      axisType: "xAxis",
+      isCategorical: true,
+      realScaleType: "point",
+    };
+
+    expect(getTicksOfAxis(XAxisWithActiveBrush, true, undefined)).toEqual([
+      {
+        coordinate: 5,
+        index: 1,
+        offset: 0,
+        value: "13",
+      },
+      {
+        coordinate: 220.25,
+        index: 2,
+        offset: 0,
+        value: "14",
+      },
+      {
+        coordinate: 435.5,
+        index: 3,
+        offset: 0,
+        value: "15",
+      },
+      {
+        coordinate: 650.75,
+        index: 4,
+        offset: 0,
+        value: "16",
+      },
+      {
+        coordinate: 866,
+        index: 5,
+        offset: 0,
+        value: "17",
+      },
+    ]);
+  });
+
+  it("Works for yAxis", () => {
+    expect(getTicksOfAxis(Y_AXIS_EXAMPLE, true, undefined)).toEqual([
+      { coordinate: 0, offset: 0, value: 0, index: 0 },
+      { coordinate: 400, offset: 0, value: 400, index: 1 },
+      { coordinate: 800, offset: 0, value: 800, index: 2 },
+      { coordinate: 1200, offset: 0, value: 1200, index: 3 },
+      { coordinate: 1600, offset: 0, value: 1600, index: 4 },
+    ]);
+  });
+
+  it("Tick coordinates depend on scale", () => {
+    const axis: AxisPropsNeededForTicksGenerator = {
+      ...Y_AXIS_EXAMPLE,
+      scale: rechartsScaleFactory<number>(scaleLinear().domain([0, 1600]).range([0, 1000])),
+    };
+
+    expect(getTicksOfAxis(axis, true, undefined)).toEqual([
+      { coordinate: 0, offset: 0, value: 0, index: 0 },
+      { coordinate: 250, offset: 0, value: 400, index: 1 },
+      { coordinate: 500, offset: 0, value: 800, index: 2 },
+      { coordinate: 750, offset: 0, value: 1200, index: 3 },
+      { coordinate: 1000, offset: 0, value: 1600, index: 4 },
+    ]);
+  });
+});
+
+describe("getBandSizeOfAxis", () => {
+  it("getBandSizeOfAxis() should return 0", () => {
+    expect(getBandSizeOfAxis()).toBe(0);
+  });
+
+  it("should return band size of scale, if available", () => {
+    const axis: BaseAxisWithScale = {
+      allowDataOverflow: false,
+      allowDuplicatedCategory: false,
+      dataKey: undefined,
+      domain: undefined,
+      id: defaultAxisId,
+      includeHidden: false,
+      name: undefined,
+      reversed: false,
+      unit: undefined,
+      type: "category",
+      scale: rechartsScaleFactory<string>(scaleBand().domain(["0", "1", "2", "3"]).range([0, 100])),
+    };
+    expect(getBandSizeOfAxis(axis)).toBe(25);
+  });
+
+  it("should compute band size from data if scale does not return explicit band size", () => {
+    const axis: BaseAxisWithScale = {
+      allowDataOverflow: false,
+      allowDuplicatedCategory: false,
+      dataKey: undefined,
+      domain: undefined,
+      id: defaultAxisId,
+      includeHidden: false,
+      name: undefined,
+      reversed: false,
+      unit: undefined,
+      type: "number",
+      scale: rechartsScaleFactory<number>(scaleLinear()),
+    };
+    const ticks: ReadonlyArray<TickItem> = [
+      { coordinate: 13, index: 0, value: "a" },
+      { coordinate: 15, index: 1, value: "b" },
+      { coordinate: 20, index: 2, value: "c" },
+    ];
+    expect(getBandSizeOfAxis(axis, ticks)).toBe(2);
+  });
+});
+
+describe("getValueByDataKey", () => {
+  const data: Record<string, unknown> = {
+    a: 1,
+    b: 2,
+    c: 3,
+    1: 4,
+    u: undefined,
+    n: null,
+    nested: { obj: { children: 7 } },
+    arr: [{ x: 6 }, { y: 5 }],
+    nan: NaN,
+  };
+
+  it("should call dataKey if it is a function", () => {
+    const fn: DataKey<typeof data> = (entry) => entry.a;
+    expect(getValueByDataKey(data, fn)).toBe(1);
+    expect(getValueByDataKey(data, fn, 9)).toBe(1);
+  });
+
+  it("should return data from object root", () => {
+    expect(getValueByDataKey(data, "a")).toEqual(1);
+    expect(getValueByDataKey(data, "a", 9)).toEqual(1);
+  });
+
+  it("should return data nested in the object", () => {
+    expect(getValueByDataKey(data, "nested.obj.children")).toEqual(7);
+    expect(getValueByDataKey(data, "nested.obj.children", 9)).toEqual(7);
+  });
+
+  it("should return data nested in the object inside array", () => {
+    expect(getValueByDataKey(data, "arr[1].y")).toEqual(5);
+    expect(getValueByDataKey(data, "arr[1].y", 9)).toEqual(5);
+  });
+
+  it("should read numeric keys", () => {
+    expect(getValueByDataKey(data, 1)).toEqual(4);
+    expect(getValueByDataKey(data, 1, 9)).toEqual(4);
+    expect(getValueByDataKey(data, "1")).toEqual(4);
+    expect(getValueByDataKey(data, "1", 9)).toEqual(4);
+  });
+
+  it("should return default value if the data object path is not defined", () => {
+    expect(getValueByDataKey(data, "foo", 0)).toBe(0);
+    expect(getValueByDataKey(data, "foo")).toBe(undefined);
+  });
+
+  it("should return default value if the data object path exists but contains undefined", () => {
+    expect(getValueByDataKey(data, "d", 0)).toBe(0);
+    expect(getValueByDataKey(data, "d")).toBe(undefined);
+  });
+
+  it("should return default value if the data object path exists but contains null", () => {
+    expect(getValueByDataKey(data, "d", 0)).toBe(0);
+    expect(getValueByDataKey(data, "d")).toBe(undefined);
+  });
+
+  it("should return NaN if the data object path exists and contains NaN", () => {
+    expect(getValueByDataKey(data, "nan", 0)).toBe(NaN);
+    expect(getValueByDataKey(data, "nan")).toBe(NaN);
+  });
+
+  it("should return defaultValue if dataKey is undefined", () => {
+    expect(getValueByDataKey(data, undefined as never, 7)).toEqual(7);
+  });
+
+  it("should return undefined if both dataKey and defaultValue are undefined", () => {
+    expect(getValueByDataKey(data, undefined as never, undefined)).toEqual(undefined);
+  });
+
+  test.each([null, undefined])("should return defaultValue if data object is %s", (d) => {
+    expect(getValueByDataKey(d, () => 1, 7)).toEqual(7);
+  });
+
+  test.each([
+    NaN,
+    [],
+    {},
+    function anon() {
+      return 8;
+    },
+  ])("should return result of function getter if data object is %s", (d) => {
+    expect(getValueByDataKey(d, () => 1, 7)).toEqual(1);
+  });
+});
+
+describe("calculateActiveTickIndex", () => {
+  const ticks: ReadonlyArray<TickItem> = [
+    { coordinate: 0, index: 0, value: "a", offset: 0 },
+    { coordinate: 12, index: 1, value: "b", offset: 0 },
+    { coordinate: 14, index: 2, value: "c", offset: 0 },
+    { coordinate: 15, index: 3, value: "d", offset: 0 },
+  ];
+  it("calculateActiveTickIndex(12, ticks) should return 1", () => {
+    expect(calculateActiveTickIndex(12, ticks, [], "radiusAxis", [0, 100])).toBe(1);
+  });
+
+  it("calculateActiveTickIndex(-1, ticks) should return 0", () => {
+    expect(calculateActiveTickIndex(-1, ticks, [], "radiusAxis", [0, 100])).toBe(0);
+  });
+
+  it("calculateActiveTickIndex(16, ticks) should return 3", () => {
+    expect(calculateActiveTickIndex(16, ticks, [], "radiusAxis", [0, 100])).toBe(3);
+  });
+});
+
+describe("getDomainOfStackGroups", () => {
+  let stackData: any;
+
+  beforeEach(() => {
+    stackData = {
+      a: {
+        stackedData: [
+          [
+            [10, 14],
+            [12, 16],
+          ],
+          [
+            [8, 14],
+            [34, 11],
+          ],
+        ],
+      },
+      b: {
+        stackedData: [
+          [
+            [9, 13],
+            [11, 15],
+          ],
+          [
+            [12, 14],
+            [25, 22],
+          ],
+        ],
+      },
+    };
+  });
+
+  it("correctly calculates the highest and lowest values in a stack of many values", () => {
+    expect(getDomainOfStackGroups(stackData, 0, 1)).toEqual([8, 34]);
+  });
+
+  it("deals with a null value without assuming it should be === 0", () => {
+    stackData.a.stackedData[0][0][0] = null;
+
+    expect(getDomainOfStackGroups(stackData, 0, 1)).toEqual([8, 34]);
+  });
+
+  it("domain of all nulls should return [0, 0]", () => {
+    stackData = {
+      a: { stackedData: [[[null, null]]] },
+    };
+
+    expect(getDomainOfStackGroups(stackData, 0, 1)).toEqual([0, 0]);
+  });
+
+  // https://github.com/recharts/recharts/issues/6235
+  it("returns undefined for empty stack groups", () => {
+    expect(getDomainOfStackGroups({}, 0, 1)).toBeUndefined();
+  });
+
+  // https://github.com/recharts/recharts/issues/6235
+  it("returns [0, 0] when all stacked values are zero", () => {
+    stackData = {
+      a: {
+        stackedData: [
+          [
+            [0, 0],
+            [0, 0],
+          ],
+        ],
+      },
+    };
+
+    expect(getDomainOfStackGroups(stackData, 0, 1)).toEqual([0, 0]);
+  });
+});
+
+describe("MIN_VALUE_REG ", () => {
+  it('.exec("dataMin - 0.233") is true', () => {
+    expect(MIN_VALUE_REG.test("dataMin - 0.233")).toBe(true);
+  });
+
+  it('.exec("dataMin - 233") is true', () => {
+    expect(MIN_VALUE_REG.test("dataMin - 233")).toBe(true);
+  });
+
+  it('.exec("dataMin - 233,") is false', () => {
+    expect(MIN_VALUE_REG.test("dataMin - 233,")).toBe(false);
+  });
+});
+
+describe("MAX_VALUE_REG ", () => {
+  it('.exec("dataMax + 0.233") is true', () => {
+    expect(MAX_VALUE_REG.test("dataMax + 0.233")).toBe(true);
+  });
+
+  it('.exec("dataMax + 233") is true', () => {
+    expect(MAX_VALUE_REG.test("dataMax + 233")).toBe(true);
+  });
+
+  it('.exec("dataMax + 233,") is false', () => {
+    expect(MAX_VALUE_REG.test("dataMax + 233,")).toBe(false);
+  });
+});
+
+describe("isCategoricalAxis", () => {
+  const casesWhereTrue: {
+    name: string;
+    layout: LayoutType;
+    axisType: AxisType;
+  }[] = [
+    {
+      name: "xAxis in horizontal layout",
+      layout: "horizontal",
+      axisType: "xAxis",
+    },
+    {
+      name: "yAxis in vertical layout",
+      layout: "vertical",
+      axisType: "yAxis",
+    },
+    {
+      name: "angleAxis in centric layout",
+      layout: "centric",
+      axisType: "angleAxis",
+    },
+    {
+      name: "radiusAxis in radial layout",
+      layout: "radial",
+      axisType: "radiusAxis",
+    },
+  ];
+
+  const casesWhereFalse: {
+    name: string;
+    layout: LayoutType;
+    axisType: AxisType;
+  }[] = [
+    {
+      name: "xAxis in vertical layout",
+      layout: "vertical",
+      axisType: "xAxis",
+    },
+    {
+      name: "yAxis in horizontal layout",
+      layout: "horizontal",
+      axisType: "yAxis",
+    },
+    {
+      name: "angleAxis in radial layout",
+      layout: "radial",
+      axisType: "angleAxis",
+    },
+    {
+      name: "radiusAxis in centric layout",
+      layout: "centric",
+      axisType: "radiusAxis",
+    },
+    {
+      name: "xAxis in radial layout",
+      layout: "radial",
+      axisType: "xAxis",
+    },
+    {
+      name: "yAxis in centric layout",
+      layout: "centric",
+      axisType: "yAxis",
+    },
+    {
+      name: "angleAxis in horizontal layout",
+      layout: "horizontal",
+      axisType: "angleAxis",
+    },
+    {
+      name: "radiusAxis in vertical layout",
+      layout: "vertical",
+      axisType: "radiusAxis",
+    },
+    {
+      name: "xAxis in centric layout",
+      layout: "centric",
+      axisType: "xAxis",
+    },
+    {
+      name: "yAxis in radial layout",
+      layout: "radial",
+      axisType: "yAxis",
+    },
+  ];
+  test.each(casesWhereTrue)(
+    "it should return true for $axisType axis in $layout chart",
+    ({ axisType, layout }) => {
+      expect(isCategoricalAxis(layout, axisType)).toBe(true);
+    },
+  );
+
+  test.each(casesWhereFalse)(
+    "it should return false for $axisType axis in $layout chart",
+    ({ axisType, layout }) => {
+      expect(isCategoricalAxis(layout, axisType)).toBe(false);
+    },
+  );
+});
+
+describe("getTooltipNameProp", () => {
+  it("should return string name when provided", () => {
+    expect(getTooltipNameProp("revenue", "dataKey")).toBe("revenue");
+  });
+
+  it("should return stringified number name when provided", () => {
+    expect(getTooltipNameProp(42, "dataKey")).toBe("42");
+  });
+
+  it("should preserve name={0} instead of falling back to dataKey", () => {
+    expect(getTooltipNameProp(0, "dataKey")).toBe("0");
+  });
+
+  it('should preserve name="" instead of falling back to dataKey', () => {
+    expect(getTooltipNameProp("", "dataKey")).toBe("");
+  });
+
+  it("should fall back to string dataKey when name is undefined", () => {
+    expect(getTooltipNameProp(undefined, "revenue")).toBe("revenue");
+  });
+
+  it("should return undefined when name is undefined and dataKey is a function", () => {
+    expect(getTooltipNameProp(undefined, (entry: unknown) => entry)).toBeUndefined();
+  });
+
+  it("should return undefined when both name and dataKey are undefined", () => {
+    expect(getTooltipNameProp(undefined, undefined)).toBeUndefined();
+  });
+});

package/test/util/ChartUtils/appendOffsetOfLegend.spec.ts

@@ -0,0 +1,136 @@
+import { appendOffsetOfLegend } from "../../../src/util/ChartUtils";
+import type { Size } from "../../../src/util/types";
+import type { LegendSettings } from "../../../src/state/legendSlice";
+
+/*
+ * Ported from recharts 3.8.1 test/util/ChartUtils/appendOffsetOfLegend.spec.tsx.
+ * Deviations: recharts imports `OffsetHorizontal`/`OffsetVertical` types which this
+ * port does not export — the offset is typed inline as the `{ top, right, bottom,
+ * left }` shape `appendOffsetOfLegend` accepts. The `vi.mock('.../ReactUtils')` is
+ * dropped: this port has no `ReactUtils` and `appendOffsetOfLegend` does not use it.
+ */
+
+type Offset = { top: number; right: number; bottom: number; left: number };
+
+const emptyOffset: Offset = {
+  top: 1,
+  right: 2,
+  bottom: 9,
+  left: 5,
+};
+
+describe("appendOffsetOfLegend", () => {
+  it("should add extra space for a vertical legend", () => {
+    const settings: LegendSettings = {
+      verticalAlign: "bottom",
+      layout: "vertical",
+      align: "left",
+      itemSorter: "value",
+    };
+    const size: Size = {
+      width: 100,
+      height: 200,
+    };
+    const result = appendOffsetOfLegend(emptyOffset, settings, size);
+    expect(result).toEqual({
+      ...emptyOffset,
+      left: 105,
+    });
+  });
+
+  it("should add extra space for a horizontal legend, middle aligned", () => {
+    const settings: LegendSettings = {
+      layout: "horizontal",
+      verticalAlign: "middle",
+      align: "left",
+      itemSorter: "value",
+    };
+    const size: Size = {
+      width: 100,
+      height: 200,
+    };
+    const result = appendOffsetOfLegend(emptyOffset, settings, size);
+    expect(result).toEqual({
+      ...emptyOffset,
+      left: 105,
+    });
+  });
+
+  it("should not modify the original offset that was passed as an argument", () => {
+    const clone: Offset = { ...emptyOffset };
+    const settings: LegendSettings = {
+      layout: "horizontal",
+      verticalAlign: "middle",
+      align: "left",
+      itemSorter: "value",
+    };
+    const size: Size = {
+      width: 100,
+      height: 200,
+    };
+    appendOffsetOfLegend(emptyOffset, settings, size);
+
+    expect(emptyOffset).toEqual(clone);
+  });
+
+  it("should add extra space for a horizontal legend", () => {
+    const settings: LegendSettings = {
+      align: "left",
+      layout: "horizontal",
+      verticalAlign: "bottom",
+      itemSorter: "value",
+    };
+    const size: Size = {
+      width: 100,
+      height: 200,
+    };
+    const result = appendOffsetOfLegend(emptyOffset, settings, size);
+    expect(result).toEqual({ ...emptyOffset, bottom: 209 });
+  });
+
+  it("should add extra space for a vertical legend, center aligned", () => {
+    const settings: LegendSettings = {
+      align: "center",
+      layout: "vertical",
+      verticalAlign: "bottom",
+      itemSorter: "value",
+    };
+    const size: Size = {
+      width: 100,
+      height: 200,
+    };
+    const result = appendOffsetOfLegend(emptyOffset, settings, size);
+    expect(result).toEqual({ ...emptyOffset, bottom: 209 });
+  });
+
+  it("should do nothing for vertical legend with align: center", () => {
+    const settings: LegendSettings = {
+      align: "center",
+      layout: "vertical",
+      verticalAlign: "middle",
+      itemSorter: "value",
+    };
+    const size: Size = {
+      width: 100,
+      height: 200,
+    };
+    const result = appendOffsetOfLegend(emptyOffset, settings, size);
+    expect(result).toEqual(emptyOffset);
+  });
+
+  it("should add space for horizontal legend with verticalAlign: middle and align:left", () => {
+    const settings: LegendSettings = {
+      align: "left",
+      layout: "horizontal",
+      verticalAlign: "middle",
+      itemSorter: "value",
+    };
+    const size: Size = {
+      width: 100,
+      height: 200,
+    };
+
+    const result = appendOffsetOfLegend(emptyOffset, settings, size);
+    expect(result).toEqual({ ...emptyOffset, left: 105 });
+  });
+});