Repository navigation
[Payment due @truph01] [NoQA] [Insights] Horizontal bar chart follow-ups: switch narrow layouts and grow height - #102321
Conversation
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
@puneetlath Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
@situchan I think you wanted to help with the review |
yes thanks for tagging me |
|
🚧 JmillsExpensify has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
|
@MelvinBot can you replace the text in the PR Author Checklist section of this PRs description with this? Details- [x] I linked the correct issue in the `### Fixed Issues` section above - [x] I wrote clear testing steps that cover the changes made in this PR - [x] I added steps for local testing in the `Tests` section - [x] I added steps for the expected offline behavior in the `Offline steps` section - [x] I added steps for Staging and/or Production testing in the `QA steps` section - [x] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct) - [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline) - [x] I tested this PR with a [High Traffic account](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#high-traffic-accounts) against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability). - [x] I included screenshots or videos for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms) - [x] I ran the tests on **all platforms** & verified they passed on: - [x] Android: Native - [x] Android: mWeb Chrome - [x] iOS: Native - [x] iOS: mWeb Safari - [x] MacOS: Chrome / Safari - [x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed) - [x] I followed proper code patterns (see [Reviewing the code](https://github.com/Expensify/App/blob/main/contributingGuides/PR_REVIEW_GUIDELINES.md#reviewing-the-code)) - [x] I verified that comments were added to code that is not self explanatory - [x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing. - [x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue) - [x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers - [x] I followed the guidelines as stated in the [Review Guidelines](https://github.com/Expensify/App/blob/main/contributingGuides/PR_REVIEW_GUIDELINES.md) - [x] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like `Avatar`, I verified the components using `Avatar` are working as expected) - [x] If a new CSS style is added I verified that: - [x] A similar style doesn't already exist - [x] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/utils/index.ts) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)`) - [x] If new assets were added or existing ones were modified, I verified that: - [x] The assets are optimized and compressed (for SVG files, run `npm run compress-svg`) - [x] The assets load correctly across all supported platforms. - [x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic. - [x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases) - [x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected. - [x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account. - [x] If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles: - [x] I verified that all the inputs inside a form are aligned with each other. - [x] I added `Design` label and/or tagged `@Expensify/design` so the design team can review the changes. - [x] If the PR adds or modifies the UI: - [x] I asked an AI agent to review the changes for accessibility issues and addressed its findings. - [x] I tested with a screen reader (VoiceOver on macOS) and verified all new/changed elements are reachable with a logical focus order. - [x] I verified all new/changed elements have meaningful accessible names and roles. - [x] I verified state changes are announced (e.g. checked/unchecked, expanded/collapsed, selected). - [x] I added [unit tests](https://github.com/Expensify/App/blob/main/tests/README.md) for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow. - [x] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps. |
|
I replaced the PR Author Checklist section with your text. The new "If the PR adds or modifies the UI" accessibility items are now included. The rest of the description is unchanged. |
|
I think that looks good, though in English at least, we should use "k" for thousands, not "K" (abbreviation for Kelvin). |
We will do it in this PR, right? @mhawryluk |
I would use compact notation all the time everywhere personally, but maybe that's just me. |
I think so, doing it now |
done, I switched the values on the chart value axes to the compact format. doesn't erase the need to skip labels when they would overlap, but it will make it happen less often @truph01 
|
melvin-bot
Bot
changed the title
|
🎯 @truph01, thanks for reviewing and testing this PR! 🎉 A payment issue will be created for your review once this PR is deployed to production. If payment is not needed (e.g., regression PR review fix etc), react with 👎 to this comment to prevent the payment issue from being created. |
situchan
left a comment
situchan
left a comment
There was a problem hiding this comment.
LGTM
Screen.Recording.2026-10-02.at.4.13.09.PM.mov
|
⏱️ Ran out of time before I could finish. This usually means the task was too complex or I got stuck exploring. Please try again with a more specific request or post in #melvinbot-ai. |
Code quality reviewThe structure is solid. Constants are now shared, the geometry is pulled into tested pure helpers, and a 1. Horizontal bars with 2–4 categories probably get clipped (please verify)
At 5 or more rows the bars fit. You can keep the computed padding as a floor, for example 2. The dispatcher does label-layout work it can't use 3. 4. Comments that will mislead the next reader
5. The new Already discussed, not repeated
|
Regression reviewI found one likely visual bug and one scope issue. The PR says "With the beta off, behavior is unchanged", but several changes reach every user of the Search charts. I checked this by reading the code at 1. Likely bug: horizontal bars with 2–4 categories get clipped (beta only)
At 5 or more categories the bars fit. To fix it, keep the computed value as a floor: 2. Changes that also reach beta-off users
Minor and checked areas
|
|
🚧 aldo-expensify has triggered a test Expensify/App build. You can view the workflow run here. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/aldo-expensify in version: 9.5.2-0 🚀
|
|
No help site update is needed. The horizontal bar layout only shows behind the Insights beta ( |
|
🚀 Deployed to production by https://github.com/Julesssss in version: 9.5.2-4 🚀
Bundle Size Analysis (Sentry): |
|
🤖 Payment issue created: #103101 |
|
I didn't create a reviewer payment issue. You authored this PR (11 of its 15 commits), so you weren't its reviewer. Your only review entry is a reply on your own PR. If you think you're owed payment for this work, please ask the BugZero team member on the issue to review it. |
11 participants
Explanation of Change
Fixed Issues
$ #101435
PROPOSAL:
Tests
Offline tests
Same as Tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectionAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari