solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { Line, LineChart, ReferenceArea, getRelativeCoordinate } from "../../src";
+import { render } from "@solidjs/testing-library";
+
+// Ported from recharts 3.8.1 test/cartesian/ReferenceArea.typed.spec.tsx.
+
+type ExampleDataPoint = { value: number; name: string };
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+];
+
+describe("ReferenceArea with strong typing", () => {
+  describe("with all implicit types", () => {
+    it("should render ReferenceArea with implicit coordinate types", () => {
+      const { container } = render(() => (
+        <LineChart data={data} width={400} height={400}>
+          <Line dataKey="value" />
+          <ReferenceArea x1={0} x2={1} y1={80} y2={120} />
+        </LineChart>
+      ));
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe("with explicit ReferenceArea type parameters", () => {
+    it("should allow matching explicit coordinate types", () => {
+      render(() => (
+        <LineChart data={data} width={400} height={400}>
+          <Line dataKey="value" />
+          <ReferenceArea<number, number> x1={0} x2={1} y1={80} y2={120} />
+        </LineChart>
+      ));
+    });
+
+    it("should show errors when explicit coordinate types do not match", () => {
+      render(() => (
+        <LineChart data={data} width={400} height={400}>
+          <Line dataKey="value" />
+          {/* @ts-expect-error TypeScript is correct here - x values should be numbers */}
+          <ReferenceArea<number, number> x1="a" x2={1} y1={80} y2={120} />
+          {/* @ts-expect-error TypeScript is correct here - y values should be numbers */}
+          <ReferenceArea<number, number> x1={0} x2={1} y1="a" y2={120} />
+        </LineChart>
+      ));
+    });
+  });
+});
+
+describe("ReferenceArea event handlers", () => {
+  // Handlers spread onto the rendered <rect> are Solid single-arg DOM handlers
+  // (repo convention; see ReferenceArea.spec "events"). The event's currentTarget
+  // is the SVGRectElement, satisfying SVGMousePointer/SVGTouchPointer, so it
+  // feeds getRelativeCoordinate directly — same call shape as the reference.
+  it("should allow calling getRelativeCoordinate with the type provided by Recharts event handler", () => {
+    render(() => (
+      <LineChart width={100} height={100}>
+        <ReferenceArea
+          onClick={(e) => getRelativeCoordinate(e)}
+          onMouseDown={(e) => getRelativeCoordinate(e)}
+          onMouseUp={(e) => getRelativeCoordinate(e)}
+          onMouseMove={(e) => getRelativeCoordinate(e)}
+          onMouseLeave={(e) => getRelativeCoordinate(e)}
+          onMouseOver={(e) => getRelativeCoordinate(e)}
+          onMouseOut={(e) => getRelativeCoordinate(e)}
+          onMouseEnter={(e) => getRelativeCoordinate(e)}
+          onTouchStart={(e) => getRelativeCoordinate(e)}
+          onTouchMove={(e) => getRelativeCoordinate(e)}
+          onTouchEnd={(e) => getRelativeCoordinate(e)}
+        />
+      </LineChart>
+    ));
+  });
+});

package/test/cartesian/ReferenceDot.render.spec.tsx

@@ -0,0 +1,55 @@
+// Spec for the ReferenceDot vertical: a circle at a data coordinate (x, y),
+// mapped to pixels through both cartesian scales (CartesianScaleHelperImpl).
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render } from "@solidjs/testing-library";
+import { LineChart, Line, XAxis, YAxis, ReferenceDot } from "../../src";
+
+const data = [
+  { name: "A", uv: 10 },
+  { name: "B", uv: 30 },
+  { name: "C", uv: 50 },
+  { name: "D", uv: 70 },
+];
+
+describe("<ReferenceDot />", () => {
+  it("draws a circle centered at the mapped data coordinate", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={500}
+        height={500}
+        data={data}
+        margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
+      >
+        <XAxis type="number" dataKey="uv" />
+        <YAxis type="number" domain={[0, 100]} />
+        <Line dataKey="uv" />
+        <ReferenceDot x={40} y={50} r={8} fill="#ff0000" />
+      </LineChart>
+    ));
+    flush();
+
+    const dot = container.querySelector(".recharts-reference-dot-dot");
+    expect(dot).not.toBeNull();
+    // Y scale [0,100] → range [465, 5]: y=50 → cy=235.
+    // X scale (uv domain [10,70]) → range [65, 495]: x=40 → 65 + ((40-10)/60)*430 = 280.
+    expect(dot?.getAttribute("cy")).toBe("235");
+    expect(dot?.getAttribute("cx")).toBe("280");
+    expect(dot?.getAttribute("r")).toBe("8");
+    expect(dot?.getAttribute("fill")).toBe("#ff0000");
+  });
+
+  it("renders nothing when the dot overflows the domain and ifOverflow='discard'", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={500} data={data}>
+        <XAxis type="number" dataKey="uv" />
+        <YAxis type="number" domain={[0, 100]} />
+        <Line dataKey="uv" />
+        <ReferenceDot x={40} y={500} r={8} fill="#ff0000" />
+      </LineChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-reference-dot-dot")).toHaveLength(0);
+  });
+});

package/test/cartesian/ReferenceDot.spec.tsx

@@ -0,0 +1,462 @@
+// Port of recharts 3.8.1 test/cartesian/ReferenceDot.spec.tsx (commit 7a23854) — the
+// behavioral subset the Solid ReferenceDot implements: dot+label rendering at a data
+// coordinate, in/out-of-domain visibility, ifOverflow (hidden clip-path / extendDomain),
+// function-form label, and the Redux settings report. Deferred (impl/event-model gaps):
+// element-form `shape`/`label` (Solid elements aren't introspectable), the React-style
+// `DotProps` event-arg snapshot (port emits kebab SVG props on a non-bubbling Layer), and
+// the React-component `shape` prop-equality case.
+import { describe, expect, it, test, vi } from "vitest";
+import { createEffect, createSignal, flush } from "solid-js";
+import { fireEvent, render } from "@solidjs/testing-library";
+import { Bar, BarChart, LineChart, ReferenceDot, XAxis, YAxis } from "../../src";
+import { useAppSelector } from "../../src/state/hooks";
+import { selectReferenceDotsByAxis } from "../../src/state/selectors/axisSelectors";
+import { assertNotNull } from "../helper/assertNotNull";
+import { Show } from "solid-js";
+
+describe("<ReferenceDot />", () => {
+  const data = [
+    { name: "201102", uv: -6.11, pv: 0 },
+    { name: "201103", uv: 0.39, pv: 0 },
+    { name: "201104", uv: -1.37, pv: 0 },
+    { name: "201105", uv: 1.16, pv: 0 },
+    { name: "201106", uv: 1.29, pv: 0 },
+    { name: "201107", uv: 0.09, pv: 0 },
+    { name: "201108", uv: 0.53, pv: 0 },
+    { name: "201109", uv: 2.52, pv: 0 },
+    { name: "201110", uv: 0.79, pv: 0 },
+    { name: "201111", uv: 2.94, pv: 0 },
+    { name: "201112", uv: 4.3, pv: 0 },
+  ];
+
+  test("Render 1 dot and 1 label in ReferenceDot", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} />
+        <Bar dataKey="uv" />
+        <ReferenceDot x="201106" y={3} stroke="#666" label="201106" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(
+      container.querySelectorAll(".recharts-reference-dot .recharts-reference-dot-dot"),
+    ).toHaveLength(1);
+    const labels = container.querySelectorAll(".recharts-label");
+    expect(labels).toHaveLength(1);
+    const label = labels[0]!;
+    expect(label.getAttribute("x")).toEqual("472.72727272727275");
+    expect(label.getAttribute("y")).toEqual("86.66666666666667");
+    expect(label.getAttribute("fill")).toEqual("#808080");
+    expect(label.getAttribute("class")).toEqual("recharts-text recharts-label");
+    expect(label.getAttribute("text-anchor")).toEqual("middle");
+    expect(label.textContent).toEqual("201106");
+  });
+
+  test("Don't render any dot or label when reference dot is outside domain in ReferenceDot", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} orientation="right" />
+        <Bar dataKey="uv" />
+        <ReferenceDot x="201106" y={20} stroke="#666" label="201106" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-reference-dot-dot")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(0);
+  });
+
+  test("Don't render any dot or label when x is not defined", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} />
+        <Bar dataKey="uv" />
+        <ReferenceDot y={3} stroke="#666" label="201106" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-reference-dot-dot")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(0);
+  });
+
+  test("Don't render any dot or label when y is not defined", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} />
+        <Bar dataKey="uv" />
+        <ReferenceDot x="201104" stroke="#666" label="201106" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-reference-dot-dot")).toHaveLength(0);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(0);
+  });
+
+  it("should render dot and label even when yAxis is not present", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <Bar dataKey="uv" />
+        <ReferenceDot x="201104" y={3} stroke="#666" label="201106" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-reference-dot-dot")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
+  });
+
+  it('adds a clipPath attribute when ifOverflow is "hidden"', () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} />
+        <Bar dataKey="uv" />
+        <ReferenceDot x="201106" y={20} stroke="#666" label="201106" ifOverflow="hidden" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(
+      container.querySelectorAll(".recharts-reference-dot-dot")[0]!.getAttribute("clip-path"),
+    ).toMatch(/url\(#recharts(\d+)-clip\)/);
+  });
+
+  test("Render 1 line and 1 label when ifOverflow is `extendDomain` in ReferenceDot", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} />
+        <Bar dataKey="uv" />
+        <ReferenceDot x="201106" y={20} stroke="#666" label="201106" ifOverflow="extendDomain" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-reference-dot-dot")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
+  });
+
+  test("Render custom label when label is set to be a function", () => {
+    const renderLabel = () => <text class="customized-label">Custom Text</text>;
+
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} />
+        <Bar dataKey="uv" />
+        <ReferenceDot
+          x="201106"
+          y={20}
+          stroke="#666"
+          label={renderLabel}
+          ifOverflow="extendDomain"
+        />
+      </BarChart>
+    ));
+    flush();
+
+    expect(container.querySelector(".customized-label")?.textContent).toEqual("Custom Text");
+  });
+
+  test("Don't render any label when label is a plain object", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} />
+        <Bar dataKey="uv" />
+        <ReferenceDot x="201106" y={20} stroke="#666" ifOverflow="extendDomain" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(0);
+  });
+
+  test("Don't render any dot when x or y is not specified", () => {
+    const { container } = render(() => (
+      <BarChart
+        width={1100}
+        height={250}
+        barGap={2}
+        barSize={6}
+        data={data}
+        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis tickCount={7} />
+        <Bar dataKey="uv" />
+        <ReferenceDot x="201106" stroke="#666" ifOverflow="extendDomain" />
+        <ReferenceDot y={20} stroke="#666" ifOverflow="extendDomain" />
+      </BarChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-reference-dot-dot")).toHaveLength(0);
+  });
+
+  describe("events", () => {
+    // Handlers are called props-first — `(dotProps, event)` — exactly like recharts
+    // (the reference's Dot wraps them via adaptEventHandlers; the port wraps in
+    // ReferenceDot's renderDot). The first-arg snapshot asserts the geometry/style
+    // fields of the dot props (the full React props-bag snapshot is N/A: the port
+    // carries `class`, not `className`, and Solid handler values differ).
+    it("should fire event handlers when provided", () => {
+      const onClick = vi.fn();
+      const onMouseEnter = vi.fn();
+      const onMouseLeave = vi.fn();
+      const onMouseOver = vi.fn();
+      const onMouseOut = vi.fn();
+      const onMouseMove = vi.fn();
+      const onTouchStart = vi.fn();
+      const onTouchMove = vi.fn();
+      const onTouchEnd = vi.fn();
+
+      const { container } = render(() => (
+        <LineChart width={100} height={100} data={[{ x: 1, y: 1 }]}>
+          <YAxis dataKey="y" />
+          <XAxis dataKey="x" />
+          <ReferenceDot
+            x={1}
+            y={1}
+            r={3}
+            onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}
+            onMouseMove={onMouseMove}
+            onTouchStart={onTouchStart}
+            onTouchMove={onTouchMove}
+            onTouchEnd={onTouchEnd}
+          />
+        </LineChart>
+      ));
+      flush();
+
+      const dot = container.querySelector(".recharts-reference-dot .recharts-dot");
+      assertNotNull(dot);
+
+      // The reference golden for this chart: cx=80, cy=5 (LineChart 100×100, one point).
+      const expectedDotProps = expect.objectContaining({
+        class: "recharts-reference-dot-dot",
+        cx: 80,
+        cy: 5,
+        fill: "#fff",
+        fillOpacity: 1,
+        r: 3,
+        stroke: "#ccc",
+        strokeWidth: 1,
+      });
+
+      fireEvent.click(dot);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "click" }),
+      );
+
+      fireEvent.mouseEnter(dot);
+      expect(onMouseEnter).toHaveBeenCalledTimes(1);
+      expect(onMouseEnter).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "mouseenter" }),
+      );
+
+      fireEvent.mouseOver(dot);
+      expect(onMouseOver).toHaveBeenCalledTimes(1);
+      expect(onMouseOver).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "mouseover" }),
+      );
+
+      fireEvent.mouseLeave(dot);
+      expect(onMouseLeave).toHaveBeenCalledTimes(1);
+      expect(onMouseLeave).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "mouseleave" }),
+      );
+
+      fireEvent.mouseOut(dot);
+      expect(onMouseOut).toHaveBeenCalledTimes(1);
+      expect(onMouseOut).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "mouseout" }),
+      );
+
+      fireEvent.mouseMove(dot);
+      expect(onMouseMove).toHaveBeenCalledTimes(1);
+      expect(onMouseMove).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "mousemove" }),
+      );
+
+      fireEvent.touchStart(dot);
+      expect(onTouchStart).toHaveBeenCalledTimes(1);
+      expect(onTouchStart).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "touchstart" }),
+      );
+
+      fireEvent.touchMove(dot);
+      expect(onTouchMove).toHaveBeenCalledTimes(1);
+      expect(onTouchMove).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "touchmove" }),
+      );
+
+      fireEvent.touchEnd(dot);
+      expect(onTouchEnd).toHaveBeenCalledTimes(1);
+      expect(onTouchEnd).toHaveBeenLastCalledWith(
+        expectedDotProps,
+        expect.objectContaining({ type: "touchend" }),
+      );
+    });
+
+    it("should fire mousedown and mouseup handlers props-first", () => {
+      const onMouseDown = vi.fn();
+      const onMouseUp = vi.fn();
+      const { container } = render(() => (
+        <LineChart width={100} height={100} data={[{ x: 1, y: 1 }]}>
+          <YAxis dataKey="y" />
+          <XAxis dataKey="x" />
+          <ReferenceDot x={1} y={1} r={3} onMouseDown={onMouseDown} onMouseUp={onMouseUp} />
+        </LineChart>
+      ));
+      flush();
+
+      const dot = container.querySelector(".recharts-reference-dot .recharts-dot");
+      assertNotNull(dot);
+
+      fireEvent.mouseDown(dot);
+      expect(onMouseDown).toHaveBeenCalledTimes(1);
+      expect(onMouseDown).toHaveBeenLastCalledWith(
+        expect.objectContaining({ cx: 80, cy: 5, r: 3 }),
+        expect.objectContaining({ type: "mousedown" }),
+      );
+
+      fireEvent.mouseUp(dot);
+      expect(onMouseUp).toHaveBeenCalledTimes(1);
+      expect(onMouseUp).toHaveBeenLastCalledWith(
+        expect.objectContaining({ cx: 80, cy: 5, r: 3 }),
+        expect.objectContaining({ type: "mouseup" }),
+      );
+    });
+  });
+
+  describe("state integration", () => {
+    it("should report its settings to Redux state, and remove it after removing from DOM", () => {
+      const dotSpy = vi.fn();
+      const [showDot, setShowDot] = createSignal(true);
+      const Comp = (): null => {
+        const dots = useAppSelector((state) => selectReferenceDotsByAxis(state, "yAxis", 0));
+        createEffect(
+          () => dots(),
+          (v) => dotSpy(v),
+        );
+        return null;
+      };
+      render(() => (
+        <LineChart width={100} height={100}>
+          <YAxis />
+          <XAxis />
+          <Show when={showDot()}>
+            <ReferenceDot x={1} y="categorical data item" r={3} ifOverflow="extendDomain" />
+          </Show>
+          <Comp />
+        </LineChart>
+      ));
+      flush();
+
+      expect(dotSpy).toHaveBeenLastCalledWith([
+        {
+          // `id` is a documented Solid deviation: recharts matches reference
+          // elements by object identity, but Solid store proxies break that, so
+          // the port mints a stable id for proxy-safe removal.
+          id: expect.stringMatching(/^recharts-reference-dot-/) as unknown as string,
+          x: 1,
+          y: "categorical data item",
+          r: 3,
+          xAxisId: 0,
+          yAxisId: 0,
+          ifOverflow: "extendDomain",
+        },
+      ]);
+
+      setShowDot(false);
+      flush();
+
+      expect(dotSpy).toHaveBeenLastCalledWith([]);
+    });
+  });
+});

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

@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+import { type DotProps, Line, LineChart, ReferenceDot, getRelativeCoordinate } from "../../src";
+import { render } from "@solidjs/testing-library";
+
+// Ported from recharts 3.8.1 test/cartesian/ReferenceDot.typed.spec.tsx.
+
+type ExampleDataPoint = { value: number; name: string };
+const data: ReadonlyArray<ExampleDataPoint> = [
+  { value: 100, name: "a" },
+  { value: 80, name: "b" },
+];
+
+describe("ReferenceDot with strong typing", () => {
+  describe("with all implicit types", () => {
+    it("should render ReferenceDot with implicit coordinate types", () => {
+      const { container } = render(() => (
+        <LineChart data={data} width={400} height={400}>
+          <Line dataKey="value" />
+          <ReferenceDot x={0} y={100} />
+        </LineChart>
+      ));
+      expect(container.querySelectorAll(".recharts-reference-dot-dot")).toHaveLength(1);
+    });
+  });
+
+  describe("with explicit ReferenceDot type parameters", () => {
+    it("should allow matching explicit coordinate types", () => {
+      render(() => (
+        <LineChart data={data} width={400} height={400}>
+          <Line dataKey="value" />
+          <ReferenceDot<number, number> x={0} y={100} />
+        </LineChart>
+      ));
+    });
+
+    it("should show errors when explicit coordinate types do not match", () => {
+      render(() => (
+        <LineChart data={data} width={400} height={400}>
+          <Line dataKey="value" />
+          {/* @ts-expect-error TypeScript is correct here - x should be number */}
+          <ReferenceDot<number, number> x="a" y={100} />
+          {/* @ts-expect-error TypeScript is correct here - y should be number */}
+          <ReferenceDot<number, number> x={0} y="a" />
+        </LineChart>
+      ));
+    });
+  });
+});
+
+describe("ReferenceDot event handlers", () => {
+  // Handlers are props-first `(dotProps, event)` (recharts parity; see
+  // ReferenceDot.spec). The event's currentTarget is the rendered <circle>,
+  // so it satisfies SVGMousePointer/SVGTouchPointer and feeds
+  // getRelativeCoordinate directly — same as the reference.
+  it("should allow calling getRelativeCoordinate with the type provided by Recharts event handler", () => {
+    render(() => (
+      <LineChart width={100} height={100}>
+        <ReferenceDot
+          x={10}
+          y={10}
+          onClick={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onMouseDown={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onMouseUp={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onMouseMove={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onMouseLeave={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onMouseOver={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onMouseOut={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onMouseEnter={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onTouchStart={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onTouchMove={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+          onTouchEnd={(_dotProps: DotProps, e) => getRelativeCoordinate(e)}
+        />
+      </LineChart>
+    ));
+  });
+});