diff --git a/src/components/ai-usage-analytics/ToggleableTrendChart.tsx b/src/components/ai-usage-analytics/ToggleableTrendChart.tsx index 3b0f1e7c5..09a88b359 100644 --- a/src/components/ai-usage-analytics/ToggleableTrendChart.tsx +++ b/src/components/ai-usage-analytics/ToggleableTrendChart.tsx @@ -129,6 +129,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) { payload?.[0]?.payload?.day ) } + valueFormatter={valueFormatter} /> } /> @@ -172,6 +173,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) { payload?.[0]?.payload?.day ) } + valueFormatter={valueFormatter} /> } /> diff --git a/src/components/ai-usage-analytics/shared.ts b/src/components/ai-usage-analytics/shared.ts index 30ad525b4..e785330d7 100644 --- a/src/components/ai-usage-analytics/shared.ts +++ b/src/components/ai-usage-analytics/shared.ts @@ -47,7 +47,8 @@ export function buildSeriesFromData( export const currencyFormatter = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD", - maximumFractionDigits: 2 + minimumFractionDigits: 2, + maximumFractionDigits: 4 }); export const compactNumberFormatter = new Intl.NumberFormat(undefined, { diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx index ec2e1c880..6c4323d79 100644 --- a/src/components/ui/chart.tsx +++ b/src/components/ui/chart.tsx @@ -135,6 +135,7 @@ type ChartTooltipContentProps = React.ComponentProps<"div"> & { labelKey?: string; color?: string; labelClassName?: string; + valueFormatter?: (value: number) => string; }; const ChartTooltipContent = React.forwardRef< @@ -155,7 +156,8 @@ const ChartTooltipContent = React.forwardRef< formatter, color, nameKey, - labelKey + labelKey, + valueFormatter }, ref ) => { @@ -302,19 +304,23 @@ const ChartTooltipContent = React.forwardRef< item.name} - {item.value && ( + {item.value !== undefined && ( {!isNaN( item.value as number ) - ? new Intl.NumberFormat( - navigator.language, - { - maximumFractionDigits: 0 - } - ).format( - item.value as number - ) + ? valueFormatter + ? valueFormatter( + item.value as number + ) + : new Intl.NumberFormat( + navigator.language, + { + maximumFractionDigits: 0 + } + ).format( + item.value as number + ) : item.value.toLocaleString()} )}