Skip to content

fix(storybook): use flat dataset for Simple and WithTooltip Treemap stories (#6364)#7072

Merged
PavelVanecek merged 1 commit intorecharts:mainfrom
Harikrushn9118:fix/treemap-storybook-labels
Mar 2, 2026
Merged

fix(storybook): use flat dataset for Simple and WithTooltip Treemap stories (#6364)#7072
PavelVanecek merged 1 commit intorecharts:mainfrom
Harikrushn9118:fix/treemap-storybook-labels

Conversation

@Harikrushn9118
Copy link
Contributor

@Harikrushn9118 Harikrushn9118 commented Mar 1, 2026 •
edited by coderabbitai bot
Loading

Summary

Fixes #6364

The Simple and With tooltip Treemap storybook examples had overlapping/broken labels.

Root Cause

Both stories used sizeData, a nested/hierarchical dataset (with children arrays). Since the Treemap defaults to type="flat", it renders rectangles at every depth level — parents and children occupy overlapping space. The default ContentItem renderer draws a label on every node where the name fits, regardless of depth, causing all labels to pile on top of each other.

The Custom story didn't have this problem because its custom content function only renders labels at depth === 1.

Changes

  1. Added flatTreemapData in storybook/stories/data/Size.ts — a flat dataset (no children nesting) that works correctly with type="flat"
  2. Updated Simple and WithTooltip stories to use flatTreemapData instead of sizeData
  3. Added a new Nested story that properly demonstrates hierarchical data with type="nest" mode

Verification

  • ✅ TypeScript compilation passes (zero errors)
  • ✅ All 21 Treemap unit tests pass
  • ✅ ESLint passes (0 errors)

Summary by CodeRabbit

  • Documentation

    • Enhanced Treemap component documentation with additional story examples
    • Added nested Treemap variant demonstration

  • Chores

    • Extended example datasets for Treemap component testing

@Harikrushn9118
fix(storybook): use flat dataset for Simple and WithTooltip Treemap s…
f08dbb1 
…tories

Fix overlapping labels in Treemap storybook examples (fixes recharts#6364).

The 'Simple' and 'With tooltip' stories were using sizeData, a nested
hierarchical dataset with children arrays. Since Treemap defaults to
type='flat', it rendered rectangles at every depth level, causing parent
and child labels to overlap.

Changes:
- Add flatTreemapData: a flat dataset (no children nesting) for use
  with the default type='flat' rendering mode
- Update Simple and WithTooltip stories to use flatTreemapData
- Add a new Nested story that correctly demonstrates sizeData with
  type='nest' mode
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 1, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 758c6d4 and f08dbb1.

📒 Files selected for processing (2)
  • storybook/stories/API/chart/Treemap.stories.tsx
  • storybook/stories/data/Size.ts

Walkthrough

The changes address broken labels in treemap storybook examples by introducing a new flatTreemapData constant and updating the Treemap stories to use this flatter data structure instead of the previous size data, while adding a new "Nested" story variant.

Changes

Cohort / File(s) Summary
Data Constant Addition
storybook/stories/data/Size.ts		 Added flatTreemapData constant containing an array of name/size objects and updated the export statement to include this new export alongside existing sizeData and treemapData.
Story Updates
storybook/stories/API/chart/Treemap.stories.tsx		 Updated API and WithTooltip story examples to use flatTreemapData instead of sizeData; added new "Nested" story export with render wrapper around Treemap component and configuration for nested treemap demonstration.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • ckifer
  • PavelVanecek
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: using flat dataset for Simple and WithTooltip Treemap stories, directly addressing the issue.
Description check ✅ Passed The description provides comprehensive coverage with a clear summary, root cause analysis, specific changes made, and verification steps. It goes beyond the template requirements with detailed context.
Linked Issues check ✅ Passed The PR fully addresses issue #6364 by fixing broken labels through replacing hierarchical data with flat data in Simple and WithTooltip stories, and adding a Nested story for hierarchical demonstrations.
Out of Scope Changes check ✅ Passed All changes are directly scoped to fix the issue: additions to Size.ts data file and updates to Treemap.stories.tsx for affected stories. No extraneous 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 unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

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
Copy link

codecov bot commented Mar 1, 2026 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.20%. Comparing base (758c6d4) to head (f08dbb1).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #7072   +/-   ##
=======================================
  Coverage   90.20%   90.20%           
=======================================
  Files         526      526           
  Lines       39650    39650           
  Branches     5442     5441    -1     
=======================================
  Hits        35768    35768           
  Misses       3873     3873           
  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.

@PavelVanecek PavelVanecek merged commit 9d53dea into recharts:main Mar 2, 2026
41 checks passed
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

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Broken labels in treemap in storybook examples

2 participants

@Harikrushn9118 @PavelVanecek