Skip to content

Code review and enhancement on PRMergeSuccessRateChart#235

Open
kiaramathews wants to merge 3 commits into
mainfrom
Feature/ChartReview229
Open

Code review and enhancement on PRMergeSuccessRateChart#235
kiaramathews wants to merge 3 commits into
mainfrom
Feature/ChartReview229

Conversation

@kiaramathews
Copy link
Copy Markdown
Collaborator

@kiaramathews kiaramathews commented May 8, 2026

Description

Main changes to the chart:

  • Amber bars instead of green because the original green (#22C55E) is hard to tell apart from the indigo, so I swapped it to amber (#F59E0B).
  • Tooltip uses React state. Replaced with a simple useState boolean that shows/hides it instead.
  • Keyboard support for the tooltip by adding onFocus/onBlur so the tooltip also triggers when tabbing to it with a keyboard, not just on mouse hover.
  • Y-axis decimal fix because the Y-axis formatter was missing .toFixed(0), so values like 0.3333 could render as 33.3333333%. Now it matches the tooltip
  • Tooltip won't clip on small screens by adding maxWidth: "min(260px, 90vw)" so the tooltip shrinks on narrow viewports instead of overflowing off the edge.

Fixes #229

Type of change

  • 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 not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

  • Confirmed Y-axis percentage labels display as whole numbers (e.g. "33%" not "33.333%")
  • Verified tooltip appears and disappears when navigating to the "i" icon with Tab key (onFocus/onBlur)
  • Verified tooltip appears and disappears correctly on mouse hover
  • Checked tooltip does not clip on a narrowed browser window

Test Configuration:

  • Language Version: React
  • Webpage (if applicable): npm run dev

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Screenshot of Output

Please provide a screenshot of your output below (during all tests if applicable)

Screenshot 2026-05-08 at 3 04 29 PM

@hcaballero2
Copy link
Copy Markdown
Collaborator

hi @kiaramathews , thanks for the work on the PR merge success-rate chart it looks great! With your edits to the contributor impact chart there is a lint error that is due to weird indents from copy pasting. Would you be able to resolve this linting error?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chart Clarity Review: PRMergeSuccessRateChart

2 participants