solid-recharts 0.2.1 → 1.0.0

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

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

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

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