solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/Bar.stacked.render.spec.tsx

@@ -1,53 +0,0 @@
-// Proves stacked Bar RENDERING (the domain math was already done): two Bars
-// sharing a stackId draw stacked rectangles — series 2 sits on top of series 1
-// (series-2 bottom == series-1 top). `isAnimationActive={false}` so bars are at
-// their final geometry (jsdom resolves "auto" to active). `flush()` because bars
-// register via effects and rects compute from the store.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { BarChart, Bar } from "../../src";
-
-const data = [
-  { name: "A", uv: 100, pv: 200 },
-  { name: "B", uv: 150, pv: 120 },
-];
-
-function rectsOf(barLayer: Element): Array<{ y: number; height: number }> {
-  return [...barLayer.querySelectorAll(".recharts-bar-rectangle path.recharts-rectangle")].map(
-    (r) => ({
-      y: Number(r.getAttribute("y")),
-      height: Number(r.getAttribute("height")),
-    }),
-  );
-}
-
-describe("stacked <Bar /> rendering", () => {
-  it("stacks series 2 on top of series 1 (shared stackId)", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={400}
-        height={400}
-        data={data}
-        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
-      >
-        <Bar dataKey="uv" stackId="a" fill="#8884d8" isAnimationActive={false} />
-        <Bar dataKey="pv" stackId="a" fill="#82ca9d" isAnimationActive={false} />
-      </BarChart>
-    ));
-    flush();
-
-    const bars = container.querySelectorAll(".recharts-bar");
-    expect(bars).toHaveLength(2);
-    const series1 = rectsOf(bars[0]!);
-    const series2 = rectsOf(bars[1]!);
-    expect(series1).toHaveLength(data.length);
-    expect(series2).toHaveLength(data.length);
-
-    // For each category, series-2's bottom edge meets series-1's top edge.
-    for (let i = 0; i < data.length; i++) {
-      const bottomOfSeries2 = series2[i]!.y + series2[i]!.height;
-      expect(bottomOfSeries2).toBeCloseTo(series1[i]!.y, 4);
-    }
-  });
-});

package/test/cartesian/Bar.truncateByDomain.spec.tsx

@@ -1,237 +0,0 @@
-// Ported from recharts 3.8.1 test/cartesian/Bar.truncateByDomain.spec.tsx (commit 7a23854).
-import { describe, expect, it, test } from "vitest";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { Bar, Area, CartesianGrid, ComposedChart, XAxis, YAxis, Legend } from "../../src";
-import { expectBars } from "../helper/expectBars";
-import { selectBarRectangles } from "../../src/state/selectors/barSelectors";
-import { selectChartDataWithIndexesIfNotInPanoramaPosition4 } from "../../src/state/selectors/dataSelectors";
-import {
-  selectDisplayedStackedData,
-  selectStackGroups,
-} from "../../src/state/selectors/axisSelectors";
-import { expectStackedData } from "../helper/expectStackGroups";
-
-const data = [
-  {
-    date: "2025-06-30T17:00:00.000Z",
-    day: 1,
-    wins: 0,
-    losses: 0,
-  },
-  {
-    date: "2025-07-31T17:00:00.000Z",
-    day: 1,
-    wins: 3,
-    losses: -5,
-    kd: 9.764204545454545,
-  },
-];
-
-describe("Bar stacked with truncateByDomain", () => {
-  const renderTestCase = createSelectorTestCase((props) => (
-    <ComposedChart
-      width={800}
-      height={400}
-      data={data}
-      stackOffset="sign"
-      margin={{
-        top: 5,
-        right: 0,
-        left: -20,
-        bottom: 5,
-      }}
-    >
-      <CartesianGrid stroke="#ffffff" strokeOpacity="0.2" />
-      <XAxis
-        dataKey="day"
-        strokeOpacity="0"
-        tick={{ fill: "#ffffff", fillOpacity: "0.6" } as never}
-        tickLine={false}
-      />
-      <YAxis
-        strokeOpacity="0"
-        tick={{ fill: "#ffffff", fillOpacity: "0.6" } as never}
-        tickLine={false}
-      />
-      <Area
-        name="Av"
-        dataKey="kd"
-        fill="url(#fillKD)"
-        type="monotoneX"
-        stroke="gold"
-        strokeWidth={2}
-        dot={false}
-        connectNulls
-        pointerEvents="none"
-      />
-      <Bar
-        id="bar-wins"
-        name="Wi"
-        dataKey="wins"
-        fill="#ffffff"
-        opacity={0.8}
-        stackId="date"
-        cursor="pointer"
-        isAnimationActive={false}
-      />
-      <Bar
-        id="bar-losses"
-        name="Lo"
-        dataKey="losses"
-        fill="red"
-        opacity={0.8}
-        stackId="date"
-        cursor="pointer"
-        isAnimationActive={false}
-      />
-      <Legend verticalAlign="bottom" wrapperStyle={{ left: 0, width: "100%" }} />
-      {props.children}
-    </ComposedChart>
-  ));
-
-  describe("wins", () => {
-    test("selectBarRectangles", () => {
-      const { spy } = renderTestCase((state) =>
-        selectBarRectangles(state, "bar-wins", false, undefined),
-      );
-      expect(spy).toHaveBeenLastCalledWith([
-        {
-          background: {
-            height: 360,
-            width: 304,
-            x: 458,
-            y: 5,
-          },
-          date: "2025-07-31T17:00:00.000Z",
-          day: 1,
-          height: 54,
-          kd: 9.764204545454545,
-          losses: -5,
-          originalDataIndex: 1,
-          payload: {
-            date: "2025-07-31T17:00:00.000Z",
-            day: 1,
-            kd: 9.764204545454545,
-            losses: -5,
-            wins: 3,
-          },
-          stackedBarStart: 275,
-          tooltipPosition: {
-            x: 610,
-            y: 248,
-          },
-          value: [0, 3],
-          width: 304,
-          wins: 3,
-          x: 458,
-          y: 221,
-          parentViewBox: {
-            height: 400,
-            width: 800,
-            x: 0,
-            y: 0,
-          },
-        },
-      ]);
-    });
-
-    test("selectChartDataWithIndexesIfNotInPanorama", () => {
-      const { spy } = renderTestCase((state) =>
-        selectChartDataWithIndexesIfNotInPanoramaPosition4(state, 0, 0, false),
-      );
-      expect(spy).toHaveBeenLastCalledWith({
-        chartData: data,
-        computedData: undefined,
-        dataEndIndex: 1,
-        dataStartIndex: 0,
-      });
-    });
-
-    test("selectDisplayedStackedData", () => {
-      const { spy } = renderTestCase((state) =>
-        selectDisplayedStackedData(state, "yAxis", 0, false),
-      );
-      expect(spy).toHaveBeenLastCalledWith([
-        {
-          "bar-losses": 0,
-          "bar-wins": 0,
-        },
-        {
-          "bar-losses": -5,
-          "bar-wins": 3,
-        },
-      ]);
-    });
-
-    test("selectStackGroups", () => {
-      const { spy } = renderTestCase((state) => selectStackGroups(state, "yAxis", 0, false));
-      const stackGroups = spy.mock.lastCall?.[0] as ReturnType<typeof selectStackGroups>;
-      expect(stackGroups?.date?.graphicalItems).toEqual([
-        {
-          barSize: undefined,
-          data: undefined,
-          dataKey: "wins",
-          hasCustomShape: false,
-          hide: false,
-          id: "bar-wins",
-          isPanorama: false,
-          maxBarSize: undefined,
-          minPointSize: 0,
-          stackId: "date",
-          type: "bar",
-          xAxisId: 0,
-          yAxisId: 0,
-          zAxisId: 0,
-        },
-        {
-          barSize: undefined,
-          data: undefined,
-          dataKey: "losses",
-          hasCustomShape: false,
-          hide: false,
-          id: "bar-losses",
-          isPanorama: false,
-          maxBarSize: undefined,
-          minPointSize: 0,
-          stackId: "date",
-          type: "bar",
-          xAxisId: 0,
-          yAxisId: 0,
-          zAxisId: 0,
-        },
-      ]);
-      expectStackedData((stackGroups?.date?.stackedData ?? []) as never, [
-        [
-          [0, 0],
-          [0, 3],
-        ],
-        [
-          [0, 0],
-          [0, -5],
-        ],
-      ]);
-    });
-  });
-
-  it("should render bars", () => {
-    const { container } = renderTestCase();
-    expectBars(container, [
-      {
-        d: "M 458,221 h 304 v 54 h -304 Z",
-        height: "54",
-        radius: "0",
-        width: "304",
-        x: "458",
-        y: "221",
-      },
-      {
-        d: "M 458,365 h 304 v -90 h -304 Z",
-        height: "-90",
-        radius: "0",
-        width: "304",
-        x: "458",
-        y: "365",
-      },
-    ]);
-  });
-});

package/test/cartesian/Bar.zeroDimensionFiltering.spec.tsx

@@ -1,336 +0,0 @@
-// Ported from recharts 3.8.1 test/cartesian/Bar.zeroDimensionFiltering.spec.tsx (commit 7a23854).
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { Bar, BarChart, BarStack, XAxis, YAxis } from "../../src";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { render } from "@solidjs/testing-library";
-import { selectBarRectangles } from "../../src/state/selectors/barSelectors";
-import { getAllBars } from "../helper/expectBars";
-
-function generateSparseStackedData(totalCategories: number, nonZeroCount: number) {
-  const data: Array<{ category: string; stackA: number; stackB: number; stackC: number }> = [];
-  const nonZeroIndices = new Set<number>();
-
-  while (nonZeroIndices.size < nonZeroCount) {
-    nonZeroIndices.add(Math.floor(Math.random() * totalCategories));
-  }
-
-  for (let i = 0; i < totalCategories; i++) {
-    if (nonZeroIndices.has(i)) {
-      data.push({
-        category: `cat-${i}`,
-        stackA: Math.floor(Math.random() * 100) + 10,
-        stackB: Math.floor(Math.random() * 100) + 10,
-        stackC: Math.floor(Math.random() * 100) + 10,
-      });
-    } else {
-      data.push({
-        category: `cat-${i}`,
-        stackA: 0,
-        stackB: 0,
-        stackC: 0,
-      });
-    }
-  }
-
-  return data;
-}
-
-describe("Bar zero-dimension filtering", () => {
-  it("should filter zero-dimension rectangles inside BarStack and preserve originalDataIndex", () => {
-    const data = [
-      { category: "A", stackA: -100, stackB: 60, stackC: 40 },
-      { category: "B", stackA: 80, stackB: -30, stackC: 20 },
-    ];
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={300} height={200} data={data} stackOffset="positive">
-        <XAxis dataKey="category" />
-        <YAxis />
-        <BarStack>
-          <Bar id="bar-a" dataKey="stackA" fill="#8884d8" isAnimationActive={false} />
-          <Bar id="bar-b" dataKey="stackB" fill="#82ca9d" isAnimationActive={false} />
-          <Bar id="bar-c" dataKey="stackC" fill="#ffc658" isAnimationActive={false} />
-          {props.children}
-        </BarStack>
-      </BarChart>
-    ));
-
-    const { spy } = renderTestCase((state) =>
-      selectBarRectangles(state, "bar-a", false, undefined),
-    );
-    const rectangles = spy.mock.lastCall?.[0] ?? [];
-
-    expect(rectangles.length).toBe(1);
-    expect(rectangles[0]).toEqual(
-      expect.objectContaining({
-        originalDataIndex: 1,
-      }),
-    );
-    expect(
-      rectangles.some(
-        (rect: { width: number; height: number }) => rect.width === 0 || rect.height === 0,
-      ),
-    ).toBe(false);
-  });
-
-  it("should keep BarStack clip-path indices aligned after filtering sparse rectangles", () => {
-    const data = [
-      { category: "A", stackA: 0 },
-      { category: "B", stackA: 12 },
-    ];
-
-    const { container } = render(() => (
-      <BarChart width={300} height={200} data={data}>
-        <XAxis dataKey="category" />
-        <YAxis />
-        <BarStack stackId="sparse-stack" radius={8}>
-          <Bar dataKey="stackA" fill="#8884d8" isAnimationActive={false} />
-        </BarStack>
-      </BarChart>
-    ));
-    flush();
-
-    const clippedBarLayers = container.querySelectorAll(".recharts-bar-rectangle[clip-path]");
-    expect(clippedBarLayers).toHaveLength(1);
-    expect(clippedBarLayers[0]!.getAttribute("clip-path")).toBe(
-      "url(#recharts-bar-stack-clip-path-sparse-stack-1)",
-    );
-
-    expect(
-      container.querySelector("clipPath#recharts-bar-stack-clip-path-sparse-stack-1"),
-    ).not.toBeNull();
-    expect(
-      container.querySelector("clipPath#recharts-bar-stack-clip-path-sparse-stack-0"),
-    ).toBeNull();
-  });
-
-  it("should filter out zero-dimension rectangles from selectBarRectangles", () => {
-    const totalCategories = 100;
-    const nonZeroCategories = 10;
-    const data = generateSparseStackedData(totalCategories, nonZeroCategories);
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={800} height={400} data={data}>
-        <XAxis dataKey="category" />
-        <YAxis />
-        <Bar id="bar-a" dataKey="stackA" stackId="stack" fill="#8884d8" isAnimationActive={false} />
-        <Bar id="bar-b" dataKey="stackB" stackId="stack" fill="#82ca9d" isAnimationActive={false} />
-        <Bar id="bar-c" dataKey="stackC" stackId="stack" fill="#ffc658" isAnimationActive={false} />
-        {props.children}
-      </BarChart>
-    ));
-
-    const { spy } = renderTestCase((state) =>
-      selectBarRectangles(state, "bar-a", false, undefined),
-    );
-    const rectangles = spy.mock.lastCall?.[0] ?? [];
-
-    expect(rectangles.length).toBeLessThanOrEqual(nonZeroCategories);
-
-    rectangles.forEach((rect: { width: number; height: number }) => {
-      expect(rect.width).not.toBe(0);
-      expect(rect.height).not.toBe(0);
-    });
-  });
-
-  it("should render only non-zero rectangles as DOM elements", () => {
-    const totalCategories = 50;
-    const nonZeroCategories = 5;
-    const data = generateSparseStackedData(totalCategories, nonZeroCategories);
-
-    const { container } = render(() => (
-      <BarChart width={800} height={400} data={data}>
-        <XAxis dataKey="category" />
-        <YAxis />
-        <Bar dataKey="stackA" stackId="stack" fill="#8884d8" isAnimationActive={false} />
-      </BarChart>
-    ));
-    flush();
-
-    const bars = getAllBars(container);
-
-    expect(bars.length).toBeLessThanOrEqual(nonZeroCategories);
-  });
-
-  it("should reduce component tree size proportionally to sparsity", { timeout: 30_000 }, () => {
-    const scenarios = [
-      { totalCategories: 100, nonZeroCategories: 10 },
-      { totalCategories: 500, nonZeroCategories: 25 },
-      { totalCategories: 1000, nonZeroCategories: 50 },
-    ];
-
-    scenarios.forEach(({ totalCategories, nonZeroCategories }) => {
-      const data = generateSparseStackedData(totalCategories, nonZeroCategories);
-
-      const { container, unmount } = render(() => (
-        <BarChart width={800} height={400} data={data}>
-          <XAxis dataKey="category" />
-          <YAxis />
-          <Bar dataKey="stackA" stackId="stack" fill="#8884d8" isAnimationActive={false} />
-          <Bar dataKey="stackB" stackId="stack" fill="#82ca9d" isAnimationActive={false} />
-          <Bar dataKey="stackC" stackId="stack" fill="#ffc658" isAnimationActive={false} />
-        </BarChart>
-      ));
-      flush();
-
-      const actualBars = getAllBars(container).length;
-      const potentialBars = totalCategories * 3;
-      const reductionPercent = Math.round((1 - actualBars / potentialBars) * 100);
-
-      expect(actualBars).toBeLessThan(potentialBars);
-      expect(reductionPercent).toBeGreaterThanOrEqual(90);
-
-      unmount();
-    });
-  });
-
-  it("should reduce rectangle count at selector level", () => {
-    const totalCategories = 200;
-    const nonZeroCategories = 20;
-    const numberOfStackedBars = 3;
-    const data = generateSparseStackedData(totalCategories, nonZeroCategories);
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={800} height={400} data={data}>
-        <XAxis dataKey="category" />
-        <YAxis />
-        <Bar id="bar-a" dataKey="stackA" stackId="stack" fill="#8884d8" isAnimationActive={false} />
-        <Bar id="bar-b" dataKey="stackB" stackId="stack" fill="#82ca9d" isAnimationActive={false} />
-        <Bar id="bar-c" dataKey="stackC" stackId="stack" fill="#ffc658" isAnimationActive={false} />
-        {props.children}
-      </BarChart>
-    ));
-
-    const { spy, unmount } = renderTestCase((state) => ({
-      barA: selectBarRectangles(state, "bar-a", false, undefined),
-      barB: selectBarRectangles(state, "bar-b", false, undefined),
-      barC: selectBarRectangles(state, "bar-c", false, undefined),
-    }));
-
-    const counts = spy.mock.lastCall?.[0] as
-      | { barA: ReadonlyArray<unknown>; barB: ReadonlyArray<unknown>; barC: ReadonlyArray<unknown> }
-      | undefined;
-    const actualRectangles =
-      (counts?.barA.length ?? 0) + (counts?.barB.length ?? 0) + (counts?.barC.length ?? 0);
-
-    const potentialRectangles = totalCategories * numberOfStackedBars;
-    const percentSaved = Math.round(
-      ((potentialRectangles - actualRectangles) / potentialRectangles) * 100,
-    );
-
-    expect(percentSaved).toBeGreaterThan(80);
-    expect(actualRectangles).toBeLessThanOrEqual(nonZeroCategories * numberOfStackedBars);
-
-    unmount();
-  });
-
-  it("should handle sparse dashboard data efficiently", { timeout: 30_000 }, () => {
-    const months = 36;
-    const metrics = 50;
-    const sparsity = 0.85;
-
-    const data: Array<Record<string, number | string>> = [];
-    for (let month = 0; month < months; month++) {
-      const entry: Record<string, number | string> = { month: `Month ${month + 1}` };
-      for (let metric = 0; metric < metrics; metric++) {
-        entry[`metric${metric}`] =
-          Math.random() > sparsity ? Math.floor(Math.random() * 100) + 1 : 0;
-      }
-      data.push(entry);
-    }
-
-    const { container } = render(() => (
-      <BarChart width={1200} height={600} data={data}>
-        <XAxis dataKey="month" />
-        <YAxis />
-        {Array.from({ length: metrics }, (_, i) => (
-          <Bar
-            dataKey={`metric${i}`}
-            stackId="stack"
-            fill={`hsl(${(i * 7) % 360}, 70%, 50%)`}
-            isAnimationActive={false}
-          />
-        ))}
-      </BarChart>
-    ));
-    flush();
-
-    const actualBars = getAllBars(container).length;
-    const potentialBars = months * metrics;
-
-    expect(actualBars).toBeLessThan(potentialBars * 0.5);
-  });
-
-  it("should handle extreme sparsity efficiently", { timeout: 30_000 }, () => {
-    const dataPoints = 672;
-    const errorRate = 0.01;
-
-    const data = Array.from({ length: dataPoints }, (_, i) => ({
-      time: `Hour ${i}`,
-      errors: Math.random() < errorRate ? Math.floor(Math.random() * 10) + 1 : 0,
-      warnings: Math.random() < errorRate * 2 ? Math.floor(Math.random() * 20) + 1 : 0,
-      info: Math.random() < errorRate * 5 ? Math.floor(Math.random() * 50) + 1 : 0,
-    }));
-
-    const { container } = render(() => (
-      <BarChart width={1200} height={400} data={data}>
-        <XAxis dataKey="time" />
-        <YAxis />
-        <Bar dataKey="errors" stackId="log" fill="#ff4444" isAnimationActive={false} />
-        <Bar dataKey="warnings" stackId="log" fill="#ffaa00" isAnimationActive={false} />
-        <Bar dataKey="info" stackId="log" fill="#4488ff" isAnimationActive={false} />
-      </BarChart>
-    ));
-    flush();
-
-    const actualBars = getAllBars(container).length;
-    const potentialBars = dataPoints * 3;
-
-    expect(actualBars).toBeLessThan(potentialBars * 0.2);
-  });
-
-  it("should not filter out zero-height bars that have a custom shape (BoxPlot use case)", () => {
-    const HorizonBar = (barProps: { x?: number; y?: number; width?: number; height?: number }) => {
-      const { x, y, width } = barProps;
-      if (x == null || y == null || width == null) {
-        return null;
-      }
-      return <line x1={x} y1={y} x2={x + width} y2={y} stroke="#000" stroke-width={3} />;
-    };
-
-    const data = [
-      { min: 100, bottomWhisker: 100, bottomBox: 50, topBox: 200, topWhisker: 200, marker: 0 },
-      { min: 200, bottomWhisker: 200, bottomBox: 200, topBox: 100, topWhisker: 100, marker: 0 },
-    ];
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={400} height={400} data={data}>
-        <XAxis />
-        <YAxis />
-        <Bar stackId="a" id="bar-min" dataKey="min" fill="none" isAnimationActive={false} />
-        <Bar
-          stackId="a"
-          id="bar-marker"
-          dataKey="marker"
-          shape={(item) => (
-            <HorizonBar x={item.x} y={item.y} width={item.width} height={item.height} />
-          )}
-          isAnimationActive={false}
-        />
-        <Bar stackId="a" id="bar-whisker" dataKey="bottomWhisker" isAnimationActive={false} />
-        {props.children}
-      </BarChart>
-    ));
-
-    const { spy } = renderTestCase((state) =>
-      selectBarRectangles(state, "bar-marker", false, undefined),
-    );
-    const rectangles = spy.mock.lastCall?.[0] ?? [];
-
-    expect(rectangles.length).toBe(data.length);
-    rectangles.forEach((rect: { height: number }) => {
-      expect(rect.height).toBe(0);
-    });
-  });
-});