Skip to content

fix(vcr): render email charts with light theme and solid background - #94881

Merged
luacmartins merged 6 commits into
mainfrom
rory-94619-fix-email-chart-rendering
Jun 29, 2026
Merged

fix(vcr): render email charts with light theme and solid background#94881
luacmartins merged 6 commits into
mainfrom
rory-94619-fix-email-chart-rendering

Conversation

@roryabraham

@roryabraham roryabraham commented Jun 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Explanation of Change

Email chart PNGs rendered by the victory-chart-renderer CLI were transparent with gray headers because the headless runtime used the dark fallback theme and the RN View stub ignored backgroundColor. This PR forces the light theme in the CLI, restores ThemeContext.Provider for headless label overlays, clears the offscreen canvas with the resolved card background before drawing, and strengthens golden tests with structural pixel assertions.

Fixed Issues

$ #94619
PROPOSAL:

Tests

  1. Run npm run server:vcr:test from the repo root and confirm all 16 tests pass.
  2. Run npm run server:vcr:dev -- --chart-xml "$(cat server/victory-chart-renderer/tests/fixtures/monthly-spend.xml)" --out /tmp/monthly-spend-fixed.png.
  3. Open /tmp/monthly-spend-fixed.png and confirm corners are opaque cream (#F8F4F0) and the title text is dark green (#002E22).
  4. Confirm no errors appear in the JS console.
  • Verify that no errors appear in the JS console

Offline tests

N/A — server-side CLI rendering only.

QA Steps

  1. Deploy the updated victory-chart-renderer binary to a staging www host (or wait for the next App release + www build).
  2. Trigger an email containing a <victorychart> block (e.g. monthly spend summary report comment).
  3. Open the email and confirm the inline chart image has a solid cream background and dark green header text matching the in-app chart.
  4. Confirm no errors appear in the JS console.
  • Verify that no errors appear in the JS console

PR Author Checklist

Reviewer Checklist

  • I have verified the author checklist is complete (all boxes are checked off).
  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the steps for local testing are in the Tests section
    • I verified the steps for Staging and/or Production testing are in the QA steps section
    • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • 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)
  • I checked that screenshots or videos are included for tests on all platforms
  • I included screenshots or videos for tests on all platforms
  • I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
  • I verified tests pass on all platforms & I tested again on:
    • Android: HybridApp
    • Android: mWeb Chrome
    • iOS: HybridApp
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
    • I verified that comments were added to code that is not self explanatory
    • 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.
    • 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)
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
  • 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.
  • 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)
  • 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.
  • 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.
  • 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:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
  • For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
  • 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 have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

See golden png

roryabraham and others added 3 commits June 29, 2026 09:56
@roryabraham @cursoragent
fix(vcr): render email charts with light theme and solid background
621138c 
Email PNGs were transparent with gray headers because the CLI used
the dark fallback theme and the headless View stub ignored backgroundColor.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
style: apply prettier to changed files
10bdde7 
Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
fix(vcr): address lint and typecheck issues
f3ee86a 
Add eslint exceptions for headless light theme imports, remove unused
headless prop, and adjust PNG assertion matchers for bun:test typing.

Co-authored-by: Cursor <cursoragent@cursor.com>
roryabraham and others added 3 commits June 29, 2026 10:08
@roryabraham @cursoragent
chore(eslint): allow theme imports in victory-chart-renderer
13a05bd 
Override no-restricted-imports for the headless CLI directory instead
of using inline eslint-disable comments.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
chore(eslint): allow theme imports in victory-chart-renderer
43d1a73 
Override no-restricted-imports for the headless CLI directory instead
of using inline eslint-disable comments.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
fix(vcr): format files and relax golden pixel tolerance
606139d 
Apply prettier to CLI files committed with wrong quote style, and use
Math.ceil for the 0.1% pixelmatch allowance to avoid Linux CI flakes.

Co-authored-by: Cursor <cursoragent@cursor.com>
@codecov

codecov Bot commented Jun 29, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines Coverage Δ
...toryChartRenderer/components/VictoryChartPolar.tsx 0.00% <ø> (ø)
...ChartRenderer/components/VictoryChartCartesian.tsx 0.00% <0.00%> (ø)
... and 33 files with indirect coverage changes

@roryabraham
roryabraham requested a review from luacmartins June 29, 2026 17:28
@roryabraham
roryabraham marked this pull request as ready for review June 29, 2026 17:29
@roryabraham
roryabraham requested review from a team as code owners June 29, 2026 17:29
@melvin-bot
melvin-bot Bot requested review from a team, flaviadefaria and nyomanjyotisa and removed request for a team June 29, 2026 17:29
@melvin-bot

melvin-bot Bot commented Jun 29, 2026

Copy link
Copy Markdown

@nyomanjyotisa 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]

@melvin-bot
melvin-bot Bot requested review from eVoloshchak and removed request for a team June 29, 2026 17:29
@melvin-bot

melvin-bot Bot commented Jun 29, 2026

Copy link
Copy Markdown

@eVoloshchak 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]

@roryabraham
roryabraham removed the request for review from flaviadefaria June 29, 2026 17:32
@roryabraham

roryabraham commented Jun 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Not sure C+ review will be all that helpful on this one since the golden PNGs provide visual confirmation of the fix

@luacmartins
luacmartins merged commit cb42d9e into main Jun 29, 2026
40 checks passed
@luacmartins
luacmartins deleted the rory-94619-fix-email-chart-rendering branch June 29, 2026 17:46
@OSBotify

OSBotify commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify pushed a commit that referenced this pull request Jun 29, 2026
@luacmartins @OSBotify
Merge pull request #94881 from Expensify/rory-94619-fix-email-chart-r…
db7d5b2 
…endering

fix(vcr): render email charts with light theme and solid background

(cherry picked from commit cb42d9e)

(cherry-picked to staging by roryabraham)
@OSBotify OSBotify added the CP Staging marks PRs that have been CP'd to staging label Jun 29, 2026
@OSBotify OSBotify mentioned this pull request Jun 29, 2026
Closed
36 tasks done
@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🚧 luacmartins has triggered a test Expensify/App build. You can view the workflow run here.

@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #94881.

Android 🤖 iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-cb42d9e5b24-8b5213f-cf6ef82a9953ea51ed1d6d4e234f76c153f53fc8/index.html https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-cb42d9e-8b5213f-201ae6726a83e6a175740d7451beb673f003976a/index.html
Android iOS
Web 🕸️
https://94881.pr-testing.expensify.com
Web

👀 View the workflow run that generated this build 👀

@OSBotify

OSBotify commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.22-3 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@os-botify os-botify Bot mentioned this pull request Jun 29, 2026
Merged
41 tasks
roryabraham pushed a commit that referenced this pull request Jun 29, 2026
@luacmartins @roryabraham
Merge pull request #94881 from Expensify/rory-94619-fix-email-chart-r…
3f99d8b 
…endering

fix(vcr): render email charts with light theme and solid background

(cherry picked from commit cb42d9e)

(cherry-picked to production by roryabraham)
roryabraham added a commit that referenced this pull request Jun 29, 2026
@roryabraham
Merge pull request #94887 from Expensify/cherry-pick-production-94881…
dea1680 
…-28393716468-1

🍒 Cherry pick PR #94881 to production 🍒
@melvin-bot melvin-bot Bot mentioned this pull request Jun 29, 2026
Closed
@OSBotify

OSBotify commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/mountiny in version: 9.4.23-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

Bundle Size Analysis (Sentry):

@OSBotify

OSBotify commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.24-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 failure ❌

@mvtglobally

mvtglobally commented Jun 29, 2026

Copy link
Copy Markdown

@roryabraham @luacmartins This seems like internal QA. Do we need to run anything specific on our end?

@OSBotify

OSBotify commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/cristipaval in version: 9.4.24-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 failure ❌

Bundle Size Analysis (Sentry):

@OSBotify

OSBotify commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.25-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@OSBotify

OSBotify commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.24-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 failure ❌

@OSBotify

OSBotify commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/cristipaval in version: 9.4.25-2 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

Bundle Size Analysis (Sentry):

@quinthar quinthar added the #ai label Aug 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@luacmartins luacmartins luacmartins approved these changes
@nyomanjyotisa nyomanjyotisa Awaiting requested review from nyomanjyotisa
@eVoloshchak eVoloshchak Awaiting requested review from eVoloshchak

Assignees

@roryabraham roryabraham

Labels

CP Production CP Staging marks PRs that have been CP'd to staging

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@roryabraham @OSBotify @mvtglobally @luacmartins @quinthar