solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/BarStack.spec.tsx

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

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

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

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

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