fix: downsample YieldBreakdownChart and memoize chart components for long ranges - #1096
Closed
Junirezz wants to merge 1 commit into
Closed
fix: downsample YieldBreakdownChart and memoize chart components for long ranges#1096Junirezz wants to merge 1 commit into
Junirezz wants to merge 1 commit into
Conversation
…long ranges APYTrendChart and VaultPerformanceChart already downsample their series via sampleChartSeries() before handing data to Recharts, but YieldBreakdownChart never got the same treatment, so an "ALL" range on a long-lived vault would render every raw point instead of the shared 120-point cap. Bring it in line with the other two charts, disabling animation on downsampled series the same way, and keep the displayed period total computed from the full (undownsampled) data so it stays accurate. Also wrap all three chart components in React.memo, since none of their props change identity across unrelated parent re-renders (APYTrendChart's default data is a stable module constant, VaultPerformanceChart takes no props, and YieldBreakdownChart's only prop is a primitive number) — this avoids repeat Recharts SVG re-renders on every unrelated poll/tick elsewhere in the tree, which matters most for the largest, longest-range series. Related to #1041, which duplicates #982 (already resolved by #1027 for the other two charts).
Contributor
|
Closing — this was opened under the wrong GitHub account (repo owner's, not the assigned contributor's) due to a tooling mistake on my end. Re-opening correctly from a fork under the right account. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #1041.
Heads up for reviewers: #1041's title is an exact duplicate of #982, which was already resolved by #1027 — that PR added
sampleChartSeries()downsampling toAPYTrendChartandVaultPerformanceChart. This PR does not re-do that work. It closes the one real gap left over and adds a related, narrow perf win:YieldBreakdownChartnever got the downsampling treatment the other two charts got. It's still capped at 90 mock days today so this isn't user-visible yet, but it was the one chart that would silently render every raw point once its data source grows past the shared 120-point render cap (e.g. once it's wired to a real multi-year history like the other charts). Brought it in line:sampleChartSeries()before render, animation disabled on downsampled series (matching the other two), and the displayed period total is computed from the full (undownsampled) data so it stays accurate regardless of render-side sampling.React.memo. None of their props change identity across unrelated parent re-renders (APYTrendChart's default data is a stable module constant,VaultPerformanceCharttakes no props at all,YieldBreakdownChart's only prop is a primitivenumber), so this is a safe, low-risk change that avoids repeat Recharts SVG re-renders whenever something unrelated elsewhere in the tree re-renders (TVL ticker, balance polling, etc.) — this matters most for the largest, longest-range series.Test plan
npx vitest runon the touched files (YieldBreakdownChart,APYTrendChart,chartSeries) — 16/16 passedYieldBreakdownChart.test.tsx(none existed before)npx tsc -b— no new type errors (one pre-existing, unrelatedToastCenter.tsxerror present onmainbefore this change too)/portfolio🤖 Generated with Claude Code