solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,133 @@
+// Port of recharts 3.8.1 test/util/ChartUtils/appendOffsetOfLegend.spec.tsx (commit 7a23854).
+// Harness deltas: dropped the `vi.mock('.../ReactUtils')` (Solid ChartUtils does not
+// import ReactUtils); `OffsetVertical & OffsetHorizontal` → the local `OffsetSides` shape
+// (ChartUtils' offset type; not exported).
+import { describe, it, expect } from "vitest";
+import { appendOffsetOfLegend } from "../../../src/util/ChartUtils";
+import { Size } from "../../../src/util/types";
+import { LegendSettings } from "../../../src/state/legendSlice";
+
+type OffsetSides = { top: number; right: number; bottom: number; left: number };
+
+const emptyOffset: OffsetSides = {
+  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: OffsetSides = { ...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 });
+  });
+});

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

@@ -0,0 +1,97 @@
+import { describe, it, expect } from "vitest";
+import { getCateCoordinateOfLine } from "../../../src/util/ChartUtils";
+import { RechartsScale } from "../../../src/util/scale/RechartsScale";
+
+// @ts-expect-error incomplete mock data
+const mockScale: RechartsScale = { map: (v: number) => v * 2 };
+
+describe("getCateCoordinateOfLine", () => {
+  describe("numerical axis", () => {
+    it("should return null when passed empty params", () => {
+      // @ts-expect-error incomplete mock data
+      const actual = getCateCoordinateOfLine({
+        axis: { scale: mockScale },
+      });
+      expect(actual).toBeNull();
+    });
+
+    it("should return scaled value", () => {
+      // @ts-expect-error incomplete mock data
+      const actual = getCateCoordinateOfLine({
+        axis: { scale: mockScale },
+        entry: { x: 1 },
+        dataKey: "x",
+      });
+      expect(actual).toBe(2);
+    });
+
+    it("should use axis.dataKey if the root dataKey is undefined", () => {
+      // @ts-expect-error incomplete mock data
+      const actual = getCateCoordinateOfLine({
+        axis: { scale: mockScale, dataKey: "x" },
+        entry: { x: 1 },
+      });
+      expect(actual).toBe(2);
+    });
+
+    it("should use root dataKey if two dataKeys are defined", () => {
+      // @ts-expect-error incomplete mock data
+      const actual = getCateCoordinateOfLine({
+        axis: { scale: mockScale, dataKey: "x" },
+        entry: { x: 1, y: 3 },
+        dataKey: "y",
+      });
+      expect(actual).toBe(6);
+    });
+  });
+
+  describe("category axis", () => {
+    it("should return null if there are no ticks", () => {
+      // @ts-expect-error incomplete mock data
+      const actual = getCateCoordinateOfLine({
+        axis: { type: "category", scale: mockScale },
+        ticks: [],
+      });
+      expect(actual).toBeNull();
+    });
+
+    it("should return first tick coordinate with half of bandSize added, if axis.dataKey is undefined", () => {
+      // @ts-expect-error incomplete mock data
+      const actual = getCateCoordinateOfLine({
+        axis: { type: "category", scale: mockScale },
+        bandSize: 2,
+        index: 0,
+        ticks: [{ coordinate: 8, index: 0, value: "foo" }],
+      });
+      expect(actual).toBe(9);
+    });
+
+    it("should follow axis.dataKey -> ticks.value -> tick.coordinate and return that", () => {
+      // @ts-expect-error incomplete mock data
+      const actual = getCateCoordinateOfLine({
+        axis: { type: "category", dataKey: "foo", scale: mockScale },
+        bandSize: 4,
+        entry: { foo: "bar" },
+        ticks: [
+          { coordinate: 8, index: 0, value: "foo" },
+          { coordinate: 16, index: 1, value: "bar" },
+        ],
+      });
+      expect(actual).toBe(18);
+    });
+
+    it("should not match NaN tick values and should fall back to the indexed tick", () => {
+      const actual = getCateCoordinateOfLine({
+        axis: { type: "category", dataKey: "foo", scale: mockScale },
+        bandSize: 4,
+        entry: { foo: NaN },
+        index: 0,
+        ticks: [
+          { coordinate: 8, index: 0, value: "fallback" },
+          { coordinate: 16, index: 1, value: NaN },
+        ],
+      });
+      expect(actual).toBe(10);
+    });
+  });
+});

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

@@ -0,0 +1,416 @@
+import type { Series, SeriesPoint } from "d3-shape";
+import { getStackedData, offsetSign } from "../../../src/util/ChartUtils";
+import type { StackOffsetType } from "../../../src/util/types";
+
+// Ported from recharts 3.8.1 test/util/ChartUtils/getStackedData.spec.ts.
+// Deviation from the reference: array index accesses carry `!` and the
+// function-form dataKeys are typed `(o: any)` to satisfy this port's stricter
+// tsconfig (`noUncheckedIndexedAccess`) and `DataKey<unknown>` stack-key type.
+
+export function createSeries(
+  key: string,
+  index: number,
+  data: Array<SeriesPoint<Record<string, unknown>>> = [],
+): Series<Record<string, unknown>, string> {
+  return Object.assign(data, { key, index });
+}
+
+export function createSeriesPoint(
+  first: number,
+  second: number,
+  data: Record<string, unknown>,
+): SeriesPoint<Record<string, unknown>> {
+  return Object.assign([], { data, 0: first, 1: second });
+}
+
+const mockData = [
+  {
+    name: "Page A",
+    uv: 590,
+    pv: 800,
+    amt: 1400,
+  },
+  {
+    name: "Page B",
+    uv: 868,
+    pv: 967,
+    amt: 1506,
+  },
+];
+
+const dataWithNegativeNumbers = [
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: "Page B",
+    uv: -3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: "Page C",
+    uv: -2000,
+    pv: -9800,
+    amt: 2290,
+  },
+  {
+    name: "Page D",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: "Page E",
+    uv: -1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: "Page F",
+    uv: 2390,
+    pv: -3800,
+    amt: 2500,
+  },
+  {
+    name: "Page G",
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
+
+/**
+ * If you see one of these tests failing with a message "serializes to the same string",
+ * that is because the d3-shape library assigns arbitrary property keys to an array.
+ *
+ * Jest doesn't like that. When it compares the two arrays it can see that it has extra property,
+ * and if that extra property is different then it fails.
+ * But when printing the array, it only prints the usual array elements, and ignores the extra properties.
+ * Therefore, the "serializes to the same string" problem.
+ *
+ * So when you see that error, try to compare the other properties, like `Series.key` and `SeriesPoint.data`.
+ * Or print them with console.log, that will show the difference.
+ */
+describe("getStackedData", () => {
+  it("should return empty array if there is no data", () => {
+    expect(getStackedData([], [], "none")).toEqual([]);
+  });
+
+  it("should return empty array if there is some data but no data keys", () => {
+    expect(getStackedData([{ x: 1 }], [], "none")).toEqual([]);
+  });
+
+  it("should return one empty array for each dataKey even if it is not part of the data", () => {
+    const result = getStackedData([], ["x", "y", "z"], "none");
+    const expected = [createSeries("x", 0), createSeries("y", 1), createSeries("z", 2)];
+    expect(result).toEqual(expected);
+  });
+
+  it("should return one empty array for each data key even if it is not part of the data", () => {
+    const result = getStackedData([], ["x", "y", "z"], "none");
+    const expected = [createSeries("x", 0), createSeries("y", 1), createSeries("z", 2)];
+    expect(result).toEqual(expected);
+  });
+
+  const allOffsets: StackOffsetType[] = [
+    "expand",
+    "none",
+    "positive",
+    "sign",
+    "silhouette",
+    "wiggle",
+  ];
+  describe.each(allOffsets)("with offset %s", (offset) => {
+    it("should stack numerical data", () => {
+      const dataKeys = ["uv", "pv"];
+      const result = getStackedData(mockData, dataKeys, offset);
+      expect(result).toHaveLength(dataKeys.length);
+      result.forEach((series) => {
+        expect(series).toHaveLength(mockData.length);
+        series.forEach((point) => {
+          expect(point[0]).toEqual(expect.any(Number));
+          expect(point[1]).toEqual(expect.any(Number));
+          expect(point[0]).not.toBeNaN();
+          expect(point[1]).not.toBeNaN();
+        });
+      });
+    });
+
+    it("should stack data when dataKey is a function", () => {
+      const dataKeys = [(o: any) => o.uv + 100, (o: any) => o.pv - 100];
+      const result = getStackedData(mockData, dataKeys, offset);
+      expect(result).toHaveLength(dataKeys.length);
+      result.forEach((series) => {
+        expect(series).toHaveLength(mockData.length);
+        series.forEach((point) => {
+          expect(point[0]).toEqual(expect.any(Number));
+          expect(point[1]).toEqual(expect.any(Number));
+          expect(point[0]).not.toBeNaN();
+          expect(point[1]).not.toBeNaN();
+        });
+      });
+    });
+  });
+
+  it("should stack numerical data with offset: none", () => {
+    const result = getStackedData(mockData, ["uv", "pv"], "none");
+    const firstSeries = createSeries("uv", 0, [
+      createSeriesPoint(0, 590, mockData[0]!), // first bar is always from 0 to its value, 'uv' data point
+      createSeriesPoint(0, 868, mockData[1]!), // first bar is always from 0 to its value, 'uv' data point from second object
+    ]);
+    const secondSeries = createSeries("pv", 1, [
+      createSeriesPoint(590, 1390, mockData[0]!), // second bar adds the 'pv' value on top of the 'uv' value 590 + 800 = 1390
+      createSeriesPoint(868, 1835, mockData[1]!), // second bar adds the 'pv' value on top of the 'uv' value 868 + 967 = 1835
+    ]);
+    const expected = [firstSeries, secondSeries];
+    expect(result).toEqual(expected);
+  });
+
+  it("should stack numerical data with offset: sign", () => {
+    const result = getStackedData(dataWithNegativeNumbers, ["uv", "pv"], "sign");
+    const uvSeries = createSeries("uv", 0, [
+      createSeriesPoint(0, 4000, dataWithNegativeNumbers[0]!),
+      createSeriesPoint(0, -3000, dataWithNegativeNumbers[1]!),
+      createSeriesPoint(0, -2000, dataWithNegativeNumbers[2]!),
+      createSeriesPoint(0, 2780, dataWithNegativeNumbers[3]!),
+      createSeriesPoint(0, -1890, dataWithNegativeNumbers[4]!),
+      createSeriesPoint(0, 2390, dataWithNegativeNumbers[5]!),
+      createSeriesPoint(0, 3490, dataWithNegativeNumbers[6]!),
+    ]);
+    const pvSeries = createSeries("pv", 1, [
+      createSeriesPoint(4000, 6400, dataWithNegativeNumbers[0]!),
+      createSeriesPoint(0, 1398, dataWithNegativeNumbers[1]!),
+      createSeriesPoint(-2000, -11800, dataWithNegativeNumbers[2]!),
+      createSeriesPoint(2780, 6688, dataWithNegativeNumbers[3]!),
+      createSeriesPoint(0, 4800, dataWithNegativeNumbers[4]!),
+      createSeriesPoint(0, -3800, dataWithNegativeNumbers[5]!),
+      createSeriesPoint(3490, 7790, dataWithNegativeNumbers[6]!),
+    ]);
+    const expected = [uvSeries, pvSeries];
+    expect(result).toEqual(expected);
+  });
+
+  it("with offset: positive should ignore all negative data points", () => {
+    const dataKeys = ["uv", "pv"];
+    const result = getStackedData(dataWithNegativeNumbers, dataKeys, "positive");
+    const uvSeries = createSeries("uv", 0, [
+      createSeriesPoint(0, 4000, dataWithNegativeNumbers[0]!),
+      createSeriesPoint(0, 0, dataWithNegativeNumbers[1]!),
+      createSeriesPoint(0, 0, dataWithNegativeNumbers[2]!),
+      createSeriesPoint(0, 2780, dataWithNegativeNumbers[3]!),
+      createSeriesPoint(0, 0, dataWithNegativeNumbers[4]!),
+      createSeriesPoint(0, 2390, dataWithNegativeNumbers[5]!),
+      createSeriesPoint(0, 3490, dataWithNegativeNumbers[6]!),
+    ]);
+    const pvSeries = createSeries("pv", 1, [
+      createSeriesPoint(4000, 6400, dataWithNegativeNumbers[0]!),
+      createSeriesPoint(0, 1398, dataWithNegativeNumbers[1]!),
+      createSeriesPoint(0, 0, dataWithNegativeNumbers[2]!),
+      createSeriesPoint(2780, 6688, dataWithNegativeNumbers[3]!),
+      createSeriesPoint(0, 4800, dataWithNegativeNumbers[4]!),
+      createSeriesPoint(0, 0, dataWithNegativeNumbers[5]!),
+      createSeriesPoint(3490, 7790, dataWithNegativeNumbers[6]!),
+    ]);
+    const expected = [uvSeries, pvSeries];
+    expect(result).toEqual(expected);
+  });
+
+  it("should stack data when dataKey is a function with offset: none", () => {
+    const result = getStackedData(
+      mockData,
+      [(o: any) => o.uv + 100, (o: any) => o.pv - 100],
+      "none",
+    );
+    const firstSeries = createSeries("uv", 0, [
+      createSeriesPoint(0, 690, mockData[0]!),
+      createSeriesPoint(0, 968, mockData[1]!),
+    ]);
+    const secondSeries = createSeries("pv", 1, [
+      createSeriesPoint(690, 1390, mockData[0]!),
+      createSeriesPoint(968, 1835, mockData[1]!),
+    ]);
+    const expected = [firstSeries, secondSeries];
+    /*
+     * Direct comparison with .toEqual doesn't work because the `key` property is a function
+     * and jest always rejects when comparing functions.
+     */
+    expect(result).toHaveLength(expected.length);
+    expect(result[0]).toHaveLength(firstSeries.length);
+    expect(result[1]).toHaveLength(secondSeries.length);
+    result[0]!.forEach((point, index) => {
+      expect(point).toEqual(firstSeries[index]);
+    });
+    result[1]!.forEach((point, index) => {
+      expect(point).toEqual(secondSeries[index]);
+    });
+  });
+
+  test("offset: positive should turn data that are not numbers to zero", () => {
+    const mockCategoryData = [
+      {
+        name: "x",
+      },
+      {
+        name: "y",
+      },
+      {
+        name: "z",
+      },
+    ];
+    const result = getStackedData(mockCategoryData, ["x"], "positive");
+    const expected = [
+      createSeries("x", 0, [
+        createSeriesPoint(0, 0, mockCategoryData[0]!),
+        createSeriesPoint(0, 0, mockCategoryData[1]!),
+        createSeriesPoint(0, 0, mockCategoryData[2]!),
+      ]),
+    ];
+    expect(result).toEqual(expected);
+  });
+
+  test("offset: sign should turn data that are not numbers to zero", () => {
+    const mockCategoryData = [
+      {
+        name: "x",
+      },
+      {
+        name: "",
+      },
+      {
+        name: NaN,
+      },
+      {
+        name: function anon() {
+          return 0;
+        },
+      },
+    ];
+    const result = getStackedData(mockCategoryData, ["x"], "sign");
+    const expected = [
+      createSeries("x", 0, [
+        createSeriesPoint(0, 0, mockCategoryData[0]!),
+        createSeriesPoint(0, 0, mockCategoryData[1]!),
+        createSeriesPoint(0, 0, mockCategoryData[2]!),
+        createSeriesPoint(0, 0, mockCategoryData[3]!),
+      ]),
+    ];
+    expect(result).toEqual(expected);
+  });
+
+  test("offsetSign should mutate data in place", () => {
+    const data = [
+      createSeries("", 0, [
+        createSeriesPoint(0, 1, {}),
+        createSeriesPoint(0, 2, {}),
+        createSeriesPoint(0, -5, {}),
+      ]),
+      createSeries("", 1, [
+        createSeriesPoint(0, -1, {}),
+        createSeriesPoint(0, 2, {}),
+        createSeriesPoint(0, -5, {}),
+      ]),
+    ];
+    const expected = [
+      createSeries("", 0, [
+        createSeriesPoint(0, 1, {}),
+        createSeriesPoint(0, 2, {}),
+        createSeriesPoint(0, -5, {}),
+      ]),
+      createSeries("", 1, [
+        createSeriesPoint(0, -1, {}),
+        createSeriesPoint(2, 4, {}),
+        createSeriesPoint(-5, -10, {}),
+      ]),
+    ];
+    offsetSign(data, []);
+    expect(data).toEqual(expected);
+  });
+
+  test("stacking numbers encoded as strings produces numbers", () => {
+    const data = [
+      { name: "A", uv: "1", pv: "2" },
+      { name: "B", uv: "3", pv: "4" },
+    ];
+    const result = getStackedData(data, ["uv", "pv"], "none");
+    const expected = [
+      createSeries("uv", 0, [createSeriesPoint(0, 1, data[0]!), createSeriesPoint(0, 3, data[1]!)]),
+      createSeries("pv", 1, [createSeriesPoint(1, 3, data[0]!), createSeriesPoint(3, 7, data[1]!)]),
+    ];
+    expect(result).toEqual(expected);
+  });
+
+  test("stacking strings that are not numbers produces NaN - this is a bug if you ask me, we should reject non-numerical data", () => {
+    const data = [
+      { name: "A", uv: "a", pv: "b" },
+      { name: "B", uv: "c", pv: "d" },
+    ];
+    const result = getStackedData(data, ["uv", "pv"], "none");
+    const expected = [
+      createSeries("uv", 0, [
+        createSeriesPoint(0, NaN, data[0]!),
+        createSeriesPoint(0, NaN, data[1]!),
+      ]),
+      createSeries("pv", 1, [
+        createSeriesPoint(0, NaN, data[0]!),
+        createSeriesPoint(0, NaN, data[1]!),
+      ]),
+    ];
+    expect(result).toEqual(expected);
+  });
+
+  it("should stack ranged data", () => {
+    const displayedData = [
+      {
+        key1: [100, 200],
+        key2: [150, 250],
+        key3: [200, 300],
+      },
+      {
+        key1: [120, 180],
+        key2: [130, 230],
+        key3: [170, 270],
+      },
+      {
+        key1: [90, 160],
+        key2: [110, 210],
+        key3: [140, 240],
+      },
+      {
+        key1: [80, 140],
+        key2: [100, 200],
+        key3: [130, 220],
+      },
+    ];
+    const result = getStackedData(displayedData, ["key1", "key2", "key3"], "none");
+    const firstSeries = createSeries("key1", 0, [
+      createSeriesPoint(100, 200, displayedData[0]!), // with ranged data, first point is the range start, second point is the range end
+      createSeriesPoint(120, 180, displayedData[1]!), // and so on for each data point in the `key1` series
+      createSeriesPoint(90, 160, displayedData[2]!),
+      createSeriesPoint(80, 140, displayedData[3]!),
+    ]);
+    const secondSeries = createSeries("key2", 1, [
+      /*
+       * Second series starts where the data defined it: key2: [150, 250]
+       * This means from 150 to 250! it will overlap the first bar - but this is a choice of the user.
+       */
+      createSeriesPoint(150, 250, displayedData[0]!),
+      // likewise for all other data points
+      createSeriesPoint(130, 230, displayedData[1]!),
+      createSeriesPoint(110, 210, displayedData[2]!),
+      createSeriesPoint(100, 200, displayedData[3]!),
+    ]);
+    const thirdSeries = createSeries("key3", 2, [
+      // the for the third series - it just follows the ranged data as is, does not attempt to stack on top of previous series
+      createSeriesPoint(200, 300, displayedData[0]!),
+      createSeriesPoint(170, 270, displayedData[1]!),
+      createSeriesPoint(140, 240, displayedData[2]!),
+      createSeriesPoint(130, 220, displayedData[3]!),
+    ]);
+    const expected = [firstSeries, secondSeries, thirdSeries];
+    expect(result).toEqual(expected);
+  });
+});