Skip to content

Add custom fillOpacity on hover website example - #7489

Merged
PavelVanecek merged 1 commit into
mainfrom
pie-fillopacity
Jun 23, 2026
Merged

Add custom fillOpacity on hover website example#7489
PavelVanecek merged 1 commit into
mainfrom
pie-fillopacity

Conversation

@PavelVanecek

@PavelVanecek PavelVanecek commented Jun 23, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Collaborator

Description

Cell is deprecated and will be removed in 4.0, please don't use Cell. This example shows setting opacity using hooks instead.

Related Issue

Closes #5045
Closes #4216

Summary by CodeRabbit

  • New Features
    • Enhanced pie chart interactivity with improved visual feedback. Chart segments now display opacity changes with smooth transitions when hovering, providing a more intuitive and responsive user experience.

@coderabbitai

coderabbitai Bot commented Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

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: f5f56ab9-c5f9-4ee8-b548-0f0dc757ebb1

📥 Commits

Reviewing files that changed from the base of the PR and between 337edbd and 84d42f9.

📒 Files selected for processing (1)
  • www/src/docs/exampleComponents/PieChart/PieChartWithCustomizedLabel.tsx

Walkthrough

In PieChartWithCustomizedLabel.tsx, the recharts import is reformatted to multi-line. The MyCustomPie custom shape renderer is updated to call useActiveTooltipDataPoints() and useIsTooltipActive() hooks, conditionally setting fillOpacity to 0.5 for inactive sectors and 1 for the active sector, with an inline fill-opacity CSS transition.

Changes

PieChart Tooltip-Aware Opacity

Layer / File(s) Summary
MyCustomPie tooltip hook integration
www/src/docs/exampleComponents/PieChart/PieChartWithCustomizedLabel.tsx		 recharts import is expanded to multi-line. MyCustomPie now calls useActiveTooltipDataPoints() and useIsTooltipActive() to determine active state per sector, sets fillOpacity to 0.5 when another sector is active and 1 otherwise, and adds an inline transition style for fill-opacity.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Possibly related issues

  • #5045 — The PR updates the PieChartWithCustomizedLabel example to use tooltip hooks for opacity management, which directly addresses the label re-render/flicker caused by external onMouseEnter/onMouseLeave handlers changing fillOpacity.
  • #5805 — The change uses useActiveTooltipDataPoints() and useIsTooltipActive() to manage fillOpacity based on tooltip state, which corresponds to the hover-opacity-sticking problem described in that issue.

Suggested reviewers

  • ckifer
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Add custom fillOpacity on hover website example' directly and clearly describes the main change: adding a website example demonstrating custom fillOpacity behavior on hover.
Linked Issues check ✅ Passed The PR fulfills the requirements from #5045 by providing a working example that demonstrates how to implement custom fillOpacity changes without causing label re-renders, using React hooks as an alternative to the deprecated Cell component.
Out of Scope Changes check ✅ Passed All changes are scope-compliant: the reformatted imports and modified MyCustomPie renderer directly implement the hover fillOpacity functionality required to address the label re-rendering issue in #5045.

✏️ 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 pie-fillopacity

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.

@codecov

codecov Bot commented Jun 23, 2026

Copy link
Copy Markdown

Bundle Report

Bundle size has no change ✅

@chromatic-com

chromatic-com Bot commented Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown

Tip

All tests passed and all changes approved!

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

@codecov

codecov Bot commented Jun 23, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 88.02%. Comparing base (337edbd) to head (84d42f9).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
...omponents/PieChart/PieChartWithCustomizedLabel.tsx 0.00% 6 Missing and 2 partials ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #7489      +/-   ##
==========================================
- Coverage   88.06%   88.02%   -0.05%     
==========================================
  Files         604      604              
  Lines       13996    14003       +7     
  Branches     3524     3526       +2     
==========================================
  Hits        12326    12326              
- Misses       1483     1488       +5     
- Partials      187      189       +2

☔ View full report in Codecov by Harness.
📢 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

github-actions Bot commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

Staging Deployment Details

These deployments will remain available for 30 days.

@PavelVanecek
PavelVanecek merged commit e5fe9bb into main Jun 23, 2026
63 of 65 checks passed
@PavelVanecek
PavelVanecek deleted the pie-fillopacity branch June 23, 2026 13:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

1 participant

@PavelVanecek