solid-recharts 0.2.1 → 1.0.0

package/test/chart/ScatterChart.typed.spec.tsx

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Scatter, ScatterChart } from "../../src";
-import { render } from "@solidjs/testing-library";
-
-// Ported from recharts 3.8.1 test/chart/ScatterChart.typed.spec.tsx.
-
-type ExampleDataPoint = { value: number; name: string };
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { value: 100, name: "a" },
-  { value: 80, name: "b" },
-];
-
-describe("ScatterChart with strong typing", () => {
-  it("should allow implicit chart typing", () => {
-    render(() => (
-      <ScatterChart data={data} width={400} height={400}>
-        <Scatter dataKey="value" isAnimationActive={false} />
-      </ScatterChart>
-    ));
-  });
-
-  it("should allow explicit chart typing", () => {
-    render(() => (
-      <ScatterChart<ExampleDataPoint> data={data} width={400} height={400}>
-        <Scatter dataKey="value" isAnimationActive={false} />
-      </ScatterChart>
-    ));
-  });
-
-  it("should show error when chart data shape does not match explicit generic type", () => {
-    const invalidChart = (
-      // @ts-expect-error TypeScript is correct here - chart data does not match explicit generic type
-      <ScatterChart<ExampleDataPoint> data={{ wrong: 1 }} width={400} height={400}>
-        <Scatter dataKey="value" isAnimationActive={false} />
-      </ScatterChart>
-    );
-    expect(invalidChart).toBeDefined();
-  });
-});

package/test/chart/SunburstChart.spec.tsx

@@ -1,146 +0,0 @@
-// Subset port of recharts 3.8.1 test/chart/SunburstChart.spec.tsx (commit 7a23854):
-// the hierarchical radial chart draws one <Sector> per node (depth-first), each
-// inheriting its parent's fill unless it sets its own. `flush()` because the chart
-// size is reported via an effect (ReportChartSize) before the arcs compute.
-import { describe, expect, it, vi } from "vitest";
-import { createEffect, flush } from "solid-js";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { SunburstChart } from "../../src";
-import type { SunburstData } from "../../src";
-import { useChartHeight, useChartWidth, useViewBox } from "../../src/context/chartLayoutContext";
-import { useClipPathId } from "../../src/container/ClipPathProvider";
-
-const data: SunburstData = {
-  name: "Root",
-  value: 100,
-  children: [
-    { name: "Child1", fill: "#264653", value: 30, children: [{ name: "third child", value: 10 }] },
-    {
-      name: "Child2",
-      fill: "#2a9d8f",
-      value: 20,
-      children: [{ name: "another child", value: 10 }],
-    },
-    { name: "Child3", fill: "#e9c46a", value: 20 },
-  ],
-};
-
-describe("<SunburstChart />", () => {
-  it("renders each sector depth-first, inheriting the parent fill", () => {
-    const { container } = render(() => <SunburstChart width={500} height={500} data={data} />);
-    flush();
-
-    const sectors = container.querySelectorAll(".recharts-sector");
-    // Child1, its child (inherits), Child2, its child (inherits), Child3.
-    expect(sectors).toHaveLength(5);
-    expect(sectors[0]).toHaveAttribute("fill", "#264653");
-    expect(sectors[1]).toHaveAttribute("fill", "#264653");
-    expect(sectors[2]).toHaveAttribute("fill", "#2a9d8f");
-    expect(sectors[3]).toHaveAttribute("fill", "#2a9d8f");
-    expect(sectors[4]).toHaveAttribute("fill", "#e9c46a");
-  });
-
-  it("fires onMouseEnter, onMouseLeave and onClick with the hovered node", () => {
-    const onMouseEnter = vi.fn();
-    const onMouseLeave = vi.fn();
-    const onClick = vi.fn();
-    const { container } = render(() => (
-      <SunburstChart
-        width={500}
-        height={500}
-        data={data}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onClick={onClick}
-      />
-    ));
-    flush();
-
-    const first = container.querySelector(".recharts-sector")!;
-    fireEvent.mouseEnter(first);
-    expect(onMouseEnter).toHaveBeenCalledTimes(1);
-    // The node passed back is the first child (Child1).
-    expect(onMouseEnter.mock.calls[0]![0]).toMatchObject({ name: "Child1", tooltipIndex: "[0]" });
-
-    fireEvent.mouseLeave(first);
-    expect(onMouseLeave).toHaveBeenCalledTimes(1);
-    expect(onMouseLeave.mock.calls[0]![0]).toMatchObject({ name: "Child1", tooltipIndex: "[0]" });
-
-    fireEvent.click(first);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick.mock.calls[0]![0]).toMatchObject({ name: "Child1", tooltipIndex: "[0]" });
-  });
-
-  it("does not call touch event callbacks", () => {
-    const onTouchMove = vi.fn();
-    const onTouchEnd = vi.fn();
-
-    const { container } = render(() => (
-      <SunburstChart
-        width={500}
-        height={500}
-        // @ts-expect-error typescript is correct here - SunburstChart does not fire touch events
-        onTouchMove={onTouchMove}
-        onTouchEnd={onTouchEnd}
-        data={data}
-      />
-    ));
-    flush();
-
-    const sector = container.querySelectorAll(".recharts-sector")[0]!;
-    fireEvent.touchMove(sector, { touches: [{ clientX: 200, clientY: 200 }] });
-    expect(onTouchMove).not.toHaveBeenCalled();
-  });
-
-  describe("SunburstChart layout context", () => {
-    it("should provide viewBox but not clipPathId", () => {
-      const clipPathSpy = vi.fn();
-      const viewBoxSpy = vi.fn();
-      const Comp = (): null => {
-        clipPathSpy(useClipPathId());
-        const viewBox = useViewBox();
-        createEffect(
-          () => viewBox(),
-          (v) => viewBoxSpy(v),
-        );
-        return null;
-      };
-      render(() => (
-        <SunburstChart width={100} height={50} data={data}>
-          <Comp />
-        </SunburstChart>
-      ));
-      flush();
-
-      expect(clipPathSpy).toHaveBeenLastCalledWith(undefined);
-      expect(viewBoxSpy).toHaveBeenLastCalledWith({ x: 0, y: 0, width: 100, height: 50 });
-    });
-
-    it("should set width and height in context", () => {
-      const widthSpy = vi.fn();
-      const heightSpy = vi.fn();
-      const Comp = (): null => {
-        const width = useChartWidth();
-        const height = useChartHeight();
-        createEffect(
-          () => width(),
-          (v) => widthSpy(v),
-        );
-        createEffect(
-          () => height(),
-          (v) => heightSpy(v),
-        );
-        return null;
-      };
-      render(() => (
-        <SunburstChart width={100} height={50} data={data}>
-          <Comp />
-        </SunburstChart>
-      ));
-      flush();
-
-      expect(widthSpy).toHaveBeenLastCalledWith(100);
-      expect(heightSpy).toHaveBeenLastCalledWith(50);
-    });
-  });
-});

package/test/chart/Treemap.animation.spec.tsx

@@ -1,52 +0,0 @@
-// Solid-recharts spec: Treemap node enter animation. recharts slides each node in
-// from the left via a CSS `transform` transition; the spec just sets
-// `isAnimationActive={false}` for static geometry, so here we lock the two states:
-// settled (no transition) when off, and a transition present when animating.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { Treemap } from "../../src";
-import { exampleTreemapData } from "../_data";
-import { render } from "@solidjs/testing-library";
-
-function depthLayers(container: Element): Element[] {
-  return Array.from(container.querySelectorAll(".recharts-treemap-depth-1"));
-}
-
-describe("Treemap animation", () => {
-  it("renders settled, transition-free nodes when isAnimationActive={false}", () => {
-    const { container } = render(() => (
-      <Treemap width={800} height={400} data={exampleTreemapData} isAnimationActive={false} />
-    ));
-    flush();
-    const layers = depthLayers(container);
-    expect(layers.length).toBeGreaterThan(0);
-    layers.forEach((l) => {
-      const style = l.getAttribute("style") ?? "";
-      // Settled at the identity transform, no transition.
-      expect(style).toContain("translate(0px, 0px)");
-      expect(style).not.toContain("transition");
-    });
-    // Geometry is unaffected by the animation wrapper.
-    expect(container.querySelectorAll(".recharts-rectangle").length).toBeGreaterThan(0);
-  });
-
-  it("accepts the animation props and still renders every node when animating", () => {
-    const { container } = render(() => (
-      <Treemap
-        width={800}
-        height={400}
-        data={exampleTreemapData}
-        isAnimationActive
-        animationBegin={0}
-        animationDuration={1500}
-        animationEasing="linear"
-      />
-    ));
-    flush();
-    // Same node set renders (the animation wrapper carries a transform style).
-    expect(depthLayers(container).length).toBeGreaterThan(0);
-    depthLayers(container).forEach((l) => {
-      expect(l.getAttribute("style") ?? "").toContain("transform");
-    });
-  });
-});