solid-recharts 0.2.0 → 1.0.0

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

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

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

@@ -1,396 +0,0 @@
-// 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 "victory-vendor/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");
-    });
-  });
-});