solid-recharts 0.1.0

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

@@ -0,0 +1,53 @@
+// 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 "../helper/render";
+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

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

@@ -0,0 +1,336 @@
+// 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 "../helper/render";
+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);
+    });
+  });
+});