92969: Add "expand" button overlay to charts for full-screen mode

src/CONST/index.ts

@@ -8259,6 +8259,7 @@ const CONST = {
         HTML_RENDERER: {
             IMAGE: 'HTMLRenderer-Image',
             PRE: 'HTMLRenderer-Pre',
+            VICTORY_CHART_EXPAND_BUTTON: 'HTMLRenderer-VictoryChartExpandButton',
         },
         RECEIPT: {
             IMAGE: 'Receipt-Image',

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

@@ -10,6 +10,7 @@ import type {VictoryChartRendererProps} from './types';
 
 import VictoryChartContainer from './components/VictoryChartContainer';
 import VictoryChartContent from './components/VictoryChartContent';
+import VictoryChartExpandable from './components/VictoryChartExpandable';
 import {VictoryChartProvider} from './context/VictoryChartContext';
 import processVictoryChartTree from './parsers/processVictoryChartTree';
 import resolveVictoryChartType from './utils/resolveVictoryChartType';
@@ -39,9 +40,11 @@ function BaseVictoryChartRenderer({tnode}: VictoryChartRendererProps) {
                 processedResult={processedResult}
                 type={type}
             >
-                <VictoryChartContainer>
-                    <VictoryChartContent />
-                </VictoryChartContainer>
+                <VictoryChartExpandable>
+                    <VictoryChartContainer>
+                        <VictoryChartContent />
+                    </VictoryChartContainer>
+                </VictoryChartExpandable>
             </VictoryChartProvider>
         </ChartFontsProvider>
     );

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContainer/VictoryChartContainerFixed.tsx

@@ -1,4 +1,4 @@
-import {CHART_TYPE} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
+import {CHART_TYPE, POLAR_CONTAINER_HEIGHT_RATIO} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
 import {useVictoryChartContext} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext';
 import {resolveChartContainerBgColor} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/resolveChartThemeColor';
 
@@ -11,14 +11,6 @@ import {View} from 'react-native';
 
 import type {VictoryChartContainerLayout, VictoryChartContainerThemeStyles} from './types';
 
-/**
- * Polar charts are circular but their design canvas is often taller than the
- * visible content, leaving dead space at the bottom. We clip the container
- * (not the content) so the chart renders at full fidelity while the unused
- * bottom portion is hidden.
- */
-const POLAR_CONTAINER_HEIGHT_RATIO = 0.9;
-
 type VictoryChartContainerFixedProps = {
     children: React.ReactNode;
     layout: VictoryChartContainerLayout;

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

@@ -0,0 +1,51 @@
+import Button from '@components/ButtonComposed';
+import Tooltip from '@components/Tooltip';
+
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import CONST from '@src/CONST';
+
+import React from 'react';
+import {View} from 'react-native';
+
+type VictoryChartExpandButtonProps = {
+    /** Called when the user presses the expand button */
+    onPress: () => void;
+
+    /** Whether the button should be visible. It stays mounted (hidden via opacity) so hover in/out doesn't reflow the chart. */
+    shouldShow: boolean;
+};
+
+function VictoryChartExpandButton({onPress, shouldShow}: VictoryChartExpandButtonProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const icons = useMemoizedLazyExpensifyIcons(['Expand']);
+
+    return (
+        <Tooltip text={translate('common.expand')}>
+            {/* Overlays the chart's top-right corner without affecting the chart's layout. When visible, the
+                button intentionally captures pointer events in that corner, suppressing any underlying chart
+                gesture layer — acceptable since charts render nothing interactive there. While hidden it
+                ignores pointer events entirely so an invisible button can never swallow presses. */}
+            <View
+                style={[styles.pAbsolute, styles.t0, styles.r0, styles.m3, !shouldShow && styles.opacity0]}
+                pointerEvents={shouldShow ? 'auto' : 'none'}
+            >
+                <Button
+                    size={CONST.BUTTON_SIZE.SMALL}
+                    onPress={onPress}
+                    accessibilityLabel={translate('common.expand')}
+                    sentryLabel={CONST.SENTRY_LABEL.HTML_RENDERER.VICTORY_CHART_EXPAND_BUTTON}
+                >
+                    <Button.Icon src={icons.Expand} />
+                </Button>
+            </View>
+        </Tooltip>
+    );
+}
+
+VictoryChartExpandButton.displayName = 'VictoryChartExpandButton';
+
+export default VictoryChartExpandButton;

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

@@ -0,0 +1,131 @@
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {CHART_TYPE, POLAR_CONTAINER_HEIGHT_RATIO} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
+import {useVictoryChartContext} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext';
+import {resolveChartContainerBgColor} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/resolveChartThemeColor';
+import Modal from '@components/Modal';
+
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import CONST from '@src/CONST';
+
+import type {LayoutChangeEvent} from 'react-native';
+
+import React, {useState} from 'react';
+import {View} from 'react-native';
+
+import VictoryChartContent from './VictoryChartContent';
+
+type VictoryChartExpandModalProps = {
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** Called when the modal should close */
+    onClose: () => void;
+
+    /** Called once the modal's closing animation has finished */
+    onModalHide?: () => void;
+};
+
+/**
+ * Centered full-screen modal that re-renders the current chart scaled up to the viewport.
+ * Must be rendered inside a VictoryChartProvider so VictoryChartContent can read the parsed chart context.
+ *
+ * The chart is rendered at its design size and uniformly transform-scaled to fit the modal —
+ * the same technique the inline scaled container uses to shrink charts. This keeps the canvas
+ * and the absolutely-positioned label/legend overlays (whose coordinates are design-based)
+ * perfectly aligned, so the expanded chart looks identical to the inline one, only larger.
+ * Rendering fluidly instead would resize only the canvas and leave labels at design coordinates,
+ * misplacing them (and potentially overlaying the header, blocking the back button).
+ */
+function VictoryChartExpandModal({isVisible, onClose, onModalHide}: VictoryChartExpandModalProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+    const {chartContentStyles, chartContainerStyles, type} = useVictoryChartContext();
+    const [availableSize, setAvailableSize] = useState({width: 0, height: 0});
+
+    const onContainerLayout = (event: LayoutChangeEvent) => {
+        const {width, height} = event.nativeEvent.layout;
+        // Avoid re-render churn when the layout callback fires without an actual size change.
+        setAvailableSize((prev) => (prev.width === width && prev.height === height ? prev : {width, height}));
+    };
+
+    const designWidth = typeof chartContentStyles.width === 'number' ? chartContentStyles.width : undefined;
+    const designHeight = typeof chartContentStyles.height === 'number' ? chartContentStyles.height : undefined;
+    const hasDesignDimensions = !!designWidth && !!designHeight;
+    const isMeasured = availableSize.width > 0 && availableSize.height > 0;
+
+    // Match the inline container: polar charts are clipped to hide the dead space at the
+    // bottom of their design canvas, so the expanded chart centers the same way inline does.
+    const isPolar = type === CHART_TYPE.POLAR;
+    const effectiveDesignHeight = designHeight !== undefined && isPolar ? designHeight * POLAR_CONTAINER_HEIGHT_RATIO : designHeight;
+
+    // Uniform scale that fits the chart's (clipped) design box inside the available modal area (may be > 1).
+    const scale = hasDesignDimensions && effectiveDesignHeight !== undefined && isMeasured ? Math.min(availableSize.width / designWidth, availableSize.height / effectiveDesignHeight) : 1;
+
+    // Visual styles parsed from the chart HTML — resolved and applied the same way
+    // VictoryChartContainerFixed does inline, so the expanded chart keeps the same
+    // (theme-aware) background and rounding.
+    const backgroundColor = resolveChartContainerBgColor(chartContainerStyles.backgroundColor, theme);
+    const borderRadius = chartContainerStyles.borderRadius;
+
+    return (
+        <Modal
+            isVisible={isVisible}
+            type={CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
+            onClose={onClose}
+            onModalHide={onModalHide}
+            enableEdgeToEdgeBottomSafeAreaPadding
+        >
+            <HeaderWithBackButton
+                title={translate('common.details')}
+                onBackButtonPress={onClose}
+                shouldShowBackButton
+            />
+            <View
+                style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.ph5]}
+                onLayout={onContainerLayout}
+            >
+                {isMeasured &&
+                    (hasDesignDimensions && effectiveDesignHeight !== undefined ? (
+                        // Clip the container (not the content) so polar dead space is hidden while the chart renders at full fidelity.
+                        <View
+                            style={[
+                                StyleUtils.getWidthAndHeightStyle(designWidth * scale, effectiveDesignHeight * scale),
+                                typeof borderRadius === 'number' && isPolar && StyleUtils.getBorderRadiusStyle(borderRadius),
+                                styles.overflowHidden,
+                            ]}
+                        >
+                            {/* Fixed design-size box so the fluid chart renders at design size, then scaled uniformly. */}
+                            <View
+                                style={[
+                                    chartContentStyles,
+                                    StyleUtils.getWidthAndHeightStyle(designWidth, designHeight),
+                                    backgroundColor !== undefined && StyleUtils.getBackgroundColorStyle(backgroundColor),
+                                    typeof borderRadius === 'number' && StyleUtils.getBorderRadiusStyle(borderRadius),
+                                    styles.overflowHidden,
+                                    styles.chartExpandedContent,
+                                    StyleUtils.getTransformScaleStyle(scale),
+                                ]}
+                            >
+                                <VictoryChartContent />
+                            </View>
+                        </View>
+                    ) : (
+                        // Charts without design dimensions have no design-based label coordinates, so fluid rendering is safe.
+                        <View style={[styles.w100, styles.flex1]}>
+                            <VictoryChartContent />
+                        </View>
+                    ))}
+            </View>
+        </Modal>
+    );
+}
+
+VictoryChartExpandModal.displayName = 'VictoryChartExpandModal';
+
+export default VictoryChartExpandModal;

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

@@ -0,0 +1,67 @@
+import useHover from '@hooks/useHover';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import type {ReactNode} from 'react';
+
+import React, {useState} from 'react';
+import {View} from 'react-native';
+
+import VictoryChartExpandButton from './VictoryChartExpandButton';
+import VictoryChartExpandModal from './VictoryChartExpandModal';
+
+type VictoryChartExpandableProps = {
+    /** The inline chart to overlay the expand affordance on */
+    children: ReactNode;
+};
+
+/**
+ * Wraps an inline chart with the expand affordance: a hover-revealed button overlaid on the
+ * chart's top-right corner and a full-screen modal that renders the chart enlarged.
+ *
+ * Hover/expand state lives here — below the chart renderer — so the chart subtree (passed as
+ * `children` with a stable element identity) does not re-render on mouse enter/leave.
+ * The modal is only mounted after the first expand (and unmounted after its closing animation)
+ * because mounting a Modal per chart on the chat path would be needlessly expensive.
+ */
+function VictoryChartExpandable({children}: VictoryChartExpandableProps) {
+    const styles = useThemeStyles();
+    const {hovered, deviceHasHoverSupport, bind: hoverBind} = useHover();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [shouldRenderModal, setShouldRenderModal] = useState(false);
+
+    const openModal = () => {
+        setShouldRenderModal(true);
+        setIsExpanded(true);
+    };
+
+    return (
+        <>
+            {/* Wrapper anchors the absolutely-positioned expand button to the chart's corner.
+                mw100 keeps it from sizing to the chart's design width, so the responsive
+                container's onLayout measures the real available width (e.g. in the side panel). */}
+            <View
+                style={styles.mw100}
+                onMouseEnter={hoverBind.onMouseEnter}
+                onMouseLeave={hoverBind.onMouseLeave}
+            >
+                {children}
+                {/* Shown on hover only (like receipt actions) on devices with hover support; always shown on touch devices. */}
+                <VictoryChartExpandButton
+                    onPress={openModal}
+                    shouldShow={hovered || !deviceHasHoverSupport}
+                />
+            </View>
+            {shouldRenderModal && (
+                <VictoryChartExpandModal
+                    isVisible={isExpanded}
+                    onClose={() => setIsExpanded(false)}
+                    onModalHide={() => setShouldRenderModal(false)}
+                />
+            )}
+        </>
+    );
+}
+
+VictoryChartExpandable.displayName = 'VictoryChartExpandable';
+
+export default VictoryChartExpandable;

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants.ts

@@ -12,4 +12,11 @@ const CHART_TYPE = {
     POLAR: 'polar',
 } as const;
 
-export {X_KEY, Y_KEY_PREFIX, LABEL_KEY, VALUE_KEY, COLOR_KEY, CHART_TYPE};
+/**
+ * Polar charts are circular but their design canvas is often taller than the
+ * visible content, leaving dead space at the bottom. Containers clip to this
+ * ratio of the design height so the unused bottom portion is hidden.
+ */
+const POLAR_CONTAINER_HEIGHT_RATIO = 0.9;
+
+export {X_KEY, Y_KEY_PREFIX, LABEL_KEY, VALUE_KEY, COLOR_KEY, CHART_TYPE, POLAR_CONTAINER_HEIGHT_RATIO};

src/hooks/useHover.ts

@@ -7,6 +7,7 @@ const useHover = () => {
     const deviceHasHoverSupport = hasHoverSupport();
     return {
         hovered,
+        deviceHasHoverSupport,
         bind: {
             onMouseEnter: () => deviceHasHoverSupport && setHovered(true),
             onMouseLeave: () => deviceHasHoverSupport && setHovered(false),

src/languages/de.ts

@@ -437,6 +437,7 @@ const translations: TranslationDeepObject<typeof en> = {
         print: 'Drucken',
         help: 'Hilfe',
         collapsed: 'Eingeklappt',
+        expand: 'Erweitern',
         expanded: 'Ausgeklappt',
         expenseReport: 'Spesenabrechnung',
         rateOutOfPolicy: 'Satz außerhalb der Richtlinie',

src/languages/en.ts

@@ -471,6 +471,7 @@ const translations = {
         print: 'Print',
         help: 'Help',
         collapsed: 'Collapsed',
+        expand: 'Expand',
         expanded: 'Expanded',
         expenseReport: 'Expense Report',
         // @context Rate as a noun, not a verb

src/languages/es.ts

@@ -389,6 +389,7 @@ const translations: TranslationDeepObject<typeof en> = {
         print: 'Imprimir',
         help: 'Ayuda',
         collapsed: 'Contraído',
+        expand: 'Expandir',
         expanded: 'Expandido',
         expenseReport: 'Informe de Gastos',
         rateOutOfPolicy: 'Tasa fuera de póliza',

src/languages/fr.ts

@@ -437,6 +437,7 @@ const translations: TranslationDeepObject<typeof en> = {
         print: 'Imprimer',
         help: 'Aide',
         collapsed: 'Réduit',
+        expand: 'Agrandir',
         expanded: 'Développé',
         expenseReport: 'Note de frais',
         rateOutOfPolicy: 'Taux hors politique',

src/languages/it.ts

@@ -437,6 +437,7 @@ const translations: TranslationDeepObject<typeof en> = {
         print: 'Stampa',
         help: 'Aiuto',
         collapsed: 'Comprresso',
+        expand: 'Espandi',
         expanded: 'Espanso',
         expenseReport: 'Nota spese',
         rateOutOfPolicy: 'Tariffa fuori dalla policy',

src/languages/ja.ts

@@ -436,6 +436,7 @@ const translations: TranslationDeepObject<typeof en> = {
         print: '印刷',
         help: 'ヘルプ',
         collapsed: '折りたたみ',
+        expand: '展開',
         expanded: '展開',
         expenseReport: '経費精算書',
         rateOutOfPolicy: 'ポリシー外の料率',

src/languages/nl.ts

@@ -436,6 +436,7 @@ const translations: TranslationDeepObject<typeof en> = {
         print: 'Afdrukken',
         help: 'Help',
         collapsed: 'Ingeklapt',
+        expand: 'Uitklappen',
         expanded: 'Uitgeklapt',
         expenseReport: 'Declaratie',
         rateOutOfPolicy: 'Tarief buiten beleid',

src/languages/pl.ts

@@ -436,6 +436,7 @@ const translations: TranslationDeepObject<typeof en> = {
         print: 'Drukuj',
         help: 'Pomoc',
         collapsed: 'Zwinięte',
+        expand: 'Rozwiń',
         expanded: 'Rozwinięte',
         expenseReport: 'Raport wydatków',
         rateOutOfPolicy: 'Stawka poza zasadami',

src/languages/pt-BR.ts

@@ -436,6 +436,7 @@ const translations: TranslationDeepObject<typeof en> = {
         print: 'Imprimir',
         help: 'Ajuda',
         collapsed: 'Recolhido',
+        expand: 'Expandir',
         expanded: 'Expandido',
         expenseReport: 'Relatório de despesas',
         rateOutOfPolicy: 'Tarifa fora da política',