Refactor balance history graph to use dynamic width and daily granularity#14106
Open
dylanjeffers wants to merge 4 commits intomainfrom
Open
Refactor balance history graph to use dynamic width and daily granularity#14106dylanjeffers wants to merge 4 commits intomainfrom
dylanjeffers wants to merge 4 commits intomainfrom
Conversation
- Change all useUserBalanceHistory calls to use daily granularity instead of hourly for a cleaner, less noisy chart - Update tooltip date format to show "Mon, Apr 7" instead of "Monday 3pm" since hourly timestamps no longer apply - Make mobile chart responsive by measuring container width via onLayout instead of using a hardcoded 350px default https://claude.ai/code/session_01EP1m3UXR2bibGyXKUUUZqY
|
Contributor
🌐 Web preview readyPreview URL: https://audius-web-preview-pr-14106.audius.workers.dev Unique preview for this PR (deployed from this branch). |
Daily-granularity queries were returning data far outside the expected 7-day range (causing the chart and "7D Change" calculation to show wildly incorrect values — e.g. a 50% drop when the real 7-day change was ~0%). Explicitly default startTime to midnight UTC 7 days ago instead of relying on the API's own default. The default is day-rounded so the query key stays stable within a day, allowing react-query to share the cache between AccountBalance and UserBalanceHistoryGraph. https://claude.ai/code/session_01EP1m3UXR2bibGyXKUUUZqY
The backend's granularity=daily option currently sums the 24 hourly snapshots for each day (returning ~24x the actual balance) instead of returning the closing balance. Rather than block on the backend fix, fetch hourly data and bucket it to one end-of-day point per UTC day in the hook's queryFn. This gives the graph the desired "daily, week-long" shape with correct balance values. When the API is fixed, we can drop the downsampling and switch back to passing granularity='daily'. https://claude.ai/code/session_01EP1m3UXR2bibGyXKUUUZqY
The backend now returns correct closing balances for granularity='daily', so we can pass the parameter directly and stop fetching hourly data just to bucket it ourselves. Restores useUserBalanceHistory to its original shape and re-points the four call sites at daily granularity. The tooltip format and responsive mobile chart width from the earlier commits stay in place. https://claude.ai/code/session_01EP1m3UXR2bibGyXKUUUZqY
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
This PR refactors the UserBalanceHistoryGraph component to dynamically measure container width instead of accepting a fixed width prop, and updates balance history queries to use daily granularity across both mobile and web platforms.
Key Changes
widthprop with runtime layout measurement usingonLayoutcallback on mobile, allowing the graph to responsively adapt to its containercontainerWidthstate andhandleLayoutcallback to capture actual rendered dimensions before chart renderinggranularity: 'daily'parameter to alluseUserBalanceHistoryhook calls in both mobile and web implementationsformatTooltipDatefunction to display date only (weekday short, month short, day) instead of including time informationwidthprop fromUserBalanceHistoryGraphandAccountBalancecomponents, simplifying the component APIImplementation Details
LayoutChangeEventto measure container width dynamicallycontainerWidth > 0, preventing layout thrashinghttps://claude.ai/code/session_01EP1m3UXR2bibGyXKUUUZqY