Skip to content

Add tests, documentation, and website example for Treemap nesting (#4…#6971

Merged
ckifer merged 2 commits intorecharts:mainfrom
VIDHITTS:treemap-nesting-docs-4580
Feb 7, 2026
Merged

Add tests, documentation, and website example for Treemap nesting (#4…#6971
ckifer merged 2 commits intorecharts:mainfrom
VIDHITTS:treemap-nesting-docs-4580

Conversation

@VIDHITTS
Copy link
Contributor

@VIDHITTS VIDHITTS commented Feb 7, 2026 •
edited by coderabbitai bot
Loading

Description

Add website example, tests, and documentation for the Treemap type="nest" feature.

Changes:

  • Created NestedTreemap.tsx - a website example demonstrating type="nest" with interactive navigation
  • Updated TreeMap/index.ts to export the new example
  • Added 4 new tests covering:
    • Breadcrumb navigation back to root
    • Custom nestIndexContent rendering
    • Leaf node click behavior (shouldn't navigate further)

Related Issue

Fixes #4580

Motivation and Context

The Treemap type prop wasn't documented or demonstrated anywhere. With type="nest":

  • Clicking a parent node "zooms in" to show its children
  • A breadcrumb navigation appears to navigate back up the hierarchy

This PR makes the feature discoverable and adds test coverage.

How Has This Been Tested?

  • Added unit tests in test/chart/Treemap.spec.tsx covering nesting navigation behavior
  • Website example can be verified by running the dev server locally

Screenshots (if appropriate):

(The example will be visible on the recharts website once merged)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • I have added a storybook story or VR test, or extended an existing story or VR test to show my changes

Note: Per maintainer request in #4580, examples were added to the website instead of storybook (see #6668).

Summary by CodeRabbit

  • Tests

    • Added tests for breadcrumb navigation in nested treemaps to return to the root view
    • Verified custom nested-index content renders when provided
    • Confirmed clicking leaf nodes in nested mode does not change the current view

  • Documentation

    • Added a new "Nested Treemap" example demonstrating hierarchical treemap visualization

@VIDHITTS
Add tests, documentation, and website example for Treemap nesting (re…
3017769 
…charts#4580)

- Add NestedTreemap.tsx website example demonstrating type='nest' feature
- Export new example in TreeMap/index.ts
- Add tests for breadcrumb navigation, custom nestIndexContent, and leaf node behavior
- Treemap type='nest' allows clicking parent nodes to zoom in, with breadcrumb navigation to go back
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 7, 2026 •
edited
Loading

Walkthrough

Adds tests for Treemap nesting behavior and a new example component demonstrating a nested Treemap. Tests cover breadcrumb navigation to root, custom nestIndexContent rendering, and leaf-click behavior in nest mode. The example component (NestedTreemap) and its registration in the examples index are added.

Changes

Cohort / File(s) Summary
Treemap nested tests
test/chart/Treemap.spec.tsx		 Adds tests verifying breadcrumb navigation back to root, rendering of a provided nestIndexContent function, and that clicking leaf nodes in type="nest" does not navigate.
Nested Treemap example
www/src/docs/exampleComponents/TreeMap/NestedTreemap.tsx, www/src/docs/exampleComponents/TreeMap/index.ts		 Adds NestedTreemap React component demonstrating a nested Treemap (dataKey/nameKey, Tooltip) and registers it in the treeMapExamples export with source code.
Repository metadata
manifest_file, package.json		 Small metadata/package changes (lines changed noted in diff).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • PavelVanecek
  • ckifer
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title concisely summarizes the three main changes (tests, documentation, website example) for the Treemap nesting feature, with issue reference.
Description check ✅ Passed The description covers all required template sections: motivation, related issue, testing details, types of changes, and checklist completion with explanatory note.
Linked Issues check ✅ Passed All objectives from issue #4580 are met: documentation added, interactive website examples provided, and comprehensive tests covering nesting navigation behavior.
Out of Scope Changes check ✅ Passed All changes are directly related to documenting and testing the Treemap nesting feature; no unrelated modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

@VIDHITTS
Copy link
Contributor Author

VIDHITTS commented Feb 7, 2026

@PavelVanecek I have addresses the linting issues.

@codecov
Copy link

codecov bot commented Feb 7, 2026 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.45%. Comparing base (a396753) to head (f14b9e2).
⚠️ Report is 9 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #6971      +/-   ##
==========================================
- Coverage   91.13%   90.45%   -0.68%     
==========================================
  Files         509      516       +7     
  Lines       37967    38614     +647     
  Branches     5287     5346      +59     
==========================================
+ Hits        34601    34929     +328     
- Misses       3357     3676     +319     
  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.

@ckifer ckifer merged commit d3395be into recharts:main Feb 7, 2026
40 of 41 checks passed
This was referenced Feb 23, 2026
Open
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@PavelVanecek PavelVanecek PavelVanecek approved these changes

@ckifer ckifer ckifer approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add tests, documentation, and storybooks for Treemap nesting

3 participants

@VIDHITTS @PavelVanecek @ckifer