Types: switch Shape from spread to separate prop object by PavelVanecek · Pull Request #7351 · recharts/recharts

PavelVanecek · 2026-05-21T14:46:37Z

Further simplify the Shape type so that it's easier to add the new animation props in the other PR.

Isolated change, no public API difference.

Summary by CodeRabbit

Refactor
- Updated shape rendering prop structures across bar, line, scatter, pie, and radial bar chart components.
- Refactored shape utilities to consolidate how props are passed to shape components.
- Modified type definitions for shape component props and signatures.

coderabbitai · 2026-05-21T14:46:53Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0411a5a5-8dfb-4ea5-9b52-c93d1bb51c2a

📥 Commits

Reviewing files that changed from the base of the PR and between 9a13660 and b97fb5e.

📒 Files selected for processing (10)

src/cartesian/Bar.tsx
src/cartesian/Line.tsx
src/cartesian/Scatter.tsx
src/polar/Pie.tsx
src/polar/RadialBar.tsx
src/util/ActiveShapeUtils.tsx
src/util/BarUtils.tsx
src/util/FunnelUtils.tsx
src/util/RadialBarUtils.tsx
src/util/ScatterUtils.tsx

💤 Files with no reviewable changes (1)

src/cartesian/Bar.tsx

Walkthrough

This PR refactors Recharts' active shape rendering system. The Shape component and related utilities now use an explicit prop contract (option, DefaultShape, shapeProps) instead of spreading props and passing renderDefaultShape separately. All shape-rendering consumers—BarRectangle, FunnelTrapezoid, RadialBarSector, ScatterSymbol, and chart components—are updated accordingly.

Changes

Active Shape Rendering System Refactor

Layer / File(s)	Summary
Shape API Contract Refactor `src/util/ActiveShapeUtils.tsx`	The `Shape` component is rewritten to accept `{ option, DefaultShape, shapeProps, activeClassName?, inActiveClassName? }`. New type aliases (`ShapeOptionProps`, `ShapeOptionElement`) and helpers (`mergeShapeProps`, `renderWithShapeElement`, `getShapeIndex`, `isActiveShape`) support the new contract. Active/inactive classification now reads from `shapeProps.isActive === true` instead of destructured props. Removes dependency on `isPlainObject` detection.
Utility Components Adopting New Shape API `src/util/BarUtils.tsx`, `src/util/FunnelUtils.tsx`, `src/util/RadialBarUtils.tsx`, `src/util/ScatterUtils.tsx`	BarRectangle, FunnelTrapezoid, RadialBarSector, and ScatterSymbol are refactored to destructure `option` and forward remaining props as `shapeProps` into `Shape`. Each component specifies its own `DefaultShape`. Props are consolidated into a single `shapeProps` object; implicit `isActive` destructuring is removed where applicable.
Chart Components Integration `src/cartesian/Bar.tsx`, `src/cartesian/Line.tsx`, `src/cartesian/Scatter.tsx`, `src/polar/Pie.tsx`, `src/polar/RadialBar.tsx`	Bar.tsx removes the optional `option` field from BarShapeProps. Line.tsx includes `pathRef` in `curveProps` and updates StaticCurve's Shape call. Scatter.tsx injects `isActive` into `symbolProps` during assembly. Pie.tsx expands PieSectorShapeProps to carry data-index and graphical-item-id attributes; sectorProps is now typed as PieSectorShapeProps and includes `isActive`/`index`. RadialBar.tsx updates type annotations for radialBarSectorProps to `React.ComponentProps<typeof RadialBarSector>`.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

recharts/recharts#7349: Refactors Shape API and call sites (Pie, Line, Scatter, Bar utilities) to use explicit DefaultShape/shapeProps props instead of old plumbing.
recharts/recharts#6738: Main refactor of ActiveShapeUtils.tsx removing propTransformer and updating all Shape consumer call sites (BarUtils, FunnelUtils, RadialBarUtils, ScatterUtils).
recharts/recharts#6683: Modifies Pie.tsx sector shape props to ensure index is available to shape renderers via updated PieSectorShapeProps/Shape wiring.

Suggested reviewers

ckifer

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 6.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The description is minimal but provides sufficient context about the PR's purpose. However, the description template requires sections like Motivation, Testing, and Type of changes that are not adequately addressed.	Fill in key template sections: explain the motivation and benefits more clearly, describe how this was tested, and check the appropriate change type box.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change—refactoring the Shape component to accept props via a separate object instead of spread syntax, which aligns with all file modifications across the codebase.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch shape-props-again

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-05-21T14:50:11Z

Bundle Report

Changes will increase total bundle size by 1.8kB (0.03%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.4MB	596 bytes (0.04%) ⬆️
recharts/bundle-es6	1.23MB	724 bytes (0.06%) ⬆️
recharts/bundle-umd	588.95kB	110 bytes (0.02%) ⬆️
recharts/bundle-treeshaking-cartesian	693.57kB	328 bytes (0.05%) ⬆️
recharts/bundle-treeshaking-polar	459.42kB	45 bytes (0.01%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	110 bytes	588.95kB	0.02%

view changes for bundle: recharts/bundle-treeshaking-polar

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	45 bytes	459.42kB	0.01%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`cartesian/Line.js`	-15 bytes	30.14kB	-0.05%
`polar/Pie.js`	-8 bytes	28.93kB	-0.03%
`cartesian/Scatter.js`	-10 bytes	25.44kB	-0.04%
`util/ActiveShapeUtils.js`	-323 bytes	4.31kB	-6.98%
`util/BarUtils.js`	390 bytes	2.04kB	23.61% ⚠️
`util/ScatterUtils.js`	-90 bytes	1.64kB	-5.21%
`util/RadialBarUtils.js`	390 bytes	1.15kB	51.32% ⚠️
`util/FunnelUtils.js`	390 bytes	993 bytes	64.68% ⚠️

view changes for bundle: recharts/bundle-treeshaking-cartesian

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	328 bytes	693.57kB	0.05%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`cartesian/Line.js`	-15 bytes	31.75kB	-0.05%
`polar/Pie.js`	-8 bytes	30.75kB	-0.03%
`cartesian/Scatter.js`	-10 bytes	27.09kB	-0.04%
`util/ActiveShapeUtils.js`	-451 bytes	5.14kB	-8.07%
`util/BarUtils.js`	390 bytes	3.16kB	14.09% ⚠️
`util/ScatterUtils.js`	-90 bytes	2.45kB	-3.54%
`util/RadialBarUtils.js`	390 bytes	2.07kB	23.16% ⚠️
`util/FunnelUtils.js`	390 bytes	1.87kB	26.28% ⚠️

chromatic-com · 2026-05-21T14:54:14Z

Tip

All tests passed and all changes approved!

🟢 UI Tests: 193 tests unchanged
🟢 UI Review: 193 stories published -- no changes
Storybook Publish: 193 stories published

codecov · 2026-05-21T14:55:01Z

Codecov Report

❌ Patch coverage is 98.50746% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 89.04%. Comparing base (9a13660) to head (b97fb5e).

Files with missing lines	Patch %	Lines
src/util/ActiveShapeUtils.tsx	96.66%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7351   +/-   ##
=======================================
  Coverage   89.04%   89.04%           
=======================================
  Files         548      548           
  Lines       40534    40546   +12     
  Branches     5567     5570    +3     
=======================================
+ Hits        36093    36105   +12     
  Misses       4432     4432           
  Partials        9        9

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

github-actions · 2026-05-21T15:07:46Z

Staging Deployment Details

These deployments will remain available for 30 days.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

Types: switch Shape from spread to separate prop object

b97fb5e

PavelVanecek merged commit 9472d58 into main May 21, 2026
60 checks passed

PavelVanecek deleted the shape-props-again branch May 21, 2026 22:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Types: switch Shape from spread to separate prop object#7351

Types: switch Shape from spread to separate prop object#7351
PavelVanecek merged 1 commit into
mainfrom
shape-props-again

PavelVanecek commented May 21, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 21, 2026 •

edited

Loading

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

codecov Bot commented May 21, 2026 •

edited

Loading

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

chromatic-com Bot commented May 21, 2026 •

edited

Loading

All tests passed and all changes approved!

Uh oh!

codecov Bot commented May 21, 2026

Uh oh!

github-actions Bot commented May 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

PavelVanecek commented May 21, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

codecov Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

chromatic-com Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All tests passed and all changes approved!

Uh oh!

codecov Bot commented May 21, 2026

Codecov Report

Uh oh!

github-actions Bot commented May 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

PavelVanecek commented May 21, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 21, 2026 •

edited

Loading

codecov Bot commented May 21, 2026 •

edited

Loading

chromatic-com Bot commented May 21, 2026 •

edited

Loading