solid-recharts 0.2.1 → 1.0.0

package/test/cartesian/YAxis/YAxis.ticks.spec.tsx

@@ -1,263 +0,0 @@
-import { describe, it } from "vitest";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { PageData } from "../../_data";
-import { Line, LineChart, XAxis, YAxis } from "../../../src";
-import { expectYAxisTicks } from "../../helper/expectAxisTicks";
-import {
-  RenderableAxisSettings,
-  selectAxisScale,
-  selectNiceTicks,
-  selectRenderableAxisSettings,
-  selectTicksOfAxis,
-} from "../../../src/state/selectors/axisSelectors";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { expectLastCalledWithScale } from "../../helper/expectScale";
-
-const dataWithDecimals = PageData.map((item) => ({
-  ...item,
-  pv: item.pv / 100,
-}));
-
-const defaultExpectedYAxisSettings: RenderableAxisSettings = {
-  allowDataOverflow: false,
-  allowDecimals: true,
-  allowDuplicatedCategory: true,
-  angle: 0,
-  dataKey: undefined,
-  domain: undefined,
-  hide: false,
-  id: 0,
-  includeHidden: false,
-  interval: "preserveEnd",
-  minTickGap: 5,
-  mirror: false,
-  name: undefined,
-  orientation: "left",
-  padding: {
-    bottom: 0,
-    top: 0,
-  },
-  reversed: false,
-  niceTicks: "auto",
-  scale: "auto",
-  tick: true,
-  tickCount: 5,
-  tickFormatter: undefined,
-  ticks: undefined,
-  type: "number",
-  unit: undefined,
-  width: 60,
-};
-
-describe("YAxis ticks", () => {
-  describe("with default props", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <LineChart width={500} height={300} data={dataWithDecimals}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Line dataKey="pv" />
-        {props.children}
-      </LineChart>
-    ));
-
-    it("should select YAxis settings", () => {
-      const { spy } = renderTestCase((state) => selectRenderableAxisSettings(state, "yAxis", 0));
-      expectLastCalledWith(spy, defaultExpectedYAxisSettings);
-    });
-
-    it("should select scale", () => {
-      const { spy } = renderTestCase((state) => selectAxisScale(state, "yAxis", 0, false));
-      expectLastCalledWithScale(spy, {
-        domain: [0, 100],
-        range: [5, 265],
-      });
-    });
-
-    it("should select niceTicks", () => {
-      const { spy } = renderTestCase((state) => selectNiceTicks(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [0, 25, 50, 75, 100]);
-    });
-
-    it("should select ticks", () => {
-      const { spy } = renderTestCase((state) => selectTicksOfAxis(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [
-        { coordinate: 265, index: 0, offset: 0, value: 0 },
-        { coordinate: 200, index: 1, offset: 0, value: 25 },
-        { coordinate: 135, index: 2, offset: 0, value: 50 },
-        { coordinate: 70, index: 3, offset: 0, value: 75 },
-        { coordinate: 5, index: 4, offset: 0, value: 100 },
-      ]);
-    });
-
-    it("should render 5 ticks", () => {
-      const { container } = renderTestCase();
-      expectYAxisTicks(container, [
-        { textContent: "0", x: "57", y: "265" },
-        { textContent: "25", x: "57", y: "200" },
-        { textContent: "50", x: "57", y: "135" },
-        { textContent: "75", x: "57", y: "70" },
-        { textContent: "100", x: "57", y: "5" },
-      ]);
-    });
-  });
-
-  describe("with domain=[dataMin, dataMax]", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <LineChart width={500} height={300} data={dataWithDecimals}>
-        <XAxis dataKey="name" />
-        <YAxis domain={["dataMin", "dataMax"]} />
-        <Line dataKey="pv" />
-        {props.children}
-      </LineChart>
-    ));
-
-    it("should select YAxis settings all the same except for the domain", () => {
-      const { spy } = renderTestCase((state) => selectRenderableAxisSettings(state, "yAxis", 0));
-      expectLastCalledWith(spy, {
-        ...defaultExpectedYAxisSettings,
-        domain: ["dataMin", "dataMax"],
-      });
-    });
-
-    it("should select scale", () => {
-      const { spy } = renderTestCase((state) => selectAxisScale(state, "yAxis", 0, false));
-      expectLastCalledWithScale(spy, {
-        domain: [13.98, 98],
-        range: [5, 265],
-      });
-    });
-
-    it("should select niceTicks", () => {
-      const { spy } = renderTestCase((state) => selectNiceTicks(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [13.98, 38.98, 63.98, 88.98, 98]);
-    });
-
-    it("should select ticks", () => {
-      const { spy } = renderTestCase((state) => selectTicksOfAxis(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [
-        { coordinate: 265, index: 0, offset: 0, value: 13.98 },
-        { coordinate: 187.6374672696977, index: 1, offset: 0, value: 38.98 },
-        { coordinate: 110.27493453939539, index: 2, offset: 0, value: 63.98 },
-        { coordinate: 32.91240180909307, index: 3, offset: 0, value: 88.98 },
-        { coordinate: 5, index: 4, offset: 0, value: 98 },
-      ]);
-    });
-
-    it("should render 5 ticks", () => {
-      const { container } = renderTestCase();
-      expectYAxisTicks(container, [
-        { textContent: "13.98", x: "57", y: "265" },
-        { textContent: "38.98", x: "57", y: "187.6374672696977" },
-        { textContent: "63.98", x: "57", y: "110.27493453939539" },
-        { textContent: "88.98", x: "57", y: "32.91240180909307" },
-        { textContent: "98", x: "57", y: "5" },
-      ]);
-    });
-  });
-
-  describe("with domain=[dataMin, dataMax] and tickCount=3 and allowDecimals=false", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <LineChart width={500} height={300} data={dataWithDecimals}>
-        <XAxis dataKey="name" />
-        <YAxis domain={["dataMin", "dataMax"]} tickCount={3} allowDecimals={false} />
-        <Line dataKey="pv" />
-        {props.children}
-      </LineChart>
-    ));
-
-    it("should select YAxis settings all the same except for the domain, and tick count", () => {
-      const { spy } = renderTestCase((state) => selectRenderableAxisSettings(state, "yAxis", 0));
-      expectLastCalledWith(spy, {
-        ...defaultExpectedYAxisSettings,
-        domain: ["dataMin", "dataMax"],
-        tickCount: 3,
-        allowDecimals: false,
-      });
-    });
-
-    it("should select scale", () => {
-      const { spy } = renderTestCase((state) => selectAxisScale(state, "yAxis", 0, false));
-      expectLastCalledWithScale(spy, {
-        domain: [13.98, 98],
-        range: [5, 265],
-      });
-    });
-
-    it("should select niceTicks", () => {
-      const { spy } = renderTestCase((state) => selectNiceTicks(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [14, 59, 98]);
-    });
-
-    it("should select ticks", () => {
-      const { spy } = renderTestCase((state) => selectTicksOfAxis(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [
-        { coordinate: 264.93810997381576, index: 0, offset: 0, value: 14 },
-        { coordinate: 125.68555105927162, index: 1, offset: 0, value: 59 },
-        { coordinate: 5, index: 2, offset: 0, value: 98 },
-      ]);
-    });
-
-    it("should render 3 ticks", () => {
-      const { container } = renderTestCase();
-      expectYAxisTicks(container, [
-        { textContent: "14", x: "57", y: "264.93810997381576" },
-        { textContent: "59", x: "57", y: "125.68555105927162" },
-        { textContent: "98", x: "57", y: "5" },
-      ]);
-    });
-  });
-
-  describe("with domain=[0, 200] and tickCount=4 and allowDecimals=false", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <LineChart width={500} height={300} data={dataWithDecimals}>
-        <XAxis dataKey="name" />
-        <YAxis domain={[0, 200]} tickCount={4} allowDecimals={false} />
-        <Line dataKey="pv" />
-        {props.children}
-      </LineChart>
-    ));
-
-    it("should select YAxis settings all the same except for the domain, and tick count", () => {
-      const { spy } = renderTestCase((state) => selectRenderableAxisSettings(state, "yAxis", 0));
-      expectLastCalledWith(spy, {
-        ...defaultExpectedYAxisSettings,
-        domain: [0, 200],
-        tickCount: 4,
-        allowDecimals: false,
-      });
-    });
-
-    it("should select scale", () => {
-      const { spy } = renderTestCase((state) => selectAxisScale(state, "yAxis", 0, false));
-      expectLastCalledWithScale(spy, {
-        domain: [0, 200],
-        range: [5, 265],
-      });
-    });
-
-    it("should select niceTicks", () => {
-      const { spy } = renderTestCase((state) => selectNiceTicks(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [0, 70, 140, 200]);
-    });
-
-    it("should select ticks", () => {
-      const { spy } = renderTestCase((state) => selectTicksOfAxis(state, "yAxis", 0, false));
-      expectLastCalledWith(spy, [
-        { coordinate: 265, index: 0, offset: 0, value: 0 },
-        { coordinate: 174, index: 1, offset: 0, value: 70 },
-        { coordinate: 83.00000000000001, index: 2, offset: 0, value: 140 },
-        { coordinate: 5, index: 3, offset: 0, value: 200 },
-      ]);
-    });
-
-    it("should render 4 ticks", () => {
-      const { container } = renderTestCase();
-      expectYAxisTicks(container, [
-        { textContent: "0", x: "57", y: "265" },
-        { textContent: "70", x: "57", y: "174" },
-        { textContent: "140", x: "57", y: "83.00000000000001" },
-        { textContent: "200", x: "57", y: "5" },
-      ]);
-    });
-  });
-});

package/test/cartesian/YAxis/YAxis.type.spec.tsx

@@ -1,107 +0,0 @@
-// Ported from recharts 3.8.1 test/cartesian/YAxis/YAxis.type.spec.tsx (commit 7a23854).
-import type { JSX } from "@solidjs/web";
-import { describe, expect, it } from "vitest";
-import { BarChart, YAxis } from "../../../src";
-import { selectYAxisSettings } from "../../../src/state/selectors/axisSelectors";
-import type { AxisDomainTypeInput } from "../../../src/util/types";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-
-describe("YAxis type", () => {
-  describe("in vertical chart", () => {
-    const TestCase = (props: { children?: JSX.Element; axisType?: AxisDomainTypeInput }) => (
-      <BarChart
-        layout="vertical"
-        width={400}
-        height={400}
-        data={[
-          { x: "A", y: 12 },
-          { x: "B", y: 5 },
-        ]}
-      >
-        <YAxis type={props.axisType} dataKey="x" />
-        {props.children}
-      </BarChart>
-    );
-
-    it('should default to "number" type', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase>{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectYAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "number" }));
-    });
-
-    it('should set type to "number"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="number">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectYAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "number" }));
-    });
-
-    it('should set type to "category"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="category">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectYAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "category" }));
-    });
-
-    it('should infer type as "category"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="auto">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectYAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "category" }));
-    });
-  });
-
-  describe("in horizontal chart", () => {
-    const TestCase = (props: { children?: JSX.Element; axisType?: AxisDomainTypeInput }) => (
-      <BarChart
-        width={400}
-        height={400}
-        data={[
-          { x: 12, y: "A" },
-          { x: 5, y: "B" },
-        ]}
-      >
-        <YAxis type={props.axisType} dataKey="x" />
-        {props.children}
-      </BarChart>
-    );
-
-    it('should default to "number" type', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase>{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectYAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "number" }));
-    });
-
-    it('should set type to "number"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="number">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectYAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "number" }));
-    });
-
-    it('should set type to "category"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="category">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectYAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "category" }));
-    });
-
-    it('should infer type as "number"', () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <TestCase axisType="auto">{props.children}</TestCase>
-      ));
-      const { spy } = renderTestCase((state) => selectYAxisSettings(state, 0));
-      expectLastCalledWith(spy, expect.objectContaining({ type: "number" }));
-    });
-  });
-});

package/test/cartesian/YAxis/YAxis.typed.spec.tsx

@@ -1,102 +0,0 @@
-import { describe, it } from "vitest";
-import { getRelativeCoordinate, Line, LineChart, YAxis, type TickItem } from "../../../src";
-import { render } from "@solidjs/testing-library";
-
-// Ported from recharts 3.8.1 test/cartesian/YAxis/YAxis.typed.spec.tsx.
-//
-// Solid type-surface deviation (same golden-anchored convention as Bar.typed):
-// the tick handlers are props-first `(tickItem, index, event)` like recharts, but
-// the 3rd argument is a raw DOM `MouseEvent`/`TouchEvent` whose `currentTarget`
-// is `EventTarget | null` — NOT assignable to `getRelativeCoordinate`'s recharts
-// pointer types, so each call carries `// @ts-expect-error`.
-
-type ExampleDataPoint = { value: number; name: string };
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { value: 100, name: "a" },
-  { value: 80, name: "b" },
-];
-
-describe("YAxis with strong typing", () => {
-  it("should allow implicit dataKey typing", () => {
-    render(() => (
-      <LineChart data={data} width={400} height={400}>
-        <YAxis dataKey="value" />
-        <Line dataKey="value" />
-      </LineChart>
-    ));
-  });
-
-  it("should allow explicit dataKey typing and reject invalid values", () => {
-    render(() => (
-      <LineChart data={data} width={400} height={400}>
-        <YAxis<ExampleDataPoint, number> dataKey="value" />
-        <YAxis<ExampleDataPoint, number> dataKey={(entry: ExampleDataPoint) => entry.value} />
-        {/* @ts-expect-error TypeScript is correct here - name is not number-valued */}
-        <YAxis<ExampleDataPoint, number> dataKey="name" />
-        <Line dataKey="value" />
-      </LineChart>
-    ));
-  });
-});
-
-describe("YAxis event handlers", () => {
-  it("should NOT allow calling getRelativeCoordinate with the raw DOM event Solid passes to a tick handler", () => {
-    /*
-     * Provenance: the React reference passes a recharts pointer event here and
-     * expects NO error. The Solid tick handler's 3rd arg is a raw DOM
-     * `MouseEvent`/`TouchEvent`, whose `currentTarget` is `EventTarget | null` —
-     * NOT assignable to `getRelativeCoordinate`'s `HTMLElementTarget | SVGElementTarget`.
-     * So each call below is a genuine Solid type error.
-     */
-    return (
-      <LineChart width={100} height={100}>
-        <YAxis
-          onClick={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseDown={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseUp={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseMove={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseLeave={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseOver={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseOut={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onMouseEnter={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchStart={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchMove={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-          onTouchEnd={(_tick: TickItem, _i: number, e) => {
-            // @ts-expect-error Solid passes a raw DOM event, not a recharts pointer
-            getRelativeCoordinate(e);
-          }}
-        />
-      </LineChart>
-    );
-  });
-});