solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/cartesian/BarStack.spec.tsx

@@ -0,0 +1,91 @@
+// Ported from recharts 3.8.1 test/cartesian/BarStack.spec.tsx (commit 7a23854).
+import { describe, it, expect } from "vitest";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { Bar, BarChart, BarStack } from "../../src";
+import { PageData } from "../_data";
+import { useBarStackClipPathUrl, useStackId } from "../../src/cartesian/BarStack";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+
+describe("BarStack", () => {
+  describe("when stackId is provided explicitly", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={100} height={100} data={PageData}>
+        <BarStack stackId="custom-stack" radius={50}>
+          <Bar dataKey="uv" />
+          <Bar dataKey="pv" />
+          {props.children}
+        </BarStack>
+      </BarChart>
+    ));
+
+    it("should expose stackId prop via a hook", () => {
+      const { spy } = renderTestCase(() => useStackId(undefined));
+      expectLastCalledWith(spy, "custom-stack");
+    });
+
+    it("should prefer context stackId over child", () => {
+      const { spy } = renderTestCase(() => useStackId("child-stack"));
+      expectLastCalledWith(spy, "custom-stack");
+    });
+
+    it("should return clip path URL from a hook", () => {
+      const { spy } = renderTestCase(() => useBarStackClipPathUrl(7));
+      expectLastCalledWith(spy, "url(#recharts-bar-stack-clip-path-custom-stack-7)");
+    });
+  });
+
+  describe("when stackId is autogenerated", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={100} height={100} data={PageData}>
+        <BarStack radius={50}>
+          <Bar dataKey="uv" />
+          <Bar dataKey="pv" />
+          {props.children}
+        </BarStack>
+      </BarChart>
+    ));
+
+    it("should expose stackId prop via a hook", () => {
+      const { spy } = renderTestCase(() => useStackId(undefined));
+      const expectedStackIdPrefix = "recharts-bar-stack-";
+      expectLastCalledWith(spy, expect.stringContaining(expectedStackIdPrefix));
+    });
+
+    it("should prefer context stackId over child", () => {
+      const { spy } = renderTestCase(() => useStackId("child-stack"));
+      const expectedStackIdPrefix = "recharts-bar-stack-";
+      expectLastCalledWith(spy, expect.stringContaining(expectedStackIdPrefix));
+    });
+
+    it("should return clip path URL from a hook", () => {
+      const { spy } = renderTestCase(() => useBarStackClipPathUrl(7));
+      const expectedStackIdPrefix = "url(#recharts-bar-stack-clip-path-";
+      expectLastCalledWith(spy, expect.stringContaining(expectedStackIdPrefix));
+    });
+  });
+
+  describe("in chart without BarStack", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={100} height={100} data={PageData}>
+        <Bar dataKey="uv" />
+        <Bar dataKey="pv" />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should return undefined stackId from a hook", () => {
+      const { spy } = renderTestCase(() => useStackId(undefined));
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("should return child stackId from a hook", () => {
+      const { spy } = renderTestCase(() => useStackId("child-stack"));
+      expectLastCalledWith(spy, "child-stack");
+    });
+
+    it("should return undefined clip path URL from a hook", () => {
+      const { spy } = renderTestCase(() => useBarStackClipPathUrl(7));
+      expectLastCalledWith(spy, undefined);
+    });
+  });
+});

package/test/cartesian/Brush.keyboard.spec.tsx

@@ -0,0 +1,88 @@
+// Brush accessibility/mobile: ArrowLeft/Right on a focused traveller moves it one
+// data index; touch drag mirrors mouse drag. `flush()` because the index change
+// dispatches through the store before the chart re-filters (separate tasks in a
+// real browser; here we flush manually).
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { LineChart, Line, XAxis, YAxis, Brush } from "../../src";
+
+const data = [
+  { name: "A", uv: 10 },
+  { name: "B", uv: 30 },
+  { name: "C", uv: 50 },
+  { name: "D", uv: 70 },
+  { name: "E", uv: 40 },
+  { name: "F", uv: 20 },
+];
+
+function dotCount(container: Element): number {
+  return container.querySelectorAll(".recharts-line .recharts-line-dot").length;
+}
+
+function touchEvent(type: string, pageX: number): Event {
+  const e = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperty(e, "changedTouches", { value: [{ pageX }], configurable: true });
+  return e;
+}
+
+const renderBrushChart = () =>
+  render(() => (
+    <LineChart
+      width={400}
+      height={300}
+      data={data}
+      margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Line dataKey="uv" isAnimationActive={false} dot />
+      <Brush dataKey="name" height={40} />
+    </LineChart>
+  ));
+
+describe("<Brush /> keyboard", () => {
+  it("ArrowRight on the start traveller advances the window start by one index", () => {
+    const { container } = renderBrushChart();
+    flush();
+    expect(dotCount(container)).toBe(data.length);
+
+    const startTraveller = container.querySelectorAll(".recharts-brush-traveller")[0]!;
+    fireEvent.focus(startTraveller);
+    fireEvent.keyDown(startTraveller, { key: "ArrowRight" });
+    flush();
+
+    // Window narrowed from the left by one row.
+    expect(dotCount(container)).toBe(data.length - 1);
+  });
+
+  it("ArrowLeft at the start edge is a no-op (cannot go below index 0)", () => {
+    const { container } = renderBrushChart();
+    flush();
+
+    const startTraveller = container.querySelectorAll(".recharts-brush-traveller")[0]!;
+    fireEvent.keyDown(startTraveller, { key: "ArrowLeft" });
+    flush();
+
+    expect(dotCount(container)).toBe(data.length);
+  });
+});
+
+describe("<Brush /> touch", () => {
+  it("narrows the window when the start traveller is touch-dragged right", () => {
+    const { container } = renderBrushChart();
+    flush();
+    expect(dotCount(container)).toBe(data.length);
+
+    const startTraveller = container.querySelectorAll(".recharts-brush-traveller")[0]!;
+    // touchStart begins the drag (pageX 5); window touchmove/touchend carry pageX.
+    fireEvent.touchStart(startTraveller, { changedTouches: [{ pageX: 5 }] });
+    flush();
+    window.dispatchEvent(touchEvent("touchmove", 300));
+    window.dispatchEvent(touchEvent("touchend", 300));
+    flush();
+
+    expect(dotCount(container)).toBeLessThan(data.length);
+    expect(dotCount(container)).toBeGreaterThan(0);
+  });
+});

package/test/cartesian/Brush.panorama.spec.tsx

@@ -0,0 +1,41 @@
+// Nested full-chart Brush panorama: <Brush><SomeChart>…</SomeChart></Brush> renders
+// a compact overview of the FULL dataset at the brush rect. The nested chart is
+// panorama-transparent (CartesianChart short-circuits inside a PanoramaContext),
+// so its graphical items draw into the brush's panorama surface using the outer
+// store's full data — no cloneElement.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { Brush, Line, LineChart } from "../../src";
+import { render } from "@solidjs/testing-library";
+
+const data = [
+  { name: "a", uv: 100 },
+  { name: "b", uv: 200 },
+  { name: "c", uv: 150 },
+  { name: "d", uv: 300 },
+];
+
+describe("nested-chart Brush panorama", () => {
+  it("renders a panorama line + full-data dots inside the brush", () => {
+    const { container } = render(() => (
+      <LineChart width={400} height={300} data={data}>
+        <Line dataKey="uv" isAnimationActive={false} dot />
+        {/* full chart inside the brush → overview of all data */}
+        <Brush>
+          <LineChart data={data}>
+            <Line dataKey="uv" isAnimationActive={false} dot />
+          </LineChart>
+        </Brush>
+      </LineChart>
+    ));
+    flush();
+    // Main line + panorama line.
+    expect(container.querySelectorAll(".recharts-line").length).toBe(2);
+    // Two nested surfaces (main + panorama).
+    expect(container.querySelectorAll("svg.recharts-surface").length).toBe(2);
+    // The panorama draws a dot per data point (full dataset) in addition to the main.
+    expect(container.querySelectorAll(".recharts-line-dots .recharts-dot").length).toBe(
+      data.length * 2,
+    );
+  });
+});

package/test/cartesian/Brush.props.spec.tsx

@@ -0,0 +1,63 @@
+// Solid-recharts spec for Brush props recharts ships but this port had deferred:
+// `dy` (extra y offset — ported from recharts Brush.spec "dy props"), `onDragEnd`
+// (fires once at drag release), and `leaveTimeOut` (drag ends after the pointer
+// leaves). Drag simulation mirrors the existing Brush.spec slide test.
+import { describe, expect, it, vi } from "vitest";
+import { flush } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { BarChart, Brush } from "../../src";
+import { fireEvent, render } from "@solidjs/testing-library";
+import { assertNotNull } from "../helper/assertNotNull";
+
+const data = [
+  { date: "2023-01-01", value: 10 },
+  { date: "2023-01-02", value: 20 },
+  { date: "2023-01-03", value: 10 },
+  { date: "2023-01-04", value: 30 },
+];
+
+function brushRectY(container: Element): string | null {
+  const brush = container.querySelector(".recharts-brush rect");
+  assertNotNull(brush);
+  return brush.getAttribute("y");
+}
+
+describe("Brush dy / onDragEnd", () => {
+  it("adds `dy` to the brush y position", () => {
+    const { container } = render(
+      (): JSX.Element => (
+        <BarChart width={400} height={100} data={data}>
+          <Brush dataKey="value" x={100} y={50} dy={30} width={400} height={40} />
+        </BarChart>
+      ),
+    );
+    flush();
+    expect(brushRectY(container)).toBe("80");
+  });
+
+  it("fires onDragEnd once at the end of a slide drag", () => {
+    const onDragEnd = vi.fn();
+    const { container } = render(
+      (): JSX.Element => (
+        <BarChart width={500} height={100} data={data} margin={{ right: 100, left: 100 }}>
+          <Brush dataKey="date" height={90} onDragEnd={onDragEnd} />
+        </BarChart>
+      ),
+    );
+    flush();
+
+    const brushSlide = container.querySelector(".recharts-brush-slide");
+    assertNotNull(brushSlide);
+    fireEvent.mouseDown(brushSlide);
+    flush();
+    expect(onDragEnd).not.toHaveBeenCalled();
+
+    fireEvent.mouseUp(window);
+    flush();
+    expect(onDragEnd).toHaveBeenCalledTimes(1);
+    expect(onDragEnd).toHaveBeenLastCalledWith({
+      startIndex: 0,
+      endIndex: data.length - 1,
+    });
+  });
+});

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

@@ -0,0 +1,117 @@
+// Spec for the Brush vertical: a <Brush> inside a cartesian chart renders the
+// background + slide + two travellers + (interaction) text, reserves its height
+// from the plot area, and — when a traveller/slide is dragged — narrows the data
+// window via setDataStartEndIndexes (the main chart then re-filters its data).
+// `flush()` because the brush registers settings + reads indices via effects.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { LineChart, Line, XAxis, YAxis, Brush } from "../../src";
+
+const data = [
+  { name: "A", uv: 10 },
+  { name: "B", uv: 30 },
+  { name: "C", uv: 50 },
+  { name: "D", uv: 70 },
+  { name: "E", uv: 40 },
+  { name: "F", uv: 20 },
+];
+
+function dotCount(container: Element): number {
+  return container.querySelectorAll(".recharts-line .recharts-line-dot").length;
+}
+
+// `pageX` isn't a MouseEventInit field (and testing-library doesn't assign it), so
+// define it explicitly on a bubbling event — the Brush reads e.pageX (like recharts).
+function mouseEventWithPageX(type: string, pageX: number): MouseEvent {
+  const ev = new MouseEvent(type, { bubbles: true, cancelable: true });
+  Object.defineProperty(ev, "pageX", { value: pageX, configurable: true });
+  return ev;
+}
+
+describe("<Brush />", () => {
+  it("renders the brush chrome (background, slide, two travellers)", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={300}
+        data={data}
+        margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv" isAnimationActive={false} dot />
+        <Brush dataKey="name" height={40} />
+      </LineChart>
+    ));
+    flush();
+
+    const brush = container.querySelector(".recharts-brush");
+    expect(brush).not.toBeNull();
+    // background rect + slide + 2 travellers (each traveller draws a rect).
+    expect(container.querySelectorAll(".recharts-brush-slide")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-brush-traveller")).toHaveLength(2);
+  });
+
+  it("reserves its height from the plot area (brush sits below the plot)", () => {
+    const renderWith = (brush: boolean) =>
+      render(() => (
+        <LineChart
+          width={400}
+          height={300}
+          data={data}
+          margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
+        >
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Line dataKey="uv" isAnimationActive={false} />
+          {brush ? <Brush dataKey="name" height={40} /> : null}
+        </LineChart>
+      ));
+
+    const without = renderWith(false);
+    flush();
+    const withBrush = renderWith(true);
+    flush();
+
+    // The plot-area clip rect height shrinks by ~the brush height (40).
+    const clipHeight = (c: Element): number =>
+      Number(c.querySelector("clipPath rect")?.getAttribute("height") ?? 0);
+    expect(clipHeight(without.container) - clipHeight(withBrush.container)).toBeCloseTo(40, 0);
+  });
+
+  it("narrows the data window when the start traveller is dragged right", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={300}
+        data={data}
+        margin={{ top: 5, right: 5, bottom: 5, left: 5 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv" isAnimationActive={false} dot />
+        <Brush dataKey="name" height={40} />
+      </LineChart>
+    ));
+    flush();
+
+    // Initially the full window → one dot per row.
+    expect(dotCount(container)).toBe(data.length);
+
+    const startTraveller = container.querySelectorAll(".recharts-brush-traveller")[0]!;
+    // fireEvent.mouseDown triggers Solid's delegated onMouseDown (pageX 0), starting
+    // the drag + attaching window capture listeners. A flush() is needed before the
+    // window move so the "isTravellerMoving" signal is visible (in a browser these
+    // are separate tasks). The window move/up carry an explicit pageX.
+    fireEvent.mouseDown(startTraveller);
+    flush();
+    window.dispatchEvent(mouseEventWithPageX("mousemove", 300));
+    window.dispatchEvent(mouseEventWithPageX("mouseup", 300));
+    flush();
+
+    // The window shrank → fewer dots than the full dataset.
+    expect(dotCount(container)).toBeLessThan(data.length);
+    expect(dotCount(container)).toBeGreaterThan(0);
+  });
+});