Skip to content

fix(charts): require recharts >= 3.7.0 so chart axes stop blinking on re-render - #1261

Merged
bert-e merged 1 commit into
development/1.0from
bugfix/recharts-axis-blink-on-rerender
Oct 19, 2026
Merged

bert-e merged 1 commit into
development/1.0from
bugfix/recharts-axis-blink-on-rerender

Conversation

@JBWatenbergScality

Copy link
Copy Markdown
Contributor

TL;DR

Raise the recharts floor from ^3.0.2 to ^3.7.0. On recharts 3.0.x/3.1.x every chart axis renders as null for one frame each time the chart re-renders. On ARTESCA's overview, that makes the Platform Health x-axis blink about once a second while the UI downloads upgrade artifacts.

core-ui's own lockfile is already on 3.7.0, so nothing changes here. The new floor makes consumers that locked 3.1.2 (metalk8s ui, which renders the federated Platform Health bar) pick up the fixed version on their next core-ui bump.

Why

recharts 3.1.2 SetXAxisSettings:

var settings = useMemo(() => rest, [props]);          // new object every render
var settingsAreSynchronized = settings === useAppSelector(selectXAxisSettings);
useEffect(() => { dispatch(addXAxis(settings)); ... }, [settings]);
if (settingsAreSynchronized) return props.children;
return null;                                           // ← axis gone until the effect runs

3.2.0 dropped the return null, and 3.3.0+ registers axes in a useLayoutEffect (before paint). I pinned the floor to 3.7.0, not latest: 3.8.0+ ships stricter Tooltip types that break tsc in LineTimeSerieChartTooltip, Barchart and GlobalHealthBar (15 errors), and 3.7.0 is the version core-ui is already built and tested with.

Review focus

  1. The floor value: anything that needs < 3.7.0?

Testing

  • tsc --noEmit: clean
  • jest: 52 suites / 623 tests pass
  • The blink was confirmed frame by frame in a screen recording from a 4.3 cluster during an artifact download. The axis drops out for single frames while the bar stays.

… re-render

recharts 3.0.x/3.1.x render each XAxis/YAxis as null for one frame whenever
the chart re-renders (SetXAxisSettings memoizes on the props object and
returns null until a useEffect re-syncs the store). Consumers that locked
recharts at 3.1.2 (metalk8s ui) show the GlobalHealthBar x-axis blinking
whenever the host re-renders often, e.g. while ARTESCA downloads upgrade
artifacts. 3.3.0+ registers axes in a layout effect and no longer renders
null; 3.7.0 is what core-ui already locks and tests against.
@bert-e

bert-e commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

Hello jbwatenbergscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options
name description privileged authored
/after_pull_request Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval Bypass the pull request author's approval ⭐
/bypass_build_status Bypass the build and test status ⭐
/bypass_commit_size Bypass the check on the size of the changeset TBA ⭐
/bypass_incompatible_branch Bypass the check on the source branch prefix ⭐
/bypass_jira_check Bypass the Jira issue check ⭐
/bypass_peer_approval Bypass the pull request peers' approval ⭐
/bypass_leader_approval Bypass the pull request leaders' approval ⭐
/bypass_source_branch_lineage Bypass the cross-branch contamination check ⭐
/approve Instruct Bert-E that the author has approved the pull request. ✍️
/create_pull_requests Allow the creation of integration pull requests.
/create_integration_branches Allow the creation of integration branches.
/no_octopus Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity Change review acceptance criteria from one reviewer at least to all reviewers
/wait Instruct Bert-E not to run until further notice.
Available commands
name description privileged
/help Print Bert-E's manual in the pull request.
/status Print Bert-E's current status in the pull request.
/clear Remove all comments from Bert-E from the history TBA
/retry Re-start a fresh build TBA
/build Re-start a fresh build TBA
/force_reset Delete integration branches & pull requests, and restart merge process from the beginning.
/reset Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

@bert-e

bert-e commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

@eve-scality

Copy link
Copy Markdown
Contributor

ℹ️ No review performed

No test review was performed: no code under test could be determined: the pull request changes no code and no tests.

@bert-e

bert-e commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

@JBWatenbergScality

Copy link
Copy Markdown
Contributor Author

/approve

@bert-e

bert-e commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

I have successfully merged the changeset of this pull request
into targetted development branches:

  • ✔️ development/1.0

Please check the status of the associated issue None.

Goodbye jbwatenbergscality.

The following options are set: approve

@bert-e
bert-e merged commit b3baf98 into development/1.0 Oct 19, 2026
9 checks passed
@JBWatenbergScality
JBWatenbergScality deleted the bugfix/recharts-axis-blink-on-rerender branch October 19, 2026 14:31

This branch was successfully deployed

1 active deployment
npmjs — b3baf980 Deployed Oct 19, 2026 by JBWatenbergScality via publish-npm #206
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.

4 participants