Fix CJK chart axis labels by using numeric-only formats#84962
Fix CJK chart axis labels by using numeric-only formats#84962
Conversation
The Skia canvas font (ExpensifyNeue-Regular) lacks CJK glyphs, causing
month/week/quarter labels to render incorrectly when the app language is
set to Chinese or Japanese. This changes the chart getLabel functions to
produce Latin-character-only labels (MM/YYYY for months, MM/DD/YYYY for
weeks, Q{n} YYYY for quarters) while keeping the locale-formatted strings
for the list view which uses RN Text with proper font fallback.
Fixed Issues: #81952
Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>
|
I created this PR from an upstream branch since I couldn't find a fork to push to. To take ownership of this branch and be able to push updates, run: Then you can close this PR and open a new one from your fork. |
The hasVisibleReportFieldViolations function references allReportsViolations but no Onyx.connect was set up for it, causing a typecheck error. Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>
|
Fixed the failing typecheck. The error was: Root cause: The Fix: Added the missing Onyx connection for |
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
|
Fixed the failing checks. The previous commit added the missing All checks are now passing (typecheck, ESLint, all 8 test jobs, builds, storybook, etc.). Only perf-tests is still running. |
Explanation of Change
The Skia canvas font (
ExpensifyNeue-Regular) used in chart rendering lacks CJK (Chinese/Japanese/Korean) character glyphs. When the app language is set to Chinese or Japanese,date-fnsproduces localized month names containing CJK characters (e.g., "一月 2025" in Chinese, "1月 2025" in Japanese). Since Skia's text rendering uses only the loaded font with no fallback chain (unlike React Native's<Text>which uses platform font fallback), these characters render as broken/blank glyphs on chart axis labels.This PR changes the chart
getLabelfunctions for month, week, and quarter group-by types to produce Latin-character-only labels:MM/YYYY(e.g.,01/2026) instead of locale-formatted month nameMM/DD/YYYY(e.g.,01/06/2026) instead of locale-formatted date rangeQ{n} YYYY(e.g.,Q1 2026) instead of format that includes locale month namesThe locale-formatted strings (
formattedMonth,formattedWeek,formattedQuarter) remain unchanged and continue to be used by the list view, which renders via React Native<Text>with proper platform font fallback.Fixed Issues
$ #81952
PROPOSAL: #81952 (comment)
Tests
MM/YYYYformat (e.g.,01/2026)MM/DD/YYYYformatQ1 2026formatOffline tests
N/A - This change only affects label formatting in chart views, no network requests involved.
QA Steps
MM/YYYYnumeric formatMM/DD/YYYYformat) and quarter (expectQ1 YYYYformat)PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, 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.ScrollViewcomponent to make it scrollable when more elements are added to the page.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