solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,221 @@
+// Port of recharts 3.8.1 test/cartesian/Brush.stacked.spec.tsx (commit 7a23854).
+// Both the "before moving" AND "after moving the brush traveller" cases (issue
+// #6006) are ported: dragging the start traveller right narrows the data window,
+// the brush chrome stays at its reserved position, the surviving stacked bars
+// re-render, and selectStackGroups still returns both stacked Bars with all 6
+// stacked elements (the full domain — the window is a render-time slice).
+//
+// Drag mechanism: fireEvent.mouseDown(traveller) then fireEvent.mouseMove(traveller,
+// { clientX }) — jsdom maps clientX onto event.pageX (the prop the brush handler
+// reads), and the move bubbles to the window capture listener attached on mousedown.
+// (The earlier NO_OWNER_EFFECT-on-drag + bars=0 blockers are gone: the store write
+// runs inside the render root's delegated-event owner, and Bar now renders every
+// selector-output rectangle — see Bar.tsx, the removed width/height DOM gate.)
+//
+// Harness deltas: React render + @testing-library/react fireEvent →
+// createSelectorTestCase; `import React` dropped. expectBrush is inlined.
+// toBeRechartsStackedData is registered by the expectStackGroups side-effect import.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { fireEvent } from "@solidjs/testing-library";
+import { BarChart, Bar, Brush } from "../../src";
+import { PageData } from "../_data";
+import { assertNotNull } from "../helper/assertNotNull";
+import { selectStackGroups } from "../../src/state/selectors/axisSelectors";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+import "../helper/expectStackGroups"; // registers toBeRechartsStackedData (expect.extend)
+
+type ExpectedBrush = {
+  x: string;
+  y: string;
+  width: string;
+  height: string;
+};
+
+function expectBrush(container: Element, expected: ExpectedBrush): void {
+  assertNotNull(container);
+  const brush = container.querySelector(".recharts-brush rect");
+  assertNotNull(brush);
+  const actual = {
+    x: brush.getAttribute("x"),
+    y: brush.getAttribute("y"),
+    width: brush.getAttribute("width"),
+    height: brush.getAttribute("height"),
+  };
+  expect(actual).toEqual(expected);
+}
+
+const barSettings = (dataKey: string) => ({
+  id: expect.stringMatching("bar-"),
+  barSize: undefined,
+  data: undefined,
+  dataKey,
+  hasCustomShape: false,
+  hide: false,
+  isPanorama: false,
+  maxBarSize: undefined,
+  minPointSize: 0,
+  stackId: "a",
+  type: "bar",
+  xAxisId: 0,
+  yAxisId: 0,
+  zAxisId: 0,
+});
+
+describe("Brush in a stacked chart", () => {
+  const renderTestCase = createSelectorTestCase((props) => (
+    <BarChart width={500} height={300} data={PageData}>
+      <Bar dataKey="pv" stackId="a" />
+      <Bar dataKey="uv" stackId="a" />
+      <Brush dataKey="name" />
+      {props.children}
+    </BarChart>
+  ));
+
+  describe("before moving the brush traveller", () => {
+    it("should render Brush", () => {
+      const { container } = renderTestCase();
+      expectBrush(container, {
+        height: "40",
+        width: "490",
+        x: "5",
+        y: "255",
+      });
+    });
+
+    it("should select stack groups", () => {
+      const { spy } = renderTestCase((state) => selectStackGroups(state, "xAxis", 0, false));
+      expectLastCalledWith(spy, {
+        a: {
+          graphicalItems: [barSettings("pv"), barSettings("uv")],
+          stackedData: expect.toBeRechartsStackedData([
+            [
+              // 6 elements for each stack, because PageData has 6 items
+              [0, 2400],
+              [0, 4567],
+              [0, 1398],
+              [0, 9800],
+              [0, 3908],
+              [0, 4800],
+            ],
+            [
+              [2400, 2800],
+              [4567, 4867],
+              [1398, 1698],
+              [9800, 10000],
+              [3908, 4186],
+              [4800, 4989],
+            ],
+          ]),
+        },
+      });
+    });
+  });
+
+  describe("after moving the brush traveller", () => {
+    function prime(container: Element): void {
+      const traveller = container.querySelector(".recharts-brush-traveller");
+      assertNotNull(traveller);
+      fireEvent.mouseDown(traveller);
+      flush();
+      fireEvent.mouseMove(traveller, { clientX: 100, clientY: 0 });
+      flush();
+    }
+
+    function primeToLastThree(container: Element): void {
+      const traveller = container.querySelector(".recharts-brush-traveller");
+      assertNotNull(traveller);
+      fireEvent.mouseDown(traveller);
+      flush();
+      // Move far to the right to show only the last 3 pages (D, E, F).
+      fireEvent.mouseMove(traveller, { clientX: 300, clientY: 0 });
+      flush();
+    }
+
+    it("should display fewer bars after moving the brush traveller", () => {
+      /* Reproduces https://github.com/recharts/recharts/issues/6006 */
+      const { container } = renderTestCase();
+      prime(container);
+      expectBrush(container, {
+        height: "40",
+        width: "490",
+        x: "5",
+        y: "255",
+      });
+    });
+
+    it("should select stack groups", () => {
+      const { container, spy } = renderTestCase((state) =>
+        selectStackGroups(state, "xAxis", 0, false),
+      );
+      prime(container);
+      // The full domain (all 6 stacked elements) is unchanged by the window narrowing —
+      // the data window is a render-time slice, not a stack-group recompute.
+      expectLastCalledWith(spy, {
+        a: {
+          graphicalItems: [barSettings("pv"), barSettings("uv")],
+          stackedData: expect.toBeRechartsStackedData([
+            [
+              [0, 2400],
+              [0, 4567],
+              [0, 1398],
+              [0, 9800],
+              [0, 3908],
+              [0, 4800],
+            ],
+            [
+              [2400, 2800],
+              [4567, 4867],
+              [1398, 1698],
+              [9800, 10000],
+              [3908, 4186],
+              [4800, 4989],
+            ],
+          ]),
+        },
+      });
+    });
+
+    describe("when narrowed down to last 3 pages", () => {
+      it("should display bars for the last 3 pages", () => {
+        const { container } = renderTestCase();
+        primeToLastThree(container);
+        const bars = container.querySelectorAll(".recharts-bar-rectangle");
+        expect(bars.length).toBeGreaterThan(0);
+      });
+
+      it("should select correct stack groups with proper data range", () => {
+        const { container, spy } = renderTestCase((state) =>
+          selectStackGroups(state, "xAxis", 0, false),
+        );
+        primeToLastThree(container);
+        // When narrowed, stackedData still has all 6 elements (only the last 3 are
+        // used for rendering, handled by dataStartIndex/dataEndIndex).
+        expectLastCalledWith(spy, {
+          a: {
+            graphicalItems: [barSettings("pv"), barSettings("uv")],
+            stackedData: expect.toBeRechartsStackedData([
+              [
+                [0, 2400],
+                [0, 4567],
+                [0, 1398],
+                [0, 9800],
+                [0, 3908],
+                [0, 4800],
+              ],
+              [
+                [2400, 2800],
+                [4567, 4867],
+                [1398, 1698],
+                [9800, 10000],
+                [3908, 4186],
+                [4800, 4989],
+              ],
+            ]),
+          },
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,50 @@
+// Spec for the cartesian axis rendering vertical: <XAxis>/<YAxis> now draw the
+// CartesianAxis (axis line + tick lines + tick labels) from the tick selectors,
+// not just register settings.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render } from "@solidjs/testing-library";
+import { LineChart, Line, XAxis, YAxis } from "../../src";
+import { PageData } from "../_data";
+
+describe("<XAxis>/<YAxis> rendering", () => {
+  it("draws tick labels, tick lines, and the axis line", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Line dataKey="uv" stroke="#ff7300" />
+      </LineChart>
+    ));
+    flush();
+
+    // Axis layers exist.
+    expect(container.querySelector(".recharts-xAxis")).not.toBeNull();
+    expect(container.querySelector(".recharts-yAxis")).not.toBeNull();
+
+    // X axis: one tick label per category, in order.
+    const xLabels = [
+      ...container.querySelectorAll(".recharts-xAxis .recharts-cartesian-axis-tick-value"),
+    ].map((n) => n.textContent);
+    expect(xLabels).toEqual(["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
+
+    // Y axis: numeric tick labels spanning the uv domain (0 … 400 nice ticks).
+    const yLabels = [
+      ...container.querySelectorAll(".recharts-yAxis .recharts-cartesian-axis-tick-value"),
+    ].map((n) => n.textContent);
+    expect(yLabels.length).toBeGreaterThan(0);
+    expect(yLabels).toContain("0");
+    expect(yLabels).toContain("400");
+
+    // Axis line + tick lines render.
+    expect(container.querySelectorAll(".recharts-cartesian-axis-line").length).toBe(2);
+    expect(
+      container.querySelectorAll(".recharts-xAxis .recharts-cartesian-axis-tick-line").length,
+    ).toBe(6);
+  });
+});

package/test/cartesian/CartesianAxis.spec.tsx

@@ -0,0 +1,396 @@
+// Port of recharts 3.8.1 test/cartesian/CartesianAxis.spec.tsx (commit 7a23854): renders
+// <CartesianAxis> directly inside a <Surface> with explicit ticks. Solid idioms: React
+// `className` → `class` (the function-form tick still receives recharts' `className` key
+// in its props, applied as `class`). Deferred: the getComputedStyle measurement-span
+// assertion (internal text-measure plumbing) and ELEMENT-form `tick`/`label` (Solid can't
+// React.cloneElement an already-evaluated element to inject computed x/y — function form
+// covers it).
+import { describe, expect, it } from "vitest";
+import { scaleLinear } from "d3-scale";
+import { render } from "@solidjs/testing-library";
+import { CartesianAxis, Surface } from "../../src";
+import type { CartesianTickContentProps, TickItem } from "../../src/util/types";
+import type { LabelContentType } from "../../src/component/Label";
+
+const CustomizeLabel: LabelContentType = (props) => (
+  <text data-testid="customized-label" x={props.x} y={props.y}>
+    test
+  </text>
+);
+
+const CustomizedTick = (props: CartesianTickContentProps) => (
+  <text data-testid="customized-tick" x={props.x} y={props.y} class={props.class}>
+    test
+  </text>
+);
+
+const exampleScale = scaleLinear();
+
+describe("<CartesianAxis />", () => {
+  const ticks: ReadonlyArray<TickItem> = [
+    { value: 10, coordinate: 50, index: 0, offset: 0 },
+    { value: 1000, coordinate: 100, index: 1, offset: 0 },
+    { value: 20, coordinate: 150, index: 2, offset: 0 },
+    { value: 40, coordinate: 200, index: 3, offset: 0 },
+    { value: 90, coordinate: 250, index: 4, offset: 0 },
+  ];
+
+  it("Renders 5 ticks in simple CartesianAxis", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          label="test"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick")).toHaveLength(5);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
+  });
+
+  it("Renders no ticks in simple CartesianAxis", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={[]}
+          label="test"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick")).toHaveLength(0);
+  });
+
+  it('Renders ticks when interval="preserveStartEnd"', () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          label="test"
+          interval="preserveStartEnd"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick")).toHaveLength(5);
+  });
+
+  it('Renders ticks when interval="preserveStart"', () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          label="test"
+          interval="preserveStart"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick")).toHaveLength(5);
+  });
+
+  it("Renders 5 ticks in a CartesianAxis which has orientation top", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="top"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          label="top"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick")).toHaveLength(5);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
+  });
+
+  it("Renders 5 ticks in a CartesianAxis which has orientation left", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="left"
+          y={100}
+          width={50}
+          height={400}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          label="left"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick")).toHaveLength(5);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
+  });
+
+  it("Renders 5 ticks in a CartesianAxis which has orientation right", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="right"
+          y={100}
+          width={50}
+          height={400}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          label="right"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick")).toHaveLength(5);
+    expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
+  });
+
+  it("Renders label when label is a function", () => {
+    const view = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="left"
+          y={100}
+          width={50}
+          height={400}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          label={CustomizeLabel}
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(view.container.querySelectorAll(".recharts-cartesian-axis-tick")).toHaveLength(5);
+    expect(view.getAllByTestId("customized-label")).toHaveLength(1);
+  });
+
+  it("Render customized ticks when tick is set to be a function", () => {
+    const view = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          tick={CustomizedTick}
+          interval={0}
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(view.getAllByTestId("customized-tick")).toHaveLength(ticks.length);
+  });
+
+  it("Renders no ticks when tick is set to false", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          tick={false}
+          scale={exampleScale}
+          ticks={ticks}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick-value")).toHaveLength(0);
+  });
+
+  it("Renders additional class when passed via tick options", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          tick={{ class: "custom" }}
+          label="test"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cartesian-axis-tick-value.custom")).toHaveLength(
+      ticks.length,
+    );
+  });
+
+  it("Renders with merged class when customized tick is provided", () => {
+    const view = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          tick={CustomizedTick}
+          interval={0}
+        />
+      </Surface>
+    ));
+
+    const tickElements = view.getAllByTestId("customized-tick");
+    expect(tickElements).toHaveLength(ticks.length);
+    tickElements.forEach((element) => {
+      expect(element).toHaveClass("recharts-cartesian-axis-tick-value");
+    });
+  });
+
+  it("Respects user-provided textAnchor prop on horizontal axis", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          textAnchor="start"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    const tickTexts = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
+    expect(tickTexts).toHaveLength(5);
+    tickTexts.forEach((text) => {
+      expect(text).toHaveAttribute("text-anchor", "start");
+    });
+  });
+
+  it("Uses default textAnchor when not provided", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    const tickTexts = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
+    expect(tickTexts).toHaveLength(5);
+    tickTexts.forEach((text) => {
+      expect(text).toHaveAttribute("text-anchor", "middle");
+    });
+  });
+
+  it("Appends a user class to the axis Layer (recharts: className)", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          class="my-axis"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    const layer = container.querySelector(".recharts-cartesian-axis");
+    expect(layer).not.toBeNull();
+    expect(layer).toHaveClass("my-axis");
+  });
+
+  it("Merges tickTextProps into each tick Text, keeping the tick-value class", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          tickTextProps={{ fill: "red", fontSize: 20 }}
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    const tickTexts = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
+    expect(tickTexts).toHaveLength(5);
+    tickTexts.forEach((text) => {
+      expect(text).toHaveAttribute("fill", "red");
+      expect(text).toHaveAttribute("font-size", "20");
+      expect(text).toHaveClass("recharts-cartesian-axis-tick-value");
+    });
+  });
+
+  it("Applies fontSize and letterSpacing props to the tick text", () => {
+    const { container } = render(() => (
+      <Surface width={500} height={500}>
+        <CartesianAxis
+          orientation="bottom"
+          y={100}
+          width={400}
+          height={50}
+          viewBox={{ x: 0, y: 0, width: 500, height: 500 }}
+          ticks={ticks}
+          fontSize={14}
+          letterSpacing="0.5em"
+          scale={exampleScale}
+        />
+      </Surface>
+    ));
+
+    const tickTexts = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
+    expect(tickTexts).toHaveLength(5);
+    tickTexts.forEach((text) => {
+      expect(text).toHaveAttribute("font-size", "14");
+      expect(text).toHaveAttribute("letter-spacing", "0.5em");
+    });
+  });
+});