solid-recharts 0.1.0

package/test/util/LogUtils.spec.ts

@@ -0,0 +1,45 @@
+import { vi } from "vitest";
+import { warn } from "../../src/util/LogUtils";
+
+describe("LogUtils", () => {
+  test("dont log when condition is true", () => {
+    const logSpy = vi.spyOn(console, "warn").mockImplementation((): void => undefined);
+    warn(true, "test");
+    expect(logSpy).not.toHaveBeenCalledWith("test");
+  });
+
+  test("warn when condition is false", () => {
+    const logSpy = vi.spyOn(console, "warn").mockImplementation((): void => undefined);
+    // log 'format'
+    warn(false, "format");
+
+    expect(logSpy).toHaveBeenCalledWith("format");
+
+    // log empty string
+    warn(false, "");
+    expect(logSpy).toHaveBeenCalledWith("");
+
+    // log string with a numerical variable
+    warn(false, "format width variable %s", 0);
+    expect(logSpy).toHaveBeenCalledWith("format width variable 0");
+  });
+
+  test("warns when format is undefined", () => {
+    const logSpy = vi.spyOn(console, "warn").mockImplementation((): void => undefined);
+
+    // condition is true, format is undefined
+    // @ts-expect-error - testing undefined format
+    warn(true, undefined);
+    expect(logSpy).toHaveBeenCalledWith("LogUtils requires an error message argument");
+
+    logSpy.mockClear();
+
+    // condition is false, format is undefined
+    // @ts-expect-error - testing undefined format
+    warn(false, undefined);
+    expect(logSpy).toHaveBeenCalledWith("LogUtils requires an error message argument");
+    expect(logSpy).toHaveBeenCalledWith(
+      "Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.",
+    );
+  });
+});

package/test/util/PolarUtils.spec.ts

@@ -0,0 +1,66 @@
+import {
+  RADIAN,
+  degreeToRadian,
+  getMaxRadius,
+  polarToCartesian,
+  radianToDegree,
+} from "../../src/util/PolarUtils";
+
+describe("degreeToRadian", () => {
+  test.each([
+    [0, 0],
+    [180, Math.PI],
+    [360, Math.PI * 2],
+    [90, Math.PI / 2],
+  ])("%d degrees should be %d rad", (deg: number, rad: number) => {
+    expect(degreeToRadian(deg)).toEqual(rad);
+    expect(radianToDegree(rad)).toEqual(deg);
+  });
+});
+
+describe("polarToCartesian", () => {
+  it("should convert zero", () => {
+    expect(polarToCartesian(0, 0, 0, 0)).toEqual({ x: 0, y: 0 });
+  });
+
+  test.each([
+    [0, 0, 1, RADIAN / 2, 1, 0],
+    [0, 0, 1, RADIAN, 1, 0],
+    [5, 7, 1, RADIAN, 6, 7],
+    [0, 0, 15, 0, 15, 0],
+  ])("should convert (%d, %d, %d, %d) => {x: %d, y: %d}", (cx, cy, radius, angle, x, y) => {
+    const result = polarToCartesian(cx, cy, radius, angle);
+    expect(result.x).toBeCloseTo(x, 3);
+    expect(result.y).toBeCloseTo(y, 3);
+  });
+});
+
+describe("getMaxRadius", () => {
+  it("should return 0 in trivial case", () => {
+    expect(getMaxRadius(0, 0)).toEqual(0);
+  });
+
+  test.each([
+    [10, 10, 5],
+    [4, 10, 2],
+    [10, 6, 3],
+    [-10, 10, 5],
+    [-10, -10, 5],
+  ])("w: %d h: %d => %d", (w, h, r) => {
+    expect(getMaxRadius(w, h)).toEqual(r);
+  });
+
+  it("should include offset", () => {
+    expect(
+      getMaxRadius(10, 8, {
+        top: 2,
+        right: 2,
+        bottom: 2,
+        left: 2,
+        width: 0,
+        height: 0,
+        brushBottom: 0,
+      }),
+    ).toEqual(2);
+  });
+});

package/test/util/ReduceCssCalcPrototype.spec.ts

@@ -0,0 +1,141 @@
+// Ported from recharts 3.8.1 test/util/ReduceCssCalcPrototype.spec.ts (commit 7a23854).
+import { reduceCSSCalc, safeEvaluateExpression } from "../../src/util/ReduceCSSCalc";
+
+describe("number calculate", () => {
+  const evaluateExpressionFloat = (str: string) => parseFloat(safeEvaluateExpression(str));
+  it("without parentheses, simple", () => {
+    expect(evaluateExpressionFloat("1 + 2 + 3")).toEqual(6);
+    expect(evaluateExpressionFloat("1 - 2 - 3")).toEqual(-4);
+    expect(evaluateExpressionFloat("1 * 2 * 3")).toEqual(6);
+    expect(evaluateExpressionFloat("1 / 2 / 3")).toBeCloseTo(0.16666666, 5);
+
+    expect(evaluateExpressionFloat("1.1 + 2.2 + 3.3")).toEqual(6.6);
+    expect(evaluateExpressionFloat("1.1 - 2.2 - 3.3")).toEqual(-4.4);
+    expect(evaluateExpressionFloat("1.1 * 2.2 * 3.3")).toBeCloseTo(7.986, 5);
+    expect(evaluateExpressionFloat("1.1 / 2.2 / 3.3")).toBeCloseTo(0.15151515, 5);
+
+    expect(evaluateExpressionFloat("1.111 + 2 + 3.333")).toEqual(6.444);
+    expect(evaluateExpressionFloat("1.111 - 2 - 3.333")).toEqual(-4.222);
+    expect(evaluateExpressionFloat("1.111 * 2 * 3.333")).toBeCloseTo(7.405926, 5);
+    expect(evaluateExpressionFloat("1.111 / 2 / 3.333")).toBeCloseTo(0.16666666, 5);
+
+    expect(evaluateExpressionFloat("zxcvdf + asdqwe")).toEqual(NaN);
+    expect(evaluateExpressionFloat("zxcvdf - asdqwe")).toEqual(NaN);
+    expect(evaluateExpressionFloat("zxcvdf * asdqwe")).toEqual(NaN);
+    expect(evaluateExpressionFloat("zxcvdf / asdqwe")).toEqual(NaN);
+  });
+
+  it("without parentheses, composite", () => {
+    expect(evaluateExpressionFloat("1 + 2 - 3 / 4 * 5")).toEqual(-0.75);
+    expect(evaluateExpressionFloat("1 * 2 + 3 - 4 / 5")).toEqual(4.2);
+    expect(evaluateExpressionFloat("1 / 2 * 3 + 4 - 5")).toEqual(0.5);
+    expect(evaluateExpressionFloat("1 - 2 / 3 * 4 + 5")).toBeCloseTo(3.3333333, 5);
+
+    expect(evaluateExpressionFloat("1.1 + 2.2 - 3.3 / 4.4 * 5.5")).toBeCloseTo(-0.825, 5);
+    expect(evaluateExpressionFloat("1.1 * 2.2 + 3.3 - 4.4 / 5.5")).toBeCloseTo(4.92, 5);
+    expect(evaluateExpressionFloat("1.1 / 2.2 * 3.3 + 4.4 - 5.5")).toBeCloseTo(0.55, 5);
+    expect(evaluateExpressionFloat("1.1 - 2.2 / 3.3 * 4.4 + 5.5")).toBeCloseTo(3.6666666, 5);
+
+    expect(evaluateExpressionFloat("1.111 + 2.222 - 3.333 / 4.444 * 5.555")).toBeCloseTo(
+      -0.83325,
+      5,
+    );
+    expect(evaluateExpressionFloat("1.111 * 2.222 + 3.333 - 4.444 / 5.555")).toBeCloseTo(
+      5.001642,
+      5,
+    );
+    expect(evaluateExpressionFloat("1.111 / 2.222 * 3.333 + 4.444 - 5.555")).toBeCloseTo(0.5555, 5);
+    expect(evaluateExpressionFloat("1.111 - 2.222 / 3.333 * 4.444 + 5.555")).toBeCloseTo(
+      3.70333,
+      5,
+    );
+
+    expect(evaluateExpressionFloat("1.3 + asdqwe - 1 / qwea * zxcv")).toEqual(NaN);
+    expect(evaluateExpressionFloat("1.3 * asdqwe + 1 - qwea / zxcv")).toEqual(NaN);
+    expect(evaluateExpressionFloat("1.3 / asdqwe * 1 + qwea - zxcv")).toEqual(NaN);
+    expect(evaluateExpressionFloat("1.3 - asdqwe / 1 * qwea + zxcv")).toEqual(NaN);
+  });
+
+  it("with parentheses", () => {
+    expect(evaluateExpressionFloat("(2 + 3) * 5")).toEqual(25);
+    expect(evaluateExpressionFloat("6 / (2 + 1)")).toEqual(2);
+    expect(evaluateExpressionFloat("4 * (6 - (3 + 2))")).toEqual(4);
+    expect(evaluateExpressionFloat("5 + ((3 - 1) * (6 / 2))")).toEqual(11);
+    expect(evaluateExpressionFloat("((10 + 5) / 3) * (2 - 1)")).toEqual(5);
+    expect(evaluateExpressionFloat("3 + 4 * (2 / (1 - 5))")).toEqual(1);
+    expect(evaluateExpressionFloat("((3 + 2) * 5) / (4 - 1)")).toBeCloseTo(8.333333, 5);
+
+    expect(evaluateExpressionFloat("(2.1 + 3.1) * 5.1")).toEqual(26.52);
+    expect(evaluateExpressionFloat("6.11 / (2.11 + 1.11)")).toBeCloseTo(1.89751552, 5);
+    expect(evaluateExpressionFloat("4.111 * (6.111 - (3.111 + 2.111))")).toBeCloseTo(3.654679, 5);
+    expect(evaluateExpressionFloat("5.241 + ((3.1 - 1.9) * (6.0 / 2.00))")).toBeCloseTo(8.841, 5);
+    expect(evaluateExpressionFloat("((10.00001 + 5.1) / 3) * (2 - 1.232)")).toBeCloseTo(
+      3.865602,
+      5,
+    );
+    expect(evaluateExpressionFloat("3 + 4 * (2.123 / (1 - 5))")).toBeCloseTo(0.8769999, 5);
+    expect(evaluateExpressionFloat("((3 + 2.3) * 5.3) / (4 - 1.3)")).toBeCloseTo(10.403703, 5);
+
+    expect(evaluateExpressionFloat("((asd + 2.3) * 5.d) / (4 - d.3)")).toEqual(NaN);
+    expect(evaluateExpressionFloat("3 + 4 * (2.123 / (1.d - 5))")).toEqual(NaN);
+  });
+
+  it("with unit", () => {
+    expect(evaluateExpressionFloat("1.111px + 2.222rem - 3.333 / 4.444 * 5.555")).toEqual(NaN);
+    expect(evaluateExpressionFloat("1.111worn * 2.222 + 3.333 - 4.444 / 5.555")).toEqual(NaN);
+    expect(safeEvaluateExpression("1.111px * 2.222px + 3.333px - 4.444 / 5.555")).toEqual("NaN");
+  });
+});
+
+const cssLengthUnits = ["", "ch", "em", "rem", "vh", "vw", "px", "%"];
+const cssLengthPair = cssLengthUnits.reduce<string[][]>((result, unit1, index1) => {
+  cssLengthUnits.slice(index1).forEach((unit2) => {
+    result.push([unit1, unit2]);
+  });
+  return result;
+}, []);
+
+describe("reduceCSSCalc", () => {
+  it.each([
+    ["calc(123px)", "123px"],
+    ["calc(0px)", "0px"],
+    ["calc(50% + 25%)", "75%"],
+    ["calc(10px - 5px)", "5px"],
+    ["calc(2 * 3px)", "6px"],
+    ["calc(10px / 2)", "5px"],
+    ["calc(1rem + 2rem - 3rem)", "0rem"],
+    ["calc(100vw - 50vw)", "50vw"],
+    ["calc(10px + 5%)", ""], // Invalid mixed units return empty string instead of NaN
+    ["calc(10px * 2%)", ""], // Invalid mixed units return empty string instead of NaN
+    ["calc(10px / 0)", "Infinitypx"], // Division by zero doesn't look like it returns anything useful
+    // test cases with nested parentheses
+    ["calc((10px + 5px) * 2)", "30px"],
+    ["calc(10px + (5px - 2px))", "13px"],
+    ["calc(10px + (5px * 2))", "20px"],
+    ["calc(10px / (2 + 3))", "2px"],
+  ])("should transform %s -> %s", (input, expected) => {
+    expect(reduceCSSCalc(input)).toEqual(expected);
+  });
+
+  cssLengthPair.forEach(([unit1, unit2]) => {
+    [
+      { capHeight: `123${unit1}`, lineHeight: `456${unit2}`, wordsByLines: 3 },
+      { capHeight: `0.123${unit1}`, lineHeight: `0.456${unit2}`, wordsByLines: 3 },
+      { capHeight: `0.123${unit1}`, lineHeight: `0.456${unit2}`, wordsByLines: 0 },
+      { capHeight: `123${unit1}`, lineHeight: `0.456${unit2}`, wordsByLines: 0 },
+    ].forEach(({ capHeight, lineHeight, wordsByLines }) => {
+      it(`${capHeight} ${lineHeight} ${wordsByLines}`, () => {
+        [
+          `calc(${capHeight})`,
+          `calc(${(wordsByLines - 1) / 2} * -${lineHeight} + (${capHeight} / 2))`,
+          `calc(${wordsByLines - 1} * -${lineHeight})`,
+          `calc(${wordsByLines - 1} - -${lineHeight})`,
+          `calc(${capHeight} * -${lineHeight})`,
+          `calc(${capHeight} / -${lineHeight})`,
+        ].forEach((calcString) => {
+          expect(() => reduceCSSCalc(calcString)).not.toThrow();
+        });
+      });
+    });
+  });
+});

package/test/util/ShallowEqual.spec.ts

@@ -0,0 +1,102 @@
+// Ported from recharts 3.8.1 test/util/ShallowEqual.spec.ts (commit 7a23854).
+// Reference imports `shallowEqual` from 'react-redux'; this port imports our local
+// equivalent from '../../src/util/ShallowEqual'. All cases and expectations unchanged.
+import { shallowEqual } from "../../src/util/ShallowEqual";
+
+const arrayValue = [1];
+const objectValue = { foo: "bar" };
+
+interface TestDefinition {
+  should: string;
+  a: unknown;
+  b: unknown;
+  result: boolean;
+}
+
+const tests: TestDefinition[] = [
+  {
+    should:
+      "return true when the same top level keys have the same top level values, when they are different instances",
+    a: { foo: true, bar: false },
+    b: { foo: true, bar: false },
+    result: true,
+  },
+  {
+    should:
+      "return true when top level values of an Object are non-primitives but are the same instance",
+    a: { value: arrayValue },
+    b: { value: arrayValue },
+    result: true,
+  },
+  {
+    should:
+      "return true when top level values of an Array are non-primitives but are the same instance",
+    a: [arrayValue],
+    b: [arrayValue],
+    result: true,
+  },
+  {
+    should:
+      "return true when top level values of an Array are non-primitives but are the same instance",
+    a: { a: [1] },
+    b: { a: [1] },
+    result: false,
+  },
+  {
+    should: "return false when a has the same keys but different values",
+    a: { k: 1 },
+    b: { k: 2 },
+    result: false,
+  },
+  {
+    should: "return false when a has more keys ",
+    a: { k: 1, x: 5 },
+    b: { k: 2 },
+
+    result: false,
+  },
+  {
+    should: "return false when b has more keys than a",
+    a: { k: 1 },
+    b: { k: 2, x: 3 },
+    result: false,
+  },
+  {
+    should: "return false when a contains undefined",
+    a: { first: undefined },
+    b: { second: "green" },
+    result: false,
+  },
+  {
+    should: "return true with empty objects",
+    a: {},
+    b: {},
+    result: true,
+  },
+  {
+    should: "return true when passing the same instance",
+    a: objectValue,
+    b: objectValue,
+    result: true,
+  },
+  {
+    should: "return false if there are corresponding elements which are not ===",
+    a: [objectValue, objectValue],
+    b: [objectValue, { foo: "bar" }],
+    result: false,
+  },
+  {
+    should: "return true if all corresponding elements are ===",
+    a: [objectValue, objectValue],
+    b: [objectValue, objectValue],
+    result: true,
+  },
+];
+
+describe("shallowEqual", () => {
+  tests.forEach(({ should, a, b, result }) => {
+    it(should, () => {
+      expect(shallowEqual(a, b)).toBe(result);
+    });
+  });
+});

package/test/util/TickUtils.spec.ts

@@ -0,0 +1,29 @@
+// Ported from recharts 3.8.1 test/util/TickUtils.spec.ts.
+import { isVisible } from "../../src/util/TickUtils";
+
+describe("isVisible", () => {
+  test.each([
+    { sign: 1, position: 50, size: 10, start: 0, end: 100 },
+    { sign: 1, position: 50, size: 50, start: 0, end: 100 },
+    { sign: 1, position: 50, size: 100, start: 0, end: 100 },
+    { sign: 0, position: 50, size: 10, start: 0, end: 100 },
+    { sign: 0, position: 50, size: 50, start: 0, end: 100 },
+    { sign: 0, position: 50, size: 100, start: 0, end: 100 },
+  ])("is returns true if tick is inside limits: (%o)", ({ sign, position, size, start, end }) => {
+    expect(isVisible(sign, position, () => size, start, end)).toBeTruthy();
+  });
+
+  test.each([
+    { sign: -1, position: 50, size: 10, start: 0, end: 100 },
+    { sign: -1, position: 50, size: 50, start: 0, end: 100 },
+    { sign: -1, position: 50, size: 100, start: 0, end: 100 },
+    { sign: 1, position: 50, size: 101, start: 0, end: 100 },
+    { sign: 1, position: 10, size: 10_000, start: 50, end: 100 },
+    { sign: 1, position: 110, size: 10_000, start: 50, end: 100 },
+    { sign: -1, position: 50, size: 101, start: 0, end: 100 },
+    { sign: -1, position: 10, size: 10_000, start: 50, end: 100 },
+    { sign: -1, position: 110, size: 10_000, start: 50, end: 100 },
+  ])("is returns false if tick is outside limits: (%o)", ({ sign, position, size, start, end }) => {
+    expect(isVisible(sign, position, () => size, start, end)).toBeFalsy();
+  });
+});

package/test/util/axisPropsAreEqual.spec.ts

@@ -0,0 +1,93 @@
+// Ported from recharts 3.8.1 test/util/axisPropsAreEqual.spec.ts (commit 7a23854).
+// Solid deviation: the comparator is pure, so tests use plain prop records rather
+// than importing React-oriented axis prop types.
+import { describe, expect, it } from "vitest";
+import { axisPropsAreEqual } from "../../src/util/axisPropsAreEqual";
+import { AxisRange } from "../../src/state/selectors/axisSelectors";
+
+describe("axisPropsAreEqual", () => {
+  it("should return true for identical props", () => {
+    const props1 = { xAxisId: 1 };
+    const props2 = { xAxisId: 1 };
+    expect(axisPropsAreEqual(props1, props2)).toBe(true);
+  });
+
+  it("should return false for different props", () => {
+    const props1 = { width: "auto" };
+    const props2 = { width: "auto", height: "auto" };
+    expect(axisPropsAreEqual(props1, props2)).toBe(false);
+  });
+
+  it("should return false for different nested props", () => {
+    const props1 = { mirror: true, padding: { left: 0 } };
+    const props2 = { mirror: true, padding: { left: 10 } };
+    expect(axisPropsAreEqual(props1, props2)).toBe(false);
+  });
+
+  it("should return true for same reference nested props", () => {
+    const nested = { left: 0 };
+    const props1 = { minTickGap: 1, padding: nested };
+    const props2 = { minTickGap: 1, padding: nested };
+    expect(axisPropsAreEqual(props1, props2)).toBe(true);
+  });
+
+  it("should return true for same value, different reference, allowlisted nested props", () => {
+    const props1 = { axisLine: { x: 10, y: 20 } };
+    const props2 = { axisLine: { x: 10, y: 20 } };
+    expect(axisPropsAreEqual(props1, props2)).toBe(true);
+  });
+
+  it("should return false for different value, different reference, allowlisted nested props", () => {
+    const props1 = { axisLine: { x: 10, y: 20 } };
+    const props2 = { axisLine: { x: 10, y: 30 } };
+    expect(axisPropsAreEqual(props1, props2)).toBe(false);
+  });
+
+  it("should treat undefined and null as if they were equal", () => {
+    const props1: { label: null | undefined } = { label: undefined };
+    const props2: { label: null | undefined } = { label: null };
+    expect(axisPropsAreEqual(props1, props2)).toBe(true);
+  });
+
+  it("should treat positive and negative zero as equal", () => {
+    const props1 = { tickMargin: 0 };
+    const props2 = { tickMargin: -0 };
+    expect(axisPropsAreEqual(props1, props2)).toBe(true);
+  });
+
+  it("should treat NaN values as equal", () => {
+    const props1 = { angle: NaN };
+    const props2 = { angle: NaN };
+    expect(axisPropsAreEqual(props1, props2)).toBe(true);
+  });
+
+  it("should treat two equal domain arrays as equal", () => {
+    const props1 = { domain: [0, 100] };
+    const props2 = { domain: [0, 100] };
+    expect(axisPropsAreEqual(props1, props2)).toBe(true);
+  });
+
+  it("should treat two different domain arrays as different", () => {
+    const props1 = { domain: [0, 100] };
+    const props2 = { domain: [0, 200] };
+    expect(axisPropsAreEqual(props1, props2)).toBe(false);
+  });
+
+  it("should treat two equal range arrays as equal", () => {
+    const props1: { range: AxisRange } = { range: [0, 500] };
+    const props2: { range: AxisRange } = { range: [0, 500] };
+    expect(axisPropsAreEqual(props1, props2)).toBe(true);
+  });
+
+  it("should treat two different range arrays as different", () => {
+    const props1: { range: AxisRange } = { range: [0, 500] };
+    const props2: { range: AxisRange } = { range: [0, 600] };
+    expect(axisPropsAreEqual(props1, props2)).toBe(false);
+  });
+
+  it("should treat two same categorical domains as different", () => {
+    const props1 = { domain: ["a", "b", "c"] };
+    const props2 = { domain: ["a", "b", "c"] };
+    expect(axisPropsAreEqual(props1, props2)).toBe(false);
+  });
+});

package/test/util/createChartHelpers.spec.tsx

@@ -0,0 +1,210 @@
+// Ported from recharts 3.8.1 test/util/createChartHelpers.spec.tsx.
+// The vendored spec is dominated by `@ts-expect-error` type-level assertions
+// (verifying the curried helpers reject wrong components / dataKeys / formatter
+// value types at compile time). Those are PERMANENT-N/A here (type-only; see
+// PERMANENT-N/A: generic .typed cases). What IS runtime-recoverable: the shape
+// of the returned object (which components are present / are the same reference)
+// and the bound `layout` observed via selectChartLayout. Those are ported below.
+import { describe, expect, it } from "vitest";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ComposedChart,
+  createCentricChart,
+  createHorizontalChart,
+  createRadialChart,
+  createVerticalChart,
+  Funnel,
+  Line,
+  LineChart,
+  Radar,
+  RadialBar,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "../../src";
+import { selectChartLayout } from "../../src/context/chartLayoutContext";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+
+type ExampleDataPoint = { value: number; name: string };
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+];
+
+describe("Chart Helpers", () => {
+  describe("createHorizontalChart", () => {
+    it("should return the same component references at runtime, but no others", () => {
+      const components = createHorizontalChart<ExampleDataPoint, string, number>()({
+        AreaChart,
+        Area,
+        XAxis,
+        YAxis,
+      });
+      expect(components.AreaChart).toBeDefined();
+      expect(components.Area).toBe(Area);
+      expect(components.XAxis).toBe(XAxis);
+      expect(components.YAxis).toBe(YAxis);
+      // all the chart-element wrappers should be available even if not provided
+      expect(components.BarChart).toBeDefined();
+      expect(components.ComposedChart).toBeDefined();
+      expect(components.LineChart).toBeDefined();
+      expect(components.ScatterChart).toBeDefined();
+    });
+
+    it("should accept all supported cartesian chart components except Funnel and FunnelChart", () => {
+      const components = createHorizontalChart<ExampleDataPoint, string, number>()({
+        AreaChart,
+        BarChart,
+        ComposedChart,
+        LineChart,
+        ScatterChart,
+        Area,
+        Bar,
+        Line,
+        Scatter,
+        XAxis,
+        YAxis,
+      });
+
+      expect(components.AreaChart).toBeDefined();
+      expect(components.BarChart).toBe(BarChart);
+      expect(components.ComposedChart).toBe(ComposedChart);
+      expect(components.LineChart).toBe(LineChart);
+      expect(components.ScatterChart).toBe(ScatterChart);
+      expect(components.Area).toBe(Area);
+      expect(components.Bar).toBe(Bar);
+      expect(components.Line).toBe(Line);
+      expect(components.Scatter).toBe(Scatter);
+      expect(components.XAxis).toBe(XAxis);
+      expect(components.YAxis).toBe(YAxis);
+    });
+
+    it("should set layout to horizontal and prevent overriding", () => {
+      const Typed = createHorizontalChart<ExampleDataPoint, string, number>()({
+        Area,
+      });
+
+      const renderTestCase = createSelectorTestCase((props) => (
+        <Typed.AreaChart data={data} width={400} height={400}>
+          <Typed.Area dataKey="value" isAnimationActive={false} />
+          {props.children}
+        </Typed.AreaChart>
+      ));
+
+      const { spy } = renderTestCase(selectChartLayout);
+
+      expect(spy).toHaveBeenLastCalledWith("horizontal");
+    });
+
+    it("should type Tooltip formatter with the same component reference", () => {
+      const Typed = createHorizontalChart<ExampleDataPoint, string, number>()({
+        Area,
+        XAxis,
+        Tooltip,
+      });
+
+      expect(Typed.Tooltip).toBe(Tooltip);
+    });
+  });
+
+  describe("createVerticalChart", () => {
+    it("should include all chart components, PLUS FunnelChart because funnels can only be vertical", () => {
+      const components = createVerticalChart<ExampleDataPoint, number, string>()({
+        Area,
+        Funnel,
+      });
+      expect(components.AreaChart).toBeDefined();
+      expect(components.BarChart).toBeDefined();
+      expect(components.ComposedChart).toBeDefined();
+      expect(components.FunnelChart).toBeDefined();
+      expect(components.LineChart).toBeDefined();
+      expect(components.ScatterChart).toBeDefined();
+      expect(components.Area).toBe(Area);
+      expect(components.Funnel).toBe(Funnel);
+    });
+
+    it("should set layout to vertical and prevent overriding", () => {
+      const Typed = createVerticalChart<ExampleDataPoint, number, string>()({
+        Area,
+      });
+
+      const renderTestCase = createSelectorTestCase((props) => (
+        <Typed.AreaChart data={data} width={400} height={400}>
+          <Typed.Area dataKey="name" isAnimationActive={false} />
+          {props.children}
+        </Typed.AreaChart>
+      ));
+
+      const { spy } = renderTestCase(selectChartLayout);
+
+      expect(spy).toHaveBeenLastCalledWith("vertical");
+    });
+  });
+
+  describe("createCentricChart", () => {
+    it("should set layout to centric and prevent overriding", () => {
+      const Typed = createCentricChart<ExampleDataPoint, string, number>()({
+        Radar,
+      });
+
+      const renderTestCase = createSelectorTestCase((props) => (
+        <Typed.RadarChart data={data} width={400} height={400}>
+          <Typed.Radar dataKey="value" isAnimationActive={false} />
+          {props.children}
+        </Typed.RadarChart>
+      ));
+
+      const { spy } = renderTestCase(selectChartLayout);
+
+      expect(spy).toHaveBeenLastCalledWith("centric");
+    });
+  });
+
+  describe("createRadialChart", () => {
+    it("should set layout to radial and prevent overriding", () => {
+      const Typed = createRadialChart<ExampleDataPoint, string, number>()({
+        RadialBar,
+      });
+
+      const renderTestCase = createSelectorTestCase((props) => (
+        <Typed.RadialBarChart data={data} width={400} height={400}>
+          <Typed.RadialBar dataKey="value" isAnimationActive={false} />
+          {props.children}
+        </Typed.RadialBarChart>
+      ));
+
+      const { spy } = renderTestCase(selectChartLayout);
+
+      expect(spy).toHaveBeenLastCalledWith("radial");
+    });
+  });
+
+  describe("untracked components", () => {
+    it("should render standard components seamlessly alongside Typed charts", () => {
+      const Typed = createHorizontalChart<ExampleDataPoint, string, number>()({
+        Area,
+        XAxis,
+      });
+
+      const renderTestCase = createSelectorTestCase((props) => (
+        <Typed.AreaChart data={data} width={400} height={400}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <Tooltip />
+          <Typed.XAxis dataKey="name" />
+          <Typed.Area dataKey="value" isAnimationActive={false} />
+          {props.children}
+        </Typed.AreaChart>
+      ));
+
+      const { spy } = renderTestCase(selectChartLayout);
+
+      expect(spy).toHaveBeenLastCalledWith("horizontal");
+    });
+  });
+});