Add clickable metadata support to embedded Victory bar charts

src/components/Charts/components/ChartTooltip.tsx

@@ -27,14 +27,26 @@ type ChartTooltipProps = {
     initialTooltipPosition: SharedValue<{x: number; y: number}>;
 };
 
+function getTooltipContent(label: string, amount: string, percentage?: string): string {
+    if (!amount) {
+        return label;
+    }
+
+    if (!percentage) {
+        return `${label} • ${amount}`;
+    }
+
+    return `${label} • ${amount} (${percentage})`;
+}
+
 function ChartTooltip({label, amount, percentage, chartWidth, initialTooltipPosition}: ChartTooltipProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
 
     /** Shared value to store the measured width of the tooltip container */
     const tooltipMeasuredWidth = useSharedValue(0);
 
-    const content = percentage ? `${label} • ${amount} (${percentage})` : `${label} • ${amount}`;
+    const content = getTooltipContent(label, amount, percentage);
 
     /**
      * Synchronously reset the width and hide the tooltip whenever the content changes.

src/components/Charts/hooks/index.ts

@@ -4,7 +4,7 @@ export {default as useChartParagraphs} from './useChartParagraphs';
 export {useChartFontManager} from '@components/Charts/context/ChartFontsContext';
 export {default as ChartFontsProvider} from '@components/Charts/context/ChartFontsProvider';
 export {useChartInteractions, TOOLTIP_BAR_GAP} from './useChartInteractions';
-export type {HitTestArgs} from './useChartInteractions';
+export type {HitTestArgs, ResolveTargetIndexArgs} from './useChartInteractions';
 export {default as useChartLabelFormats} from './useChartLabelFormats';
 export {default as useDynamicYDomain} from './useDynamicYDomain';
 export {default as useTooltipData} from './useTooltipData';