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

config/eslint/eslint.config.mjs

@@ -203,6 +203,14 @@ const restrictedPaidGroupPolicyImportPatterns = [
     },
 ];
 
+// Headless email chart CLI cannot use useTheme; charts always render with the light theme.
+const victoryChartRendererRestrictedImportPaths = restrictedImportPaths.filter((restriction) => restriction.name !== '@styles/theme');
+const victoryChartRendererRestrictedImportPatterns = [
+    ...restrictedImportPatterns.filter((restriction) => restriction.group[0] !== '@styles/theme/themes/**'),
+    ...restrictedReportNameImportPatterns,
+    ...restrictedPaidGroupPolicyImportPatterns,
+];
+
 const config = defineConfig([
     expensifyConfig,
     typescriptEslint.configs.recommendedTypeChecked,
@@ -764,6 +772,16 @@ const config = defineConfig([
                 project: path.resolve(projectRoot, 'server/victory-chart-renderer/tsconfig.json'),
             },
         },
+        rules: {
+            // Headless CLI cannot use useTheme; email charts always render with the light theme.
+            'no-restricted-imports': [
+                'error',
+                {
+                    paths: victoryChartRendererRestrictedImportPaths,
+                    patterns: victoryChartRendererRestrictedImportPatterns,
+                },
+            ],
+        },
     },
 
     globalIgnores([

server/victory-chart-renderer/src/components/CliVictoryChart.tsx

@@ -8,6 +8,8 @@ import VictoryChartContent from '@components/HTMLEngineProvider/HTMLRenderers/Vi
 import {VictoryChartProvider} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext';
 import type {ChartType, ProcessNodeResult} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/types';
 import VICTORY_HTML_ELEMENT_MODELS from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/victoryHtmlElementModels';
+import themes from '@styles/theme';
+import ThemeContext from '@styles/theme/context/ThemeContext';
 
 // react-native-render-html/lib/commonjs/TRenderEngineProvider.js references
 // `defaultSystemFonts` in a default parameter, but only imports `_defaultSystemFonts`.
@@ -26,25 +28,33 @@ type CliVictoryChartProps = {
 function CliVictoryChart({tnode, fonts, processedResult, type, width, height}: CliVictoryChartProps) {
     const explicitSize = {width, height};
     return (
-        <TRenderEngineProvider
-            customHTMLElementModels={VICTORY_HTML_ELEMENT_MODELS}
-            systemFonts={RENDER_HTML_SYSTEM_FONTS}
-        >
-            <ChartFontsContext.Provider value={fonts}>
-                <VictoryChartProvider
-                    tnode={tnode}
-                    processedResult={processedResult}
-                    type={type}
-                >
-                    <VictoryChartContainerFixed layout={{kind: 'fixed', width: explicitSize.width, height: explicitSize.height}}>
-                        <VictoryChartContent
-                            explicitSize={explicitSize}
-                            headless
-                        />
-                    </VictoryChartContainerFixed>
-                </VictoryChartProvider>
-            </ChartFontsContext.Provider>
-        </TRenderEngineProvider>
+        <ThemeContext.Provider value={themes.light}>
+            <TRenderEngineProvider
+                customHTMLElementModels={VICTORY_HTML_ELEMENT_MODELS}
+                systemFonts={RENDER_HTML_SYSTEM_FONTS}
+            >
+                <ChartFontsContext.Provider value={fonts}>
+                    <VictoryChartProvider
+                        tnode={tnode}
+                        processedResult={processedResult}
+                        type={type}
+                    >
+                        <VictoryChartContainerFixed
+                            layout={{
+                                kind: 'fixed',
+                                width: explicitSize.width,
+                                height: explicitSize.height,
+                            }}
+                        >
+                            <VictoryChartContent
+                                explicitSize={explicitSize}
+                                headless
+                            />
+                        </VictoryChartContainerFixed>
+                    </VictoryChartProvider>
+                </ChartFontsContext.Provider>
+            </TRenderEngineProvider>
+        </ThemeContext.Provider>
     );
 }
 

server/victory-chart-renderer/src/renderChartToPng.tsx

@@ -1,9 +1,11 @@
+import {Skia} from '@shopify/react-native-skia';
 import {drawOffscreen, makeOffscreenSurface} from '@shopify/react-native-skia/lib/module/headless';
 import type {TNode} from 'react-native-render-html';
 import type ChartFontsValue from '@components/Charts/types/chartFontsTypes';
 import processVictoryChartTree from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/parsers/processVictoryChartTree';
 import resolveVictoryChartType from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/resolveVictoryChartType';
 import CliVictoryChart from './components/CliVictoryChart';
+import resolveHeadlessChartBackgroundColor from './resolveHeadlessChartBackgroundColor';
 import type CanvasSize from './types/CanvasSize';
 
 async function renderChartToPng(tnode: TNode, fonts: ChartFontsValue, {width, height}: CanvasSize, outPath: string): Promise<void> {
@@ -26,6 +28,7 @@ async function renderChartToPng(tnode: TNode, fonts: ChartFontsValue, {width, he
     );
 
     using surface = makeOffscreenSurface(width, height);
+    surface.getCanvas().clear(Skia.Color(resolveHeadlessChartBackgroundColor(tnode)));
     using image = await drawOffscreen(surface, chartElement);
     const pngBytes = image.encodeToBytes();
 

server/victory-chart-renderer/src/resolveHeadlessChartBackgroundColor.ts

@@ -0,0 +1,17 @@
+import type {TNode} from 'react-native-render-html';
+import parseStyles from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/parseStyles';
+import {resolveChartContainerBgColor} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/resolveChartThemeColor';
+import themes from '@styles/theme';
+
+function resolveHeadlessChartBackgroundColor(tnode: TNode): string {
+    const {parentNodeStyles} = parseStyles(tnode);
+    const resolvedBackgroundColor = resolveChartContainerBgColor(parentNodeStyles.backgroundColor, themes.light);
+
+    if (typeof resolvedBackgroundColor === 'string') {
+        return resolvedBackgroundColor;
+    }
+
+    return themes.light.cardBG;
+}
+
+export default resolveHeadlessChartBackgroundColor;

server/victory-chart-renderer/tests/render.test.ts

@@ -60,7 +60,7 @@ describe('victory-chart-renderer CLI', () => {
                     copyFileSync(actualPath, goldenPath);
                 }
 
-                comparePng(actualPath, goldenPath, FIXTURE_EXPECTED_SIZES.get(fixtureName));
+                comparePng(actualPath, goldenPath, FIXTURE_EXPECTED_SIZES.get(fixtureName), fixtureName);
             });
         }
     });

server/victory-chart-renderer/tests/testUtils.ts

@@ -23,6 +23,70 @@ const FIXTURE_EXPECTED_SIZES = new Map<string, {width: number; height: number}>(
     ['top-employees-by-spend-truncated-labels', {width: 680, height: 464}],
 ]);
 
+type PngPixel = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+
+function getPixel(img: PNG, x: number, y: number): PngPixel {
+    const index = (img.width * y + x) * 4;
+    return {
+        r: img.data[index],
+        g: img.data[index + 1],
+        b: img.data[index + 2],
+        a: img.data[index + 3],
+    };
+}
+
+function assertOpaqueCardBackground(img: PNG) {
+    const corners: Array<[number, number]> = [
+        [0, 0],
+        [img.width - 1, 0],
+        [0, img.height - 1],
+        [img.width - 1, img.height - 1],
+    ];
+
+    for (const [x, y] of corners) {
+        const pixel = getPixel(img, x, y);
+        expect(pixel.a).toBe(255);
+        expect(pixel.r > 230).toBe(true);
+        expect(pixel.g > 230).toBe(true);
+        expect(pixel.b > 220).toBe(true);
+    }
+}
+
+function assertTitleBandHasDarkPixels(img: PNG) {
+    let hasDarkTitlePixel = false;
+
+    for (let y = 35; y <= 50; y++) {
+        for (let x = 32; x < 250; x++) {
+            const pixel = getPixel(img, x, y);
+            if (pixel.a > 200 && pixel.r + pixel.g + pixel.b < 150) {
+                hasDarkTitlePixel = true;
+                break;
+            }
+        }
+
+        if (hasDarkTitlePixel) {
+            break;
+        }
+    }
+
+    expect(hasDarkTitlePixel).toBe(true);
+}
+
+function assertEmailChartPngQuality(img: PNG, fixtureName: string) {
+    assertOpaqueCardBackground(img);
+
+    if (fixtureName.includes('top-categories')) {
+        return;
+    }
+
+    assertTitleBandHasDarkPixels(img);
+}
+
 function getLocalCompileTarget(): string {
     const hostPlatform = platform();
     const hostArch = arch();
@@ -38,7 +102,7 @@ function getLocalCompileTarget(): string {
     throw new Error(`Standalone binary tests are not supported on ${hostPlatform} (${hostArch})`);
 }
 
-function comparePng(actualPath: string, goldenPath: string, expectedSize?: {width: number; height: number}) {
+function comparePng(actualPath: string, goldenPath: string, expectedSize?: {width: number; height: number}, fixtureName?: string) {
     const actual = PNG.sync.read(readFileSync(actualPath));
     const golden = PNG.sync.read(readFileSync(goldenPath));
 
@@ -50,12 +114,16 @@ function comparePng(actualPath: string, goldenPath: string, expectedSize?: {widt
     expect(actual.width).toBe(golden.width);
     expect(actual.height).toBe(golden.height);
 
+    if (fixtureName) {
+        assertEmailChartPngQuality(actual, fixtureName);
+    }
+
     const diff = new PNG({width: actual.width, height: actual.height});
     const mismatchedPixels = pixelmatch(actual.data, golden.data, diff.data, actual.width, actual.height, {
         threshold: 0.1,
     });
 
-    const maxAllowedMismatch = Math.floor(actual.width * actual.height * 0.001);
+    const maxAllowedMismatch = Math.ceil(actual.width * actual.height * 0.001);
     expect(mismatchedPixels).toBeLessThanOrEqual(maxAllowedMismatch);
 }
 

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartCartesian.tsx

@@ -74,7 +74,7 @@ function VictoryChartCartesian({explicitSize, headless}: VictoryChartCartesianPr
                 );
 
                 if (headless) {
-                    return overlayContent;
+                    return <ThemeContext.Provider value={theme}>{overlayContent}</ThemeContext.Provider>;
                 }
 
                 // React context does not propagate across the Skia renderOutside boundary.

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx

@@ -61,7 +61,7 @@ function VictoryChartPolar({explicitSize, headless}: VictoryChartPolarProps) {
             {...getChartLayoutModeProps(explicitSize, headless)}
         >
             {headless ? (
-                chartContent
+                <ThemeContext.Provider value={theme}>{chartContent}</ThemeContext.Provider>
             ) : (
                 <ThemeContext.Provider value={theme}>
                     <ChartFontsLoaderProvider>{chartContent}</ChartFontsLoaderProvider>